diff --git a/console-ui/e2e/status-bar.spec.js b/console-ui/e2e/status-bar.spec.js
new file mode 100644
index 0000000..70223b9
--- /dev/null
+++ b/console-ui/e2e/status-bar.spec.js
@@ -0,0 +1,127 @@
+import { expect, test } from '@playwright/test'
+
+const VIEWPORTS = [
+  { width: 320, height: 568 },
+  { width: 360, height: 800 },
+  { width: 390, height: 844 },
+  { width: 768, height: 1024 },
+  { width: 1024, height: 768 },
+  { width: 1440, height: 900 },
+]
+
+const API_RESPONSES = {
+  '/api/v1/device': {
+    deviceName: 'edge-link-01',
+    hostname: 'edge-link-01',
+    platform: 'linux',
+    cpuModel: 'Test CPU',
+    uptimeHuman: '1 小时',
+    agentVersion: 'test',
+  },
+  '/api/v1/metrics': {
+    cpuUsedPercent: 32,
+    memoryUsed: 4 * 1024 ** 3,
+    memoryTotal: 16 * 1024 ** 3,
+    memoryUsedPercent: 25,
+    gpuData: [],
+    diskData: [],
+  },
+  '/api/v1/metrics/history': {},
+  '/api/v1/apps': [],
+  '/api/v1/alerts': [],
+}
+
+async function openConsole(page, viewport) {
+  await page.setViewportSize(viewport)
+  await page.addInitScript(() => {
+    localStorage.setItem('edge_token', 'status-bar-test-token')
+    localStorage.setItem('edgex-user-prefs', JSON.stringify({ topbar: 'dark', online: true }))
+  })
+  await page.route('**/api/v1/**', async (route) => {
+    const pathname = new URL(route.request().url()).pathname
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(API_RESPONSES[pathname] ?? []),
+    })
+  })
+  await page.goto('/')
+  await expect(page.locator('.edge-status-bar')).toBeVisible()
+}
+
+for (const viewport of VIEWPORTS) {
+  test(`${viewport.width}px Cloud Link 可见且状态栏无横向溢出`, async ({ page }) => {
+    const errors = []
+    page.on('console', (message) => {
+      if (message.type() === 'error') errors.push(message.text())
+    })
+    page.on('pageerror', (error) => errors.push(error.message))
+
+    await openConsole(page, viewport)
+
+    const link = page.locator('.edge-cloud-link')
+    const led = link.locator('.edge-cloud-link-led')
+    const label = link.locator('.edge-cloud-link-label')
+    await expect(link).toHaveAttribute('aria-label', '云端连接状态：云端在线')
+    await expect(link).toHaveAttribute('title', '云端连接状态：云端在线')
+    await expect(link).toHaveAttribute('data-cloud-link-state', 'online')
+    await expect(led).toBeVisible()
+    await expect(led).toHaveCSS('background-color', 'rgb(34, 197, 94)')
+    await expect(led).toHaveCSS('width', '8px')
+    await expect(led).toHaveCSS('height', '8px')
+    await expect(link).toHaveCSS('min-width', '44px')
+    await expect(link).toHaveCSS('min-height', '44px')
+
+    if (viewport.width < 1024) {
+      await expect(label).toBeHidden()
+    } else {
+      await expect(label).toBeVisible()
+      await expect(label).toHaveText('云端在线')
+    }
+
+    const overflow = await page.evaluate(() => {
+      const statusBar = document.querySelector('.edge-status-bar')
+      return {
+        documentClientWidth: document.documentElement.clientWidth,
+        documentScrollWidth: document.documentElement.scrollWidth,
+        statusClientWidth: statusBar.clientWidth,
+        statusScrollWidth: statusBar.scrollWidth,
+      }
+    })
+    expect(overflow.documentScrollWidth).toBe(overflow.documentClientWidth)
+    expect(overflow.statusScrollWidth).toBe(overflow.statusClientWidth)
+    expect(errors).toEqual([])
+  })
+}
+
+test('Cloud Link 四态颜色与连接中动画语义', async ({ page }) => {
+  await openConsole(page, { width: 1440, height: 900 })
+  const link = page.locator('.edge-cloud-link')
+  const led = link.locator('.edge-cloud-link-led')
+  const states = [
+    ['online', 'rgb(34, 197, 94)', false],
+    ['connecting', 'rgb(245, 158, 11)', true],
+    ['offline', 'rgb(220, 107, 103)', false],
+    ['unknown', 'rgb(148, 163, 184)', false],
+  ]
+
+  for (const [state, color, animated] of states) {
+    await link.evaluate((element, nextState) => {
+      element.className = `edge-cloud-link edge-cloud-link--${nextState}`
+      element.dataset.cloudLinkState = nextState
+    }, state)
+    await expect(led).toHaveCSS('background-color', color)
+    const animationName = await led.evaluate((element) => getComputedStyle(element).animationName)
+    expect(animationName === 'edgeCloudLinkConnecting').toBe(animated)
+  }
+})
+
+test('连接中动画尊重 prefers-reduced-motion', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' })
+  await openConsole(page, { width: 1440, height: 900 })
+  const link = page.locator('.edge-cloud-link')
+  await link.evaluate((element) => {
+    element.className = 'edge-cloud-link edge-cloud-link--connecting'
+  })
+  await expect(link.locator('.edge-cloud-link-led')).toHaveCSS('animation-name', 'none')
+})
diff --git a/console-ui/index.html b/console-ui/index.html
index 0fabfb1..f0f1515 100644
--- a/console-ui/index.html
+++ b/console-ui/index.html
@@ -2,6 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Edge-X · 本地控制台</title>
 </head>
 <body>
diff --git a/console-ui/package-lock.json b/console-ui/package-lock.json
index 3aec1bc..283d7fc 100644
--- a/console-ui/package-lock.json
+++ b/console-ui/package-lock.json
@@ -18,6 +18,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.55.1",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.1",
@@ -642,6 +643,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
+      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.2.tgz",
@@ -3375,6 +3392,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.38",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
diff --git a/console-ui/package.json b/console-ui/package.json
index 144d8b1..3981cef 100644
--- a/console-ui/package.json
+++ b/console-ui/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:status-bar": "playwright test e2e/status-bar.spec.js"
   },
   "dependencies": {
     "@xterm/addon-fit": "0.10.0",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.55.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
diff --git a/console-ui/playwright.config.js b/console-ui/playwright.config.js
new file mode 100644
index 0000000..38aa45b
--- /dev/null
+++ b/console-ui/playwright.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  expect: { timeout: 5_000 },
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    browserName: 'chromium',
+    headless: true,
+  },
+  webServer: {
+    command: 'npm run preview -- --host 127.0.0.1 --port 4173',
+    url: 'http://127.0.0.1:4173',
+    reuseExistingServer: false,
+    timeout: 30_000,
+  },
+})
diff --git a/console-ui/src/components/AppShell.jsx b/console-ui/src/components/AppShell.jsx
index a632824..f86cc88 100644
--- a/console-ui/src/components/AppShell.jsx
+++ b/console-ui/src/components/AppShell.jsx
@@ -13,6 +13,7 @@ import DiskManager from '../pages/DiskManager'
 import NetworkConnections from '../pages/NetworkConnections'
 import MonitoringApp from '../pages/Monitoring'
 import AIActivity from '../pages/AIActivity'
+import { useViewportEnvironment } from '../hooks/useViewportEnvironment'
 
 // Reusable face header
 function FaceHeader({ accent = T.blue, title, subtitle, version, kb, onMgmt, extra, errorMode }) {
@@ -46,8 +47,10 @@ function FaceHeader({ accent = T.blue, title, subtitle, version, kb, onMgmt, ext
 // IframeFace — generic iframe wrapper for installed apps
 // ═══════════════════════════════════════════════════════════════
 function IframeFace({ app, onMgmt }) {
-  // Resolve the first HostPort from the app's port mappings
-  const hostPort = app?.ports?.find(p => p.hostPort > 0)?.hostPort
+  const { compactWindow } = useViewportEnvironment();
+  // Browser-reachable mappings expose nodePort; containerPort is only a last-resort legacy fallback.
+  const hostPort = app?.ports?.find(p => p.nodePort > 0)?.nodePort
+    || app?.ports?.find(p => p.hostPort > 0)?.hostPort
     || app?.ports?.find(p => p.containerPort > 0)?.containerPort;
 
   if (!hostPort) {
@@ -66,10 +69,19 @@ function IframeFace({ app, onMgmt }) {
 
   const src = `http://${window.location.hostname}:${hostPort}`;
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+    <div className="edge-iframe-face" style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
       <FaceHeader accent={T.blue} title={app?.name || 'App'} version={app?.version}
         subtitle={src} onMgmt={onMgmt}
-        errorMode={app?.state === 'error'}/>
+        errorMode={app?.state === 'error'}
+        extra={<a href={src} target="_blank" rel="noreferrer" className="edge-iframe-open" title="在新窗口打开">
+          <Icon name="external" size={13} stroke={1.9}/>新窗口
+        </a>}/>
+      {compactWindow && (
+        <div className="edge-iframe-notice">
+          <Icon name="info" size={14} stroke={1.8}/>
+          <span>移动设备上的嵌入体验取决于目标应用；如遇到空白、登录或触控问题，请使用始终可用的“新窗口”。</span>
+        </div>
+      )}
       <iframe
         src={src}
         style={{ flex: 1, width: '100%', border: 'none' }}
diff --git a/console-ui/src/components/AppWindow.jsx b/console-ui/src/components/AppWindow.jsx
index 902b76c..5854bd9 100644
--- a/console-ui/src/components/AppWindow.jsx
+++ b/console-ui/src/components/AppWindow.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { T } from '../tokens'
 import { Icon } from '../icons'
 import { motion, springs, useMotionPref } from '../motion'
+import { useViewportEnvironment } from '../hooks/useViewportEnvironment'
 
 export const btnSecondary = {
   display: 'inline-flex', alignItems: 'center', gap: 6,
@@ -9,163 +10,151 @@ export const btnSecondary = {
   background: T.surface, border: `1px solid ${T.border}`,
   fontSize: 12.5, fontWeight: 500, color: T.ink2,
   cursor: 'pointer',
-};
+}
 export const btnPrimary = {
   ...btnSecondary,
   background: T.blue, color: 'white', border: `1px solid ${T.blueDeep}`,
   fontWeight: 600,
-};
+}
 export const btnDanger = {
   ...btnSecondary,
   background: 'white', color: T.red, border: '1px solid #fecaca',
-};
+}
 
-const WINDOW_SHADOW = '0 24px 60px -12px rgba(15,23,42,0.32), 0 0 0 1px rgba(15,23,42,0.08)';
-const WINDOW_SHADOW_CLEAR = '0 24px 60px -12px rgba(15,23,42,0), 0 0 0 1px rgba(15,23,42,0)';
+const WINDOW_SHADOW = '0 24px 60px -12px rgba(15,23,42,0.32), 0 0 0 1px rgba(15,23,42,0.08)'
+const WINDOW_SHADOW_CLEAR = '0 24px 60px -12px rgba(15,23,42,0), 0 0 0 1px rgba(15,23,42,0)'
 
-function windowFrame(maximized) {
+function windowFrame(maximized, compactWindow) {
+  if (compactWindow) {
+    return { inset: 0, borderRadius: 0, boxShadow: WINDOW_SHADOW_CLEAR }
+  }
   return maximized
     ? { top: '0%', left: '0%', right: '0%', bottom: '0%', borderRadius: 0, boxShadow: WINDOW_SHADOW_CLEAR }
-    : { top: '5.5%', left: '7.5%', right: '7.5%', bottom: '12%', borderRadius: 14, boxShadow: WINDOW_SHADOW };
+    : { top: '5.5%', left: '7.5%', right: '7.5%', bottom: '12%', borderRadius: 14, boxShadow: WINDOW_SHADOW }
 }
 
 function dockOffset(appId, windowNode, getDockIconRect) {
-  if (!windowNode) return { x: 0, y: 0 };
-
-  const dockRect = getDockIconRect?.(appId);
-  const offsetParentRect = windowNode.offsetParent?.getBoundingClientRect?.();
-  const sourceX = (offsetParentRect?.left || 0) + windowNode.offsetLeft + windowNode.offsetWidth / 2;
-  const sourceY = (offsetParentRect?.top || 0) + windowNode.offsetTop + windowNode.offsetHeight / 2;
-  const targetX = dockRect
-    ? dockRect.left + dockRect.width / 2
-    : window.innerWidth / 2;
-  const targetY = dockRect
-    ? dockRect.top + dockRect.height / 2
-    : window.innerHeight - 42;
-
-  return {
-    x: targetX - sourceX,
-    y: targetY - sourceY,
-  };
+  if (!windowNode) return { x: 0, y: 0 }
+  const dockRect = getDockIconRect?.(appId)
+  const offsetParentRect = windowNode.offsetParent?.getBoundingClientRect?.()
+  const sourceX = (offsetParentRect?.left || 0) + windowNode.offsetLeft + windowNode.offsetWidth / 2
+  const sourceY = (offsetParentRect?.top || 0) + windowNode.offsetTop + windowNode.offsetHeight / 2
+  const targetX = dockRect ? dockRect.left + dockRect.width / 2 : window.innerWidth / 2
+  const targetY = dockRect ? dockRect.top + dockRect.height / 2 : window.innerHeight - 42
+  return { x: targetX - sourceX, y: targetY - sourceY }
 }
 
-export default function AppWindow({ app, active = false, visible = true, minimized = false, maximized, getDockIconRect, onMaximize, onMinimize, onClose, children, headerActions, breadcrumb, mgmtOpen, onToggleMgmt, canManage }) {
-  const pref = useMotionPref();
-  const [windowNode, setWindowNode] = useState(null);
+export default function AppWindow({
+  app, active = false, visible = true, minimized = false, maximized,
+  getDockIconRect, onMaximize, onMinimize, onClose, onShowDesktop,
+  children, headerActions, breadcrumb, mgmtOpen, onToggleMgmt, canManage,
+}) {
+  const pref = useMotionPref()
+  const { compactWindow } = useViewportEnvironment()
+  const [windowNode, setWindowNode] = useState(null)
+  const showDesktop = onShowDesktop || onMinimize
 
-  const trafficBtn = (color, onClick, icon, className = 'edge-btn-secondary') => (
-    <div onClick={onClick} className={`edge-press ${className}`} style={{
-      width: 22, height: 22, borderRadius: 6, cursor: 'pointer',
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      color, transition: 'background 0.15s, color 0.15s',
-    }}>
-      {icon}
-    </div>
-  );
+  const trafficBtn = (label, color, onClick, icon, className = 'edge-btn-secondary', extraClass = '') => (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className={`edge-window-control edge-press ${className} ${extraClass}`}
+      style={{
+        width: 22, height: 22, borderRadius: 6, cursor: 'pointer',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color, transition: 'background 0.15s, color 0.15s',
+        border: 'none', background: 'transparent', padding: 0,
+      }}
+    >{icon}</button>
+  )
 
-  const frame = windowFrame(maximized);
-  const minimizeOffset = minimized
+  const frame = windowFrame(maximized, compactWindow)
+  const minimizeOffset = minimized && !compactWindow
     ? dockOffset(app.id, windowNode, getDockIconRect)
-    : { x: 0, y: 0 };
+    : { x: 0, y: 0 }
   const activeTarget = {
     ...frame,
     opacity: visible ? 1 : 0,
     visibility: 'visible',
     transitionEnd: visible ? { visibility: 'visible' } : { visibility: 'hidden' },
-    ...(pref.reduced ? {} : {
+    ...(pref.reduced || compactWindow ? {} : {
       x: minimized ? minimizeOffset.x : 0,
       y: minimized ? minimizeOffset.y : 0,
       scale: visible ? 1 : minimized ? 0.35 : 0.98,
     }),
-  };
-
-  const transition = pref.reduced
+  }
+  const transition = pref.reduced || compactWindow
     ? {
         opacity: pref.fadeTransition,
-        top: { duration: 0 },
-        left: { duration: 0 },
-        right: { duration: 0 },
-        bottom: { duration: 0 },
-        borderRadius: { duration: 0 },
-        boxShadow: { duration: 0 },
+        top: { duration: 0 }, left: { duration: 0 }, right: { duration: 0 }, bottom: { duration: 0 },
+        borderRadius: { duration: 0 }, boxShadow: { duration: 0 },
       }
     : {
-        top: springs.gentle,
-        left: springs.gentle,
-        right: springs.gentle,
-        bottom: springs.gentle,
-        borderRadius: springs.gentle,
-        boxShadow: springs.gentle,
-        x: springs.default,
-        y: springs.default,
-        scale: springs.default,
+        top: springs.gentle, left: springs.gentle, right: springs.gentle, bottom: springs.gentle,
+        borderRadius: springs.gentle, boxShadow: springs.gentle,
+        x: springs.default, y: springs.default, scale: springs.default,
         opacity: { duration: 0.2 },
-      };
+      }
 
   return (
-    <motion.div ref={setWindowNode} initial={pref.reduced ? { opacity: 0 } : { opacity: 0, scale: 0.96 }}
+    <motion.div
+      ref={setWindowNode}
+      className={`edge-app-window${compactWindow ? ' edge-app-window-compact' : ''}`}
+      initial={pref.reduced || compactWindow ? { opacity: 0 } : { opacity: 0, scale: 0.96 }}
       animate={activeTarget}
-      exit={pref.reduced ? { opacity: 0 } : { opacity: 0, scale: 0.97, x: 0, y: 0 }}
+      exit={pref.reduced || compactWindow ? { opacity: 0 } : { opacity: 0, scale: 0.97, x: 0, y: 0 }}
       transition={transition}
       onAnimationComplete={() => {
-        if (visible) window.dispatchEvent(new Event('resize'));
+        if (visible) window.dispatchEvent(new Event('resize'))
       }}
       style={{
-      position: 'absolute',
-      ...frame,
-      background: T.windowBg,
-      display: 'flex', flexDirection: 'column', overflow: 'hidden',
-      zIndex: active ? 21 : 20,
-      pointerEvents: visible ? 'auto' : 'none',
-    }}>
-      {/* Title bar */}
-      <div style={{
-        height: 44, display: 'flex', alignItems: 'center',
+        position: 'absolute', ...frame, background: T.windowBg,
+        display: 'flex', flexDirection: 'column', overflow: 'hidden',
+        zIndex: active ? 21 : 20, pointerEvents: visible ? 'auto' : 'none',
+      }}
+    >
+      <div className="edge-window-titlebar" style={{
+        minHeight: 44, display: 'flex', alignItems: 'center',
         paddingLeft: 14, paddingRight: 8, gap: 10,
         background: T.titleBar, borderBottom: `1px solid ${T.borderSoft}`,
         flexShrink: 0,
       }}>
+        {compactWindow && trafficBtn('返回桌面', T.ink2, showDesktop, <Icon name="chevDown" size={16} stroke={2}/>, 'edge-btn-secondary', 'edge-window-back')}
         <div style={{
-          width: 22, height: 22, borderRadius: 6, color: 'white',
+          width: 22, height: 22, borderRadius: 6, color: 'white', flexShrink: 0,
           background: app.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
-        }}>
-          <Icon name={app.icon} size={13} stroke={1.8}/>
-        </div>
-        <div style={{ ...T.type.body, fontWeight: 600, color: T.ink }}>{app.name}</div>
-        {breadcrumb && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: T.ink3, fontSize: 12.5 }}>
-            <Icon name="chevRight" size={12} stroke={2}/>
-            {breadcrumb}
-          </div>
-        )}
+        }}><Icon name={app.icon} size={13} stroke={1.8}/></div>
+        <div className="edge-window-title" style={{ ...T.type.body, fontWeight: 600, color: T.ink }}>{app.name}</div>
+        {breadcrumb && <div className="edge-window-breadcrumb" style={{ display: 'flex', alignItems: 'center', gap: 6, color: T.ink3, fontSize: 12.5 }}>
+          <Icon name="chevRight" size={12} stroke={2}/>{breadcrumb}
+        </div>}
         <div style={{ flex: 1 }}/>
-        {headerActions}
-        {canManage && (
-          <button onClick={onToggleMgmt} title="应用运维信息" className="edge-press edge-btn-secondary" style={{
+        <div className="edge-window-header-actions">{headerActions}</div>
+        {canManage && <button
+          type="button"
+          onClick={onToggleMgmt}
+          title="应用运维信息"
+          className="edge-window-manage edge-press edge-btn-secondary"
+          style={{
             display: 'flex', alignItems: 'center', gap: 5,
-            height: 26, padding: '0 10px', borderRadius: 6,
-            appearance: 'none',
+            minHeight: 44, padding: '0 10px', borderRadius: 6, appearance: 'none',
             background: mgmtOpen ? T.blueSoft : undefined,
             border: `1px solid ${mgmtOpen ? '#bfdbfe' : 'transparent'}`,
             color: mgmtOpen ? T.blueDeep : T.ink3,
-            cursor: 'pointer', fontSize: 11.5, fontWeight: 600,
-            marginRight: 4,
-          }}>
-            <Icon name="info" size={12} stroke={2}/>
-            运维信息
-          </button>
-        )}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 2, marginLeft: 4 }}>
-          {trafficBtn(T.ink3, onMinimize, <Icon name="minus" size={14} stroke={2}/>)}
-          {trafficBtn(T.ink3, onMaximize, <Icon name={maximized ? 'restore' : 'maximize'} size={12} stroke={2}/>)}
-          {trafficBtn(T.red, onClose, <Icon name="x" size={14} stroke={2}/>, 'edge-btn-danger')}
+            cursor: 'pointer', fontSize: 11.5, fontWeight: 600, marginRight: 4,
+          }}
+        ><Icon name="info" size={12} stroke={2}/><span>运维信息</span></button>}
+        <div className="edge-window-controls" style={{ display: 'flex', alignItems: 'center', gap: 2, marginLeft: 4 }}>
+          {!compactWindow && trafficBtn('最小化', T.ink3, onMinimize, <Icon name="minus" size={14} stroke={2}/>)}
+          {!compactWindow && trafficBtn(maximized ? '还原窗口' : '最大化', T.ink3, onMaximize, <Icon name={maximized ? 'restore' : 'maximize'} size={12} stroke={2}/>)}
+          {trafficBtn('关闭', T.red, onClose, <Icon name="x" size={14} stroke={2}/>, 'edge-btn-danger')}
         </div>
       </div>
-
-      {/* Body */}
-      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' }}>
+      <div className="edge-window-body" style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', position: 'relative' }}>
         {children}
       </div>
     </motion.div>
-  );
+  )
 }
diff --git a/console-ui/src/components/ContainerShellFace.jsx b/console-ui/src/components/ContainerShellFace.jsx
index 77939c1..a9ac6b0 100644
--- a/console-ui/src/components/ContainerShellFace.jsx
+++ b/console-ui/src/components/ContainerShellFace.jsx
@@ -135,6 +135,8 @@ export default function ContainerShellFace({ appId, app }) {
       try { fit.fit() } catch {}
     }
     window.addEventListener('resize', onWinResize)
+    window.visualViewport?.addEventListener('resize', onWinResize)
+    window.visualViewport?.addEventListener('scroll', onWinResize)
     // 监听抽屉尺寸变化（drawer 拖动）
     let ro = null
     if (typeof ResizeObserver !== 'undefined' && termContainerRef.current) {
@@ -148,6 +150,8 @@ export default function ContainerShellFace({ appId, app }) {
       try { dataHandler.dispose() } catch {}
       try { resizeHandler.dispose() } catch {}
       window.removeEventListener('resize', onWinResize)
+      window.visualViewport?.removeEventListener('resize', onWinResize)
+      window.visualViewport?.removeEventListener('scroll', onWinResize)
       if (ro) ro.disconnect()
       try { ws.close() } catch {}
       try { term.dispose() } catch {}
@@ -158,10 +162,10 @@ export default function ContainerShellFace({ appId, app }) {
   }, [appId, isRunning])
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%',
+    <div className="edge-container-shell" style={{ display: 'flex', flexDirection: 'column', height: '100%',
       background: '#0b1220', overflow: 'hidden' }}>
       {/* 状态栏 */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8,
+      <div className="edge-container-shell-status" style={{ display: 'flex', alignItems: 'center', gap: 8,
         padding: '8px 12px', borderBottom: `1px solid ${T.ink2}`,
         background: '#0f172a', flexShrink: 0 }}>
         <Icon name="terminal" size={14} stroke={1.8} style={{ color: '#60a5fa' }}/>
diff --git a/console-ui/src/components/Desktop.jsx b/console-ui/src/components/Desktop.jsx
index 3ef1a99..fba1b67 100644
--- a/console-ui/src/components/Desktop.jsx
+++ b/console-ui/src/components/Desktop.jsx
@@ -251,8 +251,8 @@ function RunningChip({ running, error }) {
 
 function Section({ label, meta, right, children }) {
   return (
-    <div>
-      <div style={{
+    <div className="edge-desktop-section">
+      <div className="edge-desktop-section-header" style={{
         display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14,
       }}>
         <div style={{ fontSize: 12, fontWeight: 700, color: T.ink,
@@ -268,7 +268,7 @@ function Section({ label, meta, right, children }) {
 
 function AppGrid({ apps, onOpen, iconStyle, accent, iconPx = 76, tilePx = 104, labelSize = 12.5 }) {
   return (
-    <div style={{
+    <div className="edge-app-grid" style={{
       display: 'grid',
       gridTemplateColumns: `repeat(auto-fill, minmax(${tilePx + 8}px, ${tilePx + 8}px))`,
       gap: 8,
@@ -293,7 +293,7 @@ export function Desktop({ onOpenApp, sysApps, deployedApps, showRecent = true, i
   // ─── Launcher layout: single full-width column, larger icons, no right sidebar
   if (layout === 'launcher') {
     return (
-      <div style={{
+      <div className="edge-desktop edge-desktop-launcher" style={{
         flex: 1, padding: '40px 56px 110px',
         display: 'flex', flexDirection: 'column', gap: 32,
         overflow: 'auto', alignContent: 'start',
@@ -321,7 +321,7 @@ export function Desktop({ onOpenApp, sysApps, deployedApps, showRecent = true, i
   // ─── Compact: denser grid, smaller spacing, dual column with smaller widgets
   if (layout === 'compact') {
     return (
-      <div style={{
+      <div className="edge-desktop edge-desktop-split" style={{
         flex: 1, padding: '20px 36px 110px',
         display: 'grid', gridTemplateColumns: '1fr 280px', gap: 22,
         overflow: 'auto', alignContent: 'start',
@@ -344,7 +344,7 @@ export function Desktop({ onOpenApp, sysApps, deployedApps, showRecent = true, i
             </Section>
           )}
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div className="edge-desktop-widgets" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
           <ClockCalendarWidget/>
           <DeviceInfoCard DEVICE={DEVICE}/>
           <MemoWidget/>
@@ -355,7 +355,7 @@ export function Desktop({ onOpenApp, sysApps, deployedApps, showRecent = true, i
 
   // ─── Workstation (default): two-column with full widgets
   return (
-    <div style={{
+    <div className="edge-desktop edge-desktop-split" style={{
       flex: 1, position: 'relative',
       padding: '28px 48px 110px',
       display: 'grid', gridTemplateColumns: '1fr 340px', gap: 32,
@@ -382,7 +382,7 @@ export function Desktop({ onOpenApp, sysApps, deployedApps, showRecent = true, i
         )}
       </div>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+      <div className="edge-desktop-widgets" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
         <ClockCalendarWidget/>
         <DeviceInfoCard DEVICE={DEVICE}/>
         <MemoWidget/>
diff --git a/console-ui/src/components/Dock.jsx b/console-ui/src/components/Dock.jsx
index 83c464b..8ce1f55 100644
--- a/console-ui/src/components/Dock.jsx
+++ b/console-ui/src/components/Dock.jsx
@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react'
 import { T } from '../tokens'
 import { Icon } from '../icons'
 import { motion, AnimatePresence, PopScale, springs, useMotionPref } from '../motion'
+import { useViewportEnvironment } from '../hooks/useViewportEnvironment'
 
 function DockTooltip({ label }) {
   const pref = useMotionPref()
   return (
     <div style={{
       position: 'absolute', bottom: 'calc(100% + 10px)', left: '50%',
-      transform: 'translateX(-50%)',
-      pointerEvents: 'none',
+      transform: 'translateX(-50%)', pointerEvents: 'none',
     }}>
       <motion.div
         initial={pref.reduced ? { opacity: 0 } : { opacity: 0, y: 4 }}
@@ -25,197 +25,183 @@ function DockTooltip({ label }) {
         }}>{label}</PopScale>
       </motion.div>
     </div>
-  );
+  )
+}
+
+const dockButtonStyle = {
+  position: 'relative', width: 44, height: 44, flex: '0 0 44px',
+  borderRadius: 12, border: 'none', padding: 0,
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  cursor: 'pointer', font: 'inherit',
 }
 
 export function Dock({ apps, registerDockIconRect, onShowDesktop, onFocusApp, onCloseApp, anyVisible, hidden = false,
                 authed, authBadge, onToggleAuth, alertBadge, loginUser, onLogout }) {
-  const [hoverId, setHoverId] = useState(null);
-  const pref = useMotionPref();
-  const dockMotion = pref.reduced ? {} : {
+  const [hoverId, setHoverId] = useState(null)
+  const pref = useMotionPref()
+  const { compactWindow, touchEnvironment } = useViewportEnvironment()
+  const effectiveHidden = hidden && !compactWindow
+  const dockMotion = pref.reduced || touchEnvironment ? {} : {
     whileHover: { y: -4, scale: 1.1 },
     whileTap: { scale: 0.95 },
-  };
-
-  // "Show desktop" is the home button — it lives on the left,
-  // and is shown as "active" only when no window is visible.
-  const desktopActive = !anyVisible;
+  }
+  const desktopActive = !anyVisible
 
   useEffect(() => {
-    if (!hidden) return undefined;
-    const frame = requestAnimationFrame(() => setHoverId(null));
-    return () => cancelAnimationFrame(frame);
-  }, [hidden]);
+    if (!effectiveHidden) return undefined
+    const frame = requestAnimationFrame(() => setHoverId(null))
+    return () => cancelAnimationFrame(frame)
+  }, [effectiveHidden])
 
   return (
     <div
-      aria-hidden={hidden}
-      inert={hidden ? true : undefined}
+      className="edge-dock-shell"
+      aria-hidden={effectiveHidden}
+      inert={effectiveHidden ? true : undefined}
       style={{
-      position: 'absolute', bottom: 18, left: '50%', transform: 'translateX(-50%)',
-      zIndex: 25,
-      opacity: hidden ? 0 : 1,
-      visibility: hidden ? 'hidden' : 'visible',
-      pointerEvents: hidden ? 'none' : 'auto',
-    }}>
-      <div className="edge-material-chrome"
-        style={{
-          display: 'flex', alignItems: 'center', gap: 6,
-          padding: '8px 12px', borderRadius: 20,
-          border: '1px solid rgba(255,255,255,0.9)',
-          boxShadow: '0 12px 32px -8px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04)',
-          transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
-        }}>
-        {/* Show-desktop button */}
-        <motion.div onClick={onShowDesktop}
-             onMouseEnter={() => setHoverId('__home')}
-             onMouseLeave={() => setHoverId(null)}
-             title="显示桌面"
-             transition={pref.spring('snappy')}
-             {...dockMotion}
-             style={{
-               position: 'relative', width: 44, height: 44, borderRadius: 12,
-               background: desktopActive ? '#1f2937' : 'rgba(15,23,42,0.04)',
-               color: desktopActive ? 'white' : T.ink2,
-               display: 'flex', alignItems: 'center', justifyContent: 'center',
-               cursor: 'pointer',
-               boxShadow: desktopActive ? '0 4px 10px -2px rgba(31,41,55,0.45)' : 'none',
-             }}>
+        position: 'absolute', bottom: 18, left: '50%', transform: 'translateX(-50%)',
+        zIndex: 25, opacity: effectiveHidden ? 0 : 1,
+        visibility: effectiveHidden ? 'hidden' : 'visible',
+        pointerEvents: effectiveHidden ? 'none' : 'auto',
+      }}
+    >
+      <div className="edge-material-chrome edge-dock-scroll" style={{
+        display: 'flex', alignItems: 'center', gap: 6,
+        padding: '8px 12px', borderRadius: 20,
+        border: '1px solid rgba(255,255,255,0.9)',
+        boxShadow: '0 12px 32px -8px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04)',
+        transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+      }}>
+        <motion.button
+          type="button"
+          onClick={onShowDesktop}
+          onMouseEnter={() => !touchEnvironment && setHoverId('__home')}
+          onMouseLeave={() => setHoverId(null)}
+          aria-label="显示桌面"
+          title="显示桌面"
+          transition={pref.spring('snappy')}
+          {...dockMotion}
+          style={{
+            ...dockButtonStyle,
+            background: desktopActive ? '#1f2937' : 'rgba(15,23,42,0.04)',
+            color: desktopActive ? 'white' : T.ink2,
+            boxShadow: desktopActive ? '0 4px 10px -2px rgba(31,41,55,0.45)' : 'none',
+          }}
+        >
           <Icon name="home" size={20} stroke={1.7}/>
-          {desktopActive && (
-            <div style={{
-              position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)',
-              width: 5, height: 5, borderRadius: '50%', background: T.ink2,
-            }}/>
-          )}
+          {desktopActive && <span style={{
+            position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)',
+            width: 5, height: 5, borderRadius: '50%', background: T.ink2,
+          }}/>}
           <AnimatePresence>
-            {hoverId === '__home' && (
-              <DockTooltip label="显示桌面"/>
-            )}
+            {!touchEnvironment && hoverId === '__home' && <DockTooltip label="显示桌面"/>}
           </AnimatePresence>
-        </motion.div>
+        </motion.button>
 
-        {/* Divider between system controls and running apps */}
-        <div style={{ width: 1, height: 28, background: 'rgba(15,23,42,0.08)', margin: '0 4px' }}/>
+        <div aria-hidden="true" style={{ width: 1, height: 28, flex: '0 0 1px', background: 'rgba(15,23,42,0.08)', margin: '0 4px' }}/>
 
-        {/* Running apps — dynamic */}
         {apps.length === 0 ? (
           <div style={{
-            height: 44, padding: '0 14px',
+            height: 44, padding: '0 14px', whiteSpace: 'nowrap',
             display: 'flex', alignItems: 'center', gap: 8,
             color: T.ink3, fontSize: 12,
           }}>
             <Icon name="apps" size={14} stroke={1.7}/>
             <span>从桌面单击应用以启动</span>
           </div>
-        ) : (
-          apps.map(app => {
-            const stateColor = {
-              running: T.green, error: T.red, warn: T.amber, stopped: T.ink4,
-            }[app.state] || null;
-            const isError = app.state === 'error';
-            const hovered = hoverId === app.id;
-            const rememberRect = (node) => registerDockIconRect?.(app.id, node);
-            return (
-              <motion.div key={app.id}
-                   ref={rememberRect}
-                   onClick={(e) => { rememberRect(e.currentTarget); onFocusApp(app.id); }}
-                   onMouseEnter={(e) => { rememberRect(e.currentTarget); setHoverId(app.id); }}
-                   onMouseLeave={() => setHoverId(null)}
-                   onContextMenu={(e) => { e.preventDefault(); onCloseApp(app.id); }}
-                   title={app.name}
-                   transition={pref.spring('snappy')}
-                   {...dockMotion}
-                   style={{
-                     position: 'relative', width: 44, height: 44, borderRadius: 12,
-                     background: app.isActive ? app.bg : 'rgba(15,23,42,0.04)',
-                     color: app.isActive ? 'white' : T.ink2,
-                     display: 'flex', alignItems: 'center', justifyContent: 'center',
-                     cursor: 'pointer',
-                     boxShadow: app.isActive
-                       ? `0 4px 10px -2px ${app.color}55, inset 0 1px 0 rgba(255,255,255,0.3)`
-                       : 'none',
-                     opacity: app.isMinimized ? 0.92 : 1,
-                   }}>
-                {/* When inactive, show the app's own gradient as a tiny tile
-                    so it still looks like *the* app, not a generic chip */}
-                {!app.isActive && (
-                  <div style={{
-                    position: 'absolute', inset: 6, borderRadius: 8,
-                    background: app.bg, color: 'white',
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    boxShadow: '0 1px 2px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.25)',
-                  }}>
-                    <Icon name={app.icon} size={18} stroke={1.7}/>
-                  </div>
-                )}
-                {app.isActive && (
-                  <Icon name={app.icon} size={20} stroke={1.7}/>
-                )}
-
-                {/* App-state pip (running/error) on running app-kind items */}
-                {app.kind === 'app' && stateColor && (
-                  <div style={{
-                    position: 'absolute', right: 1, top: 1,
-                    width: 10, height: 10, borderRadius: '50%',
-                    background: 'white',
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    boxShadow: '0 1px 2px rgba(15,23,42,0.18)',
-                  }}>
-                    <span className={isError ? 'edge-live-dot' : ''}
-                          style={{ width: 6, height: 6, borderRadius: '50%', background: stateColor }}/>
-                  </div>
-                )}
+        ) : apps.map(app => {
+          const stateColor = {
+            running: T.green, error: T.red, warn: T.amber, stopped: T.ink4,
+          }[app.state] || null
+          const isError = app.state === 'error'
+          const hovered = hoverId === app.id
+          const rememberRect = (node) => registerDockIconRect?.(app.id, node)
+          return (
+            <div
+              key={app.id}
+              className="edge-dock-app"
+              onMouseEnter={() => !touchEnvironment && setHoverId(app.id)}
+              onMouseLeave={() => setHoverId(null)}
+              style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0 }}
+            >
+              <motion.button
+                type="button"
+                ref={rememberRect}
+                onClick={(event) => { rememberRect(event.currentTarget); onFocusApp(app.id) }}
+                onMouseEnter={(event) => rememberRect(event.currentTarget)}
+                aria-label={`${app.name}${app.isMinimized ? '，已最小化' : ''}`}
+                title={app.name}
+                transition={pref.spring('snappy')}
+                {...dockMotion}
+                style={{
+                  ...dockButtonStyle,
+                  background: app.isActive ? app.bg : 'rgba(15,23,42,0.04)',
+                  color: app.isActive ? 'white' : T.ink2,
+                  boxShadow: app.isActive
+                    ? `0 4px 10px -2px ${app.color}55, inset 0 1px 0 rgba(255,255,255,0.3)`
+                    : 'none',
+                  opacity: app.isMinimized ? 0.92 : 1,
+                }}
+              >
+                {!app.isActive && <span style={{
+                  position: 'absolute', inset: 6, borderRadius: 8,
+                  background: app.bg, color: 'white',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  boxShadow: '0 1px 2px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.25)',
+                }}><Icon name={app.icon} size={18} stroke={1.7}/></span>}
+                {app.isActive && <Icon name={app.icon} size={20} stroke={1.7}/>}
 
-                {/* Alert center badge */}
-                {app.id === 'alerts' && alertBadge > 0 && (
-                  <div style={{
-                    position: 'absolute', top: 0, right: 0,
-                    minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9,
-                    background: T.red, color: 'white', fontSize: 10.5, fontWeight: 700,
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    boxShadow: '0 0 0 2px white', transform: 'translate(25%, -25%)',
-                  }}>{alertBadge}</div>
-                )}
+                {app.kind === 'app' && stateColor && <span style={{
+                  position: 'absolute', right: 1, top: 1,
+                  width: 10, height: 10, borderRadius: '50%', background: 'white',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  boxShadow: '0 1px 2px rgba(15,23,42,0.18)',
+                }}><span className={isError ? 'edge-live-dot' : ''}
+                  style={{ width: 6, height: 6, borderRadius: '50%', background: stateColor }}/></span>}
 
-                {/* Hover-close (x) button — Mac-like close hint */}
-                {hovered && (
-                  <button onClick={(e) => { e.stopPropagation(); onCloseApp(app.id); }}
-                    title="退出应用"
-                    style={{
-                      position: 'absolute', top: -5, left: -5,
-                      width: 18, height: 18, borderRadius: '50%',
-                      background: '#0f172a', color: 'white', border: 'none',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      cursor: 'pointer', boxShadow: '0 1px 4px rgba(15,23,42,0.3), 0 0 0 2px white',
-                      padding: 0, zIndex: 2,
-                    }}>
-                    <Icon name="x" size={11} stroke={2.4}/>
-                  </button>
-                )}
+                {app.id === 'alerts' && alertBadge > 0 && <span style={{
+                  position: 'absolute', top: 0, right: 0,
+                  minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9,
+                  background: T.red, color: 'white', fontSize: 10.5, fontWeight: 700,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  boxShadow: '0 0 0 2px white', transform: 'translate(25%, -25%)',
+                }}>{alertBadge}</span>}
 
-                {/* Running indicator dot:
-                    - filled larger for the active window
-                    - smaller hollow for minimized (still running) */}
-                <div style={{
+                <span aria-hidden="true" style={{
                   position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)',
-                  width: app.isActive ? 5 : 4,
-                  height: app.isActive ? 5 : 4,
-                  borderRadius: '50%',
-                  background: app.isActive ? T.ink2 : T.ink3,
+                  width: app.isActive ? 5 : 4, height: app.isActive ? 5 : 4,
+                  borderRadius: '50%', background: app.isActive ? T.ink2 : T.ink3,
                   opacity: app.isMinimized ? 0.6 : 1,
                 }}/>
-
                 <AnimatePresence>
-                  {hovered && <DockTooltip label={`${app.name}${app.isMinimized ? ' · 已最小化' : ''}`}/>}
+                  {!touchEnvironment && hovered && <DockTooltip label={`${app.name}${app.isMinimized ? ' · 已最小化' : ''}`}/>}
                 </AnimatePresence>
-              </motion.div>
-            );
-          })
-        )}
-
-        {/* 用户菜单挪到 StatusBar 左上角 (Apple-style 2026-06-21 LF) */}
+              </motion.button>
+              {!touchEnvironment && hovered && <button
+                type="button"
+                onClick={() => onCloseApp(app.id)}
+                title="退出应用"
+                aria-label={`退出 ${app.name}`}
+                style={{
+                  position: 'absolute', top: -5, left: -5,
+                  width: 18, height: 18, borderRadius: '50%',
+                  background: '#0f172a', color: 'white', border: 'none',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  cursor: 'pointer', boxShadow: '0 1px 4px rgba(15,23,42,0.3), 0 0 0 2px white',
+                  padding: 0, zIndex: 2,
+                }}
+              ><Icon name="x" size={11} stroke={2.4}/></button>}
+              {touchEnvironment && <button
+                type="button"
+                className="edge-dock-close"
+                onClick={() => onCloseApp(app.id)}
+                aria-label={`关闭 ${app.name}`}
+                title={`关闭 ${app.name}`}
+              ><Icon name="x" size={14} stroke={2.2}/></button>}
+            </div>
+          )
+        })}
       </div>
     </div>
-  );
+  )
 }
diff --git a/console-ui/src/components/LoginScreen.jsx b/console-ui/src/components/LoginScreen.jsx
index 2304664..f2360b7 100644
--- a/console-ui/src/components/LoginScreen.jsx
+++ b/console-ui/src/components/LoginScreen.jsx
@@ -118,8 +118,8 @@ export function LoginScreen({ onLogin, deviceName }) {
   const model = about?.model || ''
 
   return (
-    <div style={{
-      display: 'flex', width: '100vw', height: '100vh', overflow: 'hidden', background: '#fff',
+    <div className="edge-login-screen" style={{
+      display: 'flex', width: '100vw', minHeight: '100vh', height: '100dvh', overflow: 'hidden', background: '#fff',
       fontFamily: '"PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Arial, sans-serif',
       WebkitFontSmoothing: 'antialiased',
     }}>
@@ -187,7 +187,7 @@ export function LoginScreen({ onLogin, deviceName }) {
       </div>
 
       {/* ───── Right: Form Panel ───── */}
-      <div style={{
+      <div className="edge-login-form-panel" style={{
         flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
         padding: '32px 40px', background: '#fff',
       }}>
@@ -282,7 +282,7 @@ const loginCSS = `
   .login-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: "tnum"; }
   .login-tnum { font-variant-numeric: tabular-nums; }
   @keyframes login-spin { to { transform: rotate(360deg); } }
-  @media (max-width: 880px) {
+  @media (max-width: 1023px) {
     .login-brand { display: none !important; }
   }
 `
@@ -380,7 +380,7 @@ function Field({ icon, type = 'text', value, onChange, placeholder, trailing, au
         onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
         style={{
           flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent',
-          fontSize: 14, color: T.ink,
+          fontSize: 16, color: T.ink,
           letterSpacing: type === 'password' ? '0.18em' : 0,
           fontFamily: 'inherit',
         }}/>
diff --git a/console-ui/src/components/StatusBar.jsx b/console-ui/src/components/StatusBar.jsx
index dadf041..e458596 100644
--- a/console-ui/src/components/StatusBar.jsx
+++ b/console-ui/src/components/StatusBar.jsx
@@ -4,8 +4,56 @@ import { Icon } from '../icons'
 import { StatusDot, useClock } from './ui'
 import { AnimatePresence, PopScale } from '../motion'
 
-export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenAlerts, theme = 'light', deviceLabel, DEVICE, loginUser, onLogout }) {
-  const isDarkBar = theme === 'dark'
+const CLOUD_LINK_STATES = {
+  online: { label: '云端在线' },
+  connecting: { label: '云端连接中' },
+  offline: { label: '云端离线' },
+  unknown: { label: '云端状态未知' },
+}
+
+function resolveCloudLinkState(value) {
+  if (value === true || value === 'online') return 'online'
+  if (value === false || value === 'offline') return 'offline'
+  if (value === 'connecting') return 'connecting'
+  return 'unknown'
+}
+
+export function CloudLinkIndicator({ status }) {
+  const state = resolveCloudLinkState(status)
+  const label = CLOUD_LINK_STATES[state].label
+  const accessibleLabel = `云端连接状态：${label}`
+
+  return (
+    <div
+      className={`edge-cloud-link edge-cloud-link--${state}`}
+      role="status"
+      aria-label={accessibleLabel}
+      title={accessibleLabel}
+      data-cloud-link-state={state}
+    >
+      <span className="edge-cloud-link-led" aria-hidden="true" />
+      <span className="edge-cloud-link-label">{label}</span>
+    </div>
+  )
+}
+
+function MetricPill({ tone, label, value, colors }) {
+  return (
+    <div className="edge-status-metric" style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      padding: '3px 9px 3px 8px', borderRadius: 999,
+      background: colors.pillBg,
+      fontSize: 12, color: colors.text2,
+      whiteSpace: 'nowrap', flexShrink: 0,
+    }}>
+      <StatusDot tone={tone} size={7}/>
+      <span style={{ color: colors.text3 }}>{label}</span>
+      <span className="mono tnum" style={{ color: colors.text, fontWeight: 600 }}>{value}</span>
+    </div>
+  )
+}
+
+export function StatusBar({ cpu, gpu, mem, alertCount, online, onOpenAlerts, theme = 'light', deviceLabel, DEVICE, loginUser, onLogout }) {
   const now = useClock();
   const hh = String(now.getHours()).padStart(2, '0');
   const mm = String(now.getMinutes()).padStart(2, '0');
@@ -30,13 +78,6 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
     alertBg: 'rgba(245,158,11,0.18)',
     alertFg: '#fbbf24',
     alertBd: 'rgba(245,158,11,0.45)',
-    cloudOnBg: 'rgba(16,185,129,0.16)',
-    cloudOnFg: '#34d399',
-    cloudOnBd: 'rgba(16,185,129,0.4)',
-    cloudOffBg: 'rgba(239,68,68,0.16)',
-    cloudOffFg: '#fca5a5',
-    cloudOffBd: 'rgba(239,68,68,0.4)',
-    cloudSyncFg: 'rgba(241,245,249,0.55)',
   } : {
     bar: 'rgba(255,255,255,0.85)',
     barBd: 'rgba(226,232,240,0.7)',
@@ -52,31 +93,12 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
     alertBg: '#fef3c7',
     alertFg: '#b45309',
     alertBd: '#fde68a',
-    cloudOnBg: '#ecfdf5',
-    cloudOnFg: '#047857',
-    cloudOnBd: '#a7f3d0',
-    cloudOffBg: '#fef2f2',
-    cloudOffFg: '#b91c1c',
-    cloudOffBd: '#fecaca',
-    cloudSyncFg: T.ink3,
   };
 
-  const Pill = ({ tone, label, value }) => (
-    <div style={{
-      display: 'inline-flex', alignItems: 'center', gap: 6,
-      padding: '3px 9px 3px 8px', borderRadius: 999,
-      background: C.pillBg,
-      fontSize: 12, color: C.text2,
-      whiteSpace: 'nowrap', flexShrink: 0,
-    }}>
-      <StatusDot tone={tone} size={7}/>
-      <span style={{ color: C.text3 }}>{label}</span>
-      <span className="mono tnum" style={{ color: C.text, fontWeight: 600 }}>{value}</span>
-    </div>
-  );
+
 
   return (
-    <div style={{
+    <div className="edge-status-bar" style={{
       height: 48, paddingLeft: 16, paddingRight: 14,
       display: 'flex', alignItems: 'center', gap: 12,
       background: C.bar,
@@ -86,18 +108,18 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
       position: 'relative', zIndex: 30, flexShrink: 0,
     }}>
       {/* Left: device identity (user menu 在右侧 line 169 LF 2026-06-21) */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flexShrink: 0 }}>
-        <div style={{
+      <div className="edge-status-identity" style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flexShrink: 0 }}>
+        <div className="edge-status-logo" style={{
           width: 28, height: 28, borderRadius: 8,
           background: C.logoBg, color: 'white',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
           fontSize: 11, fontWeight: 700, letterSpacing: 0.5,
           boxShadow: '0 2px 4px rgba(37,99,235,0.3)',
         }}>E</div>
-        <div style={{ minWidth: 0, lineHeight: 1.15 }}>
-          <div style={{ fontSize: 13, fontWeight: 600, color: C.text, display: 'flex', alignItems: 'center', gap: 6 }}>
+        <div className="edge-status-device" style={{ minWidth: 0, lineHeight: 1.15 }}>
+          <div className="edge-status-device-name" style={{ fontSize: 13, fontWeight: 600, color: C.text, display: 'flex', alignItems: 'center', gap: 6 }}>
             {deviceLabel || DEVICE.name}
-            <span style={{
+            <span className="edge-status-dept" style={{
               fontSize: 9.5, padding: '1px 5px', borderRadius: 3,
               background: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.06)',
               color: C.text3, fontWeight: 600,
@@ -105,7 +127,7 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
             }}>{DEVICE.dept}</span>
             {/* chevDown 删除 — 装饰但不触发下拉是误导 (LF 2026-06-21) */}
           </div>
-          <div style={{ fontSize: 10.5, color: C.text3, marginTop: 1, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <div className="edge-status-device-details" style={{ fontSize: 10.5, color: C.text3, marginTop: 1, display: 'flex', alignItems: 'center', gap: 6 }}>
             <span>{DEVICE.site}</span>
             <span style={{ color: C.sep }}>·</span>
             <span className="mono">{DEVICE.sn}</span>
@@ -114,11 +136,11 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
       </div>
 
       {/* Center: health pills */}
-      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'nowrap', overflow: 'hidden' }}>
-        <Pill tone={cpu < 70 ? 'green' : 'amber'} label="CPU" value={`${cpu}%`}/>
-        <Pill tone={gpu < 80 ? 'green' : 'amber'} label="GPU" value={`${gpu}%`}/>
-        <Pill tone={mem < 80 ? 'green' : 'amber'} label="内存" value={`${mem}%`}/>
-        <div onClick={onOpenAlerts} style={{
+      <div className="edge-status-health" style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'nowrap', overflow: 'hidden' }}>
+        <MetricPill tone={cpu < 70 ? 'green' : 'amber'} label="CPU" value={`${cpu}%`} colors={C}/>
+        <MetricPill tone={gpu < 80 ? 'green' : 'amber'} label="GPU" value={`${gpu}%`} colors={C}/>
+        <MetricPill tone={mem < 80 ? 'green' : 'amber'} label="内存" value={`${mem}%`} colors={C}/>
+        <button type="button" className="edge-status-alert" aria-label={`${alertCount} 条告警`} onClick={onOpenAlerts} style={{
           display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 9px 3px 8px', borderRadius: 999,
           background: alertCount > 0 ? C.alertBg : C.pillBg,
           border: alertCount > 0 ? `1px solid ${C.alertBd}` : '1px solid transparent',
@@ -129,26 +151,13 @@ export function StatusBar({ cpu, gpu, mem, alertCount, online, lastSync, onOpenA
           <Icon name="alertTri" size={12} stroke={2}/>
           <span className="tnum" style={{ fontWeight: 600 }}>{alertCount}</span>
           <span>条告警</span>
-        </div>
+        </button>
       </div>
 
       {/* Right: cloud + time */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
-        <div style={{
-          display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px',
-          borderRadius: 999,
-          background: online ? C.cloudOnBg : C.cloudOffBg,
-          color: online ? C.cloudOnFg : C.cloudOffFg,
-          fontSize: 11.5, fontWeight: 500,
-          border: `1px solid ${online ? C.cloudOnBd : C.cloudOffBd}`,
-          whiteSpace: 'nowrap',
-        }}>
-          <Icon name={online ? 'cloud' : 'cloudOff'} size={13} stroke={1.8}/>
-          <span style={{ fontWeight: 600 }}>{online ? '云端在线' : '云端离线'}</span>
-          <span style={{ opacity: 0.6 }}>·</span>
-          <span style={{ color: C.cloudSyncFg }}>同步 {lastSync}</span>
-        </div>
-        <div style={{
+      <div className="edge-status-actions" style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
+        <CloudLinkIndicator status={online} />
+        <div className="edge-status-time" style={{
           display: 'inline-flex', alignItems: 'center', gap: 8,
           padding: '4px 10px', borderRadius: 8,
           background: C.timeBg,
@@ -183,8 +192,8 @@ function UserMenu({ user, theme, onLogout }) {
   const dark = theme === 'dark'
   const initial = (user || '?').charAt(0).toUpperCase()
   return (
-    <div ref={ref} style={{ position: 'relative' }}>
-      <button onClick={() => setOpen(o => !o)} title={user} style={{
+    <div ref={ref} className="edge-status-user" style={{ position: 'relative' }}>
+      <button className="edge-status-user-button" aria-label={`用户菜单：${user}`} onClick={() => setOpen(o => !o)} title={user} style={{
         display: 'inline-flex', alignItems: 'center', gap: 6,
         height: 28, padding: '0 4px 0 4px', border: 'none',
         background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.04)',
diff --git a/console-ui/src/components/TabBar.jsx b/console-ui/src/components/TabBar.jsx
index 053aad4..86cbc4e 100644
--- a/console-ui/src/components/TabBar.jsx
+++ b/console-ui/src/components/TabBar.jsx
@@ -1,4 +1,4 @@
-import { createElement, useId } from 'react'
+import { createElement, useEffect, useId } from 'react'
 import { T } from '../tokens'
 import { motion, springs, useMotionPref } from '../motion'
 
@@ -13,6 +13,7 @@ const defaultItemStyle = {
   boxSizing: 'border-box',
   whiteSpace: 'nowrap',
   fontFamily: 'inherit',
+  flexShrink: 0,
 }
 
 function resolveStyle(style, tab, active) {
@@ -43,10 +44,33 @@ export default function TabBar({
 }) {
   const layoutId = `tabbar-${useId()}-indicator`
   const pref = useMotionPref()
+  const tablistId = `tabbar-${useId()}`
+
+  useEffect(() => {
+    document.getElementById(tablistId)
+      ?.querySelector('[role="tab"][aria-selected="true"]')
+      ?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
+  }, [active, tablistId])
+
+  const selectAt = (index) => {
+    const tab = tabs[index]
+    if (!tab) return
+    const id = getId(tab)
+    onChange(id, tab)
+    requestAnimationFrame(() => {
+      document.getElementById(tablistId)?.querySelectorAll('[role="tab"]')?.[index]?.focus?.()
+    })
+  }
 
   return (
-    <div style={{ display: 'flex', gap: 2, ...style }}>
-      {tabs.map((tab) => {
+    <div
+      id={tablistId}
+      className="edge-tabbar"
+      role="tablist"
+      aria-orientation="horizontal"
+      style={{ display: 'flex', gap: 2, ...style }}
+    >
+      {tabs.map((tab, index) => {
         const id = getId(tab)
         const selected = active === id
         const extraProps = getItemProps ? getItemProps(tab, selected) : null
@@ -60,12 +84,32 @@ export default function TabBar({
           pointerEvents: 'none',
           [indicatorPosition]: 0,
         }
+        const onKeyDown = (event) => {
+          extraProps?.onKeyDown?.(event)
+          if (event.defaultPrevented) return
+          let next = null
+          if (event.key === 'ArrowRight') next = (index + 1) % tabs.length
+          if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length
+          if (event.key === 'Home') next = 0
+          if (event.key === 'End') next = tabs.length - 1
+          if (next == null) return
+          event.preventDefault()
+          selectAt(next)
+        }
 
         return createElement(itemAs, {
+          ...extraProps,
           key: id,
-          onClick: () => onChange(id, tab),
+          ref: extraProps?.ref,
+          role: extraProps?.role || 'tab',
+          'aria-selected': selected,
+          tabIndex: selected ? 0 : -1,
+          onClick: (event) => {
+            extraProps?.onClick?.(event)
+            if (!event.defaultPrevented) onChange(id, tab)
+          },
+          onKeyDown,
           type: itemAs === 'button' ? 'button' : undefined,
-          ...extraProps,
           style: {
             ...defaultItemStyle,
             ...(reserveIndicatorSpace ? { [indicatorPosition === 'top' ? 'borderTop' : 'borderBottom']: '2px solid transparent' } : null),
diff --git a/console-ui/src/components/Toast.jsx b/console-ui/src/components/Toast.jsx
index bab0de4..d244abb 100644
--- a/console-ui/src/components/Toast.jsx
+++ b/console-ui/src/components/Toast.jsx
@@ -59,7 +59,7 @@ export function ToastProvider({ children }) {
 function ToastStack({ items }) {
   const pref = useMotionPref()
   return (
-    <div style={{
+    <div className="edge-toast-stack" style={{
       position: 'fixed', left: '50%', bottom: 28, zIndex: 2000,
       transform: 'translateX(-50%)',
       display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
diff --git a/console-ui/src/hooks/useViewportEnvironment.js b/console-ui/src/hooks/useViewportEnvironment.js
new file mode 100644
index 0000000..81dd152
--- /dev/null
+++ b/console-ui/src/hooks/useViewportEnvironment.js
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+
+const MEDIA = {
+  phone: '(max-width: 639px)',
+  tablet: '(min-width: 640px) and (max-width: 1023px)',
+  desktop: '(min-width: 1024px)',
+  coarsePointer: '(pointer: coarse)',
+  noHover: '(hover: none)',
+  portrait: '(orientation: portrait)',
+}
+
+function readEnvironment() {
+  if (typeof window === 'undefined') {
+    return {
+      width: 1024,
+      height: 768,
+      visualViewportHeight: 768,
+      isPhone: false,
+      isTablet: false,
+      isDesktop: true,
+      isPortrait: false,
+      coarsePointer: false,
+      noHover: false,
+    }
+  }
+
+  const matches = (query) => window.matchMedia(query).matches
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    visualViewportHeight: window.visualViewport?.height || window.innerHeight,
+    isPhone: matches(MEDIA.phone),
+    isTablet: matches(MEDIA.tablet),
+    isDesktop: matches(MEDIA.desktop),
+    isPortrait: matches(MEDIA.portrait),
+    coarsePointer: matches(MEDIA.coarsePointer),
+    noHover: matches(MEDIA.noHover),
+  }
+}
+
+export function useViewportEnvironment() {
+  const [environment, setEnvironment] = useState(readEnvironment)
+
+  useEffect(() => {
+    const mediaQueries = Object.values(MEDIA).map(query => window.matchMedia(query))
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => setEnvironment(readEnvironment()))
+    }
+
+    mediaQueries.forEach(query => query.addEventListener('change', update))
+    window.addEventListener('resize', update)
+    window.addEventListener('orientationchange', update)
+    window.visualViewport?.addEventListener('resize', update)
+    window.visualViewport?.addEventListener('scroll', update)
+
+    update()
+    return () => {
+      cancelAnimationFrame(frame)
+      mediaQueries.forEach(query => query.removeEventListener('change', update))
+      window.removeEventListener('resize', update)
+      window.removeEventListener('orientationchange', update)
+      window.visualViewport?.removeEventListener('resize', update)
+      window.visualViewport?.removeEventListener('scroll', update)
+    }
+  }, [])
+
+  const compactWindow = environment.isPhone || (environment.isTablet && environment.isPortrait)
+  return {
+    ...environment,
+    compactWindow,
+    touchEnvironment: environment.coarsePointer || environment.noHover,
+  }
+}
+
+export { MEDIA as viewportMedia }
diff --git a/console-ui/src/pages/AIActivity.jsx b/console-ui/src/pages/AIActivity.jsx
index 85ff96c..a6b31a5 100644
--- a/console-ui/src/pages/AIActivity.jsx
+++ b/console-ui/src/pages/AIActivity.jsx
@@ -3,6 +3,7 @@ import { T } from '../tokens'
 import { Icon } from '../icons'
 import { cleanupStaleCodex, useAIActivity, useAITranscript } from '../hooks/useApi'
 import TabBar from '../components/TabBar'
+import { useViewportEnvironment } from '../hooks/useViewportEnvironment'
 
 const aiTabItemStyle = {
   height: 39,
@@ -282,6 +283,7 @@ function TranscriptTail({ card }) {
 function AgentBoard({ board }) {
   const cards = board?.agents || [];
   const [selectedId, setSelectedId] = useState('');
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
 
   useEffect(() => {
     if (!cards.length) {
@@ -308,8 +310,8 @@ function AgentBoard({ board }) {
 
   const meta = boardStatusMeta(selected?.status);
   return (
-    <div style={{ padding: 12, display: 'grid', gridTemplateColumns: '360px 1fr', gap: 12, minHeight: 560 }}>
-      <div style={{ border: `1px solid ${T.border}`, borderRadius: 8, overflow: 'hidden', background: T.surface, minHeight: 0 }}>
+    <div className={`edge-ai-board${mobileDetailOpen ? ' is-detail-open' : ''}`} style={{ padding: 12, display: 'grid', gridTemplateColumns: '360px 1fr', gap: 12, minHeight: 560 }}>
+      <div className="edge-ai-board-list" style={{ border: `1px solid ${T.border}`, borderRadius: 8, overflow: 'hidden', background: T.surface, minHeight: 0 }}>
         <div style={{ padding: '11px 14px', display: 'flex', alignItems: 'center', borderBottom: `1px solid ${T.borderSoft}` }}>
           <div style={{ fontSize: 13, fontWeight: 900, color: T.ink }}>Agent Board</div>
           <div style={{ flex: 1 }}/>
@@ -341,7 +343,7 @@ function AgentBoard({ board }) {
                 {group.cards.length ? (
                   <div style={{ display: 'grid', gap: 7, padding: 8 }}>
                     {group.cards.map(card => (
-                      <BoardAgentRow key={card.id} card={card} active={selected?.id === card.id} onClick={() => setSelectedId(card.id)}/>
+                      <BoardAgentRow key={card.id} card={card} active={selected?.id === card.id} onClick={() => { setSelectedId(card.id); setMobileDetailOpen(true); }}/>
                     ))}
                   </div>
                 ) : (
@@ -352,8 +354,11 @@ function AgentBoard({ board }) {
           })}
         </div>
       </div>
-      <div style={{ minWidth: 0, border: `1px solid ${T.border}`, borderRadius: 8, overflow: 'hidden', background: T.surface, display: 'grid', gridTemplateRows: 'auto 1fr', minHeight: 0 }}>
+      <div className="edge-ai-board-detail" style={{ minWidth: 0, border: `1px solid ${T.border}`, borderRadius: 8, overflow: 'hidden', background: T.surface, display: 'grid', gridTemplateRows: 'auto 1fr', minHeight: 0 }}>
         <div style={{ padding: '13px 15px', borderBottom: `1px solid ${T.borderSoft}`, display: 'flex', alignItems: 'center', gap: 10 }}>
+          <button type="button" className="edge-ai-back" onClick={() => setMobileDetailOpen(false)} aria-label="返回 Agent 列表">
+            <Icon name="chevLeft" size={16} stroke={2}/><span>列表</span>
+          </button>
           <span style={{ width: 10, height: 10, borderRadius: 5, background: meta.color, flexShrink: 0 }}/>
           <div style={{ minWidth: 0, flex: 1 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
@@ -449,7 +454,8 @@ function Issues({ issues }) {
 function ProcessTable({ rows }) {
   if (!rows?.length) return <Empty />;
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div className="edge-ai-data-scroll">
+      <table style={{ width: '100%', minWidth: 760, borderCollapse: 'collapse' }}>
       <thead><tr>
         <th style={{ ...th, textAlign: 'left' }}>PID</th>
         <th style={{ ...th, textAlign: 'left' }}>进程</th>
@@ -475,8 +481,9 @@ function ProcessTable({ rows }) {
             <td style={td}>{fmtAge(p.ageSec)}</td>
           </tr>
         ))}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -498,8 +505,9 @@ function ProcessConsole({ rows }) {
       <div style={{ marginBottom: 12, color: T.ink3, fontSize: 12.5 }}>
         共 <b style={{ color: T.ink }}>{rows.length}</b> 个进程 · 运行 <b style={{ color: T.green }}>{runningCount}</b> · 异常 <b style={{ color: T.red }}>{errorCount}</b>
       </div>
-      <div style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden', background: T.surface }}>
-        <div style={{
+      <div className="edge-ai-data-scroll" style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, background: T.surface }}>
+        <div style={{ minWidth: 720 }}>
+          <div style={{
           display: 'grid',
           gridTemplateColumns: '130px 150px 120px 1fr 86px',
           padding: '10px 16px',
@@ -538,8 +546,9 @@ function ProcessConsole({ rows }) {
                 <SoftButton tone="red" disabled title="暂未开放进程终止接口">终止</SoftButton>
               </div>
             </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </div>
     </div>
   );
@@ -548,7 +557,8 @@ function ProcessConsole({ rows }) {
 function SessionTable({ rows }) {
   if (!rows?.length) return <Empty />;
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div className="edge-ai-data-scroll">
+      <table style={{ width: '100%', minWidth: 820, borderCollapse: 'collapse' }}>
       <thead><tr>
         <th style={{ ...th, textAlign: 'left' }}>会话</th>
         <th style={{ ...th, textAlign: 'left' }}>模型/状态</th>
@@ -581,8 +591,9 @@ function SessionTable({ rows }) {
             <td style={td}>{fmtTime(s.updatedAt)}</td>
           </tr>
         ))}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -679,7 +690,8 @@ function SessionsConsole({ rows }) {
 function WorkerTable({ rows }) {
   if (!rows?.length) return <Empty />;
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div className="edge-ai-data-scroll">
+      <table style={{ width: '100%', minWidth: 760, borderCollapse: 'collapse' }}>
       <thead><tr>
         <th style={{ ...th, textAlign: 'left' }}>Worker</th>
         <th style={{ ...th, textAlign: 'left' }}>模型/权限</th>
@@ -710,8 +722,9 @@ function WorkerTable({ rows }) {
             <td style={td}><span className="mono" style={{ fontSize: 10.5, color: T.ink3 }}>{w.cwd || '-'}</span></td>
           </tr>
         ))}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -962,9 +975,11 @@ function CodexCleanupPanel({ onDone }) {
 
 export default function AIActivity() {
   const { data, loading, error, refresh } = useAIActivity(5000);
+  const { isPhone } = useViewportEnvironment();
   const agents = data?.agentTypes || [];
   const [agentId, setAgentId] = useState('');
   const [tab, setTab] = useState('board');
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const active = useMemo(() => {
     if (!agents.length) return null;
     return agents.find(a => a.id === agentId) || agents[0];
@@ -976,9 +991,9 @@ export default function AIActivity() {
   const activeIssue = active?.issues?.some(i => i.severity === 'critical');
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'hidden' }}>
-      <div style={{ padding: '14px 22px', background: T.surface, borderBottom: `1px solid ${T.border}`, flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+    <div className="edge-page edge-ai-page" style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'hidden' }}>
+      <div className="edge-ai-header" style={{ padding: '14px 22px', background: T.surface, borderBottom: `1px solid ${T.border}`, flexShrink: 0 }}>
+        <div className="edge-ai-header-row" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
           <span style={{
             width: 40,
             height: 40,
@@ -1004,7 +1019,7 @@ export default function AIActivity() {
           {data?.generatedAt && <div style={{ fontSize: 11, color: T.ink3 }}>更新 {fmtTime(data.generatedAt)}</div>}
           <SoftButton tone="slate" icon="refresh" onClick={refresh}>刷新</SoftButton>
         </div>
-        <div style={{ display: 'flex', gap: 10, marginTop: 13, flexWrap: 'wrap' }}>
+        <div className="edge-ai-summary" style={{ display: 'flex', gap: 10, marginTop: 13, flexWrap: 'wrap' }}>
           <Stat icon="brain" label="Agent 类型" value={summary.agentTypes || agents.length} tone={T.blue}/>
           <Stat icon="dashboard" label="Board 卡片" value={board.agents?.length || 0} tone={T.teal}/>
           <Stat icon="cpu" label="Claude 进程" value={summary.claudeProcesses || 0} tone={T.indigo}/>
@@ -1014,8 +1029,8 @@ export default function AIActivity() {
         </div>
       </div>
 
-      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr', gap: 12, padding: 12, minHeight: 0 }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, overflow: 'hidden' }}>
+      <div className={`edge-ai-layout${mobileDetailOpen ? ' is-detail-open' : ''}`} style={{ flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr', gap: 12, padding: 12, minHeight: 0 }}>
+        <div className="edge-ai-master" style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, overflow: 'hidden' }}>
           <Section title="Agent 类型">
             <div style={{
               display: 'flex',
@@ -1028,7 +1043,7 @@ export default function AIActivity() {
             }}>
               {agents.length ? agents.map(a => (
                 <AgentCard key={a.id} agent={a} active={active?.id === a.id}
-                  onClick={() => { setAgentId(a.id); setTab('overview'); }}/>
+                  onClick={() => { setAgentId(a.id); setTab('overview'); if (isPhone) setMobileDetailOpen(true); }}/>
               )) : <Empty text={loading ? '正在加载...' : '没有发现 agent 活动'} />}
             </div>
           </Section>
@@ -1039,7 +1054,7 @@ export default function AIActivity() {
           </div>
         </div>
 
-        <div style={{ minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div className="edge-ai-detail" style={{ minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
           <div style={{
             background: T.surface,
             border: `1px solid ${T.border}`,
@@ -1054,6 +1069,9 @@ export default function AIActivity() {
               gap: 12,
               borderBottom: `1px solid ${T.borderSoft}`,
             }}>
+              <button type="button" className="edge-ai-back" onClick={() => setMobileDetailOpen(false)} aria-label="返回 Agent 类型列表">
+                <Icon name="chevLeft" size={16} stroke={2}/><span>列表</span>
+              </button>
               {active && <AgentIcon id={active.id} issue={activeIssue} active/>}
               <div style={{ minWidth: 0 }}>
                 <div style={{ ...T.type.heading, fontWeight: 900, color: T.ink }}>{active ? active.name : '详情'}</div>
@@ -1100,7 +1118,7 @@ export default function AIActivity() {
               {active && tab === 'overview' && (
                 <div style={{ padding: 12, display: 'grid', gap: 10 }}>
                   {active.id === 'codex' && <CodexCleanupPanel/>}
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(120px, 1fr))', gap: 10 }}>
+                  <div className="edge-ai-stat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(120px, 1fr))', gap: 10 }}>
                     <Stat icon="cpu" label="进程" value={active.processes?.length || 0}/>
                     <Stat icon="message" label="会话" value={active.sessions?.length || 0}/>
                     <Stat icon="file" label="配置" value={active.configs?.filter(c => c.exists).length || 0}/>
diff --git a/console-ui/src/pages/AlertCenter.jsx b/console-ui/src/pages/AlertCenter.jsx
index 783d548..1f3a2f2 100644
--- a/console-ui/src/pages/AlertCenter.jsx
+++ b/console-ui/src/pages/AlertCenter.jsx
@@ -29,11 +29,11 @@ export default function AlertCenter({ authed, onRequireAuth }) {
   };
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt }}>
+    <div className="edge-page edge-alerts-page" style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt }}>
       {/* header */}
       <div style={{ padding: '18px 24px 0', background: T.surface,
         borderBottom: `1px solid ${T.border}` }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
+        <div className="edge-page-header-row" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
           <div>
             <div style={{ fontSize: 17, fontWeight: 700, color: T.ink, letterSpacing: '-0.01em' }}>告警中心</div>
             <div style={{ fontSize: 11.5, color: T.ink3, marginTop: 4 }}>
@@ -105,7 +105,7 @@ export default function AlertCenter({ authed, onRequireAuth }) {
                 borderLeft: `3px solid ${s.color}`,
                 overflow: 'hidden',
               }}>
-                <div onClick={() => setExpanded(open ? null : a.id)} style={{
+                <div className="edge-alert-row" onClick={() => setExpanded(open ? null : a.id)} style={{
                   padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
                   cursor: 'pointer',
                 }}>
diff --git a/console-ui/src/pages/AppStore.jsx b/console-ui/src/pages/AppStore.jsx
index b3dcb51..99dca3c 100644
--- a/console-ui/src/pages/AppStore.jsx
+++ b/console-ui/src/pages/AppStore.jsx
@@ -127,11 +127,11 @@ function DeployDialog({ app, onClose, onSuccess }) {
   };
 
   return (
-    <div style={{
+    <div className="edge-modal-backdrop" style={{
       position: 'fixed', inset: 0, zIndex: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
       background: 'rgba(15,23,42,0.5)', backdropFilter: 'blur(4px)',
     }} onClick={onClose}>
-      <div onClick={e => e.stopPropagation()} style={{
+      <div className="edge-responsive-modal" onClick={e => e.stopPropagation()} style={{
         width: 480, maxHeight: '80vh', borderRadius: 14, background: T.surface,
         border: `1px solid ${T.border}`, boxShadow: '0 24px 48px -12px rgba(0,0,0,0.2)',
         display: 'flex', flexDirection: 'column', overflow: 'hidden',
@@ -277,7 +277,7 @@ function AppStoreDetail({ app, onBack, authed, onRequireAuth, onOpenApp, onInsta
   };
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'auto' }}>
+    <div className="edge-page edge-store-detail" style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'auto' }}>
       <div style={{ padding: '12px 24px', borderBottom: `1px solid ${T.border}`, background: T.surface,
         display: 'flex', alignItems: 'center', gap: 10 }}>
         <button onClick={onBack} className="edge-press edge-btn-secondary" style={{ ...btnSecondary, height: 28, padding: '0 10px' }}>
@@ -290,7 +290,7 @@ function AppStoreDetail({ app, onBack, authed, onRequireAuth, onOpenApp, onInsta
       </div>
 
       <div style={{ padding: 24 }}>
-        <div style={{
+        <div className="edge-store-detail-hero" style={{
           background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12,
           padding: 24, marginBottom: 16,
           display: 'flex', alignItems: 'flex-start', gap: 18,
@@ -552,9 +552,9 @@ export default function AppStore({ onOpenApp, authed, onRequireAuth }) {
   }
 
   return (
-    <div style={{ flex: 1, display: 'flex', background: T.surfaceAlt, overflow: 'hidden' }}>
+    <div className="edge-page edge-store-page" style={{ flex: 1, display: 'flex', background: T.surfaceAlt, overflow: 'hidden' }}>
       {/* Sidebar */}
-      <div style={{
+      <div className="edge-store-sidebar" style={{
         width: 200, flexShrink: 0, padding: '20px 12px',
         background: T.surface, borderRight: `1px solid ${T.border}`,
         overflow: 'auto',
@@ -608,7 +608,7 @@ export default function AppStore({ onOpenApp, authed, onRequireAuth }) {
       </div>
 
       {/* Main */}
-      <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
+      <div className="edge-store-main" style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
         {/* 顶部 3 tab —— 对齐 1Panel 应用商店「全部 / 已安装 / 可升级」交互。
             tab 是状态主轴，sidebar category 是二次过滤维度。tab 计数实时反映
             cross-reference 结果（store apps × 已部署 apps） */}
@@ -638,7 +638,7 @@ export default function AppStore({ onOpenApp, authed, onRequireAuth }) {
             （之前是 slice(0,4) 粗暴拿前 4 个，没有"推荐"机制）
             tab=all 时显示推荐区；installed/upgradable tab 隐藏（避免推荐位干扰用户的「已安装」视图） */}
         {tab === 'all' && platformApps && platformApps.filter(a => a.pinned).length > 0 && (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 18 }}>
+        <div className="edge-store-featured" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 18 }}>
           {platformApps.filter(a => a.pinned).slice(0, 4).map((f, i) => {
             const { bg } = guessAppStyle(f.id, f.name, f.category);
             return (
@@ -678,7 +678,7 @@ export default function AppStore({ onOpenApp, authed, onRequireAuth }) {
         )}
 
         {/* Toolbar */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+        <div className="edge-store-toolbar" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
           <div style={{ fontSize: 14, fontWeight: 700, color: T.ink }}>
             {categories.find(c => c.id === cat)?.name}
           </div>
diff --git a/console-ui/src/pages/Dashboard.jsx b/console-ui/src/pages/Dashboard.jsx
index b6f6338..e74a6de 100644
--- a/console-ui/src/pages/Dashboard.jsx
+++ b/console-ui/src/pages/Dashboard.jsx
@@ -23,7 +23,7 @@ function ServiceTable() {
   const head = { fontSize: 10.5, fontWeight: 600, color: T.ink3,
     letterSpacing: '0.06em', textTransform: 'uppercase' };
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <table className="edge-wide-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
       <thead>
         <tr style={{ background: '#fafbfc' }}>
           <th style={{ ...head, textAlign: 'left',  padding: '10px 16px' }}>服务</th>
@@ -115,7 +115,7 @@ export default function DashboardApp({ onOpenApp }) {
   const cpuCount = metrics && metrics.cpuPercent ? metrics.cpuPercent.length : null;
 
   return (
-    <div style={{
+    <div className="edge-page edge-dashboard-page" style={{
       flex: 1, padding: '20px 24px', overflow: 'auto',
       background: T.surfaceAlt,
     }}>
@@ -134,7 +134,7 @@ export default function DashboardApp({ onOpenApp }) {
       </div>
 
       {/* 4 SimpleResourceCard (AC-2) */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14 }}>
+      <div className="edge-stat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14 }}>
         <SimpleResourceCard icon="cpu" label="CPU 使用率"
           color={T.blue}
           value={cpu == null ? null : `${cpu}%`}
@@ -183,7 +183,7 @@ export default function DashboardApp({ onOpenApp }) {
           <div style={{ flex: 1 }}/>
           <span style={{ fontSize: 11.5, color: T.ink3 }}>共 {liveApps.filter(a=>a.kind==='app').length} 个 · {liveApps.filter(a=>a.kind==='app'&&a.state==='running').length} 运行中 · {liveApps.filter(a=>a.kind==='app'&&a.state==='error').length} 异常</span>
         </div>
-        <ServiceTable/>
+        <div className="edge-table-scroll"><ServiceTable/></div>
       </div>
     </div>
   );
diff --git a/console-ui/src/pages/DiskManager.jsx b/console-ui/src/pages/DiskManager.jsx
index e33f5e5..43171d9 100644
--- a/console-ui/src/pages/DiskManager.jsx
+++ b/console-ui/src/pages/DiskManager.jsx
@@ -141,7 +141,7 @@ export default function DiskManager() {
   }));
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
+    <div className="edge-page edge-disks-page" style={{ flex: 1, display: 'flex', flexDirection: 'column',
       background: T.surfaceAlt, overflow: 'hidden' }}>
       {/* Header */}
       <div style={{
@@ -182,7 +182,7 @@ export default function DiskManager() {
         )}
         {/* 顶部：统计卡等宽均分 —— [平均] + 每块磁盘一张，点击选中深色高亮 */}
         {disks.length > 0 && (
-          <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
+          <div className="edge-card-strip" style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
             <DiskStatCard aggregate io={aggIO} count={physIO.length}
               active={activeDev === 'avg'} onClick={() => setSelected('avg')}/>
             {disks.map(d => {
@@ -534,7 +534,7 @@ function DiskCard({ disk, io }) {
       </div>
 
       {/* 分区表 */}
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
+      <div className="edge-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
         <thead>
           <tr style={{ background: '#fafbfc' }}>
             <th style={{ ...th, textAlign: 'left' }}>分区</th>
@@ -555,7 +555,7 @@ function DiskCard({ disk, io }) {
             </td></tr>
           )}
         </tbody>
-      </table>
+      </table></div>
     </div>
   );
 }
diff --git a/console-ui/src/pages/Files.jsx b/console-ui/src/pages/Files.jsx
index 8f13a8c..8ebae55 100644
--- a/console-ui/src/pages/Files.jsx
+++ b/console-ui/src/pages/Files.jsx
@@ -5,6 +5,7 @@ import { StatusDot, Chip, Sparkline } from '../components/ui'
 import { useMetrics, authFetch } from '../hooks/useApi'
 import { FileIcon } from '../components/AppShell'
 import { useToast } from '../components/toastContext'
+import { useViewportEnvironment } from '../hooks/useViewportEnvironment'
 
 const btnSecondary = {
   display: 'inline-flex', alignItems: 'center', gap: 5,
@@ -105,6 +106,8 @@ export default function FilesFace() {
   const [preview, setPreview] = useState(null); // { name, url, status: 'loading'|'ok'|'err' }
   const [showDetails, setShowDetails] = useState(true); // 右侧详情面板开关，类似 Finder 的显示简介
   const [uploading, setUploading] = useState(false);
+  const { isPhone, coarsePointer } = useViewportEnvironment();
+  const touchNavigation = isPhone || coarsePointer;
   // 让 paste 事件稳定触发：容器可 focus + 挂载后自动拿焦点
   const rootRef = useRef(null);
   const fileInputRef = useRef(null);
@@ -301,9 +304,10 @@ export default function FilesFace() {
     <div
       ref={rootRef}
       tabIndex={0}
+      className="edge-page edge-files-page"
       style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surface, overflow: 'hidden', outline: 'none' }}>
       {/* Toolbar */}
-      <div style={{
+      <div className="edge-files-toolbar" style={{
         padding: '10px 18px', borderBottom: `1px solid ${T.border}`,
         display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
       }}>
@@ -327,7 +331,7 @@ export default function FilesFace() {
           <Icon name="refresh" size={12} stroke={1.8}/>
         </button>
         {/* Breadcrumb: 工作区 > seg1 > seg2 ... 每段 clickable，根节点 = 「工作区」 */}
-        <div style={{
+        <div className="edge-files-breadcrumb" style={{
           flex: 1, display: 'flex', alignItems: 'center', gap: 4,
           padding: '0 12px', height: 30, borderRadius: 6,
           background: T.surfaceAlt, border: `1px solid ${T.border}`,
@@ -356,7 +360,7 @@ export default function FilesFace() {
             );
           })}
         </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6,
+        <div className="edge-files-search" style={{ display: 'flex', alignItems: 'center', gap: 6,
           padding: '0 10px', height: 30, borderRadius: 6,
           background: T.surfaceAlt, border: `1px solid ${T.border}`,
           fontSize: 12, color: T.ink, width: 240 }}>
@@ -375,7 +379,7 @@ export default function FilesFace() {
         <button
           disabled={uploading}
           onClick={() => fileInputRef.current?.click()}
-          className="edge-press edge-btn-primary"
+          className="edge-files-upload edge-press edge-btn-primary"
           style={{ ...btnPrimary, height: 30, padding: '0 12px',
             opacity: uploading ? 0.65 : 1,
             cursor: uploading ? 'wait' : 'pointer' }}>
@@ -396,7 +400,7 @@ export default function FilesFace() {
       </div>
 
       {/* Disk usage strip */}
-      <div style={{
+      <div className="edge-files-usage" style={{
         padding: '10px 18px', background: T.surfaceAlt,
         borderBottom: `1px solid ${T.borderSoft}`, flexShrink: 0,
         display: 'flex', alignItems: 'center', gap: 14, fontSize: 11.5,
@@ -418,9 +422,9 @@ export default function FilesFace() {
         </button>
       </div>
 
-      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+      <div className="edge-files-workspace" style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
         {/* Sidebar shortcuts */}
-        <div style={{ width: 200, flexShrink: 0, borderRight: `1px solid ${T.borderSoft}`,
+        <div className="edge-files-sidebar" style={{ width: 200, flexShrink: 0, borderRight: `1px solid ${T.borderSoft}`,
           background: T.surfaceAlt, padding: '12px 8px' }}>
           <div style={{ fontSize: 10.5, color: T.ink3, fontWeight: 600,
             letterSpacing: '0.06em', textTransform: 'uppercase', padding: '4px 10px 6px' }}>快速访问</div>
@@ -460,7 +464,7 @@ export default function FilesFace() {
           </div>
         )}
         {/* File list */}
-        <div style={{ flex: 1, overflow: 'auto' }}>
+        <div className="edge-files-list edge-table-scroll" style={{ flex: 1, overflow: 'auto' }}>
           <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
             <thead>
               <tr style={{ background: T.surfaceAlt, borderBottom: `1px solid ${T.border}` }}>
@@ -472,11 +476,15 @@ export default function FilesFace() {
               </tr>
             </thead>
             <tbody>
-              {items.map((f, i) => {
+              {items.map((f) => {
                 const on = selected === f.name;
+                const openDirectory = () => setCurPath(curPath ? `${curPath}/${f.name}` : f.name);
                 return (
-                  <tr key={f.name} onClick={() => setSelected(f.name)}
-                    onDoubleClick={() => { if (f.type === 'dir') setCurPath(curPath ? `${curPath}/${f.name}` : f.name); }}
+                  <tr key={f.name} onClick={() => {
+                      if (touchNavigation && f.type === 'dir') openDirectory();
+                      else setSelected(f.name);
+                    }}
+                    onDoubleClick={() => { if (f.type === 'dir') openDirectory(); }}
                     style={{
                     background: on ? '#eff4ff' : 'transparent',
                     borderTop: `1px solid ${T.borderSoft}`, cursor: 'pointer',
@@ -492,22 +500,40 @@ export default function FilesFace() {
                     <td style={{ padding: '8px 14px', textAlign: 'right', color: T.ink3 }} className="mono">{f.size}</td>
                     <td style={{ padding: '8px 14px', textAlign: 'right', color: T.ink3 }} className="mono">{f.modified || ''}</td>
                     <td style={{ padding: '8px 14px', textAlign: 'right' }}>
-                      {f.absPath && (
-                        <button
-                          title={`复制路径: ${f.absPath}`}
-                          onClick={async (e) => {
-                            e.stopPropagation();
-                            const ok = await copyText(f.absPath);
-                            if (ok) toast.ok(`已复制路径 ${f.absPath}`);
-                            else toast.err('复制失败');
-                          }}
-                          style={{
-                            border: 'none', background: 'transparent', cursor: 'pointer',
-                            color: T.ink4, padding: 2, display: 'inline-flex',
-                          }}>
-                          <Icon name="copy" size={13} stroke={1.8}/>
-                        </button>
-                      )}
+                      <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end', gap: 4 }}>
+                        {f.type === 'dir' && !touchNavigation && (
+                          <button
+                            type="button"
+                            title={`打开目录 ${f.name}`}
+                            aria-label={`打开目录 ${f.name}`}
+                            onClick={(e) => { e.stopPropagation(); openDirectory(); }}
+                            className="edge-file-open"
+                            style={{
+                              border: `1px solid ${T.border}`, background: T.surface, cursor: 'pointer',
+                              color: T.blueDeep, borderRadius: 6, padding: '0 8px', display: 'inline-flex',
+                              alignItems: 'center', gap: 4, height: 28, fontSize: 11.5, fontWeight: 600,
+                            }}>
+                            <Icon name="folder" size={12} stroke={1.8}/>打开
+                          </button>
+                        )}
+                        {f.absPath && (
+                          <button
+                            title={`复制路径: ${f.absPath}`}
+                            aria-label={`复制路径 ${f.name}`}
+                            onClick={async (e) => {
+                              e.stopPropagation();
+                              const ok = await copyText(f.absPath);
+                              if (ok) toast.ok(`已复制路径 ${f.absPath}`);
+                              else toast.err('复制失败');
+                            }}
+                            style={{
+                              border: 'none', background: 'transparent', cursor: 'pointer',
+                              color: T.ink4, padding: 2, display: 'inline-flex',
+                            }}>
+                            <Icon name="copy" size={13} stroke={1.8}/>
+                          </button>
+                        )}
+                      </div>
                     </td>
                   </tr>
                 );
@@ -523,7 +549,7 @@ export default function FilesFace() {
           if (!item) return null;
           const isImg = item.type !== 'dir' && isImageType(item.type);
           return (
-            <div style={{
+            <div className="edge-files-detail" style={{
               width: 320, flexShrink: 0, borderLeft: `1px solid ${T.borderSoft}`,
               background: T.surfaceAlt, display: 'flex', flexDirection: 'column',
               overflow: 'hidden',
@@ -650,7 +676,7 @@ export default function FilesFace() {
         })()}
         {/* 未选中 / 详情关闭时占位提示，仅在详情开着但没选文件时显示 */}
         {showDetails && !selected && (
-          <div style={{
+          <div className="edge-files-detail-empty" style={{
             width: 320, flexShrink: 0, borderLeft: `1px solid ${T.borderSoft}`,
             background: T.surfaceAlt, display: 'flex', alignItems: 'center',
             justifyContent: 'center', padding: 20, textAlign: 'center',
diff --git a/console-ui/src/pages/Hardware.jsx b/console-ui/src/pages/Hardware.jsx
index fb6252a..ca6e358 100644
--- a/console-ui/src/pages/Hardware.jsx
+++ b/console-ui/src/pages/Hardware.jsx
@@ -129,7 +129,7 @@ export default function Hardware() {
 
   return (
     // flex:1 + width:100% 确保占满 AppWindow 内容区，避免被父 flex 容器缩到内容宽度
-    <div style={{
+    <div className="edge-page edge-hardware-page" style={{
       flex: 1, width: '100%',
       display: 'flex', flexDirection: 'column', height: '100%',
       background: T.canvas || '#f8fafc',
@@ -144,7 +144,7 @@ export default function Hardware() {
 
 function Toolbar({ data }) {
   return (
-    <div style={{
+    <div className="edge-hardware-toolbar" style={{
       display: 'flex', alignItems: 'center', gap: 10,
       padding: '10px 20px', borderBottom: `1px solid ${T.border}`,
       background: 'white', flexShrink: 0,
@@ -174,14 +174,14 @@ function ReportView({ data }) {
   const [cur, setCur] = useState('overview')
 
   return (
-    <div style={{ display: 'flex', height: '100%', width: '100%' }}>
-      <aside style={{
+    <div className="edge-hardware-layout" style={{ display: 'flex', height: '100%', width: '100%' }}>
+      <aside className="edge-hardware-nav" style={{
         width: 180, flexShrink: 0,
         borderRight: `1px solid ${T.border}`, background: 'white',
         overflow: 'auto', padding: '10px 0',
       }}>
         {sections.map(s => (
-          <button key={s.id} onClick={() => setCur(s.id)} style={{
+          <button key={s.id} onClick={() => setCur(s.id)} aria-pressed={cur === s.id} style={{
             display: 'flex', alignItems: 'center', gap: 8,
             width: '100%', padding: '9px 16px', border: 'none',
             background: cur === s.id ? T.blueSoft : 'transparent',
@@ -195,7 +195,7 @@ function ReportView({ data }) {
           </button>
         ))}
       </aside>
-      <main style={{ flex: 1, minWidth: 0, overflow: 'auto', padding: 20 }}>
+      <main className="edge-hardware-content" style={{ flex: 1, minWidth: 0, overflow: 'auto', padding: 20 }}>
         {cur === 'overview' && <Overview data={data} />}
         {cur === 'sensors'  && <SensorsPane data={data} />}
         {cur === 'gpu'      && <GPUPane data={data} />}
@@ -212,7 +212,7 @@ function ReportView({ data }) {
 
 function Section({ title, cmd, children, action }) {
   return (
-    <div style={{
+    <div className="edge-hardware-section" style={{
       background: 'white', border: `1px solid ${T.border}`, borderRadius: 10,
       marginBottom: 16,
     }}>
@@ -629,7 +629,7 @@ function MemoryPane({ data }) {
                  action={<span style={{ fontSize: 11, color: T.ink3 }}>仅显示已插入槽位</span>}>
           {populated.length === 0 && <div style={{ color: T.ink3 }}>无已插入的 DIMM。</div>}
           {populated.length > 0 && (
-            <table style={{ width: '100%', fontSize: 12.5, ...MONO, borderCollapse: 'collapse' }}>
+            <table className="edge-hardware-table" style={{ width: '100%', fontSize: 12.5, ...MONO, borderCollapse: 'collapse' }}>
               <thead>
                 <tr style={{ color: T.ink3, textAlign: 'left', borderBottom: `1px solid ${T.border}` }}>
                   <th style={{ padding: '6px 4px' }}>槽位</th>
@@ -663,7 +663,7 @@ function MemoryPane({ data }) {
 function StoragePane({ data }) {
   return (
     <Section title="块设备" cmd="lsblk -O">
-      <table style={{ width: '100%', fontSize: 12.5, ...MONO, borderCollapse: 'collapse' }}>
+      <table className="edge-hardware-table" style={{ width: '100%', fontSize: 12.5, ...MONO, borderCollapse: 'collapse' }}>
         <thead>
           <tr style={{ color: T.ink3, textAlign: 'left', borderBottom: `1px solid ${T.border}` }}>
             <th style={{ padding: '6px 4px' }}>路径</th>
@@ -761,7 +761,7 @@ function PCIePane({ data }) {
                  ))}
                </div>
              }>
-      <table style={{ width: '100%', fontSize: 11.5, ...MONO, borderCollapse: 'collapse', tableLayout: 'fixed' }}>
+      <table className="edge-hardware-table" style={{ width: '100%', fontSize: 11.5, ...MONO, borderCollapse: 'collapse', tableLayout: 'fixed' }}>
         <colgroup>
           <col style={{ width: 72 }} />
           <col style={{ width: 72 }} />
@@ -934,7 +934,7 @@ function SensorsPane({ data }) {
 
       {fans.length > 0 && (
         <Section title={`机箱风扇 · ${fans.length} 个`}>
-          <table style={{ width: '100%', fontSize: 12, ...MONO }}>
+          <table className="edge-hardware-table" style={{ width: '100%', fontSize: 12, ...MONO }}>
             <thead>
               <tr style={{ color: T.ink3, textAlign: 'left' }}>
                 <th style={{ padding: '4px 0' }}>来源</th>
diff --git a/console-ui/src/pages/Links.jsx b/console-ui/src/pages/Links.jsx
index d1c867b..f868534 100644
--- a/console-ui/src/pages/Links.jsx
+++ b/console-ui/src/pages/Links.jsx
@@ -107,7 +107,7 @@ function SectionCard({ section }) {
         )}
       </div>
       {section.items?.length > 0 ? (
-        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <div className="edge-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse' }}>
           <thead>
             <tr style={{ background: '#f8fafc' }}>
               <th style={hdrStyle}>名称</th>
@@ -121,7 +121,7 @@ function SectionCard({ section }) {
               <LinkRow key={i} item={it} isSupervisor={isSupervisor} />
             ))}
           </tbody>
-        </table>
+        </table></div>
       ) : (
         <div style={{ padding: 16, fontSize: 12, color: T.ink3 }}>（无条目）</div>
       )}
@@ -146,7 +146,7 @@ export default function Links() {
   const err = data?.error
 
   return (
-    <div style={{
+    <div className="edge-page edge-links-page" style={{
       display: 'flex', flexDirection: 'column', height: '100%',
       width: '100%', background: '#f8fafc', overflow: 'hidden',
     }}>
diff --git a/console-ui/src/pages/Models.jsx b/console-ui/src/pages/Models.jsx
index 2f25ce8..b9637d0 100644
--- a/console-ui/src/pages/Models.jsx
+++ b/console-ui/src/pages/Models.jsx
@@ -54,8 +54,8 @@ export default function ModelsFace() {
   const filtered = liveModels.filter(m => filter === 'all' || (m.family || '').toLowerCase() === filter);
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'hidden' }}>
-      <div style={{
+    <div className="edge-page edge-models-page" style={{ flex: 1, display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'hidden' }}>
+      <div className="edge-page-header" style={{
         padding: '14px 24px', background: T.surface,
         borderBottom: `1px solid ${T.border}`, flexShrink: 0,
         display: 'flex', alignItems: 'center', gap: 14,
@@ -103,7 +103,7 @@ export default function ModelsFace() {
         </div>
 
         <Card padding={0}>
-          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+          <div className="edge-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
             <thead>
               <tr style={{ background: '#fafbfc', borderBottom: `1px solid ${T.borderSoft}` }}>
                 <th style={{ ...th, textAlign: 'left' }}>模型</th>
@@ -152,7 +152,7 @@ export default function ModelsFace() {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table></div>
         </Card>
       </div>
     </div>
diff --git a/console-ui/src/pages/Monitoring.jsx b/console-ui/src/pages/Monitoring.jsx
index b5f7c67..e2e0ec5 100644
--- a/console-ui/src/pages/Monitoring.jsx
+++ b/console-ui/src/pages/Monitoring.jsx
@@ -270,7 +270,7 @@ function GpuProcessTable({ data, status }) {
       {status === 'ok' && data.length === 0 ? (
         <div style={{ padding: '20px 16px', color: T.ink4, fontSize: 13, textAlign: 'center' }}>当前 GPU 上无活跃进程</div>
       ) : status === 'ok' ? (
-        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <div className="edge-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse' }}>
           <thead>
             <tr style={{ background: '#fafbfc' }}>
               <th style={{ ...head, textAlign: 'left',  padding: '10px 16px' }}>PID</th>
@@ -291,7 +291,7 @@ function GpuProcessTable({ data, status }) {
               </tr>
             ))}
           </tbody>
-        </table>
+        </table></div>
       ) : null}
     </div>
   );
@@ -322,7 +322,7 @@ function TopResourceBar({ cpu, gpuAvg, memPct, memUsed, memTotal, diskPct, diskU
   };
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 12 }}>
+    <div className="edge-stat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 12 }}>
       <Cell icon="cpu" label="CPU 使用率"
         pct={cpu} value={cpu == null ? '—' : `${cpu}%`}
         sub={cpu == null ? '加载中…' : '当前负载'} color={T.blue}/>
@@ -440,7 +440,7 @@ export default function MonitoringApp() {
   const windowLabel = (HISTORY_WINDOWS.find(w => w.value === historyWindow) || HISTORY_WINDOWS[0]).label;
 
   return (
-    <div style={{
+    <div className="edge-page edge-monitoring-page" style={{
       flex: 1, padding: '20px 24px', overflow: 'auto',
       background: T.surfaceAlt,
     }}>
@@ -484,25 +484,25 @@ export default function MonitoringApp() {
       <DiskIOPanel disks={metrics?.diskIO}/>
 
       {/* 趋势卡 —— 全部用 TrendChart 组件（自包含 header/chart/X轴/单位 formatter）*/}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+      <div className="edge-chart-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
         <TrendChart title={`CPU 使用率 · 最近 ${windowLabel}`} window={historyWindow}
           series={cpuSeries} color={T.blue} unit="percent" max={100}/>
         <TrendChart title={`GPU 使用率 · 最近 ${windowLabel}`} window={historyWindow}
           series={gpuSeries} color={T.indigo} unit="percent" max={100}/>
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+      <div className="edge-chart-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
         <TrendChart title={`内存使用率 · 最近 ${windowLabel}`} window={historyWindow}
           series={memSeries} color={T.violet} unit="percent" max={100}/>
         <TrendChart title={`磁盘使用率 · 最近 ${windowLabel}`} window={historyWindow}
           series={diskSeries} color={T.cyan} unit="percent" max={100}/>
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+      <div className="edge-chart-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
         <TrendChart title={`网络入站 · 最近 ${windowLabel}`} window={historyWindow}
           series={netRecvRate} color={T.green} unit="bytesPerSec"/>
         <TrendChart title={`网络出站 · 最近 ${windowLabel}`} window={historyWindow}
           series={netSentRate} color={T.amber} unit="bytesPerSec"/>
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+      <div className="edge-chart-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
         <TrendChart title={`磁盘读取 · 最近 ${windowLabel}`} window={historyWindow}
           series={diskReadRate} color={T.teal} unit="bytesPerSec"/>
         <TrendChart title={`磁盘写入 · 最近 ${windowLabel}`} window={historyWindow}
diff --git a/console-ui/src/pages/NetworkConnections.jsx b/console-ui/src/pages/NetworkConnections.jsx
index 9a04d6a..044e776 100644
--- a/console-ui/src/pages/NetworkConnections.jsx
+++ b/console-ui/src/pages/NetworkConnections.jsx
@@ -61,10 +61,10 @@ export default function NetworkConnections() {
   });
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
+    <div className="edge-page edge-network-page" style={{ flex: 1, display: 'flex', flexDirection: 'column',
       background: T.surfaceAlt, overflow: 'hidden' }}>
       {/* Header */}
-      <div style={{
+      <div className="edge-page-header" style={{
         padding: '14px 24px', background: T.surface,
         borderBottom: `1px solid ${T.border}`, flexShrink: 0,
       }}>
@@ -84,7 +84,7 @@ export default function NetworkConnections() {
             <span> 条</span>
           </div>
         </div>
-        <div style={{ display: 'flex', gap: 8, marginTop: 12, alignItems: 'center' }}>
+        <div className="edge-filter-row" style={{ display: 'flex', gap: 8, marginTop: 12, alignItems: 'center' }}>
           <select
             value={filters.stateFilter}
             onChange={e => setFilters({...filters, stateFilter: e.target.value})}
@@ -108,7 +108,7 @@ export default function NetworkConnections() {
             background: '#fef2f2', border: '1px solid #fecaca',
             color: '#991b1b', fontSize: 12, marginBottom: 14 }}>{error}</div>
         )}
-        <div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8 }}>
+        <div className="edge-table-scroll" style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8 }}>
           <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
             <thead>
               <tr style={{ background: '#fafbfc' }}>
diff --git a/console-ui/src/pages/Ports.jsx b/console-ui/src/pages/Ports.jsx
index 084082d..a65c0dd 100644
--- a/console-ui/src/pages/Ports.jsx
+++ b/console-ui/src/pages/Ports.jsx
@@ -73,13 +73,13 @@ export default function PortsFace({ authed, onRequireAuth }) {
     }).catch(() => setLoading(false));
   }, []);
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
+    <div className="edge-page edge-ports-page" style={{ flex: 1, display: 'flex', flexDirection: 'column',
       background: T.surfaceAlt, overflow: 'hidden' }}>
-      <div style={{
+      <div className="edge-ports-header" style={{
         padding: '14px 24px', background: T.surface,
         borderBottom: `1px solid ${T.border}`, flexShrink: 0,
       }}>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div className="edge-ports-header-row" style={{ display: 'flex', alignItems: 'center' }}>
           <div>
             <div style={{ fontSize: 17, fontWeight: 700, color: T.ink, letterSpacing: '-0.01em' }}>端口与公网访问</div>
             <div style={{ fontSize: 11.5, color: T.ink3, marginTop: 3 }}>
@@ -94,9 +94,9 @@ export default function PortsFace({ authed, onRequireAuth }) {
         </div>
       </div>
 
-      <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
+      <div className="edge-ports-content" style={{ flex: 1, overflow: 'auto', padding: 24 }}>
         {/* Stats */}
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 16 }}>
+        <div className="edge-ports-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 16 }}>
           {[
             { label: '已暴露端口', val: '7',  unit: '个' },
             { label: '公网访问', val: '4',  unit: '个' },
@@ -116,13 +116,13 @@ export default function PortsFace({ authed, onRequireAuth }) {
           ))}
         </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+        <div className="edge-ports-toolbar" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
           <div style={{ fontSize: 14, fontWeight: 700, color: T.ink }}>端口列表</div>
           <div style={{ fontSize: 11.5, padding: '2px 8px', borderRadius: 999,
             background: T.surface, border: `1px solid ${T.border}`, color: T.ink3,
           }}>共 {livePorts.length} 个</div>
           <div style={{ flex: 1 }}/>
-          <div style={{
+          <div className="edge-ports-search" style={{
             display: 'flex', alignItems: 'center', gap: 8,
             height: 32, padding: '0 10px', borderRadius: 7,
             background: T.surface, border: `1px solid ${T.border}`, width: 260,
@@ -134,8 +134,9 @@ export default function PortsFace({ authed, onRequireAuth }) {
           </div>
         </div>
 
-        <Card padding={0}>
-          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+        <div className="edge-ports-table edge-table-scroll">
+          <Card padding={0}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
             <thead>
               <tr style={{ background: '#fafbfc' }}>
                 <th style={{ ...th, textAlign: 'left' }}>服务</th>
@@ -186,16 +187,16 @@ export default function PortsFace({ authed, onRequireAuth }) {
                     <td style={{ padding: '10px 14px', textAlign: 'right' }}>
                       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }}>
                         {p.state !== 'offline' && (
-                          <button style={iconBtnLight} title="复制 URL">
+                          <button type="button" style={iconBtnLight} title="复制 URL" aria-label={`复制 ${p.app} 的 URL`}>
                             <Icon name="copy" size={12} stroke={1.8}/>
                           </button>
                         )}
                         {p.state === 'public' && (
-                          <button style={iconBtnLight} title="二维码">
+                          <button type="button" style={iconBtnLight} title="二维码" aria-label={`显示 ${p.app} 的二维码`}>
                             <Icon name="qrcode" size={12} stroke={1.8}/>
                           </button>
                         )}
-                        <button style={iconBtnLight} title="编辑">
+                        <button type="button" style={iconBtnLight} title="编辑" aria-label={`编辑 ${p.app}`}>
                           <Icon name="gear" size={12} stroke={1.8}/>
                         </button>
                       </div>
@@ -204,8 +205,9 @@ export default function PortsFace({ authed, onRequireAuth }) {
                 );
               })}
             </tbody>
-          </table>
-        </Card>
+            </table>
+          </Card>
+        </div>
       </div>
     </div>
   );
diff --git a/console-ui/src/pages/Processes.jsx b/console-ui/src/pages/Processes.jsx
index d4d0525..f05455f 100644
--- a/console-ui/src/pages/Processes.jsx
+++ b/console-ui/src/pages/Processes.jsx
@@ -84,10 +84,10 @@ export default function Processes() {
   });
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
+    <div className="edge-page edge-processes-page" style={{ flex: 1, display: 'flex', flexDirection: 'column',
       background: T.surfaceAlt, overflow: 'hidden', position: 'relative' }}>
       {/* Header */}
-      <div style={{
+      <div className="edge-page-header" style={{
         padding: '14px 24px', background: T.surface,
         borderBottom: `1px solid ${T.border}`, flexShrink: 0,
       }}>
@@ -111,7 +111,7 @@ export default function Processes() {
         </div>
 
         {/* 筛选器 */}
-        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+        <div className="edge-filter-row" style={{ display: 'flex', gap: 8, marginTop: 12 }}>
           <input style={{ ...filterInput, width: 110 }} placeholder="状态 (R/S/D/Z/T)"
             value={filters.state} onChange={e => setFilters({...filters, state: e.target.value})}/>
           <input style={{ ...filterInput, width: 100 }} placeholder="PID"
@@ -124,8 +124,8 @@ export default function Processes() {
       </div>
 
       {/* 列表 */}
-      <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
-        <div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8 }}>
+      <div className="edge-page-content" style={{ flex: 1, overflow: 'auto', padding: 16 }}>
+        <div className="edge-table-scroll" style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8 }}>
           <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
             <thead>
               <tr style={{ background: '#fafbfc' }}>
@@ -233,7 +233,7 @@ function ProcessDetailDrawer({ pid, onClose }) {
         position: 'absolute', inset: 0, background: 'rgba(15,23,42,0.2)', zIndex: 5,
       }}/>
       {/* 抽屉本体 */}
-      <div style={{
+      <div className="edge-detail-drawer" style={{
         position: 'absolute', top: 0, right: 0, bottom: 0,
         width: 560, background: T.surface,
         borderLeft: `1px solid ${T.border}`, boxShadow: '-8px 0 24px rgba(15,23,42,0.06)',
diff --git a/console-ui/src/pages/Settings.jsx b/console-ui/src/pages/Settings.jsx
index 94a9d98..364b1db 100644
--- a/console-ui/src/pages/Settings.jsx
+++ b/console-ui/src/pages/Settings.jsx
@@ -60,7 +60,7 @@ function NetFirewall() {
         </button>
       </div>
 
-      <div style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
+      <div className="edge-settings-wide-grid" style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
         <div style={{
           display: 'grid', gridTemplateColumns: '50px 80px 70px 130px 200px 1fr 60px',
           padding: '8px 12px', background: T.surfaceAlt,
@@ -123,7 +123,7 @@ function NetConnections() {
   return (
     <div style={{ padding: 16 }}>
       {/* Summary chips */}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+      <div className="edge-settings-summary" style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
         {[
           { label: '总连接',   val: 42, tone: T.ink },
           { label: 'ESTABLISHED', val: 28, tone: T.green },
@@ -153,7 +153,7 @@ function NetConnections() {
           ss -tlnp
         </span>
       </div>
-      <div style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden', marginBottom: 12 }}>
+      <div className="edge-settings-wide-grid" style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden', marginBottom: 12 }}>
         <div style={{
           display: 'grid', gridTemplateColumns: '60px 160px 90px 1fr 80px 80px',
           padding: '8px 12px', background: T.surfaceAlt,
@@ -193,7 +193,7 @@ function NetConnections() {
           ss -tnp state established
         </span>
       </div>
-      <div style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
+      <div className="edge-settings-wide-grid" style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
         <div style={{
           display: 'grid', gridTemplateColumns: '180px 180px 110px 130px 80px 1fr',
           padding: '8px 12px', background: T.surfaceAlt,
@@ -238,7 +238,7 @@ function NetworkManagement() {
   const ifaces = netInfo ? netInfo.interfaces.filter(i => i.state === 'up') : [];
 
   return (
-    <div style={{
+    <div className="edge-settings-network" style={{
       background: T.surface, border: `1px solid ${T.border}`, borderRadius: 10,
       boxShadow: '0 1px 2px rgba(15,23,42,0.04)', overflow: 'hidden', marginTop: 4,
     }}>
@@ -298,7 +298,7 @@ function NetworkManagement() {
         </button>
       </div>
 
-      <div style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
+      <div className="edge-settings-wide-grid" style={{ border: `1px solid ${T.borderSoft}`, borderRadius: 8, overflow: 'hidden' }}>
         <div style={{
           display: 'grid', gridTemplateColumns: '140px 80px 200px 130px 160px 90px 1fr 80px',
           padding: '8px 12px', background: T.surfaceAlt,
@@ -377,13 +377,13 @@ export default function Diagnostics() {
   ];
 
   return (
-    <div style={{ flex: 1, padding: 24, overflow: 'auto', background: T.surfaceAlt }}>
+    <div className="edge-page edge-settings-page" style={{ flex: 1, padding: 24, overflow: 'auto', background: T.surfaceAlt }}>
       <div style={{ marginBottom: 14 }}>
         <div style={{ ...T.type.heading, color: T.ink }}>系统设置</div>
         <div style={{ fontSize: 12, color: T.ink3, marginTop: 3 }}>诊断工具 · 网络管理 · 设备信息</div>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
+      <div className="edge-settings-tools" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
         {tools.map(t => (
           <div key={t.id} onClick={() => setRunning(t.id)} style={{
             background: T.surface, border: `1px solid ${T.border}`,
@@ -415,7 +415,7 @@ export default function Diagnostics() {
       <NetworkManagement/>
 
       <Card title="设备信息" padding={0} style={{ marginTop: 16 }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+        <div className="edge-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
           <tbody>
             {[
               ['设备名称', device.name],
@@ -431,7 +431,7 @@ export default function Diagnostics() {
               </tr>
             ))}
           </tbody>
-        </table>
+        </table></div>
       </Card>
     </div>
   );
diff --git a/console-ui/src/pages/Supervisor.jsx b/console-ui/src/pages/Supervisor.jsx
index 94442d3..ff7b5ab 100644
--- a/console-ui/src/pages/Supervisor.jsx
+++ b/console-ui/src/pages/Supervisor.jsx
@@ -55,7 +55,7 @@ function ServiceCard({ proc, onViewLog, onControl }) {
   const canJump = isRunning && url;
 
   return (
-    <div style={{
+    <div className="edge-supervisor-service" style={{
       background: 'white', borderRadius: 8,
       border: `1px solid ${T.border}`,
       padding: '10px 14px',
@@ -111,7 +111,7 @@ function ServiceCard({ proc, onViewLog, onControl }) {
       </div>
 
       {/* Actions */}
-      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+      <div className="edge-supervisor-actions" style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
         {canJump && (
           <a href={url} target="_blank" rel="noreferrer" title="打开服务" style={{ ...actionBtn, color: T.blueDeep, textDecoration: 'none' }}>
             <Icon name="external" size={13} stroke={1.8}/>
@@ -165,12 +165,12 @@ function LogModal({ name, onClose }) {
   }, [log]);
 
   return (
-    <div style={{
+    <div className="edge-modal-backdrop" style={{
       position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)',
       display: 'flex', alignItems: 'center', justifyContent: 'center',
       zIndex: 1000,
     }} onClick={onClose}>
-      <div onClick={e => e.stopPropagation()} style={{
+      <div className="edge-responsive-modal edge-log-modal" onClick={e => e.stopPropagation()} style={{
         width: '80%', maxWidth: 900, height: '70vh',
         background: '#1e293b', borderRadius: 12,
         display: 'flex', flexDirection: 'column',
@@ -242,9 +242,9 @@ export default function SupervisorFace() {
   }, []);
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f8fafc' }}>
+    <div className="edge-page edge-supervisor-page" style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f8fafc' }}>
       {/* Header */}
-      <div style={{
+      <div className="edge-supervisor-header" style={{
         padding: '10px 16px', borderBottom: `1px solid ${T.borderSoft}`,
         background: T.surface, display: 'flex', alignItems: 'center', gap: 12,
         flexShrink: 0,
diff --git a/console-ui/src/pages/VirtualMachines.jsx b/console-ui/src/pages/VirtualMachines.jsx
index d57b3b4..36a3fc7 100644
--- a/console-ui/src/pages/VirtualMachines.jsx
+++ b/console-ui/src/pages/VirtualMachines.jsx
@@ -304,7 +304,7 @@ export default function VirtualMachines() {
   };
 
   return (
-    <div style={{
+    <div className="edge-page edge-vm-page" style={{
       flex: 1, width: '100%', minWidth: 0, height: '100%',
       display: 'flex', flexDirection: 'column', background: T.surfaceAlt, overflow: 'hidden',
     }}>
@@ -324,8 +324,8 @@ export default function VirtualMachines() {
         <ActionButton icon="refresh" label="刷新" disabled={loading} onClick={refresh}/>
       </div>
 
-      <div style={{ flex: 1, minHeight: 0, width: '100%', minWidth: 0, display: 'grid', gridTemplateColumns: '320px minmax(0, 1fr)' }}>
-        <aside style={{
+      <div className="edge-vm-layout" style={{ flex: 1, minHeight: 0, width: '100%', minWidth: 0, display: 'grid', gridTemplateColumns: '320px minmax(0, 1fr)' }}>
+        <aside className="edge-vm-list" style={{
           borderRight: `1px solid ${T.border}`, background: '#f8fafc',
           padding: 14, overflow: 'auto',
         }}>
@@ -339,7 +339,7 @@ export default function VirtualMachines() {
           </div>
         </aside>
 
-        <main style={{ minWidth: 0, overflow: 'auto', padding: 18 }}>
+        <main className="edge-vm-detail" style={{ minWidth: 0, overflow: 'auto', padding: 18 }}>
           {!current ? (
             <div style={{ color: T.ink3, fontSize: 13 }}>请选择虚拟机</div>
           ) : (
@@ -368,7 +368,7 @@ export default function VirtualMachines() {
                 </div>
               </section>
 
-              <section style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(140px, 1fr))', gap: 10 }}>
+              <section className="edge-vm-metrics" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(140px, 1fr))', gap: 10 }}>
                 <Metric label="CPU 时间" value={`${Math.round(current.cpuTimeSec || 0)}s`} sub={`${current.vcpus || 0} 个 vCPU`}/>
                 <Metric label="内存" value={`${pct(memUsed, memTotal)}%`} sub={`${fmtBytes(memUsed)} / ${fmtBytes(memTotal)}`}/>
                 <Metric label="可用内存" value={fmtBytes(memAvail)} sub={current.guest?.agentOK ? 'guest agent' : 'libvirt balloon'}/>
@@ -439,7 +439,7 @@ export default function VirtualMachines() {
                   <Icon name="hardDrive" size={15} stroke={1.8} style={{ color: T.ink2 }}/>
                   <span style={{ fontSize: 13, fontWeight: 720, color: T.ink }}>块设备</span>
                 </div>
-                <DiskTable disks={current.disks}/>
+                <div className="edge-table-scroll"><DiskTable disks={current.disks}/></div>
               </section>
 
               <section style={{ border: `1px solid ${T.border}`, borderRadius: 8, background: T.surface, overflow: 'hidden' }}>
@@ -450,7 +450,7 @@ export default function VirtualMachines() {
                   <Icon name="folder" size={15} stroke={1.8} style={{ color: T.ink2 }}/>
                   <span style={{ fontSize: 13, fontWeight: 720, color: T.ink }}>共享挂载</span>
                 </div>
-                <SharedMountTable filesystems={current.filesystems} mounts={current.guest?.mounts}/>
+                <div className="edge-table-scroll"><SharedMountTable filesystems={current.filesystems} mounts={current.guest?.mounts}/></div>
               </section>
 
               <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
diff --git a/console-ui/src/styles.css b/console-ui/src/styles.css
index 2bbcd00..8f668cf 100644
--- a/console-ui/src/styles.css
+++ b/console-ui/src/styles.css
@@ -1,11 +1,85 @@
+:root {
+  --edge-safe-top: env(safe-area-inset-top, 0px);
+  --edge-safe-right: env(safe-area-inset-right, 0px);
+  --edge-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --edge-safe-left: env(safe-area-inset-left, 0px);
+  --edge-touch-target: 44px;
+  --edge-cloud-link-online: #22c55e;
+  --edge-cloud-link-connecting: #f59e0b;
+  --edge-cloud-link-offline: #dc6b67;
+  --edge-cloud-link-unknown: #94a3b8;
+  --edge-cloud-link-core: 8px;
+  --edge-cloud-link-ring: 1px;
+}
+
+html, body, #root {
+  margin: 0; padding: 0; width: 100%; height: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
 html, body {
-  margin: 0; padding: 0; height: 100%;
   font-family: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
   -webkit-font-smoothing: antialiased; color: #0f172a;
   background: #eef3fa; overflow: hidden;
 }
 *, *::before, *::after { box-sizing: border-box; }
-button, input { font-family: inherit; }
+button, input, select, textarea { font-family: inherit; }
+button, [role="button"], [role="tab"] { touch-action: manipulation; }
+.edge-bg { height: 100vh !important; height: 100dvh !important; }
+.edge-tabbar { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
+.edge-tabbar::-webkit-scrollbar { display: none; }
+.edge-toast-stack {
+  bottom: calc(28px + var(--edge-safe-bottom)) !important;
+  width: min(440px, calc(100vw - 32px - var(--edge-safe-left) - var(--edge-safe-right))) !important;
+}
+.edge-dock-scroll { overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scrollbar-width: none; }
+.edge-dock-scroll::-webkit-scrollbar { display: none; }
+.edge-dock-close {
+  display: none; width: var(--edge-touch-target); height: var(--edge-touch-target);
+  flex: 0 0 var(--edge-touch-target); align-items: center; justify-content: center;
+  border: 0; border-radius: 10px; background: #fee2e2; color: #b91c1c;
+}
+.edge-window-header-actions:empty { display: none; }
+.edge-window-back { margin-left: -8px; }
+.edge-responsive-page, .edge-responsive-scroll { min-width: 0; max-width: 100%; }
+.edge-table-scroll { max-width: 100%; overflow-x: auto !important; overscroll-behavior-x: contain; }
+.edge-table-scroll > table { min-width: 680px; }
+.edge-iframe-open {
+  min-height: 32px;
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  color: #1d4ed8;
+  background: #fff;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.edge-iframe-notice,
+.edge-iframe-fallback {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  font-size: 12px;
+  line-height: 1.4;
+  flex-shrink: 0;
+}
+.edge-iframe-notice { color: #92400e; background: #fffbeb; border-bottom: 1px solid #fde68a; }
+.edge-iframe-fallback { color: #991b1b; background: #fff1f2; border-bottom: 1px solid #fecdd3; }
+.edge-iframe-fallback a { color: #1d4ed8; font-weight: 700; }
+.edge-ai-data-scroll {
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto !important;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+}
+
 *::-webkit-scrollbar { width: 8px; height: 8px; }
 *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
 *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
@@ -37,12 +111,7 @@ button, input { font-family: inherit; }
 .edge-cursor { animation: edgeBlink 1s steps(1) infinite; }
 
 .edge-icon-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
-.edge-icon-hover:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--edge-icon-hover-shadow);
-}
 .edge-dock-item { transition: transform 0.14s ease; }
-.edge-dock-item:hover { transform: translateY(-4px) scale(1.08); }
 
 /* Background grid pattern */
 .edge-bg {
@@ -70,25 +139,6 @@ button, input { font-family: inherit; }
   transform: scale(0.97);
 }
 
-.edge-btn-primary:hover {
-  background: var(--edge-btn-primary-hover-bg, #1d4ed8);
-}
-.edge-btn-secondary:hover,
-.edge-row-hover:hover {
-  background: var(--edge-row-hover-bg, #f8fafc);
-  border-color: var(--edge-row-hover-border-color);
-  box-shadow: var(--edge-row-hover-box-shadow);
-}
-.edge-menu-item:hover {
-  background: var(--edge-menu-hover-bg, #f8fafc);
-}
-.edge-btn-danger:hover {
-  background: var(--edge-btn-danger-hover-bg, #fef2f2);
-  color: var(--edge-btn-danger-hover-color, #dc2626);
-}
-.edge-link-hover:hover {
-  text-decoration: underline;
-}
 .edge-menu-item {
   transition: background 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
 }
@@ -110,6 +160,416 @@ button, input { font-family: inherit; }
   -webkit-backdrop-filter: saturate(190%) blur(24px);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .edge-icon-hover:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--edge-icon-hover-shadow);
+  }
+  .edge-dock-item:hover { transform: translateY(-4px) scale(1.08); }
+  .edge-btn-primary:hover { background: var(--edge-btn-primary-hover-bg, #1d4ed8); }
+  .edge-btn-secondary:hover,
+  .edge-row-hover:hover {
+    background: var(--edge-row-hover-bg, #f8fafc);
+    border-color: var(--edge-row-hover-border-color);
+    box-shadow: var(--edge-row-hover-box-shadow);
+  }
+  .edge-menu-item:hover { background: var(--edge-menu-hover-bg, #f8fafc); }
+  .edge-btn-danger:hover {
+    background: var(--edge-btn-danger-hover-bg, #fef2f2);
+    color: var(--edge-btn-danger-hover-color, #dc2626);
+  }
+  .edge-link-hover:hover { text-decoration: underline; }
+}
+
+@media (pointer: coarse), (hover: none) {
+  button, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"] {
+    min-height: var(--edge-touch-target);
+  }
+  .edge-dock-close { display: inline-flex; }
+}
+
+@keyframes edgeCloudLinkConnecting {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.48; }
+}
+
+.edge-cloud-link {
+  --edge-cloud-link-color: var(--edge-cloud-link-unknown);
+  min-width: var(--edge-touch-target);
+  min-height: var(--edge-touch-target);
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  color: inherit;
+  white-space: nowrap;
+}
+.edge-cloud-link--online { --edge-cloud-link-color: var(--edge-cloud-link-online); }
+.edge-cloud-link--connecting { --edge-cloud-link-color: var(--edge-cloud-link-connecting); }
+.edge-cloud-link--offline { --edge-cloud-link-color: var(--edge-cloud-link-offline); }
+.edge-cloud-link--unknown { --edge-cloud-link-color: var(--edge-cloud-link-unknown); }
+.edge-cloud-link-led {
+  width: var(--edge-cloud-link-core);
+  height: var(--edge-cloud-link-core);
+  flex: 0 0 var(--edge-cloud-link-core);
+  border-radius: 50%;
+  background: var(--edge-cloud-link-color);
+  box-shadow: 0 0 0 var(--edge-cloud-link-ring) color-mix(in srgb, var(--edge-cloud-link-color) 46%, transparent);
+}
+.edge-cloud-link--connecting .edge-cloud-link-led {
+  animation: edgeCloudLinkConnecting 2.4s ease-in-out infinite;
+}
+.edge-cloud-link-label {
+  font-size: 11.5px;
+  font-weight: 600;
+}
+
+/* StatusBar keeps identity, connectivity, alerts and account access reachable on narrow screens. */
+@media (max-width: 1023px) {
+  .edge-status-bar {
+    min-width: 0;
+    padding-left: max(10px, var(--edge-safe-left)) !important;
+    padding-right: max(8px, var(--edge-safe-right)) !important;
+    gap: 8px !important;
+  }
+  .edge-status-identity { flex: 1 1 auto !important; overflow: hidden; }
+  .edge-status-device { overflow: hidden; }
+  .edge-status-device-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .edge-status-health { flex: 0 0 auto !important; overflow: visible !important; }
+  .edge-status-metric { display: none !important; }
+  .edge-status-actions { min-width: 0; gap: 8px !important; }
+  .edge-status-sync, .edge-status-time { display: none !important; }
+  .edge-status-alert, .edge-status-user-button {
+    min-width: var(--edge-touch-target);
+    min-height: var(--edge-touch-target);
+    justify-content: center;
+  }
+  .edge-cloud-link { width: var(--edge-touch-target); padding: 0; }
+  .edge-cloud-link-label { display: none; }
+}
+
+@media (max-width: 639px) {
+  .edge-status-bar { height: calc(52px + var(--edge-safe-top)) !important; padding-top: var(--edge-safe-top); }
+  .edge-status-logo { display: none !important; }
+  .edge-status-device-details, .edge-status-dept { display: none !important; }
+  .edge-status-alert { width: var(--edge-touch-target); padding: 0 !important; gap: 4px !important; }
+  .edge-status-alert > span:last-child { display: none !important; }
+}
+
+@media (max-width: 1023px) {
+  html, body { overscroll-behavior: none; }
+  input, select, textarea { font-size: 16px !important; }
+  .edge-desktop { padding: 20px 20px calc(104px + var(--edge-safe-bottom)) !important; }
+  .edge-desktop-split { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
+  .edge-desktop-widgets { width: 100%; }
+  .edge-app-grid {
+    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
+    justify-content: stretch;
+  }
+  .edge-dock-shell {
+    left: calc(10px + var(--edge-safe-left)) !important;
+    right: calc(10px + var(--edge-safe-right)) !important;
+    bottom: calc(8px + var(--edge-safe-bottom)) !important;
+    transform: none !important;
+    max-width: none;
+  }
+  .edge-dock-scroll { width: 100%; border-radius: 18px !important; }
+  .edge-window-titlebar {
+    min-height: calc(52px + var(--edge-safe-top)) !important;
+    padding-top: var(--edge-safe-top);
+    padding-left: max(8px, var(--edge-safe-left)) !important;
+    padding-right: max(6px, var(--edge-safe-right)) !important;
+    gap: 5px !important;
+  }
+  .edge-window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .edge-window-breadcrumb { display: none !important; }
+  .edge-window-manage { padding: 0 10px !important; }
+  .edge-window-manage span { display: none; }
+  .edge-window-controls { margin-left: 0 !important; }
+  .edge-window-control {
+    width: var(--edge-touch-target) !important;
+    height: var(--edge-touch-target) !important;
+  }
+  .edge-window-body { padding-bottom: calc(68px + var(--edge-safe-bottom)); }
+  .edge-toast-stack {
+    bottom: calc(82px + var(--edge-safe-bottom)) !important;
+    width: calc(100vw - 24px - var(--edge-safe-left) - var(--edge-safe-right)) !important;
+  }
+
+  .edge-page {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: hidden !important;
+  }
+  .edge-dashboard-page { padding: 16px !important; }
+  .edge-page-header {
+    padding: 12px 16px !important;
+    align-items: flex-start !important;
+    flex-wrap: wrap;
+  }
+  .edge-page-header-row {
+    align-items: flex-start !important;
+    flex-wrap: wrap;
+  }
+  .edge-page-header-row > :last-child { flex-wrap: wrap; }
+  .edge-page-content { padding: 12px !important; }
+  .edge-filter-row {
+    max-width: 100%;
+    overflow-x: auto;
+    padding-bottom: 2px;
+    overscroll-behavior-x: contain;
+  }
+  .edge-filter-row > input,
+  .edge-filter-row > select { flex: 0 0 auto; }
+  .edge-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+  .edge-chart-grid { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-monitoring-page { padding: 16px !important; }
+  .edge-monitoring-page > :first-child { align-items: flex-start !important; flex-wrap: wrap; gap: 10px; }
+  .edge-card-strip {
+    overflow-x: auto;
+    max-width: 100%;
+    padding-bottom: 4px;
+    overscroll-behavior-x: contain;
+  }
+  .edge-card-strip > * { min-width: min(280px, 78vw); }
+  .edge-detail-drawer {
+    width: min(560px, 100%) !important;
+    padding-bottom: calc(68px + var(--edge-safe-bottom));
+  }
+  .edge-alert-row { align-items: flex-start !important; flex-wrap: wrap; }
+  .edge-alert-row > :nth-child(2) { flex-basis: calc(100% - 54px); }
+  .edge-alert-row > button { margin-left: 42px; }
+  .edge-alerts-page > :last-child,
+  .edge-models-page > :last-child,
+  .edge-links-page > :last-child { padding: 16px !important; }
+  .edge-links-page > :first-child { padding: 12px 16px !important; }
+  .edge-links-page > :first-child > div { flex-wrap: wrap; }
+  .edge-files-toolbar {
+    max-width: 100%;
+    flex-wrap: wrap;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+  .edge-files-usage {
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+  .edge-files-usage > * { flex-shrink: 0; }
+  .edge-files-breadcrumb { min-width: min(220px, 100%); overflow-x: auto; }
+  .edge-files-search { width: min(240px, 100%) !important; min-width: 180px; flex: 1 1 220px; }
+  .edge-files-upload { margin-left: auto; }
+  .edge-files-sidebar { width: 150px !important; }
+  .edge-ports-header-row { align-items: flex-start !important; flex-wrap: wrap; gap: 10px; }
+  .edge-ports-content { padding: 16px !important; }
+  .edge-ports-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+  .edge-ports-toolbar { flex-wrap: wrap; }
+  .edge-ports-search { width: min(100%, 320px) !important; flex: 1 1 240px; }
+  .edge-ports-table { max-width: 100%; }
+  .edge-ports-table > * { min-width: 760px; }
+  .edge-files-list > table { min-width: 600px; }
+  .edge-files-detail,
+  .edge-files-detail-empty { width: min(320px, 42vw) !important; }
+  .edge-modal-backdrop {
+    padding: calc(12px + var(--edge-safe-top)) calc(12px + var(--edge-safe-right)) calc(12px + var(--edge-safe-bottom)) calc(12px + var(--edge-safe-left));
+  }
+  .edge-responsive-modal {
+    width: min(100%, 900px) !important;
+    max-height: calc(100dvh - 24px - var(--edge-safe-top) - var(--edge-safe-bottom)) !important;
+  }
+  .edge-store-page { flex-direction: column !important; }
+  .edge-store-sidebar {
+    width: 100% !important;
+    padding: 10px 12px !important;
+    border-right: 0 !important;
+    border-bottom: 1px solid #e2e8f0;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+  }
+  .edge-store-sidebar > :first-child,
+  .edge-store-sidebar > :nth-child(2),
+  .edge-store-sidebar > :nth-child(4),
+  .edge-store-sidebar > :last-child { display: none !important; }
+  .edge-store-sidebar > :nth-child(3) { flex-direction: row !important; gap: 6px !important; width: max-content; }
+  .edge-store-sidebar > :nth-child(3) > * { min-height: var(--edge-touch-target); min-width: 120px; }
+  .edge-store-main { padding: 16px !important; }
+  .edge-store-featured { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-store-toolbar { flex-wrap: wrap; }
+  .edge-store-toolbar > :nth-last-child(2) { width: min(100%, 320px) !important; }
+  .edge-store-detail > :nth-child(2) { padding: 16px !important; }
+  .edge-store-detail-hero { flex-wrap: wrap; padding: 16px !important; }
+  .edge-settings-page { padding: 16px !important; }
+  .edge-settings-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+  .edge-settings-network > :first-child,
+  .edge-settings-network > :nth-child(3) { flex-wrap: wrap; gap: 8px !important; }
+  .edge-settings-network > :nth-child(3) > :first-child { flex-basis: 100%; }
+  .edge-settings-summary,
+  .edge-settings-wide-grid {
+    max-width: 100%;
+    overflow-x: auto !important;
+    overscroll-behavior-x: contain;
+  }
+  .edge-settings-summary { padding-bottom: 4px; }
+  .edge-settings-summary > * { min-width: 140px; }
+  .edge-settings-wide-grid > * { min-width: 780px; }
+  .edge-vm-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); }
+  .edge-vm-list {
+    border-right: 0 !important;
+    border-bottom: 1px solid #e2e8f0;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+  }
+  .edge-vm-list > div:last-child { flex-direction: row !important; width: max-content; }
+  .edge-vm-list > div:last-child > * { width: min(300px, 76vw) !important; }
+  .edge-vm-detail { padding: 14px !important; }
+  .edge-vm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+  .edge-iframe-face > :first-child { flex-wrap: wrap; }
+  .edge-iframe-open { min-height: var(--edge-touch-target); }
+  .edge-container-shell { min-height: 0; }
+  .edge-container-shell-status { padding-top: calc(8px + var(--edge-safe-top)) !important; }
+  .edge-hardware-layout { flex-direction: column !important; }
+  .edge-hardware-nav {
+    width: 100% !important;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    padding: 6px !important;
+    border-right: 0 !important;
+    border-bottom: 1px solid #e2e8f0;
+  }
+  .edge-hardware-nav > button {
+    width: auto !important;
+    min-width: 110px;
+    min-height: var(--edge-touch-target);
+    border-left: 0 !important;
+    border-bottom: 3px solid transparent !important;
+    flex-shrink: 0;
+  }
+  .edge-hardware-content { padding: 14px !important; }
+  .edge-hardware-section { max-width: 100%; overflow-x: auto; }
+  .edge-hardware-table { min-width: 700px; }
+  .edge-ai-header-row { flex-wrap: wrap; }
+  .edge-ai-summary {
+    flex-wrap: nowrap !important;
+    overflow-x: auto;
+    max-width: 100%;
+    padding-bottom: 4px;
+  }
+  .edge-ai-summary > * { flex: 0 0 min(180px, 44vw); }
+  .edge-ai-layout,
+  .edge-ai-board { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-ai-layout { overflow: auto; }
+  .edge-ai-master { overflow: visible !important; }
+  .edge-ai-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+  .edge-ai-back {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    min-height: var(--edge-touch-target);
+    padding: 0 10px;
+    border: 1px solid #e2e8f0;
+    border-radius: 7px;
+    background: #f8fafc;
+    color: #334155;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .edge-supervisor-header { flex-wrap: wrap; }
+  .edge-supervisor-header > :last-child { max-width: 100%; overflow-x: auto; }
+  .edge-supervisor-actions button,
+  .edge-supervisor-actions a { width: var(--edge-touch-target) !important; height: var(--edge-touch-target) !important; }
+}
+
+@media (max-width: 639px) {
+  .edge-desktop { padding: 14px 12px calc(100px + var(--edge-safe-bottom)) !important; gap: 20px !important; }
+  .edge-desktop-section-header { align-items: center !important; flex-wrap: wrap; margin-bottom: 10px !important; }
+  .edge-app-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important; gap: 6px !important; }
+  .edge-login-screen {
+    min-height: 100vh !important; min-height: 100dvh !important; height: auto !important;
+    overflow-x: hidden !important; overflow-y: auto !important;
+  }
+  .edge-login-form-panel {
+    min-height: 100vh; min-height: 100dvh;
+    align-items: flex-start !important;
+    padding: calc(40px + var(--edge-safe-top)) max(20px, var(--edge-safe-right)) calc(32px + var(--edge-safe-bottom)) max(20px, var(--edge-safe-left)) !important;
+  }
+  .edge-window-header-actions { min-width: 0; overflow-x: auto; }
+  .edge-dashboard-page { padding: 12px !important; }
+  .edge-stat-grid { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-page-header { padding: 10px 12px !important; }
+  .edge-page-content { padding: 10px !important; }
+  .edge-alerts-page > :first-child { padding: 14px 12px 0 !important; }
+  .edge-alerts-page > :last-child,
+  .edge-models-page > :last-child,
+  .edge-links-page > :last-child { padding: 12px !important; }
+  .edge-alert-row > button { margin-left: 0; }
+  .edge-table-scroll > table { min-width: 620px; }
+  .edge-monitoring-page { padding: 12px !important; }
+  .edge-files-workspace { position: relative; }
+  .edge-files-toolbar { gap: 8px !important; }
+  .edge-files-toolbar > :nth-child(-n+3) { order: 1; }
+  .edge-files-breadcrumb { order: 2; flex: 1 1 calc(100% - 140px) !important; min-width: 150px; }
+  .edge-files-search { order: 4; flex-basis: calc(100% - 104px); min-width: 0; }
+  .edge-files-upload { order: 3; margin-left: auto; }
+  .edge-files-upload + button { order: 4; }
+  .edge-files-sidebar,
+  .edge-files-detail-empty { display: none !important; }
+  .edge-files-detail {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    width: 100% !important;
+    border-left: 0 !important;
+    padding-bottom: calc(68px + var(--edge-safe-bottom));
+  }
+  .edge-ports-header { padding: 12px !important; }
+  .edge-ports-header-row > button { width: 100%; justify-content: center; }
+  .edge-ports-content { padding: 12px !important; }
+  .edge-ports-stats { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-ports-toolbar > :first-child { flex: 1; }
+  .edge-ports-search { order: 4; flex-basis: 100%; }
+  .edge-store-main { padding: 12px !important; }
+  .edge-store-toolbar > :nth-last-child(2) { order: 5; width: 100% !important; }
+  .edge-store-detail > :first-child { padding: 10px 12px !important; overflow-x: auto; }
+  .edge-store-detail > :nth-child(2) { padding: 12px !important; }
+  .edge-store-detail-hero > :nth-child(2) { flex-basis: calc(100% - 82px); }
+  .edge-store-detail-hero > :last-child { width: 100%; }
+  .edge-store-detail-hero > :last-child button { width: 100%; justify-content: center; }
+  .edge-settings-page { padding: 12px !important; }
+  .edge-settings-tools { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-hardware-toolbar { padding: 10px 12px !important; flex-wrap: wrap; }
+  .edge-hardware-content { padding: 10px !important; }
+  .edge-hardware-section > :first-child { flex-wrap: wrap; min-width: 0; }
+  .edge-hardware-section > :last-child { min-width: 0; padding: 10px !important; }
+  .edge-ai-header { padding: 10px 12px !important; }
+  .edge-ai-header-row > :nth-last-child(-n+3) { display: none !important; }
+  .edge-ai-layout { position: relative; display: block !important; padding: 8px !important; }
+  .edge-ai-layout .edge-ai-detail { display: none !important; }
+  .edge-ai-layout.is-detail-open .edge-ai-master { display: none !important; }
+  .edge-ai-layout.is-detail-open .edge-ai-detail { display: flex !important; }
+  .edge-ai-board { display: block !important; min-height: 0 !important; padding: 8px !important; }
+  .edge-ai-board .edge-ai-board-detail { display: none !important; }
+  .edge-ai-board.is-detail-open .edge-ai-board-list { display: none !important; }
+  .edge-ai-board.is-detail-open .edge-ai-board-detail { display: grid !important; min-height: 520px !important; }
+  .edge-ai-back { display: inline-flex; flex-shrink: 0; }
+  .edge-ai-stat-grid { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-vm-page > :first-child { height: auto !important; min-height: 62px; padding: 8px 12px !important; flex-wrap: wrap; }
+  .edge-vm-detail { padding: 10px !important; }
+  .edge-vm-metrics { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-vm-detail section:first-child { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-vm-detail section:last-child { grid-template-columns: minmax(0, 1fr) !important; }
+  .edge-supervisor-service { align-items: flex-start !important; flex-wrap: wrap; }
+  .edge-supervisor-actions { width: 100%; justify-content: flex-end; }
+  .edge-log-modal { width: 100% !important; height: calc(100dvh - 24px - var(--edge-safe-top) - var(--edge-safe-bottom)) !important; border-radius: 10px !important; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -121,6 +581,9 @@ button, input { font-family: inherit; }
     scroll-behavior: auto !important;
   }
 
+  .edge-cloud-link--connecting .edge-cloud-link-led {
+    animation: none;
+  }
   .edge-icon-hover,
   .edge-dock-item,
   .edge-press,
diff --git a/console-ui/src/tokens.js b/console-ui/src/tokens.js
index 5e577d5..17c213a 100644
--- a/console-ui/src/tokens.js
+++ b/console-ui/src/tokens.js
@@ -65,6 +65,17 @@ export const T = {
     hover: '0.15s',
     fade: '0.2s',
   },
+  viewport: {
+    phoneMax: 639,
+    tabletMin: 640,
+    desktopMin: 1024,
+    touchTarget: 44,
+  },
+};
+
+export const BREAKPOINTS = {
+  phone: 640,
+  tablet: 1024,
 };
 
 /** Semantic color for resource usage: green < 70%, amber >= 70% */