feat: 全站 PageShell 设计系统与专业 UI 统一

- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架
- index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩）
- 全站路由页接入 PageShell，云账单三 Tab 为标杆
- 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化
- 登录页/侧栏/顶栏去渐变光球，企业克制风
- 修复 AIAlertAnalyzer JSX 与构建依赖导入问题

frontend/src/components/kubernetes/NodeDetailPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -13,7 +13,7 @@ import {
   Loader2,
   Server,
   Activity,
-  ChevronRight,
+  ArrowLeft,
   Container,
   Network,
   Info,
@@ -22,10 +22,11 @@ import {
 } from 'lucide-react';
 
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
 
 export default function NodeDetailPage() {
   const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
-  const _navigate = useNavigate();
+  const navigate = useNavigate();
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(false);
 
@@ -53,13 +54,13 @@ export default function NodeDetailPage() {
     return (
       <div className="space-y-1.5">
         <div className="flex items-center justify-between text-xs">
-          <span className="text-slate-400">{label}</span>
-          <span className="text-slate-300 font-medium">
+          <span className="dg-text-secondary">{label}</span>
+          <span className="text-[var(--dg-text-secondary)] font-medium">
             {used} / {total} {unit}
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex-1 h-2 rounded-full bg-slate-700/50 overflow-hidden">
+          <div className="flex-1 h-2 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
             <div className={`h-full rounded-full ${barColor} transition-all duration-500`} style={{ width: `${safePct}%` }} />
           </div>
           <span className={`text-xs font-semibold min-w-[40px] text-right ${color}`}>
@@ -72,120 +73,113 @@ export default function NodeDetailPage() {
 
   const conditionColor = (type: string, status: string) => {
     if (status === 'True') {
-      if (type === 'Ready') return 'bg-emerald-500/20 text-emerald-400';
+      if (type === 'Ready') return 'bg-emerald-500/20 dg-text-green';
       // Other True conditions (DiskPressure, MemoryPressure, PIDPressure, NetworkUnavailable) are BAD
-      return 'bg-red-500/20 text-red-400';
+      return 'bg-red-500/20 dg-text-red';
     }
-    return 'bg-slate-500/20 text-slate-400';
+    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary';
   };
 
   const taintColor = (effect: string) => {
-    if (effect === 'NoSchedule') return 'bg-red-500/20 text-red-400 border-red-500/30';
-    if (effect === 'NoExecute') return 'bg-red-600/20 text-red-300 border-red-600/30';
-    if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
-    return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
+    if (effect === 'NoSchedule') return 'bg-red-500/20 dg-text-red border-red-500/30';
+    if (effect === 'NoExecute') return 'bg-red-600/20 dg-text-red border-red-600/30';
+    if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 dg-text-yellow border-amber-500/30';
+    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
   };
 
+  const nodeSubtitle = [
+    clusterCode,
+    data?.internal_ip,
+    data?.hostname,
+  ].filter(Boolean).join(' · ');
+
   return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-slate-500">
-        <Link to="/kubernetes" className="hover:text-slate-300 transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <Link to={`/kubernetes/${clusterCode}`} className="hover:text-slate-300 transition-colors">{clusterCode}</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-slate-300">{nodeName}</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-slate-800 border border-slate-700">
-            <Server className="h-6 w-6 text-blue-400" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2">
-              <h1 className="text-2xl font-bold text-slate-100">{nodeName}</h1>
-              <Badge className={data?.role === 'master' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>
-                {data?.role || 'worker'}
-              </Badge>
-              <Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}>
-                {data?.status || 'Unknown'}
-              </Badge>
-            </div>
-            <p className="text-sm text-slate-500 mt-0.5">
-              {data?.internal_ip && `${data.internal_ip}`}
-              {data?.hostname && ` · ${data.hostname}`}
-            </p>
-          </div>
+    <PageShell
+      variant="default"
+      title={nodeName || '节点详情'}
+      subtitle={nodeSubtitle || clusterCode}
+      icon={<Server className="h-5 w-5" />}
+      loading={loading && !data}
+      loadingLabel="加载节点详情..."
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            返回
+          </Button>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+        </>
+      )}
+    >
+      {data && (
+        <div className="flex items-center gap-2 mb-4">
+          <Badge className={data?.role === 'master' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>
+            {data?.role || 'worker'}
+          </Badge>
+          <Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 dg-text-green' : 'bg-red-500/20 dg-text-red'}>
+            {data?.status || 'Unknown'}
+          </Badge>
         </div>
-        <Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400"
-          onClick={loadData} disabled={loading}>
-          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-        </Button>
-      </div>
+      )}
 
-      {loading && !data ? (
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="py-16 flex items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
-          </CardContent>
-        </Card>
-      ) : !data ? (
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="py-16 text-center text-slate-500">
+      {!loading && !data ? (
+        <Card className="dg-card">
+          <CardContent className="py-16 text-center dg-text-muted">
             <AlertTriangle className="h-8 w-8 mx-auto mb-2 opacity-50" />
             无法加载节点详情
           </CardContent>
         </Card>
-      ) : (
+      ) : data ? (
         <>
           {/* Row 1: System Info + Basic Info */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* System Info */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Info className="h-4 w-4 text-cyan-400" />系统信息
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Info className="h-4 w-4 dg-text-cyan" />系统信息
                 </h2>
                 <div className="space-y-2 text-xs">
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">容器运行时</span>
-                    <span className="text-slate-300 font-mono">{data.container_runtime || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">容器运行时</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">Kubelet</span>
-                    <span className="text-slate-300 font-mono">{data.kubelet_version || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">Kubelet</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">操作系统</span>
-                    <span className="text-slate-300">{data.os_image || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">操作系统</span>
+                    <span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">内核版本</span>
-                    <span className="text-slate-300 font-mono">{data.kernel_version || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">内核版本</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">架构</span>
-                    <span className="text-slate-300 font-mono">{data.architecture || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">架构</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">创建时间</span>
-                    <span className="text-slate-300">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">创建时间</span>
+                    <span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5">
-                    <span className="text-slate-500">Pod CIDR</span>
-                    <span className="text-slate-300 font-mono">{data.pod_cidr || '-'}</span>
+                    <span className="dg-text-muted">Pod CIDR</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.pod_cidr || '-'}</span>
                   </div>
                 </div>
               </CardContent>
             </Card>
 
             {/* Resource Allocation */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Activity className="h-4 w-4 text-emerald-400" />资源分配率
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Activity className="h-4 w-4 dg-text-green" />资源分配率
                 </h2>
                 <div className="space-y-4 mt-4">
                   {/* CPU allocation (requested vs allocatable) */}
@@ -195,7 +189,7 @@ export default function NodeDetailPage() {
                     total={`${data.cpu_allocatable} 核`}
                     unit=""
                     pct={data.cpu_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                   {/* CPU real usage (from metrics) */}
                   {data.cpu_usage_m && (
@@ -205,7 +199,7 @@ export default function NodeDetailPage() {
                       total={`${data.cpu_capacity} 核`}
                       unit=""
                       pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100}
-                      color="text-blue-400"
+                      color="dg-text-blue"
                     />
                   )}
                   {/* Memory allocation */}
@@ -215,7 +209,7 @@ export default function NodeDetailPage() {
                     total={`${data.mem_allocatable_mb} Mi`}
                     unit=""
                     pct={data.mem_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                   {/* Memory real usage */}
                   {data.mem_usage_mi && (
@@ -225,7 +219,7 @@ export default function NodeDetailPage() {
                       total={`${data.mem_capacity_mb} Mi`}
                       unit=""
                       pct={(parseFloat(data.mem_usage_mi.replace('Mi', '').replace('Ki', '').replace('Gi', '')) / data.mem_capacity_mb) * 100}
-                      color="text-blue-400"
+                      color="dg-text-blue"
                     />
                   )}
                   {/* Pod allocation */}
@@ -235,11 +229,11 @@ export default function NodeDetailPage() {
                     total={`${data.pod_allocatable}`}
                     unit=""
                     pct={data.pod_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                 </div>
                 {/* Capacity vs Allocatable raw */}
-                <div className="mt-4 pt-3 border-t border-slate-800/50 space-y-1 text-[11px] text-slate-500">
+                <div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted">
                   <div className="flex justify-between">
                     <span>CPU 容量 / 可分配</span>
                     <span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span>
@@ -260,24 +254,24 @@ export default function NodeDetailPage() {
           {/* Row 2: Conditions + Taints */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Conditions */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <CheckCircle2 className="h-4 w-4 text-blue-400" />节点条件
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件
                 </h2>
                 {(!data.conditions || data.conditions.length === 0) ? (
-                  <p className="text-xs text-slate-500 py-4 text-center">无条件数据</p>
+                  <p className="text-xs dg-text-muted py-4 text-center">无条件数据</p>
                 ) : (
                   <div className="space-y-2">
                     {data.conditions.map(( cond: any, i: number) => (
-                      <div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-slate-800/30 last:border-0">
+                      <div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-[var(--dg-border)]/30 last:border-0">
                         <Badge className={conditionColor(cond.type, cond.status)}>
                           {cond.status === 'True' ? <CheckCircle2 className="h-3 w-3 mr-1" /> : null}
                           {cond.type}
                         </Badge>
                         <div className="flex-1 min-w-0">
-                          {cond.reason && <span className="text-slate-400 block">{cond.reason}</span>}
-                          {cond.message && <span className="text-slate-600 text-[11px] block truncate">{cond.message}</span>}
+                          {cond.reason && <span className="dg-text-secondary block">{cond.reason}</span>}
+                          {cond.message && <span className="dg-text-muted text-[11px] block truncate">{cond.message}</span>}
                         </div>
                       </div>
                     ))}
@@ -287,20 +281,20 @@ export default function NodeDetailPage() {
             </Card>
 
             {/* Taints */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-400" />污点 (Taints)
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints)
                 </h2>
                 {(!data.taints || data.taints.length === 0) ? (
-                  <p className="text-xs text-slate-500 py-4 text-center">无污点</p>
+                  <p className="text-xs dg-text-muted py-4 text-center">无污点</p>
                 ) : (
                   <div className="space-y-2">
                     {data.taints.map(( t: any, i: number) => (
                       <div key={i} className="flex items-center gap-2 text-xs">
                         <Badge className={taintColor(t.effect)}>{t.effect}</Badge>
-                        <span className="text-slate-300 font-mono">{t.key}</span>
-                        {t.value && <span className="text-slate-500">= {t.value}</span>}
+                        <span className="text-[var(--dg-text-secondary)] font-mono">{t.key}</span>
+                        {t.value && <span className="dg-text-muted">= {t.value}</span>}
                       </div>
                     ))}
                   </div>
@@ -311,17 +305,17 @@ export default function NodeDetailPage() {
 
           {/* Row 3: Labels */}
           {data.labels && data.labels.length > 0 && (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Network className="h-4 w-4 text-slate-400" />标签 ({data.labels.length})
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Network className="h-4 w-4 dg-text-secondary" />标签 ({data.labels.length})
                 </h2>
                 <div className="flex flex-wrap gap-1.5">
                   {data.labels.map(( l: any, i: number) => (
-                    <div key={i} className="flex items-center gap-1 bg-slate-800/50 border border-slate-700/50 rounded px-2 py-0.5 text-[11px]">
-                      <span className="text-slate-400">{l.key}</span>
-                      <span className="text-slate-600">:</span>
-                      <span className="text-slate-300">{l.value}</span>
+                    <div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50 rounded px-2 py-0.5 text-[11px]">
+                      <span className="dg-text-secondary">{l.key}</span>
+                      <span className="dg-text-muted">:</span>
+                      <span className="text-[var(--dg-text-secondary)]">{l.value}</span>
                     </div>
                   ))}
                 </div>
@@ -330,54 +324,54 @@ export default function NodeDetailPage() {
           )}
 
           {/* Row 4: Pods on this node */}
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardContent className="p-0">
-              <div className="px-4 py-3 border-b border-slate-800">
-                <h2 className="text-sm font-semibold text-slate-200 flex items-center gap-2">
-                  <Container className="h-4 w-4 text-cyan-400" />
+              <div className="px-4 py-3 border-b border-[var(--dg-border)]">
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
+                  <Container className="h-4 w-4 dg-text-cyan" />
                   节点上的 Pod
-                  <Badge className="bg-slate-700/50 text-slate-300">{data.pods?.length || 0}</Badge>
+                  <Badge className="bg-[var(--dg-bg-active)]/50 text-[var(--dg-text-secondary)]">{data.pods?.length || 0}</Badge>
                 </h2>
               </div>
               {(!data.pods || data.pods.length === 0) ? (
-                <p className="text-xs text-slate-500 py-8 text-center">该节点上暂无 Pod</p>
+                <p className="text-xs dg-text-muted py-8 text-center">该节点上暂无 Pod</p>
               ) : (
                 <Table>
                   <TableHeader>
-                    <TableRow className="border-slate-800 hover:bg-transparent">
-                      <TableHead className="text-slate-400">命名空间</TableHead>
-                      <TableHead className="text-slate-400">名称</TableHead>
-                      <TableHead className="text-slate-400">状态</TableHead>
-                      <TableHead className="text-slate-400">IP</TableHead>
-                      <TableHead className="text-slate-400">CPU 请求</TableHead>
-                      <TableHead className="text-slate-400">内存请求</TableHead>
-                      <TableHead className="text-slate-400">重启次数</TableHead>
+                    <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                      <TableHead className="dg-text-secondary">命名空间</TableHead>
+                      <TableHead className="dg-text-secondary">名称</TableHead>
+                      <TableHead className="dg-text-secondary">状态</TableHead>
+                      <TableHead className="dg-text-secondary">IP</TableHead>
+                      <TableHead className="dg-text-secondary">CPU 请求</TableHead>
+                      <TableHead className="dg-text-secondary">内存请求</TableHead>
+                      <TableHead className="dg-text-secondary">重启次数</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {data.pods.map(( p: any, i: number) => (
-                      <TableRow key={i} className="border-slate-800 hover:bg-slate-800/30">
-                        <TableCell className="text-sm text-slate-400">{p.namespace}</TableCell>
-                        <TableCell className="text-sm font-medium text-slate-200">{p.name}</TableCell>
+                      <TableRow key={i} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                        <TableCell className="text-sm dg-text-secondary">{p.namespace}</TableCell>
+                        <TableCell className="text-sm font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
                         <TableCell>
                           <Badge className={
-                            p.status === 'Running' ? 'bg-emerald-500/20 text-emerald-400' :
-                            p.status === 'Pending' ? 'bg-amber-500/20 text-amber-400' :
-                            'bg-red-500/20 text-red-400'
+                            p.status === 'Running' ? 'bg-emerald-500/20 dg-text-green' :
+                            p.status === 'Pending' ? 'bg-amber-500/20 dg-text-yellow' :
+                            'bg-red-500/20 dg-text-red'
                           }>{p.status}</Badge>
                         </TableCell>
-                        <TableCell className="text-xs text-slate-400 font-mono">{p.ip || '-'}</TableCell>
-                        <TableCell className="text-xs text-slate-400">
+                        <TableCell className="text-xs dg-text-secondary font-mono">{p.ip || '-'}</TableCell>
+                        <TableCell className="text-xs dg-text-secondary">
                           {p.cpu_request_m > 0 ? `${p.cpu_request_m}m` : '-'}
                         </TableCell>
-                        <TableCell className="text-xs text-slate-400">
+                        <TableCell className="text-xs dg-text-secondary">
                           {p.mem_request_mi > 0 ? `${p.mem_request_mi}Mi` : '-'}
                         </TableCell>
                         <TableCell className="text-xs">
                           {p.restart_count > 0 ? (
-                            <span className="text-amber-400">{p.restart_count}</span>
+                            <span className="dg-text-yellow">{p.restart_count}</span>
                           ) : (
-                            <span className="text-slate-600">0</span>
+                            <span className="dg-text-muted">0</span>
                           )}
                         </TableCell>
                       </TableRow>
@@ -388,7 +382,7 @@ export default function NodeDetailPage() {
             </CardContent>
           </Card>
         </>
-      )}
-    </div>
+      ) : null}
+    </PageShell>
   );
 }