diff --git a/Demo/assets/app.js b/Demo/assets/app.js
index 028d294..b86e6c1 100644
--- a/Demo/assets/app.js
+++ b/Demo/assets/app.js
@@ -25,7 +25,7 @@ const MENUS = [
   { page: 'profile',     label: '画像中心',     href: 'profile.html',    roles: ['operator', 'gov', 'enterprise'], group: '运营管理' },
   { page: 'opc',         label: 'OPC 工作台',   href: 'opc.html',        roles: ['opc'], group: '我的工作台' },
   { page: 'team',        label: '组队协同',     href: 'team.html',       roles: ['opc', 'operator'], group: '我的工作台' },
-  { page: 'agent',       label: '智能体服务',   href: 'agent.html',      roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
+  { page: 'agent',       label: '智能体服务',   href: 'agent.html',      roles: ['opc', 'enterprise', 'personal', 'operator'], group: '服务与政策' },
   { page: 'enterprise',  label: '企业工作台',   href: 'enterprise.html', roles: ['enterprise', 'personal'], labelMap: { personal: '个人工作台' }, group: '我的工作台' },
   { page: 'order',       label: '订单与协同',   href: 'order.html',      roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
   { page: 'market',      label: '橙果商城',     href: 'market.html',     roles: ['opc', 'enterprise', 'personal', 'learner', 'operator'], group: '我的工作台' },
diff --git a/Demo/assets/style.css b/Demo/assets/style.css
index 07f44f4..917ee2b 100644
--- a/Demo/assets/style.css
+++ b/Demo/assets/style.css
@@ -154,9 +154,13 @@ body[data-page="login"], body[data-page="index"], body.screen { padding-left: 0;
 
 /* ===== 表格 ===== */
 table { width: 100%; border-collapse: collapse; font-size: 13px; }
-th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
-th { color: var(--text-2); font-weight: 600; font-size: 12px; background: var(--primary-50); }
+th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); word-break: keep-all; }
+th { color: var(--text-2); font-weight: 600; font-size: 12px; background: var(--primary-50); white-space: nowrap; }
 tr:hover td { background: var(--primary-50); }
+/* 三栏卡片中的表格：紧凑布局 */
+.three-col .card table, .two-col .card table { font-size: 12px; }
+.three-col .card th, .three-col .card td,
+.two-col .card th, .two-col .card td { padding: 6px 8px; }
 
 /* ===== 按钮 ===== */
 .btn {
diff --git a/Demo/opc.html b/Demo/opc.html
index 6ed142a..2c7ca69 100644
--- a/Demo/opc.html
+++ b/Demo/opc.html
@@ -101,7 +101,7 @@
     <div class="two-col">
       <div class="card">
         <h3>结算总览</h3>
-        <ul class="list" id="stl-summary"></ul>
+        <table id="stl-summary"></table>
         <button class="btn sm" style="margin-top:10px" onclick="withdraw()">申请提现</button>
       </div>
       <div class="card">
@@ -116,7 +116,7 @@
     <div class="two-col">
       <div class="card">
         <h3>质量与信用 <span class="req">REQ-023/050</span></h3>
-        <ul class="list" id="opc-quality"></ul>
+        <table id="opc-quality"></table>
       </div>
       <div class="card">
         <h3>最新客户评价 <span class="req">REQ-044</span></h3>
@@ -165,12 +165,14 @@ function renderPage(DB) {
   renderGrab();
   renderPolicySupport();
   renderFinance();
-  document.getElementById('stl-summary').innerHTML = O.settlement.summary.map(s => LI(s[0], s[1])).join('');
+  document.getElementById('stl-summary').innerHTML = O.settlement.summary.map(s =>
+    `<tr><td>${s[0]}</td><td style="text-align:right;font-weight:600">${s[1]}</td></tr>`).join('');
   document.getElementById('stl-tbl').innerHTML =
     `<tr><th>结算单</th><th>关联订单</th><th>金额</th><th>状态</th></tr>` +
     O.settlement.rows.map(r => `<tr><td>${r.code}</td><td>${r.order}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
 
-  document.getElementById('opc-quality').innerHTML = O.quality.map(q => LI(q[0], B(q[1]))).join('');
+  document.getElementById('opc-quality').innerHTML = O.quality.map(q =>
+    `<tr><td>${q[0]}</td><td style="text-align:right">${B(q[1])}</td></tr>`).join('');
   document.getElementById('opc-reviews').innerHTML = O.reviews.map(r =>
     `<li><span>${r[0]}</span><span class="badge ok">${r[1]}</span></li>`).join('');
 }
@@ -327,19 +329,19 @@ function grabOrder(i) {
 function renderPolicySupport() {
   const P = DB.opc.policySupport;
   if (!P) return;
-  // 算力券
+  // 算力券：3列紧凑
   document.getElementById('vc-bal').textContent = `¥${P.compute.balance.toLocaleString()}`;
   document.getElementById('vc-tbl').innerHTML =
-    `<tr><th>券号</th><th>金额</th><th>关联</th><th>状态</th></tr>` +
-    P.compute.records.map(r => `<tr><td>${r.code}</td><td>${r.amount}</td><td class="muted">${r.target}</td><td>${B(r.status)}</td></tr>`).join('');
-  // 贷款
+    `<tr><th>金额</th><th>关联订单</th><th>状态</th></tr>` +
+    P.compute.records.map(r => `<tr><td>${r.amount}</td><td class="muted">${r.target.split(' ')[0]}</td><td>${B(r.status)}</td></tr>`).join('');
+  // 贷款：3列紧凑
   document.getElementById('loan-tbl').innerHTML =
-    `<tr><th>编号</th><th>类型</th><th>金额</th><th>利率</th><th>状态</th></tr>` +
-    P.loan.records.map(r => `<tr><td>${r.code}</td><td>${r.type}</td><td>${r.amount}</td><td>${r.rate}</td><td>${B(r.status)}</td></tr>`).join('');
-  // 租金
+    `<tr><th>类型</th><th>金额</th><th>状态</th></tr>` +
+    P.loan.records.map(r => `<tr><td>${r.type}<br><small class="muted">${r.rate}</small></td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
+  // 租金：3列紧凑
   document.getElementById('rent-tbl').innerHTML =
-    `<tr><th>编号</th><th>类型</th><th>金额</th><th>状态</th></tr>` +
-    P.rent.records.map(r => `<tr><td>${r.code}</td><td>${r.type}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
+    `<tr><th>类型</th><th>金额</th><th>状态</th></tr>` +
+    P.rent.records.map(r => `<tr><td>${r.type}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
 }
 function applyCompute() {
   confirmDlg('申领算力券', '按细则可申领 ≤¥10,000/年。当前余额 ¥8,000，可追加申领 ¥2,000。', '确认申领', () => {