feat: redesign web management console

web/src/main.js

@@ -33,51 +33,74 @@ const app = document.querySelector("#app");
 
 app.innerHTML = `
   <div class="shell">
-    <header class="header">
+    <header class="console-header">
       <div class="brand">
-        <div class="brand-mark">CD</div>
+        <div class="brand-mark">CG</div>
-        <div>
+        <div class="brand-copy">
+          <div class="brand-kicker">COLD DISPLAY GUARD</div>
           <div class="brand-title">冷藏展示柜管理</div>
-          <div class="brand-subtitle">标定、配置、事件数据</div>
+          <div class="brand-subtitle">区域标定 / 运行监控 / 合规事件</div>
         </div>
       </div>
+
       <nav class="tabs">
         <button data-tab="calibration">区域标定</button>
         <button data-tab="events">事件数据</button>
         <button data-tab="settings">运行配置</button>
       </nav>
+
+      <div class="header-actions">
+        <div class="status-pill" id="statusPill">
+          <span class="status-dot"></span>
+          <span id="statusText"></span>
+        </div>
+        <button id="refreshRuntimeData" class="secondary-action" type="button">刷新运行数据</button>
+      </div>
     </header>
 
     <main class="main">
-      <section class="status-line">
-        <span id="statusText"></span>
-        <button id="refreshRuntimeData" type="button">刷新运行数据</button>
-      </section>
-
       <section id="calibrationView" class="view">
-        <section class="toolbar">
+        <section class="view-head">
-          <label>
+          <div>
-            RTSP 地址（用于抓帧）
+            <p class="view-kicker">CALIBRATION</p>
-            <input id="rtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+            <h1>冷柜区域标定</h1>
-          </label>
+          </div>
-          <button id="captureSnapshot" type="button">抓取一帧</button>
+          <p class="view-note">抓取一帧后，在画面中依次点击每个格口和垃圾桶 ROI 的边界点。</p>
-          <button id="saveCalibration" type="button">保存标定</button>
         </section>
 
-        <section class="calibration-grid">
+        <section class="command-bar">
-          <aside class="panel">
+          <label class="field rtsp-field">
-            <div class="panel-title">区域</div>
+            <span>RTSP 地址（用于抓帧）</span>
+            <input id="rtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+          </label>
+          <div class="command-actions">
+            <button id="captureSnapshot" class="primary-action" type="button">抓取一帧</button>
+            <button id="saveCalibration" class="success-action" type="button">保存标定</button>
+          </div>
+        </section>
+
+        <section class="calibration-layout">
+          <aside class="panel zone-panel">
+            <div class="panel-meta">ZONE MATRIX</div>
+            <div class="panel-title">区域选择</div>
             <div id="regionList" class="region-list"></div>
-            <div class="button-stack">
+            <div class="tool-stack">
               <button id="undoPoint" type="button">撤销点</button>
               <button id="clearRegion" type="button">清空当前区域</button>
-              <button id="loadConfigPolygons" type="button">放弃草稿并载入已保存标定</button>
+              <button id="loadConfigPolygons" type="button">载入已保存标定</button>
             </div>
           </aside>
+
           <section class="canvas-panel">
+            <div class="canvas-toolbar">
+              <span>FRAME INSPECTION</span>
+              <strong id="activeRegionBadge">r1c1</strong>
+            </div>
             <canvas id="canvas" width="1280" height="720"></canvas>
           </section>
-          <aside class="panel">
+
+          <aside class="panel inspection-panel">
+            <div class="panel-meta">POLYGON STATUS</div>
             <div class="panel-title">标定结果</div>
             <div id="regionSummary" class="region-summary"></div>
           </aside>
@@ -85,41 +108,66 @@ app.innerHTML = `
       </section>
 
       <section id="eventsView" class="view hidden">
+        <section class="view-head">
+          <div>
+            <p class="view-kicker">RUNTIME</p>
+            <h1>事件与运行状态</h1>
+          </div>
+          <p class="view-note">从运行进程写入的事件和诊断数据中读取最近状态。</p>
+        </section>
         <section class="metrics" id="metrics"></section>
-        <section class="panel">
+        <section class="panel event-panel">
+          <div class="panel-meta">EVENT LOG</div>
           <div class="panel-title">最近事件</div>
           <div id="eventsTable" class="events-table"></div>
         </section>
       </section>
 
       <section id="settingsView" class="view hidden">
-        <section class="settings-grid">
+        <section class="view-head">
-          <label>
+          <div>
-            RTSP 地址
+            <p class="view-kicker">CONFIGURATION</p>
-            <input id="settingsRtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+            <h1>运行配置</h1>
-          </label>
+          </div>
-          <label>
+          <p class="view-note">保存后写入后端配置；运行进程需要按配置重新读取。</p>
-            Camera ID
-            <input id="cameraId" type="text">
-          </label>
-          <label>
-            时区
-            <input id="timezone" type="text">
-          </label>
-          <label>
-            最大放置秒数
-            <input id="maxDwell" type="number" min="1">
-          </label>
-          <label>
-            垃圾桶确认秒数
-            <input id="trashWindow" type="number" min="1">
-          </label>
         </section>
-        <section class="settings-actions">
+
-          <button id="saveConfig" type="button">保存运行配置</button>
+        <section class="settings-layout">
-          <button id="reloadConfig" type="button">重新载入后端配置</button>
+          <section class="panel settings-panel">
+            <div class="panel-meta">CAMERA INPUT</div>
+            <div class="settings-grid">
+              <label class="field">
+                <span>RTSP 地址</span>
+                <input id="settingsRtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+              </label>
+              <label class="field">
+                <span>Camera ID</span>
+                <input id="cameraId" type="text">
+              </label>
+              <label class="field">
+                <span>时区</span>
+                <input id="timezone" type="text">
+              </label>
+              <label class="field">
+                <span>最大放置秒数</span>
+                <input id="maxDwell" type="number" min="1">
+              </label>
+              <label class="field">
+                <span>垃圾桶确认秒数</span>
+                <input id="trashWindow" type="number" min="1">
+              </label>
+            </div>
+            <div class="settings-actions">
+              <button id="saveConfig" class="success-action" type="button">保存运行配置</button>
+              <button id="reloadConfig" type="button">重新载入后端配置</button>
+            </div>
+          </section>
+
+          <section class="panel preview-panel">
+            <div class="panel-meta">LIVE CONFIG PREVIEW</div>
+            <pre id="configPreview" class="config-preview"></pre>
+          </section>
         </section>
-        <pre id="configPreview" class="config-preview"></pre>
       </section>
     </main>
   </div>
@@ -139,6 +187,8 @@ const els = {
   regionSummary: document.querySelector("#regionSummary"),
   metrics: document.querySelector("#metrics"),
   eventsTable: document.querySelector("#eventsTable"),
+  statusPill: document.querySelector("#statusPill"),
+  activeRegionBadge: document.querySelector("#activeRegionBadge"),
 };
 const ctx = els.canvas.getContext("2d");
 
@@ -377,9 +427,20 @@ function renderRegionList() {
   els.regionList.innerHTML = "";
   for (const id of allRegions) {
     const button = document.createElement("button");
+    const complete = state.polygons[id].length >= 3;
     button.type = "button";
-    button.textContent = `${id}${state.polygons[id].length >= 3 ? " ✓" : ""}`;
+    button.className = [
-    button.className = id === state.activeRegion ? "active" : "";
+      "region-button",
+      id === state.activeRegion ? "active" : "",
+      complete ? "complete" : "",
+    ].filter(Boolean).join(" ");
+    button.style.setProperty("--region-color", palette[id] || "#ffffff");
+    button.innerHTML = `
+      <span class="region-swatch"></span>
+      <span class="region-name">${escapeHtml(getRegionLabel(id))}</span>
+      <span class="region-code">${escapeHtml(id)}</span>
+      <span class="region-points">${state.polygons[id].length}</span>
+    `;
     button.addEventListener("click", () => {
       state.activeRegion = id;
       render();
@@ -538,28 +599,45 @@ function renderRegionSummary() {
   els.regionSummary.innerHTML = allRegions
     .map((id) => {
       const count = state.polygons[id].length;
-      return `<div><strong>${id}</strong><span>${count >= 3 ? `${count} 点，已标定` : `${count} 点`}</span></div>`;
+      const complete = count >= 3;
+      return `
+        <div class="summary-row ${complete ? "complete" : "pending"}">
+          <span class="summary-dot" style="--region-color:${palette[id] || "#ffffff"}"></span>
+          <strong>${escapeHtml(getRegionLabel(id))}</strong>
+          <span>${complete ? `${count} 点 / 已标定` : `${count} 点 / 待完成`}</span>
+        </div>
+      `;
     })
     .join("");
+  els.activeRegionBadge.textContent = state.activeRegion;
 }
 
 function renderMetrics() {
   const metrics = state.summary?.metrics || {};
+  const violationCount = metrics.violation_count ?? 0;
+  const baselineReady = Boolean(metrics.baseline_ready);
   const cards = [
-    ["事件总数", metrics.event_count ?? 0],
+    {label: "事件总数", value: metrics.event_count ?? 0, tone: "neutral"},
-    ["违规事件", metrics.violation_count ?? 0],
+    {label: "违规事件", value: violationCount, tone: violationCount > 0 ? "danger" : "good"},
-    ["诊断帧数", metrics.diagnostics_count ?? 0],
+    {label: "诊断帧数", value: metrics.diagnostics_count ?? 0, tone: "neutral"},
-    ["基线状态", metrics.baseline_ready ? "ready" : "learning"],
+    {label: "基线状态", value: baselineReady ? "ready" : "learning", tone: baselineReady ? "good" : "warning"},
-    ["最新报警", metrics.latest_alert_time || "-"],
+    {label: "最新报警", value: metrics.latest_alert_time || "-", tone: metrics.latest_alert_time ? "danger" : "neutral"},
-    ["事件文件", metrics.events_path || "-"],
+    {label: "事件文件", value: metrics.events_path || "-", tone: "path"},
   ];
   const zoneCounts = metrics.latest_zone_counts || {};
   const zoneSummary = Object.keys(zoneCounts).length
-    ? `<div class="metric wide"><span>最新区域状态</span><strong>${Object.entries(zoneCounts)
+    ? `<div class="metric wide zone-state"><span>最新区域状态</span><strong>${Object.entries(zoneCounts)
         .map(([zoneId, count]) => `${zoneId}:${count}`)
         .join(" ")}</strong></div>`
     : "";
-  els.metrics.innerHTML = cards.map(([label, value]) => `<div class="metric"><span>${label}</span><strong>${value}</strong></div>`).join("") + zoneSummary;
+  els.metrics.innerHTML = cards
+    .map((card) => `
+      <div class="metric ${card.tone}">
+        <span>${escapeHtml(card.label)}</span>
+        <strong>${escapeHtml(String(card.value))}</strong>
+      </div>
+    `)
+    .join("") + zoneSummary;
 }
 
 function renderEvents() {
@@ -574,15 +652,19 @@ function renderEvents() {
         ${state.events
           .slice()
           .reverse()
-          .map((event) => `
+          .map((event) => {
-            <tr>
+            const eventName = event.event || "";
+            const isViolation = eventName.includes("violation");
+            return `
+            <tr class="${isViolation ? "violation-row" : ""}">
               <td>${escapeHtml(event.ts || "")}</td>
-              <td>${escapeHtml(event.event || "")}</td>
+              <td><span class="event-name ${isViolation ? "danger" : ""}">${escapeHtml(eventName)}</span></td>
               <td>${escapeHtml(event.zone_id || "")}</td>
               <td>${escapeHtml(event.batch_id || "")}</td>
               <td>${escapeHtml(String(event.dwell_seconds ?? ""))}</td>
             </tr>
-          `)
+          `;
+          })
           .join("")}
       </tbody>
     </table>
@@ -627,6 +709,23 @@ async function apiJson(path, options = {}) {
 function setStatus(message) {
   state.status = message;
   els.statusText.textContent = message;
+  const tone = message.includes("失败") || message.includes("错误")
+    ? "error"
+    : message.includes("正在")
+      ? "busy"
+      : "ready";
+  els.statusPill.className = `status-pill ${tone}`;
+}
+
+function getRegionLabel(id) {
+  if (id === "trash") {
+    return "垃圾桶";
+  }
+  const match = id.match(/^r(\d)c(\d)$/);
+  if (!match) {
+    return id;
+  }
+  return `${match[1]}排${match[2]}列`;
 }
 
 function clamp(value) {

web/src/styles.css

@@ -1,7 +1,23 @@
 :root {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color-scheme: light;
-  color: #1d2939;
+  --ink: #15202b;
-  background: #f3f5f7;
+  --muted: #637381;
+  --soft: #8b98a7;
+  --paper: #f6f8fa;
+  --panel: #ffffff;
+  --line: #d7dee5;
+  --line-strong: #aeb9c4;
+  --header: #111a22;
+  --header-2: #17232d;
+  --cyan: #0087a8;
+  --green: #0f8f61;
+  --amber: #b76e00;
+  --red: #c93232;
+  --blue: #235f9f;
+  --shadow: 0 18px 50px rgba(17, 26, 34, 0.12);
+  font-family: "Avenir Next", "DIN Alternate", "PingFang SC", "Microsoft YaHei", sans-serif;
+  color: var(--ink);
+  background: var(--paper);
 }
 
 * {
@@ -10,6 +26,10 @@
 
 body {
   margin: 0;
+  min-width: 320px;
+  background:
+    linear-gradient(180deg, rgba(17, 26, 34, 0.08), rgba(17, 26, 34, 0) 260px),
+    var(--paper);
 }
 
 button,
@@ -18,167 +38,425 @@ input {
 }
 
 button {
-  border: 1px solid #c8d0d8;
+  min-height: 38px;
+  border: 1px solid var(--line-strong);
   background: #ffffff;
-  color: #1d2939;
+  color: var(--ink);
   border-radius: 6px;
-  padding: 8px 12px;
+  padding: 8px 13px;
   cursor: pointer;
+  font-weight: 700;
+  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
 }
 
 button:hover {
-  background: #eef3f7;
+  border-color: #7e8c99;
+  background: #eef3f6;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+button:focus-visible,
+input:focus-visible {
+  outline: 3px solid rgba(0, 135, 168, 0.25);
+  outline-offset: 2px;
+}
+
+.primary-action {
+  border-color: var(--cyan);
+  background: var(--cyan);
+  color: #ffffff;
+}
+
+.primary-action:hover {
+  border-color: #006f8b;
+  background: #006f8b;
+}
+
+.success-action {
+  border-color: var(--green);
+  background: var(--green);
+  color: #ffffff;
+}
+
+.success-action:hover {
+  border-color: #0a7550;
+  background: #0a7550;
+}
+
+.secondary-action {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.08);
+  color: #f4f7f9;
+}
+
+.secondary-action:hover {
+  border-color: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.16);
 }
 
 input {
   width: 100%;
-  border: 1px solid #b6c0ca;
+  min-height: 40px;
+  border: 1px solid var(--line-strong);
   border-radius: 6px;
-  padding: 9px 10px;
+  padding: 9px 11px;
   background: #ffffff;
+  color: var(--ink);
 }
 
-label {
+input::placeholder {
+  color: #9aa6b2;
+}
+
+.field {
   display: grid;
-  gap: 6px;
+  gap: 7px;
-  color: #475467;
+  color: var(--muted);
   font-size: 13px;
+  font-weight: 700;
+}
+
+.field span {
+  text-transform: none;
 }
 
 .shell {
   min-height: 100vh;
 }
 
-.header {
+.console-header {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) auto minmax(320px, 1fr);
   align-items: center;
-  justify-content: space-between;
+  gap: 18px;
-  gap: 24px;
+  padding: 14px 20px;
-  padding: 14px 24px;
+  background: var(--header);
-  background: #ffffff;
+  color: #ffffff;
-  border-bottom: 1px solid #d8dee5;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 10px 30px rgba(17, 26, 34, 0.24);
 }
 
 .brand {
   display: flex;
   align-items: center;
+  min-width: 0;
   gap: 12px;
 }
 
 .brand-mark {
   display: grid;
+  flex: 0 0 auto;
   place-items: center;
-  width: 40px;
+  width: 42px;
-  height: 40px;
+  height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
-  background: #155eef;
+  background: #e6f7f8;
-  color: #ffffff;
+  color: #0d4f5d;
-  font-weight: 700;
+  font-family: "DIN Alternate", "Avenir Next Condensed", sans-serif;
+  font-size: 17px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.brand-copy {
+  min-width: 0;
+}
+
+.brand-kicker,
+.view-kicker,
+.panel-meta {
+  color: #6fb9c6;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
 }
 
 .brand-title {
+  margin-top: 2px;
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 900;
+  line-height: 1.15;
 }
 
 .brand-subtitle {
   margin-top: 2px;
-  color: #667085;
+  color: #a9b8c5;
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.tabs button {
+  min-height: 34px;
+  border-color: transparent;
+  background: transparent;
+  color: #c5d0da;
+  white-space: nowrap;
+}
+
+.tabs button:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+}
+
+.tabs button.active {
+  background: #ffffff;
+  color: #13212c;
+}
+
+.header-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+}
+
+.status-pill {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 420px;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  color: #dce7ee;
+  font-size: 13px;
+}
+
+.status-pill span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-dot {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--soft);
+  box-shadow: 0 0 0 4px rgba(139, 152, 167, 0.18);
+}
+
+.status-pill.ready .status-dot {
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(15, 143, 97, 0.22);
+}
+
+.status-pill.busy .status-dot {
+  background: var(--amber);
+  box-shadow: 0 0 0 4px rgba(183, 110, 0, 0.24);
+}
+
+.status-pill.error .status-dot {
+  background: var(--red);
+  box-shadow: 0 0 0 4px rgba(201, 50, 50, 0.24);
+}
+
+.main {
+  padding: 18px;
+}
+
+.view {
+  display: grid;
+  gap: 14px;
+}
+
+.view.hidden,
+.hidden {
+  display: none;
+}
+
+.view-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 16px;
+  padding: 4px 2px;
+}
+
+.view-kicker {
+  margin: 0 0 4px;
+  color: var(--cyan);
+}
+
+.view-head h1 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.1;
+  letter-spacing: 0;
+}
+
+.view-note {
+  max-width: 560px;
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+  text-align: right;
+}
+
+.command-bar {
+  display: grid;
+  grid-template-columns: minmax(320px, 1fr) auto;
+  gap: 12px;
+  align-items: end;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.command-actions {
   display: flex;
   gap: 8px;
 }
 
-.tabs button.active {
+.calibration-layout {
-  background: #155eef;
-  border-color: #155eef;
-  color: #ffffff;
-}
-
-.main {
-  padding: 16px;
-}
-
-.status-line {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-  color: #475467;
-}
-
-.toolbar {
   display: grid;
-  grid-template-columns: minmax(360px, 1fr) auto auto;
+  grid-template-columns: 260px minmax(520px, 1fr) 300px;
   gap: 12px;
-  align-items: end;
+  min-height: calc(100vh - 220px);
-  margin-bottom: 12px;
-  padding: 12px;
-  background: #ffffff;
-  border: 1px solid #d8dee5;
-  border-radius: 8px;
-}
-
-.calibration-grid {
-  display: grid;
-  grid-template-columns: 220px minmax(520px, 1fr) 260px;
-  gap: 12px;
-  min-height: calc(100vh - 190px);
 }
 
 .panel,
-.canvas-panel,
+.canvas-panel {
-.config-preview {
+  border: 1px solid var(--line);
-  background: #ffffff;
-  border: 1px solid #d8dee5;
   border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
 }
 
 .panel {
-  padding: 12px;
+  padding: 14px;
 }
 
 .panel-title {
-  margin-bottom: 10px;
+  margin: 2px 0 12px;
-  font-size: 15px;
+  font-size: 16px;
-  font-weight: 700;
+  font-weight: 900;
 }
 
 .region-list {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.region-button {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) auto 28px;
+  align-items: center;
   gap: 8px;
+  min-height: 42px;
+  padding: 8px 9px;
+  text-align: left;
+  border-color: #d6dde4;
+  background: #fbfcfd;
 }
 
-.region-list button.active {
+.region-button.active {
-  background: #155eef;
+  border-color: var(--region-color);
-  border-color: #155eef;
+  background: color-mix(in srgb, var(--region-color) 11%, white);
-  color: #ffffff;
 }
 
-.button-stack {
+.region-button.complete .region-points {
+  border-color: rgba(15, 143, 97, 0.24);
+  background: #e9f8f1;
+  color: var(--green);
+}
+
+.region-swatch {
+  width: 10px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--region-color);
+}
+
+.region-name {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.region-code {
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.region-points {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 24px;
+  border: 1px solid #dbe2e8;
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.tool-stack {
   display: grid;
   gap: 8px;
   margin-top: 14px;
 }
 
+.tool-stack button {
+  width: 100%;
+}
+
 .canvas-panel {
-  display: flex;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   min-width: 0;
-  min-height: 0;
+  min-height: 540px;
-  align-items: center;
-  justify-content: center;
   overflow: hidden;
-  background: #121826;
+  background: #0d171d;
+}
+
+.canvas-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: #91a6b4;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.canvas-toolbar strong {
+  padding: 4px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  color: #e9f8f9;
+  letter-spacing: 0;
 }
 
 canvas {
   width: 100%;
   height: 100%;
+  min-height: 0;
   object-fit: contain;
   cursor: crosshair;
 }
@@ -188,130 +466,302 @@ canvas {
   gap: 8px;
 }
 
-.region-summary div {
+.summary-row {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  align-items: center;
   gap: 8px;
-  padding-bottom: 7px;
+  min-height: 36px;
-  border-bottom: 1px solid #edf1f5;
+  padding: 8px 0;
+  border-bottom: 1px solid #edf1f4;
 }
 
-.region-summary span {
+.summary-row strong {
-  color: #667085;
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary-row span:last-child {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.summary-row.complete span:last-child {
+  color: var(--green);
+}
+
+.summary-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--region-color);
 }
 
 .metrics {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
-  margin-bottom: 12px;
 }
 
 .metric {
   display: grid;
   gap: 8px;
+  min-height: 104px;
   padding: 14px;
-  background: #ffffff;
+  border: 1px solid var(--line);
-  border: 1px solid #d8dee5;
+  border-top: 4px solid #aeb9c4;
   border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
 }
 
 .metric span {
-  color: #667085;
+  color: var(--muted);
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 900;
 }
 
 .metric strong {
   overflow-wrap: anywhere;
-  font-size: 18px;
+  font-family: "DIN Alternate", "Avenir Next Condensed", "PingFang SC", sans-serif;
+  font-size: 25px;
+  line-height: 1.1;
+  letter-spacing: 0;
+}
+
+.metric.good {
+  border-top-color: var(--green);
+}
+
+.metric.warning {
+  border-top-color: var(--amber);
+}
+
+.metric.danger {
+  border-top-color: var(--red);
+}
+
+.metric.path strong {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.35;
 }
 
 .metric.wide {
   grid-column: 1 / -1;
+  min-height: 78px;
+}
+
+.event-panel {
+  overflow: hidden;
 }
 
 .events-table {
   overflow: auto;
+  margin: 0 -14px -14px;
 }
 
 table {
   width: 100%;
+  min-width: 760px;
   border-collapse: collapse;
 }
 
 th,
 td {
-  padding: 10px;
+  padding: 11px 14px;
-  border-bottom: 1px solid #edf1f5;
+  border-bottom: 1px solid #edf1f4;
   text-align: left;
   white-space: nowrap;
 }
 
 th {
-  color: #475467;
+  position: sticky;
+  top: 0;
+  background: #f4f7f9;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+td {
+  color: #314250;
   font-size: 13px;
 }
 
+.violation-row {
+  background: #fff6f5;
+}
+
+.event-name {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 4px 8px;
+  border: 1px solid #d8e0e7;
+  border-radius: 999px;
+  background: #ffffff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.event-name.danger {
+  border-color: rgba(201, 50, 50, 0.24);
+  background: #fdecea;
+  color: var(--red);
+}
+
+.settings-layout {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
+  gap: 12px;
+  align-items: start;
+}
+
 .settings-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(240px, 1fr));
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
   gap: 12px;
-  margin-bottom: 12px;
+}
-  padding: 12px;
+
-  background: #ffffff;
+.settings-grid .field:first-child {
-  border: 1px solid #d8dee5;
+  grid-column: 1 / -1;
-  border-radius: 8px;
 }
 
 .settings-actions {
   display: flex;
-  gap: 10px;
+  gap: 9px;
-  justify-content: flex-start;
+  flex-wrap: wrap;
-  margin-bottom: 12px;
+  margin-top: 14px;
-  padding: 12px;
+}
-  background: #ffffff;
+
-  border: 1px solid #d8dee5;
+.preview-panel {
-  border-radius: 8px;
+  min-width: 0;
 }
 
 .config-preview {
+  min-height: 420px;
+  max-height: calc(100vh - 220px);
   margin: 0;
-  padding: 12px;
+  padding: 14px;
-  min-height: 320px;
   overflow: auto;
+  border: 1px solid #172631;
+  border-radius: 6px;
+  background: #0e1820;
+  color: #d7e8ef;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
+  line-height: 1.55;
 }
 
 .empty {
-  padding: 24px;
+  padding: 34px 14px;
-  color: #667085;
+  color: var(--muted);
+  font-weight: 800;
 }
 
-.hidden {
+@supports not (background: color-mix(in srgb, white, black)) {
-  display: none;
+  .region-button.active {
+    background: #eef7f8;
+  }
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1280px) {
-  .header,
+  .console-header {
-  .toolbar {
     grid-template-columns: 1fr;
   }
 
-  .header {
+  .tabs {
+    justify-self: start;
+  }
+
+  .header-actions {
+    justify-content: flex-start;
+  }
+
+  .calibration-layout {
+    grid-template-columns: 240px minmax(420px, 1fr);
+  }
+
+  .inspection-panel {
+    grid-column: 1 / -1;
+  }
+
+  .region-summary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 920px) {
+  .main {
+    padding: 12px;
+  }
+
+  .view-head,
+  .header-actions,
+  .command-actions,
+  .settings-actions {
     align-items: stretch;
     flex-direction: column;
   }
 
-  .tabs {
+  .view-note {
-    flex-wrap: wrap;
+    max-width: none;
+    text-align: left;
   }
 
-  .calibration-grid {
+  .command-bar,
+  .calibration-layout,
+  .settings-layout,
+  .settings-grid,
+  .metrics {
     grid-template-columns: 1fr;
   }
 
-  .metrics,
+  .canvas-panel {
-  .settings-grid {
+    min-height: 420px;
+  }
+
+  .region-summary {
     grid-template-columns: 1fr;
   }
+
+  .status-pill {
+    max-width: none;
+    width: 100%;
+  }
+}
+
+@media (max-width: 560px) {
+  .console-header {
+    padding: 12px;
+  }
+
+  .tabs,
+  .command-actions {
+    width: 100%;
+  }
+
+  .tabs {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .command-actions button,
+  .header-actions button {
+    width: 100%;
+  }
+
+  .view-head h1 {
+    font-size: 21px;
+  }
+
+  .panel {
+    padding: 12px;
+  }
 }