diff --git a/docs/报告页面开发清单.md b/docs/报告页面开发清单.md
index 6332715..ee20490 100644
--- a/docs/报告页面开发清单.md
+++ b/docs/报告页面开发清单.md
@@ -23,6 +23,9 @@
 | 12.1 | 性格类型-图表页 | `/report/character-types-chart?recordId=3` | 网页截图 | CategoryType=7 雷达图+横向柱状图（无结论） | ✅ 已完成 |
 | 12.2 | 性格类型结论 | `/report/character-types-conclusion?recordId=3` | 网页截图 | CategoryType=7 最强性格结论详情（全页文本卡片） | ✅ 已完成 |
 | 13 | 未来关键发展能力分析 | `/report/future-abilities?recordId=3` | 网页截图 | CategoryType=8 雷达图+横向柱状图+结论 | ✅ 已完成 |
+| 13.1 | 未来关键发展能力-竖向柱状图 | `/report/future-abilities-v?recordId=3` | 网页截图 | CategoryType=8 雷达图+竖向柱状图+结论 | ✅ 已完成 |
+| 13.2 | 未来关键发展能力结论 | `/report/future-abilities-conclusion?recordId=3` | 网页截图 | CategoryType=8 最强能力结论详情（全页文本卡片） | ✅ 已完成 |
+| 14 | 报告尾页（特此说明） | `/report/disclaimer` | 网页截图 | 静态声明页+机构信息 | ✅ 已完成 |
 
 ## 静态资源目录
 
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml
new file mode 100644
index 0000000..a7ceda2
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/Disclaimer.cshtml
@@ -0,0 +1,35 @@
+@page "/report/disclaimer"
+@{
+    ViewData["Title"] = "特此说明";
+    ViewData["PageTitle"] = null;
+    ViewData["PageNumber"] = null;
+    Layout = "_ReportLayout";
+}
+
+<div class="disc-page">
+    <!-- 上部：说明卡片 -->
+    <div class="disc-card">
+        <div class="disc-badge">特此说明</div>
+        <div class="disc-content">
+            <p>1、本次解读分析数据均来源于您的自测结果；</p>
+            <p>2、您的成长会因为环境、时间的变化而变化，建议您每年测评一次，跟踪变化，了解成长中的自己！</p>
+            <p>3、解读报告最终解释权归本机构所有；</p>
+        </div>
+    </div>
+
+    <!-- 底部：机构信息 -->
+    <div class="disc-footer">
+        <span class="disc-footer-left">天赋全能测评-本部</span>
+        <span class="disc-footer-right">公众号【天赋测评研究所】</span>
+    </div>
+</div>
+
+@section Styles {
+    <link rel="stylesheet" href="/css/pages/disclaimer.css" />
+}
+
+@section Scripts {
+    <script>
+        document.body.setAttribute('data-render-complete', 'true');
+    </script>
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml
new file mode 100644
index 0000000..90dd8f4
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml
@@ -0,0 +1,39 @@
+@page "/report/future-abilities-conclusion"
+@model MiAssessment.Api.Pages.Report.FutureAbilitiesConclusionModel
+@{
+    ViewData["Title"] = "未来关键发展能力";
+    ViewData["PageTitle"] = null;
+    ViewData["PageNumber"] = null;
+}
+
+@if (!Model.IsSuccess)
+{
+    <div class="report-error" data-render-error="true">
+        <p>@Model.ErrorMessage</p>
+    </div>
+}
+else
+{
+    <div class="fac-page">
+        <!-- 全页结论卡片 -->
+        <div class="fac-card">
+            <!-- 顶部红色 badge -->
+            <div class="fac-badge">未来关键发展能力</div>
+
+            <!-- 结论文字内容 -->
+            <div class="fac-content">
+                @Html.Raw(Model.ConclusionContent.Replace("\\n", "<br/>").Replace("\n", "<br/>"))
+            </div>
+        </div>
+    </div>
+}
+
+@section Styles {
+    <link rel="stylesheet" href="/css/pages/future-abilities-conclusion.css" />
+}
+
+@section Scripts {
+    <script>
+        document.body.setAttribute('data-render-complete', 'true');
+    </script>
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml.cs b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml.cs
new file mode 100644
index 0000000..172394a
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesConclusion.cshtml.cs
@@ -0,0 +1,71 @@
+using Microsoft.EntityFrameworkCore;
+using MiAssessment.Core.Interfaces;
+using MiAssessment.Model.Data;
+using MiAssessment.Model.Models.Report;
+
+namespace MiAssessment.Api.Pages.Report;
+
+/// <summary>
+/// 未来关键发展能力结论页 PageModel
+/// 路由：/report/future-abilities-conclusion?recordId=3
+/// 展示最强未来能力的详细结论（全页文本卡片）
+/// </summary>
+public class FutureAbilitiesConclusionModel : ReportPageModelBase
+{
+    /// <summary>
+    /// 最强能力名称
+    /// </summary>
+    public string StrongestName { get; set; } = "";
+
+    /// <summary>
+    /// 结论内容
+    /// </summary>
+    public string ConclusionContent { get; set; } = "";
+
+    private readonly MiAssessmentDbContext _dbContext;
+
+    public FutureAbilitiesConclusionModel(IReportDataService reportDataService, MiAssessmentDbContext dbContext)
+        : base(reportDataService)
+    {
+        _dbContext = dbContext;
+    }
+
+    protected override async Task OnDataLoadedAsync()
+    {
+        if (ReportData?.ResultsByType == null ||
+            !ReportData.ResultsByType.TryGetValue(8, out var allItems))
+        {
+            ErrorMessage = "缺少未来关键发展能力数据";
+            return;
+        }
+
+        var items = allItems.OrderByDescending(x => x.Score).ToList();
+        if (items.Count == 0)
+        {
+            ErrorMessage = "未找到未来关键发展能力数据";
+            return;
+        }
+
+        // 最强能力
+        var strongest = items.First();
+        StrongestName = strongest.CategoryName;
+
+        // 从测评记录结论中查找
+        if (ReportData.ConclusionsByCategory.TryGetValue(strongest.CategoryId, out var sc) && sc.Content != null)
+        {
+            ConclusionContent = sc.Content;
+        }
+        else
+        {
+            // fallback: 从模板表查 ConclusionType=1（最强）
+            var template = await _dbContext.ReportConclusions
+                .AsNoTracking()
+                .FirstOrDefaultAsync(t =>
+                    t.CategoryId == strongest.CategoryId &&
+                    t.ConclusionType == 1 &&
+                    !t.IsDeleted);
+
+            ConclusionContent = template?.Content ?? "";
+        }
+    }
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml
new file mode 100644
index 0000000..c553f4a
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml
@@ -0,0 +1,220 @@
+@page "/report/future-abilities-v"
+@model MiAssessment.Api.Pages.Report.FutureAbilitiesVModel
+@{
+    ViewData["Title"] = "未来关键发展能力分析";
+    ViewData["PageTitle"] = null;
+    ViewData["PageNumber"] = null;
+}
+
+@if (!Model.IsSuccess)
+{
+    <div class="report-error" data-render-error="true">
+        <p>@Model.ErrorMessage</p>
+    </div>
+}
+else
+{
+    <div class="fav-page">
+        <div class="fav-section-title">8、未来关键发展能力</div>
+
+        <!-- 上半部分：雷达图 + 竖向柱状图 -->
+        <div class="fav-charts">
+            <!-- 左：雷达图 -->
+            <div class="fav-chart-panel">
+                <div class="fav-chart-title">未来关键发展能力</div>
+                <canvas id="radarChart" width="460" height="400"></canvas>
+            </div>
+            <!-- 右：竖向柱状图 -->
+            <div class="fav-chart-panel">
+                <div class="fav-chart-title">未来关键发展能力排名</div>
+                <canvas id="barChart" width="520" height="360"></canvas>
+            </div>
+        </div>
+
+        <!-- 下半部分：结论卡片 -->
+        <div class="fav-conclusions">
+            <div class="fav-conclusion-card fav-card-strong">
+                <div class="fav-badge fav-badge-strong">最强能力解读</div>
+                <div class="fav-conclusion-content">
+                    @if (Model.StrongestConclusion != null)
+                    {
+                        @Html.Raw(Model.StrongestConclusion.Content?.Replace("\\n", "<br/>").Replace("\n", "<br/>") ?? "暂无结论")
+                    }
+                    else
+                    {
+                        <span class="no-content">暂无结论数据</span>
+                    }
+                </div>
+            </div>
+            <div class="fav-conclusion-card fav-card-weak">
+                <div class="fav-badge fav-badge-weak">较弱能力解读</div>
+                <div class="fav-conclusion-content">
+                    @if (Model.WeakestConclusion != null)
+                    {
+                        @Html.Raw(Model.WeakestConclusion.Content?.Replace("\\n", "<br/>").Replace("\n", "<br/>") ?? "暂无结论")
+                    }
+                    else
+                    {
+                        <span class="no-content">暂无结论数据</span>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+@section Styles {
+    <link rel="stylesheet" href="/css/pages/future-abilities-v.css" />
+}
+
+@section Scripts {
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <script>
+        window.__deferRenderComplete = true;
+
+        var labels = [@Html.Raw(string.Join(",", Model.Items.Select(x => $"\"{x.CategoryName}\"")))];
+        var scores = [@Html.Raw(string.Join(",", Model.Items.Select(x => x.Score.ToString("F0"))))];
+        var maxScore = Math.ceil(Math.max(...scores) / 2) * 2 + 2;
+
+        var barLabels = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => $"\"{x.CategoryName}\"")))];
+        var barScores = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => x.Score.ToString("F0"))))];
+        var barMax = Math.ceil(Math.max(...barScores) / 2) * 2 + 2;
+
+        // 10种颜色
+        var colors = ['#4A90E2', '#52A06A', '#F5A623', '#E88B9C', '#2ABFBF', '#9B59B6', '#E67E73', '#3498DB', '#1ABC9C', '#F39C12'];
+        var colorsAlpha = [
+            'rgba(74,144,226,0.7)', 'rgba(82,160,106,0.7)', 'rgba(245,166,35,0.7)',
+            'rgba(232,139,156,0.7)', 'rgba(42,191,191,0.7)', 'rgba(155,89,182,0.7)',
+            'rgba(230,126,115,0.7)', 'rgba(52,152,219,0.7)', 'rgba(26,188,156,0.7)',
+            'rgba(243,156,18,0.7)'
+        ];
+
+        // ---- 风车扇形图 ----
+        (function() {
+            var canvas = document.getElementById('radarChart');
+            var ctx = canvas.getContext('2d');
+            var W = canvas.width, H = canvas.height;
+            var cx = W / 2, cy = H / 2;
+            var maxR = Math.min(cx, cy) - 50; // 最大半径，留空间给标签
+            var n = labels.length;
+            var angleStep = (2 * Math.PI) / n;
+            // 每个扇形占 angleStep 的 60%，留 40% 间隙
+            var wedgeRatio = 0.6;
+            var wedgeAngle = angleStep * wedgeRatio;
+            var gapAngle = angleStep * (1 - wedgeRatio);
+            // 起始角度：从正上方开始（-90度）
+            var startOffset = -Math.PI / 2;
+
+            // 绘制背景同心圆网格
+            ctx.strokeStyle = 'rgba(0,0,0,0.08)';
+            ctx.lineWidth = 1;
+            var gridSteps = 3;
+            for (var g = 1; g <= gridSteps; g++) {
+                ctx.beginPath();
+                ctx.arc(cx, cy, maxR * g / gridSteps, 0, 2 * Math.PI);
+                ctx.stroke();
+            }
+
+            // 绘制角度分割线
+            for (var k = 0; k < n; k++) {
+                var lineAngle = startOffset + k * angleStep;
+                ctx.beginPath();
+                ctx.moveTo(cx, cy);
+                ctx.lineTo(cx + maxR * Math.cos(lineAngle), cy + maxR * Math.sin(lineAngle));
+                ctx.stroke();
+            }
+
+            // 绘制扇形楔块
+            var fillColor = 'rgba(74,144,226,0.6)';
+            var strokeColor = 'rgba(74,144,226,0.8)';
+            for (var i = 0; i < n; i++) {
+                var ratio = scores[i] / maxScore;
+                var r = maxR * ratio;
+                // 扇形起始角 = 该分区中心 - wedgeAngle/2
+                var sectorCenter = startOffset + i * angleStep + angleStep / 2;
+                var a1 = sectorCenter - wedgeAngle / 2;
+                var a2 = sectorCenter + wedgeAngle / 2;
+
+                ctx.beginPath();
+                ctx.moveTo(cx, cy);
+                ctx.arc(cx, cy, r, a1, a2);
+                ctx.closePath();
+                ctx.fillStyle = fillColor;
+                ctx.fill();
+                ctx.strokeStyle = strokeColor;
+                ctx.lineWidth = 1;
+                ctx.stroke();
+            }
+
+            // 绘制标签
+            ctx.fillStyle = '#333';
+            ctx.font = '500 12px "Microsoft YaHei", sans-serif';
+            ctx.textBaseline = 'middle';
+            var labelR = maxR + 24;
+            for (var j = 0; j < n; j++) {
+                var angle = startOffset + j * angleStep + angleStep / 2;
+                var lx = cx + labelR * Math.cos(angle);
+                var ly = cy + labelR * Math.sin(angle);
+                // 根据角度调整对齐
+                var cos = Math.cos(angle);
+                if (cos > 0.3) ctx.textAlign = 'left';
+                else if (cos < -0.3) ctx.textAlign = 'right';
+                else ctx.textAlign = 'center';
+                ctx.fillText(labels[j], lx, ly);
+            }
+        })();
+
+        // ---- 竖向柱状图 ----
+        var barDataLabelPlugin = {
+            id: 'barDataLabels',
+            afterDatasetsDraw: function(chart) {
+                var ctx = chart.ctx;
+                var meta = chart.getDatasetMeta(0);
+                var dataset = chart.data.datasets[0];
+                ctx.font = 'bold 11px "Microsoft YaHei", sans-serif';
+                ctx.textBaseline = 'bottom';
+                ctx.textAlign = 'center';
+                meta.data.forEach(function(bar, i) {
+                    ctx.fillStyle = '#333';
+                    ctx.fillText(dataset.data[i], bar.x, bar.y - 4);
+                });
+            }
+        };
+
+        var ctxBar = document.getElementById('barChart').getContext('2d');
+        new Chart(ctxBar, {
+            type: 'bar',
+            data: {
+                labels: barLabels,
+                datasets: [{
+                    data: barScores,
+                    backgroundColor: colorsAlpha,
+                    borderColor: colors,
+                    borderWidth: 0,
+                    borderRadius: 3,
+                    barThickness: 32
+                }]
+            },
+            options: {
+                responsive: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: {
+                        ticks: { font: { size: 10 }, color: '#666', maxRotation: 0, autoSkip: false },
+                        grid: { display: false }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        max: barMax,
+                        ticks: { stepSize: 2, font: { size: 10 }, color: '#999' },
+                        grid: { color: 'rgba(0,0,0,0.05)' }
+                    }
+                },
+                layout: { padding: { top: 20 } }
+            },
+            plugins: [barDataLabelPlugin]
+        });
+
+        document.body.setAttribute('data-render-complete', 'true');
+    </script>
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml.cs b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml.cs
new file mode 100644
index 0000000..2b8e3f1
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/FutureAbilitiesV.cshtml.cs
@@ -0,0 +1,105 @@
+using Microsoft.EntityFrameworkCore;
+using MiAssessment.Core.Interfaces;
+using MiAssessment.Model.Data;
+using MiAssessment.Model.Models.Report;
+
+namespace MiAssessment.Api.Pages.Report;
+
+/// <summary>
+/// 未来关键发展能力分析页（竖向柱状图版）
+/// 路由：/report/future-abilities-v?recordId=3
+/// CategoryType=8：10项未来能力，雷达图+竖向柱状图+两结论卡片
+/// </summary>
+public class FutureAbilitiesVModel : ReportPageModelBase
+{
+    /// <summary>
+    /// 按 CategoryId 排序（雷达图用）
+    /// </summary>
+    public List<CategoryResultDataDto> Items { get; set; } = new();
+
+    /// <summary>
+    /// 按分数降序（柱状图用）
+    /// </summary>
+    public List<CategoryResultDataDto> ItemsByScore { get; set; } = new();
+
+    /// <summary>
+    /// 最强能力名称
+    /// </summary>
+    public string StrongestName { get; set; } = "";
+
+    /// <summary>
+    /// 最强能力结论
+    /// </summary>
+    public ConclusionDataDto? StrongestConclusion { get; set; }
+
+    /// <summary>
+    /// 较弱能力名称
+    /// </summary>
+    public string WeakestName { get; set; } = "";
+
+    /// <summary>
+    /// 较弱能力结论
+    /// </summary>
+    public ConclusionDataDto? WeakestConclusion { get; set; }
+
+    private readonly MiAssessmentDbContext _dbContext;
+
+    public FutureAbilitiesVModel(IReportDataService reportDataService, MiAssessmentDbContext dbContext)
+        : base(reportDataService)
+    {
+        _dbContext = dbContext;
+    }
+
+    protected override async Task OnDataLoadedAsync()
+    {
+        if (ReportData?.ResultsByType == null ||
+            !ReportData.ResultsByType.TryGetValue(8, out var allItems))
+        {
+            ErrorMessage = "缺少未来关键发展能力数据";
+            return;
+        }
+
+        Items = allItems.OrderBy(x => x.CategoryId).ToList();
+        if (Items.Count == 0)
+        {
+            ErrorMessage = "未找到未来关键发展能力数据";
+            return;
+        }
+
+        ItemsByScore = Items.OrderByDescending(x => x.Score).ToList();
+
+        // 最强结论
+        var strongest = ItemsByScore.First();
+        StrongestName = strongest.CategoryName;
+        if (ReportData.ConclusionsByCategory.TryGetValue(strongest.CategoryId, out var sc))
+            StrongestConclusion = sc;
+        else
+            StrongestConclusion = await GetTemplateConclusionAsync(strongest.CategoryId, 1);
+
+        // 较弱结论
+        var weakest = ItemsByScore.Last();
+        WeakestName = weakest.CategoryName;
+        if (ReportData.ConclusionsByCategory.TryGetValue(weakest.CategoryId, out var wc))
+            WeakestConclusion = wc;
+        else
+            WeakestConclusion = await GetTemplateConclusionAsync(weakest.CategoryId, 4);
+    }
+
+    private async Task<ConclusionDataDto?> GetTemplateConclusionAsync(long categoryId, int conclusionType)
+    {
+        var template = await _dbContext.ReportConclusions
+            .AsNoTracking()
+            .FirstOrDefaultAsync(t =>
+                t.CategoryId == categoryId &&
+                t.ConclusionType == conclusionType &&
+                !t.IsDeleted);
+        if (template == null) return null;
+        return new ConclusionDataDto
+        {
+            CategoryId = template.CategoryId,
+            ConclusionType = template.ConclusionType,
+            Title = template.Title,
+            Content = template.Content
+        };
+    }
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/disclaimer.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/disclaimer.css
new file mode 100644
index 0000000..1c19e23
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/disclaimer.css
@@ -0,0 +1,70 @@
+/* ============================================
+   报告尾页 - 特此说明
+   页面固定尺寸：1309×926px
+   ============================================ */
+
+.disc-page {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    padding: 40px 0 0;
+}
+
+/* 说明卡片 */
+.disc-card {
+    border: 3px solid #C0392B;
+    border-radius: 12px;
+    padding: 50px 50px 40px;
+    position: relative;
+    margin: 0 60px;
+}
+
+/* 顶部红色 badge */
+.disc-badge {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-1px);
+    padding: 6px 40px;
+    border-radius: 0 0 10px 10px;
+    font-size: 22px;
+    font-weight: 700;
+    color: #fff;
+    background: #C0392B;
+    white-space: nowrap;
+    letter-spacing: 4px;
+}
+
+/* 说明文字 */
+.disc-content {
+    font-size: 20px;
+    line-height: 2.4;
+    color: #333;
+    font-weight: 500;
+}
+
+.disc-content p {
+    margin: 0;
+    text-indent: 2em;
+}
+
+/* 底部机构信息 */
+.disc-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 3px solid #C0392B;
+    border-radius: 12px;
+    padding: 16px 40px;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #333;
+}
+
+.disc-footer-left,
+.disc-footer-right {
+    white-space: nowrap;
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-conclusion.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-conclusion.css
new file mode 100644
index 0000000..2d85023
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-conclusion.css
@@ -0,0 +1,48 @@
+/* ============================================
+   未来关键发展能力结论页
+   页面固定尺寸：1309×926px
+   全页红色边框卡片 + 顶部红色badge
+   ============================================ */
+
+.fac-page {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 20px 0 0;
+}
+
+/* 全页卡片 */
+.fac-card {
+    flex: 1;
+    border: 3px solid #C0392B;
+    border-radius: 12px;
+    padding: 44px 36px 28px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 顶部红色 badge */
+.fac-badge {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-1px);
+    padding: 6px 40px;
+    border-radius: 0 0 10px 10px;
+    font-size: 20px;
+    font-weight: 700;
+    color: #fff;
+    background: #C0392B;
+    white-space: nowrap;
+    letter-spacing: 3px;
+}
+
+/* 结论文字 */
+.fac-content {
+    font-size: 16px;
+    line-height: 2;
+    color: #333;
+    font-weight: 500;
+    overflow: hidden;
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-v.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-v.css
new file mode 100644
index 0000000..1d34661
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/future-abilities-v.css
@@ -0,0 +1,98 @@
+/* ============================================
+   未来关键发展能力分析页（竖向柱状图版）
+   页面固定尺寸：1309×926px
+   雷达图 + 竖向柱状图 + 两结论卡片
+   ============================================ */
+
+.fav-page {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: 16px;
+}
+
+.fav-section-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #E67E73;
+}
+
+/* ---- 上半部分：两图并排 ---- */
+.fav-charts {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.fav-chart-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.fav-chart-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #E67E73;
+    margin-bottom: 4px;
+    text-align: center;
+}
+
+/* ---- 下半部分：结论卡片 ---- */
+.fav-conclusions {
+    display: flex;
+    gap: 30px;
+    flex: 1;
+    min-height: 0;
+}
+
+.fav-conclusion-card {
+    flex: 1;
+    border: 3px solid;
+    border-radius: 12px;
+    padding: 34px 20px 14px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.fav-card-strong {
+    border-color: #E67E73;
+    background: #FFF5F5;
+}
+
+.fav-card-weak {
+    border-color: #E67E73;
+    background: #FFF5F5;
+}
+
+.fav-badge {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-1px);
+    padding: 5px 24px;
+    border-radius: 0 0 8px 8px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #fff;
+    white-space: nowrap;
+    letter-spacing: 2px;
+}
+
+.fav-badge-strong { background: #C0392B; }
+.fav-badge-weak { background: #C0392B; }
+
+.fav-conclusion-content {
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--text-secondary);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 9;
+    -webkit-box-orient: vertical;
+}