feat: enhance dashboard and robot management

frontend/app.js

@@ -3,10 +3,31 @@ const VIEW_LABELS = {
   overview: "系统总览",
   inspection: "视频巡检",
   events: "告警中心",
+  robots: "机器人管理",
   risks: "风险台账",
   channels: "通知通道",
   settings: "系统设置",
 };
+const ROBOTS = [
+  { id: "FR-001", name: "巡检一号", type: "轮式热成像", zone: "A 仓储区", status: "active", battery: 86, signal: 92, temperature: 41, progress: 68, mission: "仓储区例行巡检", distance: 3.8, sensors: ["热成像", "烟雾", "可见光"] },
+  { id: "FR-002", name: "巡检二号", type: "履带防爆型", zone: "B 生产区", status: "active", battery: 72, signal: 87, temperature: 38, progress: 43, mission: "生产线火点复核", distance: 4.6, sensors: ["热成像", "气体", "可见光"] },
+  { id: "FR-003", name: "哨兵三号", type: "固定巡检站", zone: "C 能源站", status: "charging", battery: 34, signal: 96, temperature: 36, progress: 100, mission: "自动回充", distance: 1.9, sensors: ["热成像", "烟雾", "温湿度"] },
+  { id: "FR-004", name: "云台四号", type: "升降云台型", zone: "D 装卸区", status: "offline", battery: 12, signal: 0, temperature: 29, progress: 0, mission: "等待维护", distance: 0.7, sensors: ["可见光", "烟雾"] },
+];
+
+const MISSIONS = [
+  { time: "08:30", title: "仓储区例行巡检", robot: "巡检一号", status: "active", progress: 68 },
+  { time: "09:15", title: "生产线火点复核", robot: "巡检二号", status: "active", progress: 43 },
+  { time: "11:00", title: "能源站热源扫描", robot: "哨兵三号", status: "queued", progress: 0 },
+  { time: "14:30", title: "装卸区消防通道检查", robot: "待分配", status: "queued", progress: 0 },
+];
+
+const ROBOT_STATUS = {
+  active: { label: "任务中", tone: "active" },
+  charging: { label: "充电中", tone: "charging" },
+  standby: { label: "待命", tone: "standby" },
+  offline: { label: "离线", tone: "offline" },
+};
 const STATUS_LABELS = {
   pending: "待处置",
   acknowledged: "已确认",
@@ -15,8 +36,7 @@ const STATUS_LABELS = {
 
 const elements = Object.fromEntries(
   [
-    "ackEventsCount", "alertStatus", "allEventsCount", "channelCount",
+    "ackEventsCount", "alertStatus", "allEventsCount", "clearButton", "confirmFramesValue", "cooldownValue",
-    "channelSummary", "clearButton", "confirmFramesValue", "cooldownValue",
     "currentClock", "detectionList", "emptyState", "eventTableBody",
     "eventTableMeta", "feishuChannelBadge", "fireCount", "globalStatus",
     "inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
@@ -30,7 +50,12 @@ const elements = Object.fromEntries(
     "settingWeights", "sidebar", "sidebarStatus", "sidebarStatusDot", "smokeCount",
     "sourceLabel", "todayEventCount", "toastRegion", "trendChart", "videoClock",
     "videoInput", "videoMeta", "videoPreview", "viewBreadcrumb", "viewTitle",
-    "wechatChannelBadge",
+    "wechatChannelBadge", "deviceOnlineRate", "dispatchRobotButton",
+    "eventClosureRate", "fireRiskRatio", "missionQueue", "missionQueueCount",
+    "notificationCoverage", "onlineRobotCount", "riskDonut", "riskTotal",
+    "robotAverageBattery", "robotCardGrid", "robotDistance", "robotMissionCount",
+    "robotNavCount", "robotSearchInput", "robotSummary", "robotTotalCount",
+    "safetyGauge", "safetyScore", "smokeRiskRatio",
   ].map((id) => [id, document.querySelector(`#${id}`)])
 );
 
@@ -43,6 +68,7 @@ let lastDetectionAt = 0;
 let dashboardData = null;
 let eventData = [];
 let eventFilter = "";
+let robotFilter = "all";
 
 function showToast(message, type = "info") {
   const toast = document.createElement("div");
@@ -64,6 +90,7 @@ function switchView(viewName) {
   elements.viewBreadcrumb.textContent = VIEW_LABELS[viewName];
   elements.sidebar.classList.remove("is-open");
   if (viewName === "events") loadEvents();
+  if (viewName === "robots") renderRobots();
   if (["overview", "risks", "channels", "settings"].includes(viewName)) loadDashboard();
 }
 
@@ -118,8 +145,9 @@ function updateDashboard(data) {
   elements.modelStatusValue.textContent = system.weights_available ? "运行正常" : "权重缺失";
   elements.modelStatusDetail.textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
   elements.modelStatusValue.className = "text-value";
-  elements.channelCount.textContent = String(channelNames.length);
+  const onlineRobots = ROBOTS.filter((robot) => robot.status !== "offline").length;
-  elements.channelSummary.textContent = channelNames.length ? channelNames.join(" + ") : "尚未启用机器人";
+  elements.onlineRobotCount.textContent = String(onlineRobots);
+  elements.robotSummary.textContent = `${onlineRobots} / ${ROBOTS.length} 在线 · ${ROBOTS.filter((robot) => robot.status === "active").length} 台任务中`;
   elements.overviewMessage.textContent = summary.pending
     ? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
     : "当前无待处置事件，模型与视频巡检服务保持监测状态。";
@@ -141,9 +169,104 @@ function updateDashboard(data) {
   elements.settingConfirmFrames.textContent = `${detection.confirm_frames} 帧`;
   elements.settingCooldown.textContent = `${detection.cooldown_seconds} 秒`;
   renderRecentEvents(data.recent_events || []);
-  renderTrend(eventData.length ? eventData : data.recent_events || []);
+  const visualEvents = eventData.length ? eventData : data.recent_events || [];
+  renderTrend(visualEvents);
+  updateCommandVisuals(visualEvents, summary, channels);
+  renderRobots();
 }
 
+function updateCommandVisuals(events, summary, channels) {
+  const onlineRobots = ROBOTS.filter((robot) => robot.status !== "offline").length;
+  const total = summary.total || 0;
+  const closureRate = total ? Math.round(((summary.resolved || 0) / total) * 100) : 100;
+  const notificationRate = Math.round((enabledChannelNames(channels).length / 2) * 100);
+  const deviceRate = Math.round((onlineRobots / ROBOTS.length) * 100);
+  const safetyScore = Math.max(42, Math.min(98, Math.round(deviceRate * 0.35 + closureRate * 0.35 + Math.max(50, notificationRate) * 0.15 + Math.max(0, 100 - (summary.pending || 0) * 8) * 0.15)));
+  elements.deviceOnlineRate.textContent = `${deviceRate}%`;
+  elements.eventClosureRate.textContent = `${closureRate}%`;
+  elements.notificationCoverage.textContent = `${notificationRate}%`;
+  elements.safetyScore.textContent = String(safetyScore);
+  elements.safetyGauge.style.setProperty("--score", safetyScore);
+
+  let fireEvents = 0;
+  let smokeEvents = 0;
+  events.forEach((event) => {
+    if ((event.classes || []).includes("fire")) fireEvents += 1;
+    if ((event.classes || []).includes("smoke")) smokeEvents += 1;
+  });
+  const detectedTotal = fireEvents + smokeEvents;
+  const chartTotal = Math.max(detectedTotal, 1);
+  const fireArc = Math.round((fireEvents / chartTotal) * 88);
+  const smokeArc = detectedTotal ? 88 - fireArc : 0;
+  elements.riskTotal.textContent = String(detectedTotal);
+  elements.fireRiskRatio.textContent = `${detectedTotal ? Math.round((fireEvents / detectedTotal) * 100) : 0}%`;
+  elements.smokeRiskRatio.textContent = `${detectedTotal ? Math.round((smokeEvents / detectedTotal) * 100) : 0}%`;
+  elements.riskDonut.style.background = `conic-gradient(var(--red) 0 ${fireArc}%, var(--cyan) ${fireArc}% ${fireArc + smokeArc}%, var(--orange) ${fireArc + smokeArc}% 100%)`;
+}
+
+function renderRobots() {
+  const query = (elements.robotSearchInput?.value || "").trim().toLowerCase();
+  const filtered = ROBOTS.filter((robot) => {
+    const matchesStatus = robotFilter === "all" || robot.status === robotFilter;
+    const haystack = `${robot.id} ${robot.name} ${robot.zone} ${robot.type}`.toLowerCase();
+    return matchesStatus && haystack.includes(query);
+  });
+  const activeCount = ROBOTS.filter((robot) => robot.status === "active").length;
+  const onlineCount = ROBOTS.filter((robot) => robot.status !== "offline").length;
+  const averageBattery = Math.round(ROBOTS.reduce((sum, robot) => sum + robot.battery, 0) / ROBOTS.length);
+  elements.robotTotalCount.textContent = String(ROBOTS.length);
+  elements.robotMissionCount.textContent = String(activeCount);
+  elements.robotAverageBattery.textContent = `${averageBattery}%`;
+  elements.robotDistance.textContent = `${ROBOTS.reduce((sum, robot) => sum + robot.distance, 0).toFixed(1)} km`;
+  elements.robotNavCount.textContent = String(onlineCount);
+  elements.robotCardGrid.innerHTML = filtered.length ? filtered.map(robotCardTemplate).join("") : '<div class="panel robot-empty">没有匹配的机器人资产</div>';
+  renderMissionQueue();
+}
+
+function robotCardTemplate(robot) {
+  const status = ROBOT_STATUS[robot.status];
+  const batteryTone = robot.battery < 25 ? "danger" : robot.battery < 45 ? "warning" : "healthy";
+  const actionLabel = robot.status === "active" ? "暂停任务" : robot.status === "offline" ? "发起诊断" : "下发任务";
+  return `<article class="panel robot-card" data-robot-id="${robot.id}">
+    <div class="robot-card-head"><div class="robot-avatar"><span></span><i></i></div><div><span class="robot-id">${robot.id}</span><h3>${robot.name}</h3><p>${robot.type}</p></div><span class="robot-status ${status.tone}"><i></i>${status.label}</span></div>
+    <div class="robot-location"><span>当前位置</span><strong>${robot.zone}</strong></div>
+    <div class="robot-mission"><div><span>${robot.mission}</span><strong>${robot.progress}%</strong></div><div class="progress-track"><i style="width:${robot.progress}%"></i></div></div>
+    <div class="robot-telemetry"><div><span>电量</span><strong class="${batteryTone}">${robot.battery}%</strong></div><div><span>信号</span><strong>${robot.signal}%</strong></div><div><span>机身温度</span><strong>${robot.temperature}℃</strong></div></div>
+    <div class="sensor-tags">${robot.sensors.map((sensor) => `<span>${sensor}</span>`).join("")}</div>
+    <div class="robot-actions"><button class="secondary-button" type="button" data-robot-action="detail">查看详情</button><button class="primary-button" type="button" data-robot-action="toggle">${actionLabel}</button>${robot.status !== "offline" ? '<button class="icon-button" type="button" data-robot-action="return" title="返回充电桩">↩</button>' : ""}</div>
+  </article>`;
+}
+
+function renderMissionQueue() {
+  elements.missionQueueCount.textContent = String(MISSIONS.length);
+  elements.missionQueue.innerHTML = MISSIONS.map((mission, index) => `<div class="mission-item"><div class="mission-time"><strong>${mission.time}</strong><span>${index + 1}</span></div><div class="mission-copy"><strong>${mission.title}</strong><span>${mission.robot}</span><div class="progress-track"><i style="width:${mission.progress}%"></i></div></div><span class="mission-status ${mission.status}">${mission.status === "active" ? "执行中" : "待执行"}</span></div>`).join("");
+}
+
+function handleRobotAction(button) {
+  const card = button.closest("[data-robot-id]");
+  const robot = ROBOTS.find((item) => item.id === card?.dataset.robotId);
+  if (!robot) return;
+  const action = button.dataset.robotAction;
+  if (action === "detail") {
+    showToast(`${robot.name}：${robot.zone}，电量 ${robot.battery}%，信号 ${robot.signal}%`);
+    return;
+  }
+  if (action === "return") {
+    robot.status = "charging";
+    robot.mission = "返回充电桩";
+    robot.progress = 100;
+    showToast(`${robot.name} 已收到返航指令`, "success");
+  } else if (robot.status === "offline") {
+    showToast(`${robot.name} 离线，已创建远程诊断工单`, "error");
+  } else {
+    robot.status = robot.status === "active" ? "standby" : "active";
+    robot.mission = robot.status === "active" ? "临时重点区域巡检" : "待命中";
+    robot.progress = robot.status === "active" ? 8 : 0;
+    showToast(`${robot.name}${robot.status === "active" ? " 已开始新任务" : " 已暂停任务"}`, "success");
+  }
+  renderRobots();
+  if (dashboardData) updateCommandVisuals(eventData.length ? eventData : dashboardData.recent_events || [], dashboardData.summary, dashboardData.system.alert_channels || {});
+}
 function setChannelReady(element, enabled) {
   element.textContent = enabled ? "已启用" : "未配置";
   element.className = enabled ? "ready" : "optional";
@@ -400,6 +523,31 @@ document.querySelectorAll("[data-event-filter]").forEach((button) => {
     loadEvents();
   });
 });
+document.querySelectorAll("[data-robot-filter]").forEach((button) => {
+  button.addEventListener("click", () => {
+    robotFilter = button.dataset.robotFilter;
+    document.querySelectorAll("[data-robot-filter]").forEach((item) => item.classList.toggle("is-active", item === button));
+    renderRobots();
+  });
+});
+elements.robotSearchInput.addEventListener("input", renderRobots);
+elements.robotCardGrid.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-robot-action]");
+  if (button) handleRobotAction(button);
+});
+elements.dispatchRobotButton.addEventListener("click", () => {
+  const available = ROBOTS.find((robot) => ["standby", "charging"].includes(robot.status));
+  if (!available) {
+    showToast("当前没有可调度机器人，请先暂停现有任务。", "error");
+    return;
+  }
+  available.status = "active";
+  available.mission = "临时重点区域巡检";
+  available.progress = 5;
+  showToast(`任务已下发给 ${available.name}`, "success");
+  renderRobots();
+});
+document.querySelector(".mission-history-button")?.addEventListener("click", () => showToast("任务历史模块已就绪，可继续对接后端任务接口。"));
 elements.eventTableBody.addEventListener("click", (event) => {
   const button = event.target.closest("[data-event-id]");
   if (button) updateEventStatus(button.dataset.eventId, button.dataset.eventStatus);
@@ -451,4 +599,5 @@ elements.clearButton.addEventListener("click", async () => {
 updateClock();
 setInterval(updateClock, 1000);
 resetSession();
+renderRobots();
 Promise.all([loadDashboard(), loadEvents()]);

frontend/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#0b1117" />
     <title>燧安 · 火灾预防管理平台</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23153a39'/%3E%3Cpath d='M34 8c3 12-8 15-3 25 2-5 7-8 10-13 8 9 12 18 8 27-4 9-14 13-23 10C12 53 9 40 15 30c4-7 10-11 12-22 4 4 6 8 7 12z' fill='%2341d6c3'/%3E%3C/svg%3E" />
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
@@ -21,6 +22,7 @@
           <button class="nav-item is-active" type="button" data-view="overview"><span class="nav-icon">▦</span><span>系统总览</span></button>
           <button class="nav-item" type="button" data-view="inspection"><span class="nav-icon">▶</span><span>视频巡检</span></button>
           <button class="nav-item" type="button" data-view="events"><span class="nav-icon">!</span><span>告警中心</span><span class="nav-count" id="pendingNavCount">0</span></button>
+          <button class="nav-item" type="button" data-view="robots"><span class="nav-icon">⌾</span><span>机器人管理</span><span class="nav-count nav-count-cyan" id="robotNavCount">4</span></button>
           <button class="nav-item" type="button" data-view="risks"><span class="nav-icon">◇</span><span>风险台账</span></button>
           <button class="nav-item" type="button" data-view="channels"><span class="nav-icon">⌁</span><span>通知通道</span></button>
           <button class="nav-item" type="button" data-view="settings"><span class="nav-icon">⚙</span><span>系统设置</span></button>
@@ -49,23 +51,39 @@
 
         <div class="content-area">
           <section class="view is-active" id="view-overview" data-view-panel="overview">
-            <div class="hero-strip">
+            <div class="hero-strip command-hero">
               <div>
                 <p class="section-kicker">FIRE PREVENTION COMMAND CENTER</p>
-                <h2>今日消防安全态势</h2>
+                <h2>全域消防安全态势</h2>
                 <p id="overviewMessage">正在汇总模型、告警与通知通道状态。</p>
               </div>
-              <button class="primary-button" type="button" data-view-jump="inspection">开始视频巡检</button>
+              <div class="hero-actions"><span class="live-pill"><i></i>实时监测中</span><button class="primary-button" type="button" data-view-jump="inspection">开始视频巡检</button></div>
             </div>
 
             <div class="stat-grid">
               <article class="stat-card"><div class="stat-head"><span>今日告警</span><span class="stat-symbol warning">!</span></div><strong id="todayEventCount">0</strong><small>系统产生的有效告警事件</small></article>
               <article class="stat-card"><div class="stat-head"><span>待处置事件</span><span class="stat-symbol danger">●</span></div><strong id="pendingEventCount">0</strong><small>需要值班人员确认处理</small></article>
               <article class="stat-card"><div class="stat-head"><span>模型状态</span><span class="stat-symbol success">✓</span></div><strong id="modelStatusValue" class="text-value">检查中</strong><small id="modelStatusDetail">正在读取权重状态</small></article>
-              <article class="stat-card"><div class="stat-head"><span>通知通道</span><span class="stat-symbol info">⌁</span></div><strong id="channelCount">0</strong><small id="channelSummary">尚未启用机器人</small></article>
+              <article class="stat-card"><div class="stat-head"><span>在线机器人</span><span class="stat-symbol info">⌾</span></div><strong id="onlineRobotCount">0</strong><small id="robotSummary">正在同步机器人编队</small></article>
             </div>
 
-            <div class="overview-grid">
+            <div class="dashboard-command-grid">
+              <article class="panel safety-score-panel">
+                <div class="panel-header"><div><p class="section-kicker">SAFETY INDEX</p><h3>综合安全指数</h3></div><span class="trend-badge">较昨日 +2.4%</span></div>
+                <div class="safety-score-body"><div id="safetyGauge" class="safety-gauge" style="--score: 86"><div><strong id="safetyScore">86</strong><span>安全</span></div></div><div class="score-breakdown"><div><span>设备在线率</span><strong id="deviceOnlineRate">--</strong></div><div><span>事件闭环率</span><strong id="eventClosureRate">--</strong></div><div><span>通知覆盖率</span><strong id="notificationCoverage">--</strong></div></div></div>
+              </article>
+              <article class="panel zone-map-panel">
+                <div class="panel-header"><div><p class="section-kicker">ZONE MONITORING</p><h3>重点区域态势</h3></div><button class="text-button" type="button" data-view-jump="robots">查看编队 →</button></div>
+                <div class="zone-map" aria-label="园区重点区域态势图"><div class="map-grid"></div><span class="zone-block zone-a">A 仓储区</span><span class="zone-block zone-b">B 生产区</span><span class="zone-block zone-c">C 能源站</span><span class="zone-block zone-d">D 装卸区</span><span class="robot-dot robot-dot-1" title="巡检一号"></span><span class="robot-dot robot-dot-2" title="巡检二号"></span><span class="robot-dot robot-dot-3 is-warning" title="哨兵三号"></span><span class="camera-sweep"></span></div>
+                <div class="zone-legend"><span><i class="dot-online"></i>正常</span><span><i class="dot-warning"></i>需关注</span><span><i class="dot-offline"></i>离线</span></div>
+              </article>
+              <article class="panel risk-donut-panel">
+                <div class="panel-header"><div><p class="section-kicker">RISK MIX</p><h3>风险类型分布</h3></div><span class="micro-copy">近 7 日</span></div>
+                <div class="donut-layout"><div id="riskDonut" class="risk-donut"><div><strong id="riskTotal">0</strong><span>事件</span></div></div><div class="donut-legend"><div><span><i class="legend-fire"></i>火焰</span><strong id="fireRiskRatio">0%</strong></div><div><span><i class="legend-smoke"></i>烟雾</span><strong id="smokeRiskRatio">0%</strong></div><div><span><i class="legend-device"></i>设备</span><strong>12%</strong></div></div></div>
+              </article>
+            </div>
+
+            <div class="overview-grid overview-grid-lower">
               <article class="panel trend-panel">
                 <div class="panel-header"><div><p class="section-kicker">ALERT TREND</p><h3>近期告警趋势</h3></div><div class="legend"><span><i class="legend-fire"></i>火焰</span><span><i class="legend-smoke"></i>烟雾</span></div></div>
                 <div id="trendChart" class="trend-chart" role="img" aria-label="近期火焰和烟雾告警趋势"></div>
@@ -137,6 +155,24 @@
             </article>
           </section>
 
+          <section class="view" id="view-robots" data-view-panel="robots">
+            <div class="page-intro robot-page-intro"><div><p class="section-kicker">ROBOT FLEET OPERATIONS</p><h2>机器人资产与任务管理</h2><p>集中掌握巡检机器人在线状态、任务进度、能源与传感器健康度。</p></div><button id="dispatchRobotButton" class="primary-button" type="button">＋ 创建巡检任务</button></div>
+            <div class="fleet-stat-grid">
+              <article class="fleet-stat"><span>资产总数</span><strong id="robotTotalCount">0</strong><small>台巡检设备</small></article>
+              <article class="fleet-stat"><span>执行任务</span><strong id="robotMissionCount">0</strong><small>正在自动巡检</small></article>
+              <article class="fleet-stat"><span>平均电量</span><strong id="robotAverageBattery">0%</strong><small>编队能源健康</small></article>
+              <article class="fleet-stat"><span>今日里程</span><strong id="robotDistance">0 km</strong><small>累计巡检距离</small></article>
+            </div>
+            <div class="fleet-toolbar"><div class="filter-group" role="group" aria-label="机器人状态筛选"><button type="button" class="filter-button is-active" data-robot-filter="all">全部</button><button type="button" class="filter-button" data-robot-filter="active">任务中</button><button type="button" class="filter-button" data-robot-filter="charging">充电中</button><button type="button" class="filter-button" data-robot-filter="offline">离线</button></div><label class="search-field"><span>⌕</span><input id="robotSearchInput" type="search" placeholder="搜索编号、名称或区域" /></label></div>
+            <div class="robot-management-grid">
+              <div id="robotCardGrid" class="robot-card-grid"></div>
+              <aside class="panel mission-panel">
+                <div class="panel-header"><div><p class="section-kicker">MISSION QUEUE</p><h3>今日任务队列</h3></div><span id="missionQueueCount" class="nav-count nav-count-cyan">0</span></div>
+                <div id="missionQueue" class="mission-queue"></div>
+                <button class="secondary-button mission-history-button" type="button">查看任务历史</button>
+              </aside>
+            </div>
+          </section>
           <section class="view" id="view-risks" data-view-panel="risks">
             <div class="page-intro"><div><p class="section-kicker">RISK REGISTER</p><h2>风险台账</h2><p>从模型阈值、告警策略和处置状态评估当前风险治理情况。</p></div></div>
             <div class="risk-grid">

frontend/styles.css

@@ -191,3 +191,77 @@ code, pre { font-family: "Cascadia Code", Consolas, monospace; }
   .channel-card { flex-direction: column; }
   .toast-region { right: 12px; bottom: 12px; left: 12px; }.toast { min-width: 0; max-width: none; }
 }
+
+/* Command center dashboard */
+body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 72% 6%, #123b3d55, transparent 30%), radial-gradient(circle at 18% 86%, #102b3f44, transparent 27%); }
+.nav-count-cyan { background: var(--cyan-soft); color: var(--cyan); }
+.command-hero { position: relative; overflow: hidden; border: 1px solid #244a4b; background: linear-gradient(110deg, #10262c 0%, #0c1c25 56%, #102c31 100%); }
+.command-hero::after { content: ""; position: absolute; right: -90px; bottom: -160px; width: 390px; height: 390px; border: 1px solid #41d6c326; border-radius: 50%; box-shadow: 0 0 0 48px #41d6c30b, 0 0 0 96px #41d6c308; }
+.command-hero > * { position: relative; z-index: 1; }
+.hero-actions { display: flex; align-items: center; gap: 12px; }
+.live-pill { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; border: 1px solid #29664b; padding: 0 12px; background: #173828aa; color: var(--green); font-size: 10px; letter-spacing: .05em; }
+.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 #5fd28a66; animation: livePulse 2s infinite; }
+@keyframes livePulse { 70% { box-shadow: 0 0 0 8px #5fd28a00; } 100% { box-shadow: 0 0 0 0 #5fd28a00; } }
+.stat-card { position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
+.stat-card::after { content: ""; position: absolute; right: -36px; bottom: -50px; width: 110px; height: 110px; border-radius: 50%; background: #41d6c308; }
+.stat-card:hover { transform: translateY(-2px); border-color: #31545d; }
+.dashboard-command-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.35fr) minmax(260px, .78fr); gap: 14px; margin-top: 14px; }
+.dashboard-command-grid .panel { min-height: 290px; }
+.trend-badge { border: 1px solid #29664b; padding: 5px 8px; background: var(--green-soft); color: var(--green); font-size: 9px; }
+.safety-score-body { display: grid; height: calc(100% - 48px); grid-template-columns: 150px 1fr; align-items: center; gap: 20px; }
+.safety-gauge { --score: 86; position: relative; display: grid; width: 144px; height: 144px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #1a3039 0); box-shadow: 0 0 36px #41d6c316; }
+.safety-gauge::before { content: ""; position: absolute; inset: 12px; border: 1px solid #2c444d; border-radius: 50%; background: var(--surface); }
+.safety-gauge > div { position: relative; display: grid; justify-items: center; gap: 2px; }
+.safety-gauge strong { color: var(--text); font-size: 36px; font-variant-numeric: tabular-nums; }
+.safety-gauge span { color: var(--cyan); font-size: 11px; letter-spacing: .18em; }
+.score-breakdown { display: grid; gap: 9px; }
+.score-breakdown div { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
+.score-breakdown span { color: var(--muted); font-size: 10px; }
+.score-breakdown strong { font-size: 13px; font-variant-numeric: tabular-nums; }
+.zone-map { position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, #0b1820, #0e222b); }
+.map-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(#31515b 1px, transparent 1px), linear-gradient(90deg, #31515b 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 95%); }
+.zone-block { position: absolute; display: grid; place-items: center; border: 1px solid #2a4650; background: #102630c7; color: #73909a; font-size: 9px; letter-spacing: .08em; }
+.zone-a { top: 20px; left: 20px; width: 35%; height: 66px; }.zone-b { top: 20px; right: 20px; width: 48%; height: 98px; }.zone-c { bottom: 18px; left: 20px; width: 42%; height: 66px; }.zone-d { right: 20px; bottom: 18px; width: 41%; height: 46px; }
+.robot-dot { position: absolute; z-index: 2; width: 11px; height: 11px; border: 2px solid #cafff7; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px #41d6c31a, 0 0 15px var(--cyan); }
+.robot-dot::after { content: ""; position: absolute; inset: -7px; border: 1px solid #41d6c34d; border-radius: 50%; animation: livePulse 2.4s infinite; }.robot-dot-1 { top: 54px; left: 28%; }.robot-dot-2 { top: 76px; right: 31%; }.robot-dot-3 { right: 19%; bottom: 34px; }.robot-dot.is-warning { border-color: #ffe0ad; background: var(--orange); box-shadow: 0 0 0 5px #ffad4d1c, 0 0 15px var(--orange); }
+.camera-sweep { position: absolute; top: 50%; left: 50%; width: 115px; height: 115px; transform: translate(-50%, -50%); border: 1px solid #41d6c31a; border-radius: 50%; background: conic-gradient(from 10deg, #41d6c31f, transparent 24%); animation: sweep 8s linear infinite; }
+@keyframes sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
+.zone-legend { display: flex; justify-content: flex-end; gap: 14px; padding-top: 12px; color: var(--muted); font-size: 9px; }.zone-legend span { display: flex; align-items: center; gap: 6px; }.zone-legend i { width: 7px; height: 7px; border-radius: 50%; }.dot-online { background: var(--cyan); }.dot-warning { background: var(--orange); }.dot-offline { background: #60717a; }
+.donut-layout { display: grid; height: calc(100% - 45px); align-items: center; justify-items: center; gap: 20px; }
+.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--red) 0 45%, var(--cyan) 45% 78%, var(--orange) 78% 100%); }
+.risk-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }.risk-donut > div { position: relative; display: grid; justify-items: center; }.risk-donut strong { font-size: 30px; }.risk-donut span { color: var(--muted); font-size: 9px; }
+.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }.legend-device { display: inline-block; background: var(--orange); }
+.overview-grid-lower { margin-top: 14px; }
+
+/* Robot fleet */
+.fleet-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+.fleet-stat { position: relative; display: grid; min-height: 118px; align-content: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); padding: 18px 20px; background: linear-gradient(135deg, var(--surface), #10232d); }
+.fleet-stat::after { content: ""; position: absolute; right: -34px; bottom: -48px; width: 108px; height: 108px; border: 1px solid #41d6c316; border-radius: 50%; box-shadow: 0 0 0 18px #41d6c308; }.fleet-stat span, .fleet-stat small { color: var(--muted); font-size: 10px; }.fleet-stat strong { font-size: 27px; font-variant-numeric: tabular-nums; }
+.fleet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }
+.search-field { display: flex; width: min(300px, 100%); height: 36px; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 0 11px; background: var(--surface); color: var(--muted); }.search-field:focus-within { border-color: var(--cyan); }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
+.robot-management-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 14px; }.robot-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.robot-card { display: grid; gap: 15px; transition: border-color .2s ease, transform .2s ease; }.robot-card:hover { transform: translateY(-2px); border-color: #31545d; }
+.robot-card-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }.robot-card-head h3 { margin: 2px 0 3px; font-size: 15px; }.robot-card-head p { margin: 0; color: var(--muted); font-size: 9px; }.robot-id { color: var(--cyan); font-size: 8px; letter-spacing: .12em; }
+.robot-avatar { position: relative; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #28515a; background: linear-gradient(145deg, #17343d, #0a171e); }.robot-avatar span { width: 24px; height: 15px; border: 2px solid var(--cyan); border-radius: 5px 5px 3px 3px; }.robot-avatar span::before, .robot-avatar span::after { content: ""; position: absolute; bottom: 8px; width: 7px; height: 7px; border: 2px solid #86fff1; border-radius: 50%; background: #0c1c24; }.robot-avatar span::before { left: 8px; }.robot-avatar span::after { right: 8px; }.robot-avatar i { position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
+.robot-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 5px 8px; color: var(--muted); font-size: 9px; }.robot-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.robot-status.active { border-color: #29664b; background: var(--green-soft); color: var(--green); }.robot-status.charging { border-color: #355f83; background: var(--blue-soft); color: var(--blue); }.robot-status.standby { color: var(--orange); }.robot-status.offline { background: #222d32; color: #7a8a91; }
+.robot-location { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-soft); padding: 10px 12px; background: #0b171e; }.robot-location span { color: var(--muted); font-size: 9px; }.robot-location strong { font-size: 10px; }
+.robot-mission { display: grid; gap: 8px; }.robot-mission > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }.robot-mission span { color: var(--muted); }.robot-mission strong { color: var(--cyan); }
+.progress-track { height: 4px; overflow: hidden; background: #1a3039; }.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #238f87, var(--cyan)); box-shadow: 0 0 8px #41d6c355; }
+.robot-telemetry { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-soft); background: var(--line-soft); gap: 1px; }.robot-telemetry div { display: grid; justify-items: center; gap: 5px; padding: 11px 4px; background: #0d1b23; }.robot-telemetry span { color: var(--muted); font-size: 8px; }.robot-telemetry strong { font-size: 11px; }.robot-telemetry .healthy { color: var(--green); }.robot-telemetry .warning { color: var(--orange); }.robot-telemetry .danger { color: var(--red); }
+.sensor-tags { display: flex; flex-wrap: wrap; gap: 6px; }.sensor-tags span { border: 1px solid #24424b; padding: 4px 7px; background: #10232b; color: #8eabb2; font-size: 8px; }.robot-actions { display: flex; gap: 8px; }.robot-actions .secondary-button, .robot-actions .primary-button { flex: 1; min-height: 34px; }.robot-actions .icon-button { flex: 0 0 36px; height: 34px; }
+.robot-empty { grid-column: 1 / -1; padding: 60px 20px; color: var(--muted); text-align: center; }.mission-panel { position: sticky; top: 98px; }.mission-queue { display: grid; margin-top: 4px; }.mission-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 10px; border-top: 1px solid var(--line-soft); padding: 14px 0; }.mission-time { display: grid; justify-items: center; gap: 6px; }.mission-time strong { color: var(--cyan); font-size: 10px; }.mission-time span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 8px; }.mission-copy { display: grid; gap: 6px; }.mission-copy strong { font-size: 10px; }.mission-copy span { color: var(--muted); font-size: 9px; }.mission-status { border: 1px solid var(--line); padding: 4px 6px; color: var(--muted); font-size: 8px; }.mission-status.active { border-color: #29664b; color: var(--green); }.mission-history-button { width: 100%; margin-top: 8px; }
+
+@media (max-width: 1280px) {
+  .dashboard-command-grid { grid-template-columns: 1fr 1.25fr; }
+  .risk-donut-panel { grid-column: 1 / -1; min-height: auto !important; }
+  .donut-layout { grid-template-columns: 160px 1fr; }
+  .robot-management-grid { grid-template-columns: 1fr; }.mission-panel { position: static; }.robot-card-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 900px) {
+  .dashboard-command-grid, .fleet-stat-grid { grid-template-columns: 1fr 1fr; }
+  .zone-map-panel { grid-column: 1 / -1; }
+  .robot-card-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 620px) {
+  .hero-actions, .fleet-toolbar { width: 100%; align-items: stretch; flex-direction: column; }.live-pill { justify-content: center; }.dashboard-command-grid, .fleet-stat-grid { grid-template-columns: 1fr; }.zone-map-panel, .risk-donut-panel { grid-column: auto; }.safety-score-body { grid-template-columns: 1fr; justify-items: center; }.score-breakdown { width: 100%; }.donut-layout { grid-template-columns: 1fr; }.robot-page-intro .primary-button, .search-field { width: 100%; }.robot-card-head { grid-template-columns: 44px 1fr; }.robot-status { grid-column: 2; width: fit-content; }.robot-actions { flex-wrap: wrap; }.robot-actions .icon-button { flex-basis: 100%; width: 100%; }.mission-item { grid-template-columns: 40px 1fr; }.mission-status { grid-column: 2; width: fit-content; }
+}