Added AMS discovery module

backend/app/api/routes/printers.py

@@ -19,6 +19,8 @@ from backend.app.schemas.printer import (
     PrinterResponse,
     PrinterStatus,
     HMSErrorResponse,
+    AMSUnit,
+    AMSTray,
 )
 from backend.app.services.printer_manager import printer_manager
 from backend.app.services.bambu_ftp import (
@@ -145,6 +147,42 @@ async def get_printer_status(printer_id: int, db: AsyncSession = Depends(get_db)
         for e in (state.hms_errors or [])
     ]
 
+    # Parse AMS data from raw_data
+    ams_units = []
+    vt_tray = None
+    ams_exists = False
+    raw_data = state.raw_data or {}
+
+    if "ams" in raw_data:
+        ams_exists = True
+        for ams_data in raw_data["ams"]:
+            trays = []
+            for tray_data in ams_data.get("tray", []):
+                trays.append(AMSTray(
+                    id=tray_data.get("id", 0),
+                    tray_color=tray_data.get("tray_color"),
+                    tray_type=tray_data.get("tray_type"),
+                    remain=tray_data.get("remain", 0),
+                    k=tray_data.get("k"),
+                ))
+            ams_units.append(AMSUnit(
+                id=ams_data.get("id", 0),
+                humidity=ams_data.get("humidity"),
+                temp=ams_data.get("temp"),
+                tray=trays,
+            ))
+
+    # Virtual tray (external spool holder) - comes from vt_tray in raw_data
+    if "vt_tray" in raw_data:
+        vt_data = raw_data["vt_tray"]
+        vt_tray = AMSTray(
+            id=254,  # Virtual tray ID
+            tray_color=vt_data.get("tray_color"),
+            tray_type=vt_data.get("tray_type"),
+            remain=vt_data.get("remain", 0),
+            k=vt_data.get("k"),
+        )
+
     return PrinterStatus(
         id=printer_id,
         name=printer.name,
@@ -160,6 +198,9 @@ async def get_printer_status(printer_id: int, db: AsyncSession = Depends(get_db)
         temperatures=state.temperatures,
         cover_url=cover_url,
         hms_errors=hms_errors,
+        ams=ams_units,
+        ams_exists=ams_exists,
+        vt_tray=vt_tray,
     )
 
 

backend/app/schemas/printer.py

@@ -43,6 +43,21 @@ class HMSErrorResponse(BaseModel):
     severity: int  # 1=fatal, 2=serious, 3=common, 4=info
 
 
+class AMSTray(BaseModel):
+    id: int
+    tray_color: str | None = None
+    tray_type: str | None = None
+    remain: int = 0
+    k: float | None = None  # Pressure advance value
+
+
+class AMSUnit(BaseModel):
+    id: int
+    humidity: int | None = None
+    temp: float | None = None
+    tray: list[AMSTray] = []
+
+
 class PrinterStatus(BaseModel):
     id: int
     name: str
@@ -58,3 +73,6 @@ class PrinterStatus(BaseModel):
     temperatures: dict | None = None
     cover_url: str | None = None
     hms_errors: list[HMSErrorResponse] = []
+    ams: list[AMSUnit] = []
+    ams_exists: bool = False
+    vt_tray: AMSTray | None = None  # Virtual tray / external spool

backend/app/services/bambu_mqtt.py

@@ -179,6 +179,17 @@ class BambuMQTTClient:
                     f"gcode_file: {print_data.get('gcode_file')}, subtask_name: {print_data.get('subtask_name')}"
                 )
 
+            # Handle AMS data that comes inside print key
+            if "ams" in print_data:
+                try:
+                    self._handle_ams_data(print_data["ams"])
+                except Exception as e:
+                    logger.error(f"[{self.serial_number}] Error handling AMS data from print: {e}")
+
+            # Handle vt_tray (virtual tray / external spool) data
+            if "vt_tray" in print_data:
+                self.state.raw_data["vt_tray"] = print_data["vt_tray"]
+
             # Check for K-profile response (extrusion_cali)
             if "command" in print_data:
                 logger.debug(f"[{self.serial_number}] Received command response: {print_data.get('command')}")
@@ -187,7 +198,7 @@ class BambuMQTTClient:
 
             self._update_state(print_data)
 
-    def _handle_ams_data(self, ams_data: list):
+    def _handle_ams_data(self, ams_data):
         """Handle AMS data changes for Spoolman integration.
 
         This is called when we receive top-level AMS data in MQTT messages.
@@ -195,15 +206,22 @@ class BambuMQTTClient:
         """
         import hashlib
 
-        # Store AMS data in raw_data so it's accessible via API
-        if "ams" not in self.state.raw_data:
-            self.state.raw_data["ams"] = ams_data
+        # Handle nested ams structure: {"ams": {"ams": [...]}} or {"ams": [...]}
+        if isinstance(ams_data, dict) and "ams" in ams_data:
+            ams_list = ams_data["ams"]
+        elif isinstance(ams_data, list):
+            ams_list = ams_data
         else:
-            self.state.raw_data["ams"] = ams_data
+            logger.warning(f"[{self.serial_number}] Unexpected AMS data format: {type(ams_data)}")
+            return
+
+        # Store AMS data in raw_data so it's accessible via API
+        self.state.raw_data["ams"] = ams_list
+        logger.debug(f"[{self.serial_number}] Stored AMS data with {len(ams_list)} units")
 
         # Create a hash of relevant AMS data to detect changes
         ams_hash_data = []
-        for ams_unit in ams_data:
+        for ams_unit in ams_list:
             for tray in ams_unit.get("tray", []):
                 # Include fields that matter for filament tracking
                 ams_hash_data.append(
@@ -217,7 +235,7 @@ class BambuMQTTClient:
             self._previous_ams_hash = ams_hash
             if self.on_ams_change:
                 logger.info(f"[{self.serial_number}] AMS data changed, triggering sync callback")
-                self.on_ams_change(ams_data)
+                self.on_ams_change(ams_list)
 
     def _update_state(self, data: dict):
         """Update printer state from message data."""
@@ -306,11 +324,14 @@ class BambuMQTTClient:
                             severity=severity if severity > 0 else 3,
                         ))
 
-        # Preserve AMS data when updating raw_data (AMS comes at top level, not in print)
+        # Preserve AMS and vt_tray data when updating raw_data
         ams_data = self.state.raw_data.get("ams")
+        vt_tray_data = self.state.raw_data.get("vt_tray")
         self.state.raw_data = data
         if ams_data is not None:
             self.state.raw_data["ams"] = ams_data
+        if vt_tray_data is not None:
+            self.state.raw_data["vt_tray"] = vt_tray_data
 
         # Log state transitions for debugging
         if "gcode_state" in data:

frontend/src/api/client.ts

@@ -41,6 +41,21 @@ export interface HMSError {
   severity: number;  // 1=fatal, 2=serious, 3=common, 4=info
 }
 
+export interface AMSTray {
+  id: number;
+  tray_color: string | null;
+  tray_type: string | null;
+  remain: number;
+  k: number | null;  // Pressure advance value
+}
+
+export interface AMSUnit {
+  id: number;
+  humidity: number | null;
+  temp: number | null;
+  tray: AMSTray[];
+}
+
 export interface PrinterStatus {
   id: number;
   name: string;
@@ -62,6 +77,9 @@ export interface PrinterStatus {
   } | null;
   cover_url: string | null;
   hms_errors: HMSError[];
+  ams: AMSUnit[];
+  ams_exists: boolean;
+  vt_tray: AMSTray | null;  // Virtual tray / external spool
 }
 
 export interface PrinterCreate {

frontend/src/components/control/AMSPanel.tsx

@@ -1,59 +1,16 @@
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api } from '../../api/client';
-import type { PrinterStatus } from '../../api/client';
-import { Package, Loader2, ArrowDown, ArrowUp } from 'lucide-react';
+import type { PrinterStatus, AMSUnit } from '../../api/client';
+import { Package, Loader2, ArrowDown, ArrowUp, Droplets, Thermometer } from 'lucide-react';
 
 interface AMSPanelProps {
   printerId: number;
   status: PrinterStatus | null | undefined;
 }
 
-interface AMSTray {
-  id: number;
-  color: string;
-  type: string;
-  remain: number;
-  active: boolean;
-}
-
-interface AMSUnit {
-  id: number;
-  trays: AMSTray[];
-}
-
-// Parse AMS data from raw_data in status
-function parseAMSData(status: PrinterStatus | null | undefined): AMSUnit[] {
-  // AMS data comes from raw MQTT data
-  // This is a simplified parser - actual data structure may vary
-  const rawData = (status as { raw_data?: { ams?: unknown[] } })?.raw_data;
-  if (!rawData?.ams) return [];
-
-  try {
-    return (rawData.ams as Array<{
-      id?: number;
-      tray?: Array<{
-        id?: number;
-        tray_color?: string;
-        tray_type?: string;
-        remain?: number;
-      }>;
-    }>).map((unit) => ({
-      id: unit.id ?? 0,
-      trays: (unit.tray ?? []).map((tray) => ({
-        id: tray.id ?? 0,
-        color: tray.tray_color ?? 'FFFFFF',
-        type: tray.tray_type ?? 'Unknown',
-        remain: tray.remain ?? 0,
-        active: false, // Would need additional MQTT data to determine
-      })),
-    }));
-  } catch {
-    return [];
-  }
-}
-
-function hexToRgb(hex: string): string {
+function hexToRgb(hex: string | null): string {
+  if (!hex) return 'rgb(128, 128, 128)';
   // Handle RRGGBBAA format
   const cleanHex = hex.replace('#', '').substring(0, 6);
   const r = parseInt(cleanHex.substring(0, 2), 16) || 128;
@@ -65,7 +22,7 @@ function hexToRgb(hex: string): string {
 export function AMSPanel({ printerId, status }: AMSPanelProps) {
   const isConnected = status?.connected ?? false;
   const isPrinting = status?.state === 'RUNNING';
-  const amsUnits = parseAMSData(status);
+  const amsUnits: AMSUnit[] = status?.ams ?? [];
 
   const [selectedTray, setSelectedTray] = useState<number | null>(null);
 
@@ -116,14 +73,28 @@ export function AMSPanel({ printerId, status }: AMSPanelProps) {
       {/* AMS Units */}
       {amsUnits.map((unit) => (
         <div key={unit.id} className="mb-4">
-          {amsUnits.length > 1 && (
-            <div className="text-xs text-bambu-gray mb-2">AMS {unit.id + 1}</div>
-          )}
+          <div className="flex items-center justify-between text-xs text-bambu-gray mb-2">
+            <span>AMS {unit.id + 1}</span>
+            <div className="flex items-center gap-3">
+              {unit.humidity !== null && (
+                <span className="flex items-center gap-1">
+                  <Droplets className="w-3 h-3" />
+                  {unit.humidity}%
+                </span>
+              )}
+              {unit.temp !== null && (
+                <span className="flex items-center gap-1">
+                  <Thermometer className="w-3 h-3" />
+                  {unit.temp}°C
+                </span>
+              )}
+            </div>
+          </div>
           <div className="grid grid-cols-4 gap-2">
-            {unit.trays.map((tray) => {
+            {unit.tray.map((tray) => {
               const globalTrayId = unit.id * 4 + tray.id;
               const isSelected = selectedTray === globalTrayId;
-              const isEmpty = tray.type === 'NONE' || !tray.type;
+              const isEmpty = !tray.tray_type || tray.tray_type === '' || tray.tray_type === 'NONE';
 
               return (
                 <button
@@ -140,7 +111,7 @@ export function AMSPanel({ printerId, status }: AMSPanelProps) {
                   <div
                     className="w-8 h-8 mx-auto rounded-full mb-1 border-2 border-bambu-dark-tertiary"
                     style={{
-                      backgroundColor: isEmpty ? '#333' : hexToRgb(tray.color),
+                      backgroundColor: isEmpty ? '#333' : hexToRgb(tray.tray_color),
                     }}
                   />
 
@@ -150,8 +121,8 @@ export function AMSPanel({ printerId, status }: AMSPanelProps) {
                   </div>
 
                   {/* Type */}
-                  <div className="text-xs text-center truncate" title={tray.type}>
-                    {isEmpty ? '--' : tray.type}
+                  <div className="text-xs text-center truncate" title={tray.tray_type ?? ''}>
+                    {isEmpty ? '--' : tray.tray_type}
                   </div>
 
                   {/* Remaining */}
@@ -168,11 +139,6 @@ export function AMSPanel({ printerId, status }: AMSPanelProps) {
                       </div>
                     </div>
                   )}
-
-                  {/* Active Indicator */}
-                  {tray.active && (
-                    <div className="absolute top-1 right-1 w-2 h-2 rounded-full bg-bambu-green animate-pulse" />
-                  )}
                 </button>
               );
             })}

mockup/control-page-mockup.html

@@ -0,0 +1,1026 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control Page Mockup</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg-primary: #1a1a1a;
+      --bg-secondary: #2d2d2d;
+      --bg-tertiary: #3d3d3d;
+      --text-primary: #ffffff;
+      --text-secondary: #888888;
+      --accent: #00ae42;
+      --accent-dark: #008c35;
+      --orange: #f5a623;
+      --red: #e74c3c;
+      --blue: #3498db;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+    }
+
+    /* Printer Tabs */
+    .printer-tabs {
+      display: flex;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--bg-tertiary);
+      padding: 0 16px;
+    }
+
+    .printer-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      font-size: 14px;
+    }
+
+    .printer-tab.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+      background: var(--bg-primary);
+    }
+
+    .printer-tab .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent);
+    }
+
+    .printer-tab .status-dot.offline {
+      background: var(--red);
+    }
+
+    /* Main Layout */
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 380px;
+      height: calc(100vh - 49px);
+      gap: 0;
+    }
+
+    /* Left Column */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-primary);
+    }
+
+    /* Camera Section */
+    .camera-section {
+      flex: 1;
+      background: #000;
+      position: relative;
+      min-height: 0;
+    }
+
+    .camera-feed {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .camera-btn {
+      padding: 6px 12px;
+      background: rgba(0,0,0,0.6);
+      border: none;
+      border-radius: 4px;
+      color: white;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .camera-btn:hover {
+      background: rgba(0,0,0,0.8);
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-secondary);
+      padding: 16px;
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+
+    .print-thumbnail {
+      width: 80px;
+      height: 80px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      font-size: 12px;
+    }
+
+    .print-info {
+      flex: 1;
+    }
+
+    .print-name {
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: var(--text-primary);
+    }
+
+    .progress-bar {
+      height: 6px;
+      background: var(--bg-tertiary);
+      border-radius: 3px;
+      margin-bottom: 8px;
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--accent);
+      width: 45%;
+      transition: width 0.3s;
+    }
+
+    .print-stats {
+      display: flex;
+      gap: 24px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .print-stats span {
+      color: var(--text-primary);
+    }
+
+    /* Print Controls - in progress section */
+    .print-controls-inline {
+      display: flex;
+      gap: 8px;
+      margin-left: 16px;
+    }
+
+    .print-btn-small {
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .print-btn-small.pause {
+      background: #f39c12;
+      color: white;
+    }
+
+    .print-btn-small.stop {
+      background: var(--red);
+      color: white;
+    }
+
+    .print-btn-small:hover {
+      opacity: 0.9;
+    }
+
+    .print-btn-small:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    /* Right Column - Control Panel */
+    .control-panel {
+      background: var(--bg-secondary);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Section */
+    .section {
+      padding: 16px;
+      border-bottom: 1px solid var(--bg-tertiary);
+    }
+
+    .section-title {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-bottom: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    /* Temperatures */
+    .temps-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    .temp-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--bg-primary);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .temp-item:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .temp-icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+
+    .temp-values {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+    }
+
+    .temp-current {
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    .temp-current.hot {
+      color: var(--orange);
+    }
+
+    .temp-target {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    /* Quick Controls Row */
+    .quick-controls {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .quick-btn {
+      flex: 1;
+      padding: 8px;
+      background: var(--bg-primary);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .quick-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .quick-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    /* Speed Control */
+    .speed-control {
+      display: flex;
+      gap: 4px;
+    }
+
+    .speed-btn {
+      flex: 1;
+      padding: 10px 8px;
+      background: var(--bg-primary);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      text-align: center;
+    }
+
+    .speed-btn:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .speed-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .speed-btn.ludicrous {
+      color: var(--red);
+    }
+
+    .speed-btn.ludicrous.active {
+      background: var(--red);
+      color: white;
+    }
+
+    /* Movement Controls */
+    .movement-section {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+    }
+
+    .jog-pad {
+      position: relative;
+      width: 140px;
+      height: 140px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--bg-primary);
+      position: relative;
+    }
+
+    .jog-btn {
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      background: var(--bg-tertiary);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-primary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+    }
+
+    .jog-btn:hover {
+      background: var(--accent);
+    }
+
+    .jog-btn.up { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+      background: var(--accent);
+      border: none;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      font-size: 18px;
+    }
+
+    .jog-home:hover {
+      background: var(--accent-dark);
+    }
+
+    /* Z Controls */
+    .z-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .z-btn {
+      width: 44px;
+      height: 44px;
+      background: var(--bg-primary);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-primary);
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .z-btn:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .z-label {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    /* Step Size */
+    .step-sizes {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .step-btn {
+      padding: 6px 12px;
+      background: var(--bg-primary);
+      border: none;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+
+    .step-btn:hover, .step-btn.active {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    /* Extruder */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-toggle {
+      display: flex;
+      background: var(--bg-primary);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .extruder-toggle button {
+      padding: 6px 16px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .extruder-toggle button.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .extruder-graphic {
+      width: 60px;
+      height: 80px;
+      background: var(--bg-primary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      font-size: 10px;
+    }
+
+    .extruder-btns {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    /* AMS Section */
+    .ams-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* AMS Tabs - like Bambu Studio color indicators */
+    .ams-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 6px 10px;
+      background: var(--bg-primary);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .ams-tab.active {
+      border-color: var(--accent);
+    }
+
+    .ams-tab-colors {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+    }
+
+    .ams-tab-label {
+      font-size: 10px;
+      color: var(--text-secondary);
+      margin-left: 4px;
+    }
+
+    /* AMS Unit Content */
+    .ams-unit-content {
+      background: var(--bg-primary);
+      border-radius: 8px;
+      padding: 12px;
+    }
+
+    .ams-unit-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .ams-slots {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+    }
+
+    .ams-slot {
+      width: 56px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: all 0.2s;
+    }
+
+    .ams-slot:hover {
+      border-color: var(--text-secondary);
+    }
+
+    .ams-slot.selected {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(0, 174, 66, 0.3);
+    }
+
+    .ams-slot.empty {
+      opacity: 0.4;
+    }
+
+    .ams-slot-color {
+      height: 36px;
+      position: relative;
+    }
+
+    .ams-slot-color::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      background: linear-gradient(transparent, rgba(0,0,0,0.3));
+    }
+
+    .ams-slot-info {
+      padding: 6px 4px;
+      text-align: center;
+      background: var(--bg-tertiary);
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .ams-slot-num {
+      font-size: 9px;
+      color: var(--text-secondary);
+      margin-top: 2px;
+    }
+
+    /* External Spool */
+    .external-spool {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 12px;
+    }
+
+    .ext-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      width: 30px;
+    }
+
+    .ext-slot {
+      width: 56px;
+      height: 64px;
+      background: var(--bg-primary);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      font-size: 18px;
+      border: 2px solid transparent;
+      cursor: pointer;
+    }
+
+    .ext-slot:hover {
+      border-color: var(--text-secondary);
+    }
+
+    .ext-slot-label {
+      font-size: 9px;
+      margin-top: 4px;
+    }
+
+    .ext-graphic {
+      flex: 1;
+      height: 64px;
+      background: var(--bg-primary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .ams-btn {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    .ams-btn.secondary {
+      background: var(--bg-primary);
+      color: var(--text-primary);
+    }
+
+    .ams-btn.secondary:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .ams-btn.primary {
+      background: var(--accent);
+      color: white;
+    }
+
+    .ams-btn.primary:hover {
+      background: var(--accent-dark);
+    }
+
+    /* AMS Animation Area - reserved space for filament path animation */
+    .ams-animation-area {
+      flex: 1;
+      min-height: 100px;
+      margin-top: 16px;
+      background: var(--bg-primary);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .ams-hub-graphic {
+      width: 80px;
+      height: 24px;
+      background: var(--bg-tertiary);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: var(--text-secondary);
+    }
+
+    .ams-filament-path {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 2px;
+      height: 30px;
+      background: var(--accent);
+      transform: translateX(-50%);
+    }
+
+    .ams-status-text {
+      font-size: 11px;
+      color: var(--text-secondary);
+      margin-top: 12px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Printer Tabs -->
+  <div class="printer-tabs">
+    <button class="printer-tab active">
+      <span class="status-dot"></span>
+      H2D-1
+      <span style="font-size: 11px; padding: 2px 8px; background: var(--bg-tertiary); border-radius: 4px;">IDLE</span>
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot"></span>
+      X1C-2
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot offline"></span>
+      P1S-3
+    </button>
+  </div>
+
+  <!-- Main Content -->
+  <div class="main-content">
+    <!-- Left Column: Camera + Progress -->
+    <div class="left-column">
+      <div class="camera-section">
+        <div class="camera-feed">
+          <!-- Camera placeholder -->
+          <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #666;">
+            📷 Camera Feed
+          </div>
+        </div>
+        <div class="camera-overlay">
+          <button class="camera-btn">▶ Start</button>
+          <button class="camera-btn">⛶ Fullscreen</button>
+        </div>
+      </div>
+
+      <div class="print-progress">
+        <div class="print-thumbnail">
+          No Print
+        </div>
+        <div class="print-info">
+          <div class="print-name">Idle</div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 0%"></div>
+          </div>
+          <div class="print-stats">
+            Layer: <span>--/--</span>
+            Time: <span>--:--</span>
+            Remaining: <span>--:--</span>
+          </div>
+        </div>
+        <div class="print-controls-inline">
+          <button class="print-btn-small pause" disabled>⏸</button>
+          <button class="print-btn-small stop" disabled>⏹</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column: Control Panel -->
+    <div class="control-panel">
+      <!-- Temperatures -->
+      <div class="section">
+        <div class="section-title">Temperature</div>
+        <div class="temps-grid">
+          <div class="temp-item">
+            <div class="temp-icon">🔥L</div>
+            <div class="temp-values">
+              <span class="temp-current">22</span>
+              <span class="temp-target">/0°C</span>
+            </div>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon">🔥R</div>
+            <div class="temp-values">
+              <span class="temp-current">21</span>
+              <span class="temp-target">/0°C</span>
+            </div>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon">🛏️</div>
+            <div class="temp-values">
+              <span class="temp-current">21</span>
+              <span class="temp-target">/0°C</span>
+            </div>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon">📦</div>
+            <div class="temp-values">
+              <span class="temp-current">21</span>
+              <span class="temp-target">/0°C</span>
+            </div>
+          </div>
+        </div>
+        <div class="quick-controls">
+          <button class="quick-btn">🌀 Fans</button>
+          <button class="quick-btn active">💡 Lamp</button>
+          <button class="quick-btn">❄️ Cool</button>
+        </div>
+      </div>
+
+      <!-- Speed -->
+      <div class="section">
+        <div class="section-title">Print Speed</div>
+        <div class="speed-control">
+          <button class="speed-btn">Silent</button>
+          <button class="speed-btn active">Standard</button>
+          <button class="speed-btn">Sport</button>
+          <button class="speed-btn ludicrous">Ludicrous</button>
+        </div>
+      </div>
+
+      <!-- Movement -->
+      <div class="section">
+        <div class="section-title">Movement</div>
+        <div class="movement-section">
+          <div class="jog-pad">
+            <div class="jog-ring">
+              <button class="jog-btn up">▲</button>
+              <button class="jog-btn down">▼</button>
+              <button class="jog-btn left">◀</button>
+              <button class="jog-btn right">▶</button>
+              <button class="jog-home">⌂</button>
+            </div>
+          </div>
+
+          <div class="z-controls">
+            <button class="z-btn">▲</button>
+            <span class="z-label">Z</span>
+            <button class="z-btn">▼</button>
+          </div>
+
+          <div class="step-sizes">
+            <button class="step-btn">10mm</button>
+            <button class="step-btn active">1mm</button>
+            <button class="step-btn">0.1mm</button>
+          </div>
+
+          <div class="extruder-section">
+            <div class="extruder-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic">
+              🖨️<br>Extruder
+            </div>
+            <div class="extruder-btns">
+              <button class="z-btn" style="width: 36px; height: 28px; font-size: 12px;">▲</button>
+              <button class="z-btn" style="width: 36px; height: 28px; font-size: 12px;">▼</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- AMS -->
+      <div class="section ams-section">
+        <div class="section-title">AMS</div>
+
+        <!-- AMS Tabs - color indicators like Bambu Studio -->
+        <div class="ams-tabs">
+          <div class="ams-tab active">
+            <div class="ams-tab-colors">
+              <div class="ams-tab-dot" style="background: #FFD700;"></div>
+              <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+              <div class="ams-tab-dot" style="background: #8B4513;"></div>
+              <div class="ams-tab-dot" style="background: #2d2d2d;"></div>
+            </div>
+            <span class="ams-tab-label">1</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-colors">
+              <div class="ams-tab-dot" style="background: #FF0000;"></div>
+              <div class="ams-tab-dot" style="background: #0066FF;"></div>
+              <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+              <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+            </div>
+            <span class="ams-tab-label">2</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-colors">
+              <div class="ams-tab-dot" style="background: #00FF00;"></div>
+              <div class="ams-tab-dot" style="background: #FFFFFF;"></div>
+              <div class="ams-tab-dot" style="background: #FF69B4;"></div>
+              <div class="ams-tab-dot" style="background: #9932CC;"></div>
+            </div>
+            <span class="ams-tab-label">3</span>
+          </div>
+        </div>
+
+        <!-- AMS Unit Content (shows selected AMS) -->
+        <div class="ams-unit-content">
+          <div class="ams-unit-header">
+            <span>AMS 1</span>
+            <span>💧 18% · 🌡️ 24°C</span>
+          </div>
+          <div class="ams-slots">
+            <div class="ams-slot selected">
+              <div class="ams-slot-color" style="background: #FFD700;"></div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A1</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: #1a1a1a;"></div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A2</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: #8B4513;"></div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A3</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: #2d2d2d;"></div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A4</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- External Spool -->
+        <div class="external-spool">
+          <span class="ext-label">Ext</span>
+          <div class="ext-slot">
+            ?
+            <span class="ext-slot-label">Spool</span>
+          </div>
+          <div class="ext-graphic">🎞️ External Spool Holder</div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="ams-btn secondary">Unload</button>
+          <button class="ams-btn primary">Load</button>
+        </div>
+
+        <!-- AMS Animation Area - reserved for filament path animation -->
+        <div class="ams-animation-area">
+          <div class="ams-hub-graphic">HUB</div>
+          <div class="ams-status-text">Ready - Select a slot to load</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v10.html

@@ -0,0 +1,923 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v10</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f5f5f5;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 450px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 14px; align-items: center; }
+    .progress-thumb {
+      width: 60px; height: 60px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 24px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column { flex: 0 0 auto; }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 20px;
+      text-align: center;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-value {
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 110px;
+      height: 110px;
+      margin-bottom: 10px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 18px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 18px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 18px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .bed-btn {
+      padding: 7px 12px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 6px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .extruder-btn {
+      width: 32px;
+      height: 32px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 70px;
+      margin: 6px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== FILAMENT BOXES ========== */
+    .filament-boxes {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 14px;
+      padding-bottom: 14px;
+      border-bottom: 1px solid var(--border-light);
+      flex-wrap: wrap;
+    }
+
+    .filament-box {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 10px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .filament-box:hover { border-color: #ccc; }
+    .filament-box.active { border-color: var(--accent); }
+
+    .filament-dots { display: flex; gap: 4px; }
+
+    .f-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #e8e8e8 !important;
+      border: 1px solid #ccc;
+    }
+
+    .f-dot-sep {
+      width: 1px;
+      height: 18px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-left: 6px;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      display: flex;
+      gap: 14px;
+    }
+
+    .ams-unit {
+      flex: 1;
+      min-width: 0;
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 14px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 14px;
+      color: var(--text-secondary);
+    }
+
+    .ams-humidity img { width: 16px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 80px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+    }
+
+    .ams-slot-type {
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 18px; height: 18px; }
+    .ams-slot-eye img { width: 16px; height: 16px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      padding: 0 10px;
+    }
+
+    .connector-group {
+      flex: 1;
+      display: flex;
+      gap: 6px;
+      position: relative;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 12%;
+      right: 12%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+      flex-wrap: wrap;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 9px 16px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 20px; opacity: 0.5; }
+
+    /* Hub */
+    .hub-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .hub-line { width: 30px; height: 2px; background: #c0c0c0; }
+
+    .hub-graphic {
+      display: flex;
+      padding: 5px 8px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-port {
+      width: 10px;
+      height: 14px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 2px;
+    }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 9px 24px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div style="display: flex; align-items: center; gap: 16px; margin-top: 8px;">
+              <div class="air-value"><img src="icons/ventilation.svg" style="width:16px; opacity:0.5; vertical-align:middle;"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filament Assignment Boxes -->
+        <div class="filament-boxes">
+          <div class="filament-box active">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFD700;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot-sep"></div>
+              <div class="f-dot" style="background: #FF3366;"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+        </div>
+
+        <!-- AMS Section - Two units side by side -->
+        <div class="ams-section">
+          <!-- AMS Unit 1 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 17 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">A1&#8595;</div>
+              <div class="slot-label">A2&#8595;</div>
+              <div class="slot-label">A3&#8595;</div>
+              <div class="slot-label">A4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot active">
+                <div class="ams-slot-fill" style="background: #FFD700;">
+                  <span class="ams-slot-type dark">PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #333;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #8B4513;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Unit 2 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 14 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">B1&#8595;</div>
+              <div class="slot-label">B2&#8595;</div>
+              <div class="slot-label">B3&#8595;</div>
+              <div class="slot-label">B4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #aaa;">
+                  <span class="ams-slot-type dark">Sup.PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="auto-refill-btn">Auto-refill</button>
+          <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+          <div class="hub-section">
+            <div class="hub-line"></div>
+            <div class="hub-graphic">
+              <div class="hub-port"></div>
+              <div class="hub-port"></div>
+            </div>
+            <div class="hub-line"></div>
+          </div>
+          <div class="ams-spacer"></div>
+          <button class="ams-action-btn">Unload</button>
+          <button class="ams-action-btn">Load</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v11.html

@@ -0,0 +1,936 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v11</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f5f5f5;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 580px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 14px; align-items: center; }
+    .progress-thumb {
+      width: 60px; height: 60px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 140px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 20px;
+      text-align: center;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== FILAMENT BOXES ========== */
+    .filament-boxes {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border-light);
+    }
+
+    .filament-box {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 10px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .filament-box:hover { border-color: #ccc; }
+    .filament-box.active { border-color: var(--accent); }
+
+    .filament-dots { display: flex; gap: 4px; }
+
+    .f-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #e8e8e8 !important;
+      border: 1px solid #ccc;
+    }
+
+    .f-dot-sep {
+      width: 1px;
+      height: 18px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-left: 6px;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      display: flex;
+      gap: 16px;
+    }
+
+    .ams-unit {
+      flex: 1;
+      min-width: 0;
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 14px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 14px;
+      color: var(--text-secondary);
+    }
+
+    .ams-humidity img { width: 16px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 4px 0;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 80px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+    }
+
+    .ams-slot-type {
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 18px; height: 18px; }
+    .ams-slot-eye img { width: 16px; height: 16px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      padding: 0 10px;
+    }
+
+    .connector-group {
+      flex: 1;
+      display: flex;
+      gap: 6px;
+      position: relative;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 12%;
+      right: 12%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    /* Hub */
+    .hub-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .hub-line { width: 40px; height: 2px; background: #c0c0c0; }
+
+    .hub-graphic {
+      display: flex;
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-port {
+      width: 12px;
+      height: 16px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 3px;
+    }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filament Assignment Boxes -->
+        <div class="filament-boxes">
+          <div class="filament-box active">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFD700;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot-sep"></div>
+              <div class="f-dot" style="background: #FF3366;"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+        </div>
+
+        <!-- AMS Section - Two units side by side -->
+        <div class="ams-section">
+          <!-- AMS Unit 1 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 17 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">A1&#8595;</div>
+              <div class="slot-label">A2&#8595;</div>
+              <div class="slot-label">A3&#8595;</div>
+              <div class="slot-label">A4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot active">
+                <div class="ams-slot-fill" style="background: #FFD700;">
+                  <span class="ams-slot-type dark">PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #333;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #8B4513;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Unit 2 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 14 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">B1&#8595;</div>
+              <div class="slot-label">B2&#8595;</div>
+              <div class="slot-label">B3&#8595;</div>
+              <div class="slot-label">B4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #aaa;">
+                  <span class="ams-slot-type dark">Sup.PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="auto-refill-btn">Auto-refill</button>
+          <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+          <div class="hub-section">
+            <div class="hub-line"></div>
+            <div class="hub-graphic">
+              <div class="hub-port"></div>
+              <div class="hub-port"></div>
+            </div>
+            <div class="hub-line"></div>
+          </div>
+          <div class="ams-spacer"></div>
+          <button class="ams-action-btn">Unload</button>
+          <button class="ams-action-btn">Load</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v12.html

@@ -0,0 +1,1174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v12</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f5f5f5;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 580px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== FILAMENT BOXES ========== */
+    .filament-boxes {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border-light);
+      flex-wrap: wrap;
+    }
+
+    .filament-box {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 10px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .filament-box:hover { border-color: #ccc; }
+    .filament-box.active { border-color: var(--accent); }
+
+    .filament-dots { display: flex; gap: 4px; }
+
+    .f-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #e8e8e8 !important;
+      border: 1px solid #ccc;
+    }
+
+    .f-dot-sep {
+      width: 1px;
+      height: 18px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-left: 6px;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-container {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .ams-row {
+      display: flex;
+      gap: 12px;
+    }
+
+    .ams-unit {
+      flex: 1;
+      min-width: 0;
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 12px;
+    }
+
+    .ams-unit.ams-ht {
+      flex: 0 0 auto;
+      width: 100px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 10px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+    .ams-stat .temp-icon { font-size: 12px; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 60px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 6px;
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 2px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 14px; height: 14px; }
+    .ams-slot-eye img { width: 12px; height: 12px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      padding: 0 8px;
+    }
+
+    .connector-group {
+      flex: 1;
+      display: flex;
+      gap: 4px;
+      position: relative;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 10px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 12%;
+      right: 12%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* AMS-HT single slot */
+    .ams-ht .ams-slots {
+      justify-content: center;
+    }
+
+    .ams-ht .ams-slot {
+      flex: none;
+      width: 50px;
+    }
+
+    .ams-ht .slot-labels {
+      justify-content: center;
+    }
+
+    .ams-ht .slot-label {
+      flex: none;
+      width: 50px;
+    }
+
+    .ams-ht .ams-connectors {
+      justify-content: center;
+    }
+
+    .ams-ht .connector-group {
+      flex: none;
+      width: 50px;
+    }
+
+    .ams-ht .connector-hbar {
+      display: none;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    /* Hub */
+    .hub-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .hub-line { width: 40px; height: 2px; background: #c0c0c0; }
+
+    .hub-graphic {
+      display: flex;
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-port {
+      width: 12px;
+      height: 16px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 3px;
+    }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filament Assignment Boxes -->
+        <div class="filament-boxes">
+          <div class="filament-box active">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFD700;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #8B4513;"></div>
+              <div class="f-dot" style="background: #666;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FF6600;"></div>
+              <div class="f-dot" style="background: #00AA00;"></div>
+              <div class="f-dot" style="background: #0066FF;"></div>
+              <div class="f-dot" style="background: #FF0000;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFFFFF; border-color: #ccc;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #666;"></div>
+              <div class="f-dot" style="background: #999;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #CC99FF;"></div>
+              <div class="f-dot" style="background: #FFCC00;"></div>
+              <div class="f-dot" style="background: #00CCCC;"></div>
+              <div class="f-dot" style="background: #FF66CC;"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section - 4x AMS + 2x AMS-HT -->
+        <div class="ams-container">
+          <!-- Row 1: AMS 1 + AMS 2 -->
+          <div class="ams-row">
+            <div class="ams-unit">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 17%</div>
+                <div class="ams-stat">25°C</div>
+                <div class="ams-stat"><span class="sun">&#9728;</span></div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">A1&#8595;</div>
+                <div class="slot-label">A2&#8595;</div>
+                <div class="slot-label">A3&#8595;</div>
+                <div class="slot-label">A4&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot active">
+                  <div class="ams-slot-fill" style="background: #FFD700;">
+                    <span class="ams-slot-type dark">PLA</span>
+                    <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #333;">
+                    <span class="ams-slot-type">PETG</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #8B4513;">
+                    <span class="ams-slot-type">PETG</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #666;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="ams-unit">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 14%</div>
+                <div class="ams-stat">24°C</div>
+                <div class="ams-stat"><span class="sun">&#9728;</span></div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">B1&#8595;</div>
+                <div class="slot-label">B2&#8595;</div>
+                <div class="slot-label">B3&#8595;</div>
+                <div class="slot-label">B4&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #FF6600;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #00AA00;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #0066FF;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #FF0000;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Row 2: AMS 3 + AMS 4 -->
+          <div class="ams-row">
+            <div class="ams-unit">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 22%</div>
+                <div class="ams-stat">26°C</div>
+                <div class="ams-stat"><span class="sun">&#9728;</span></div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">C1&#8595;</div>
+                <div class="slot-label">C2&#8595;</div>
+                <div class="slot-label">C3&#8595;</div>
+                <div class="slot-label">C4&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #FFFFFF;">
+                    <span class="ams-slot-type dark">PLA</span>
+                    <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #333;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #666;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #999;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="ams-unit">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 19%</div>
+                <div class="ams-stat">25°C</div>
+                <div class="ams-stat"><span class="sun">&#9728;</span></div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">D1&#8595;</div>
+                <div class="slot-label">D2&#8595;</div>
+                <div class="slot-label">D3&#8595;</div>
+                <div class="slot-label">D4&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #CC99FF;">
+                    <span class="ams-slot-type dark">PLA</span>
+                    <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #FFCC00;">
+                    <span class="ams-slot-type dark">PLA</span>
+                    <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #00CCCC;">
+                    <span class="ams-slot-type">PLA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #FF66CC;">
+                    <span class="ams-slot-type dark">PLA</span>
+                    <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Row 3: AMS-HT 1 + AMS-HT 2 -->
+          <div class="ams-row">
+            <div class="ams-unit ams-ht">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 12%</div>
+                <div class="ams-stat">28°C</div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">HT1&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #8844AA;">
+                    <span class="ams-slot-type">ABS</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="ams-unit ams-ht">
+              <div class="ams-header">
+                <div class="ams-stat"><img src="icons/water.svg"> 15%</div>
+                <div class="ams-stat">27°C</div>
+              </div>
+              <div class="slot-labels">
+                <div class="slot-label">HT2&#8595;</div>
+              </div>
+              <div class="ams-slots">
+                <div class="ams-slot">
+                  <div class="ams-slot-fill" style="background: #44AA88;">
+                    <span class="ams-slot-type">ASA</span>
+                    <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="ams-connectors">
+                <div class="connector-group">
+                  <div class="connector-line"><div class="vline"></div></div>
+                </div>
+              </div>
+            </div>
+
+            <div style="flex: 1;"></div>
+          </div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="auto-refill-btn">Auto-refill</button>
+          <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+          <div class="hub-section">
+            <div class="hub-line"></div>
+            <div class="hub-graphic">
+              <div class="hub-port"></div>
+              <div class="hub-port"></div>
+            </div>
+            <div class="hub-line"></div>
+          </div>
+          <div class="ams-spacer"></div>
+          <button class="ams-action-btn">Unload</button>
+          <button class="ams-action-btn">Load</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v13.html

@@ -0,0 +1,1138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v13</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f5f5f5;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 580px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== FILAMENT SELECTOR BOXES ========== */
+    .filament-selector-row {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 8px;
+    }
+
+    .filament-box {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 10px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .filament-box:hover { border-color: #ccc; }
+    .filament-box.active { border-color: var(--accent); }
+
+    .filament-dots { display: flex; gap: 4px; }
+
+    .f-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #e8e8e8 !important;
+      border: 1px solid #ccc;
+    }
+
+    .f-dot-sep {
+      width: 1px;
+      height: 18px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-left: 6px;
+    }
+
+    /* AMS Tab Selector Row */
+    .ams-tab-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); background: #f0faf3; }
+
+    .ams-tab .tab-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .tab-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .tab-dot.empty {
+      background: #e0e0e0;
+    }
+
+    .ams-tab-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    /* ========== AMS DISPLAY SECTION ========== */
+    .ams-display {
+      display: flex;
+      gap: 16px;
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Left side: AMS unit */
+    .ams-unit-panel {
+      flex: 1;
+    }
+
+    /* AMS Header - humidity + sun only */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 4px 0;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 70px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+    }
+
+    .ams-slot-type {
+      font-size: 11px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 16px; height: 16px; }
+    .ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Connector Lines below slots */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      padding: 0 12px;
+      position: relative;
+    }
+
+    .connector-group {
+      flex: 1;
+      display: flex;
+      gap: 6px;
+      position: relative;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 10%;
+      right: 10%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* ========== EXTERNAL SPOOL SECTION ========== */
+    .ext-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 140px;
+    }
+
+    .ext-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text-secondary);
+      margin-bottom: 12px;
+    }
+
+    .ext-content {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .ext-slot-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ext-slot {
+      width: 60px;
+      height: 70px;
+      border-radius: 10px;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin-bottom: 10px;
+    }
+
+    .ext-slot:hover { border-color: #bbb; }
+
+    .ext-slot .question {
+      font-size: 24px;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+    }
+
+    .ext-slot .diagonal {
+      font-size: 20px;
+      color: var(--text-muted);
+    }
+
+    .ext-connector {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    /* External Spool Holder Illustration */
+    .ext-spool-holder {
+      width: 100px;
+      height: 90px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ext-spool-holder svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    /* ========== HUB CONNECTOR SECTION ========== */
+    .hub-connector-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px 0;
+    }
+
+    .hub-line-left {
+      flex: 1;
+      height: 2px;
+      background: #c0c0c0;
+      margin-right: -4px;
+    }
+
+    .hub-graphic {
+      display: flex;
+      gap: 4px;
+      padding: 8px 12px;
+      background: #e8e8e8;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+
+    .hub-port {
+      width: 14px;
+      height: 20px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    .hub-line-right {
+      flex: 1;
+      height: 2px;
+      background: #c0c0c0;
+      margin-left: -4px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filament Selector Boxes (Top Row - Large) -->
+        <div class="filament-selector-row">
+          <div class="filament-box active">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFD700;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #8B4513;"></div>
+              <div class="f-dot" style="background: #666;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FF6600;"></div>
+              <div class="f-dot" style="background: #00AA00;"></div>
+              <div class="f-dot" style="background: #0066FF;"></div>
+              <div class="f-dot" style="background: #FF0000;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+        </div>
+
+        <!-- AMS Tab Selector Row -->
+        <div class="ams-tab-row">
+          <div class="ams-tab active">
+            <div class="tab-dots">
+              <div class="tab-dot" style="background: #FFD700;"></div>
+              <div class="tab-dot" style="background: #333;"></div>
+              <div class="tab-dot" style="background: #8B4513;"></div>
+              <div class="tab-dot" style="background: #666;"></div>
+            </div>
+            <span class="ams-tab-label">AMS 1</span>
+          </div>
+          <div class="ams-tab">
+            <div class="tab-dots">
+              <div class="tab-dot" style="background: #FF6600;"></div>
+              <div class="tab-dot" style="background: #00AA00;"></div>
+              <div class="tab-dot" style="background: #0066FF;"></div>
+              <div class="tab-dot" style="background: #FF0000;"></div>
+            </div>
+            <span class="ams-tab-label">AMS 2</span>
+          </div>
+          <div class="ams-tab">
+            <div class="tab-dots">
+              <div class="tab-dot empty"></div>
+              <div class="tab-dot empty"></div>
+              <div class="tab-dot empty"></div>
+              <div class="tab-dot empty"></div>
+            </div>
+            <span class="ams-tab-label">AMS 3</span>
+          </div>
+          <div class="ams-tab">
+            <div class="tab-dots">
+              <div class="tab-dot" style="background: #8844AA;"></div>
+              <div class="tab-dot" style="background: #8844AA;"></div>
+            </div>
+            <span class="ams-tab-label">HT 1</span>
+          </div>
+          <div class="ams-tab">
+            <div class="tab-dots">
+              <div class="tab-dot" style="background: #44AA88;"></div>
+              <div class="tab-dot" style="background: #44AA88;"></div>
+            </div>
+            <span class="ams-tab-label">HT 2</span>
+          </div>
+        </div>
+
+        <!-- AMS Display Panel -->
+        <div class="ams-display">
+          <!-- AMS Unit (shows currently selected AMS) -->
+          <div class="ams-unit-panel">
+            <!-- AMS Header: Humidity + Sun (NO temperature) -->
+            <div class="ams-header">
+              <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-stat"><span class="sun">&#9788;</span></div>
+            </div>
+
+            <!-- Slot Labels -->
+            <div class="slot-labels">
+              <div class="slot-label">A1↓</div>
+              <div class="slot-label">A2↓</div>
+              <div class="slot-label">A3↓</div>
+              <div class="slot-label">A4↓</div>
+            </div>
+
+            <!-- AMS Slots -->
+            <div class="ams-slots">
+              <div class="ams-slot active">
+                <div class="ams-slot-fill" style="background: #FFD700;">
+                  <span class="ams-slot-type dark">PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #333;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #8B4513;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Connector Lines -->
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- External Spool Section -->
+          <div class="ext-section">
+            <div class="ext-label">Ext</div>
+            <div class="ext-content">
+              <div class="ext-slot-wrapper">
+                <div class="ext-slot">
+                  <span class="question">?</span>
+                  <span class="diagonal">⁄</span>
+                </div>
+                <div class="ext-connector"></div>
+              </div>
+              <!-- External Spool Holder Illustration -->
+              <div class="ext-spool-holder">
+                <svg viewBox="0 0 100 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <!-- Spool holder box -->
+                  <path d="M10 30 L60 15 L90 30 L90 75 L60 90 L10 75 Z" fill="#f0f0f0" stroke="#ccc" stroke-width="1.5"/>
+                  <path d="M10 30 L60 45 L90 30" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                  <path d="M60 45 L60 90" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                  <!-- Vent lines -->
+                  <line x1="70" y1="50" x2="85" y2="45" stroke="#ddd" stroke-width="1"/>
+                  <line x1="70" y1="58" x2="85" y2="53" stroke="#ddd" stroke-width="1"/>
+                  <line x1="70" y1="66" x2="85" y2="61" stroke="#ddd" stroke-width="1"/>
+                  <!-- Spool -->
+                  <ellipse cx="35" cy="35" rx="20" ry="8" fill="#00ae42" stroke="#008833" stroke-width="1.5"/>
+                  <rect x="15" y="35" width="40" height="12" fill="#00ae42"/>
+                  <ellipse cx="35" cy="47" rx="20" ry="8" fill="#009938" stroke="#008833" stroke-width="1.5"/>
+                  <!-- Spool center hole -->
+                  <ellipse cx="35" cy="35" rx="8" ry="3" fill="#e0e0e0"/>
+                  <ellipse cx="35" cy="47" rx="8" ry="3" fill="#ccc"/>
+                  <!-- PTFE tube -->
+                  <path d="M35 55 Q35 65 50 70 L55 68" fill="none" stroke="#00ae42" stroke-width="3"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Hub Connector -->
+        <div class="hub-connector-section">
+          <div class="hub-line-left"></div>
+          <div class="hub-graphic">
+            <div class="hub-port"></div>
+            <div class="hub-port"></div>
+          </div>
+          <div class="hub-line-right"></div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="auto-refill-btn">Auto-refill</button>
+          <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+          <div class="ams-spacer"></div>
+          <button class="ams-action-btn">Unload</button>
+          <button class="ams-action-btn">Load</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v14.html

@@ -0,0 +1,1055 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v14</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 600px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION - LEFT/RIGHT SPLIT ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .ams-split-layout {
+      display: flex;
+      gap: 0;
+    }
+
+    /* Left and Right AMS Panels */
+    .ams-side {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-side-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Device Selectors (small icons) */
+    .ams-device-selectors {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .ams-device-icon {
+      position: relative;
+      width: 50px;
+      height: 40px;
+      cursor: pointer;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 2px;
+      transition: border-color 0.2s;
+    }
+
+    .ams-device-icon:hover {
+      border-color: #ccc;
+    }
+
+    .ams-device-icon.active {
+      border-color: var(--accent);
+      background: #f0faf3;
+    }
+
+    .ams-device-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    /* Colored spool overlays on AMS icons */
+    .ams-device-icon .spool-colors {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-device-icon .spool-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      border: 1px solid rgba(0,0,0,0.2);
+    }
+
+    .ams-device-icon.ams-ht-icon .spool-colors {
+      gap: 0;
+    }
+
+    .ams-device-icon.ams-ht-icon .spool-dot {
+      width: 10px;
+      height: 10px;
+    }
+
+    /* Center Hub/Extruder Divider */
+    .ams-center-divider {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0 16px;
+      min-width: 80px;
+    }
+
+    .hub-connector {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .hub-ports {
+      display: flex;
+      gap: 4px;
+      padding: 6px 10px;
+      background: #e8e8e8;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+
+    .hub-port {
+      width: 12px;
+      height: 18px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    .extruder-divider-img {
+      width: 50px;
+      margin-top: 8px;
+    }
+
+    .extruder-divider-img img {
+      width: 100%;
+    }
+
+    /* AMS Detail Display */
+    .ams-detail {
+      background: var(--bg-white);
+      border-radius: 8px;
+      padding: 12px;
+      min-height: 140px;
+    }
+
+    .ams-detail-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 4px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 55px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 2px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Empty slot */
+    .ams-slot.empty {
+      background: var(--bg-panel);
+    }
+
+    .ams-slot.empty .ams-slot-fill {
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 18px;
+    }
+
+    /* External Spool */
+    .ext-slot-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 8px;
+    }
+
+    .ext-label {
+      font-size: 10px;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+    }
+
+    .ext-slot {
+      width: 45px;
+      height: 55px;
+      border-radius: 8px;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      color: var(--text-muted);
+    }
+
+    .ext-slot:hover { border-color: #bbb; }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section - Left/Right Split -->
+        <div class="ams-section">
+          <div class="ams-split-layout">
+            <!-- LEFT SIDE -->
+            <div class="ams-side">
+              <div class="ams-side-label">Left Nozzle</div>
+
+              <!-- AMS Device Selectors -->
+              <div class="ams-device-selectors">
+                <div class="ams-device-icon active" title="AMS 1">
+                  <img src="icons/ams.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #FFD700;"></div>
+                    <div class="spool-dot" style="background: #333;"></div>
+                    <div class="spool-dot" style="background: #8B4513;"></div>
+                    <div class="spool-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-device-icon" title="AMS 2">
+                  <img src="icons/ams.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #FF6600;"></div>
+                    <div class="spool-dot" style="background: #00AA00;"></div>
+                    <div class="spool-dot" style="background: #0066FF;"></div>
+                    <div class="spool-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-device-icon ams-ht-icon" title="AMS-HT 1">
+                  <img src="icons/ams-ht.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #8844AA;"></div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- AMS Detail Display -->
+              <div class="ams-detail">
+                <div class="ams-detail-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18%</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- External Spool -->
+              <div class="ext-slot-container">
+                <div class="ext-label">Ext</div>
+                <div class="ext-slot">?<br>/</div>
+              </div>
+            </div>
+
+            <!-- CENTER DIVIDER - Hub & Extruder -->
+            <div class="ams-center-divider">
+              <div class="hub-connector">
+                <div class="hub-ports">
+                  <div class="hub-port"></div>
+                  <div class="hub-port"></div>
+                </div>
+                <div class="extruder-divider-img">
+                  <img src="icons/dual-extruder.png">
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT SIDE -->
+            <div class="ams-side">
+              <div class="ams-side-label">Right Nozzle</div>
+
+              <!-- AMS Device Selectors -->
+              <div class="ams-device-selectors">
+                <div class="ams-device-icon active" title="AMS 3">
+                  <img src="icons/ams.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #FFFFFF; border-color: #ccc;"></div>
+                    <div class="spool-dot" style="background: #222;"></div>
+                    <div class="spool-dot" style="background: #666;"></div>
+                    <div class="spool-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-device-icon" title="AMS 4">
+                  <img src="icons/ams.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #CC99FF;"></div>
+                    <div class="spool-dot" style="background: #FFCC00;"></div>
+                    <div class="spool-dot" style="background: #00CCCC;"></div>
+                    <div class="spool-dot" style="background: #FF66CC;"></div>
+                  </div>
+                </div>
+                <div class="ams-device-icon ams-ht-icon" title="AMS-HT 2">
+                  <img src="icons/ams-ht.png">
+                  <div class="spool-colors">
+                    <div class="spool-dot" style="background: #44AA88;"></div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- AMS Detail Display -->
+              <div class="ams-detail">
+                <div class="ams-detail-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14%</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+                <div class="slot-labels">
+                  <div class="slot-label">C1↓</div>
+                  <div class="slot-label">C2↓</div>
+                  <div class="slot-label">C3↓</div>
+                  <div class="slot-label">C4↓</div>
+                </div>
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- External Spool -->
+              <div class="ext-slot-container">
+                <div class="ext-label">Ext</div>
+                <div class="ext-slot">?<br>/</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v15.html

@@ -0,0 +1,1091 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v15</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 620px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION - LEFT/RIGHT SPLIT ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .ams-split-layout {
+      display: flex;
+      gap: 0;
+    }
+
+    /* Left and Right AMS Panels */
+    .ams-side {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-side-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Device Selectors (small icons) - 2 rows */
+    .ams-device-selectors {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-bottom: 12px;
+      align-items: center;
+    }
+
+    .ams-device-row {
+      display: flex;
+      gap: 4px;
+      justify-content: center;
+    }
+
+    .ams-device-icon {
+      position: relative;
+      width: 44px;
+      height: 32px;
+      cursor: pointer;
+      border: 2px solid transparent;
+      border-radius: 4px;
+      padding: 2px;
+      transition: border-color 0.2s;
+      background: var(--bg-white);
+    }
+
+    .ams-device-icon:hover {
+      border-color: #ccc;
+    }
+
+    .ams-device-icon.active {
+      border-color: var(--accent);
+      background: #f0faf3;
+    }
+
+    .ams-device-icon.empty {
+      opacity: 0.4;
+    }
+
+    .ams-device-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    /* Colored spool overlays on AMS icons */
+    .ams-device-icon .spool-colors {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      gap: 1px;
+    }
+
+    .ams-device-icon .spool-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      border: 1px solid rgba(0,0,0,0.2);
+    }
+
+    .ams-device-icon.ams-ht-icon .spool-colors {
+      gap: 0;
+    }
+
+    .ams-device-icon.ams-ht-icon .spool-dot {
+      width: 8px;
+      height: 8px;
+    }
+
+    /* Center Hub/Extruder Divider */
+    .ams-center-divider {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0 12px;
+      min-width: 70px;
+    }
+
+    .hub-connector {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .hub-ports {
+      display: flex;
+      gap: 3px;
+      padding: 5px 8px;
+      background: #e8e8e8;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+
+    .hub-port {
+      width: 10px;
+      height: 16px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    .extruder-divider-img {
+      width: 45px;
+      margin-top: 6px;
+    }
+
+    .extruder-divider-img img {
+      width: 100%;
+    }
+
+    /* AMS Detail Display */
+    .ams-detail {
+      background: var(--bg-white);
+      border-radius: 8px;
+      padding: 10px;
+      min-height: 120px;
+    }
+
+    .ams-detail-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 4px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 9px;
+      color: var(--text-muted);
+      padding: 2px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 3px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 50px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 4px;
+    }
+
+    .ams-slot-type {
+      font-size: 8px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 2px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 10px; height: 10px; }
+    .ams-slot-eye img { width: 9px; height: 9px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Empty slot */
+    .ams-slot.empty {
+      background: var(--bg-panel);
+    }
+
+    .ams-slot.empty .ams-slot-fill {
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 16px;
+    }
+
+    /* External Spool */
+    .ext-slot-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 8px;
+    }
+
+    .ext-label {
+      font-size: 9px;
+      color: var(--text-muted);
+      margin-bottom: 3px;
+    }
+
+    .ext-slot {
+      width: 40px;
+      height: 50px;
+      border-radius: 6px;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      line-height: 1;
+    }
+
+    .ext-slot:hover { border-color: #bbb; }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section - Left/Right Split -->
+        <div class="ams-section">
+          <div class="ams-split-layout">
+            <!-- LEFT SIDE -->
+            <div class="ams-side">
+              <div class="ams-side-label">Left Nozzle</div>
+
+              <!-- AMS Device Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-device-selectors">
+                <!-- Row 1: AMS 1, AMS 2 -->
+                <div class="ams-device-row">
+                  <div class="ams-device-icon active" title="AMS 1">
+                    <img src="icons/ams.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #FFD700;"></div>
+                      <div class="spool-dot" style="background: #333;"></div>
+                      <div class="spool-dot" style="background: #8B4513;"></div>
+                      <div class="spool-dot" style="background: #666;"></div>
+                    </div>
+                  </div>
+                  <div class="ams-device-icon" title="AMS 2">
+                    <img src="icons/ams.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #FF6600;"></div>
+                      <div class="spool-dot" style="background: #00AA00;"></div>
+                      <div class="spool-dot" style="background: #0066FF;"></div>
+                      <div class="spool-dot" style="background: #FF0000;"></div>
+                    </div>
+                  </div>
+                </div>
+                <!-- Row 2: AMS 3, AMS 4, AMS-HT -->
+                <div class="ams-device-row">
+                  <div class="ams-device-icon empty" title="AMS 3 (empty)">
+                    <img src="icons/ams.png">
+                  </div>
+                  <div class="ams-device-icon empty" title="AMS 4 (empty)">
+                    <img src="icons/ams.png">
+                  </div>
+                  <div class="ams-device-icon ams-ht-icon" title="AMS-HT">
+                    <img src="icons/ams-ht.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #8844AA;"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- AMS Detail Display -->
+              <div class="ams-detail">
+                <div class="ams-detail-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18%</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- External Spool -->
+              <div class="ext-slot-container">
+                <div class="ext-label">Ext</div>
+                <div class="ext-slot">?<br>/</div>
+              </div>
+            </div>
+
+            <!-- CENTER DIVIDER - Hub & Extruder -->
+            <div class="ams-center-divider">
+              <div class="hub-connector">
+                <div class="hub-ports">
+                  <div class="hub-port"></div>
+                  <div class="hub-port"></div>
+                </div>
+                <div class="extruder-divider-img">
+                  <img src="icons/dual-extruder.png">
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT SIDE -->
+            <div class="ams-side">
+              <div class="ams-side-label">Right Nozzle</div>
+
+              <!-- AMS Device Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-device-selectors">
+                <!-- Row 1: AMS 5, AMS 6 -->
+                <div class="ams-device-row">
+                  <div class="ams-device-icon active" title="AMS 5">
+                    <img src="icons/ams.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                      <div class="spool-dot" style="background: #222;"></div>
+                      <div class="spool-dot" style="background: #666;"></div>
+                      <div class="spool-dot" style="background: #999;"></div>
+                    </div>
+                  </div>
+                  <div class="ams-device-icon" title="AMS 6">
+                    <img src="icons/ams.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #CC99FF;"></div>
+                      <div class="spool-dot" style="background: #FFCC00;"></div>
+                      <div class="spool-dot" style="background: #00CCCC;"></div>
+                      <div class="spool-dot" style="background: #FF66CC;"></div>
+                    </div>
+                  </div>
+                </div>
+                <!-- Row 2: AMS 7, AMS 8, AMS-HT -->
+                <div class="ams-device-row">
+                  <div class="ams-device-icon empty" title="AMS 7 (empty)">
+                    <img src="icons/ams.png">
+                  </div>
+                  <div class="ams-device-icon empty" title="AMS 8 (empty)">
+                    <img src="icons/ams.png">
+                  </div>
+                  <div class="ams-device-icon ams-ht-icon" title="AMS-HT">
+                    <img src="icons/ams-ht.png">
+                    <div class="spool-colors">
+                      <div class="spool-dot" style="background: #44AA88;"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- AMS Detail Display -->
+              <div class="ams-detail">
+                <div class="ams-detail-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14%</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+                <div class="slot-labels">
+                  <div class="slot-label">E1↓</div>
+                  <div class="slot-label">E2↓</div>
+                  <div class="slot-label">E3↓</div>
+                  <div class="slot-label">E4↓</div>
+                </div>
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- External Spool -->
+              <div class="ext-slot-container">
+                <div class="ext-label">Ext</div>
+                <div class="ext-slot">?<br>/</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v16.html

@@ -0,0 +1,1206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v16</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 620px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle: two panels side by side */
+    .ams-dual-layout {
+      display: flex;
+      gap: 12px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Selector Row - colored boxes */
+    .ams-selector-row {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    .ams-selector-box {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 10px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-selector-box:hover { border-color: #ccc; }
+    .ams-selector-box.active { border-color: var(--accent); }
+
+    .ams-selector-box .color-dots {
+      display: flex;
+      gap: 3px;
+    }
+
+    .ams-selector-box .color-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-selector-box .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    .ams-selector-box .separator {
+      width: 1px;
+      height: 14px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .ams-selector-box .count {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-left: 4px;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 14px;
+      display: flex;
+      gap: 12px;
+    }
+
+    /* AMS Slots Area */
+    .ams-slots-area {
+      flex: 1;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 4px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+    }
+
+    .slot-label .arrow {
+      font-size: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 70px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 6px;
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 14px; height: 14px; }
+    .ams-slot-eye img { width: 12px; height: 12px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Slot Connectors */
+    .slot-connectors {
+      display: flex;
+      padding: 0 10px;
+      position: relative;
+      height: 20px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 12px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 8px;
+      left: 15%;
+      right: 15%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    .connector-down {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 10px;
+      background: #c0c0c0;
+    }
+
+    /* External Spool Section */
+    .ext-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 100px;
+    }
+
+    .ext-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text-secondary);
+      margin-bottom: 10px;
+    }
+
+    .ext-content {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+    }
+
+    .ext-slot-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ext-slot {
+      width: 55px;
+      height: 70px;
+      border-radius: 10px;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    .ext-slot:hover { border-color: #bbb; }
+
+    .ext-slot .question {
+      font-size: 22px;
+      color: var(--text-muted);
+    }
+
+    .ext-slot .slash {
+      font-size: 18px;
+      color: var(--text-muted);
+      margin-top: -4px;
+    }
+
+    .ext-connector {
+      width: 2px;
+      height: 20px;
+      background: #c0c0c0;
+      margin-top: 0;
+    }
+
+    /* Spool Holder Illustration */
+    .spool-holder {
+      width: 70px;
+      height: 80px;
+    }
+
+    .spool-holder svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Hub Connector */
+    .hub-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 0;
+      margin-top: 4px;
+    }
+
+    .hub-line {
+      flex: 1;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    .hub-graphic {
+      display: flex;
+      gap: 4px;
+      padding: 6px 12px;
+      background: #e8e8e8;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+
+    .hub-port {
+      width: 12px;
+      height: 18px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section - Dual Nozzle Layout -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Selector Boxes -->
+              <div class="ams-selector-row">
+                <div class="ams-selector-box active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-selector-box">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                  </div>
+                  <div class="separator"></div>
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                  <span class="count">0</span>
+                </div>
+                <div class="ams-selector-box">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                  <span class="count">0</span>
+                </div>
+              </div>
+
+              <!-- AMS Content: Slots + Ext -->
+              <div class="ams-content">
+                <!-- AMS Slots Area -->
+                <div class="ams-slots-area">
+                  <div class="ams-header">
+                    <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                    <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                  </div>
+
+                  <div class="slot-labels">
+                    <div class="slot-label">A1<span class="arrow">↓</span></div>
+                    <div class="slot-label">A2<span class="arrow">↓</span></div>
+                    <div class="slot-label">A3<span class="arrow">↓</span></div>
+                    <div class="slot-label">A4<span class="arrow">↓</span></div>
+                  </div>
+
+                  <div class="ams-slots">
+                    <div class="ams-slot active">
+                      <div class="ams-slot-fill" style="background: #FFD700;">
+                        <span class="ams-slot-type dark">PLA</span>
+                        <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #333;">
+                        <span class="ams-slot-type">PETG</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #8B4513;">
+                        <span class="ams-slot-type">PETG</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #666;">
+                        <span class="ams-slot-type">PLA</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Slot Connectors -->
+                  <div class="slot-connectors">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                    <div class="connector-down"></div>
+                  </div>
+                </div>
+
+                <!-- External Spool Section -->
+                <div class="ext-section">
+                  <div class="ext-label">Ext</div>
+                  <div class="ext-content">
+                    <div class="ext-slot-wrapper">
+                      <div class="ext-slot">
+                        <span class="question">?</span>
+                        <span class="slash">⁄</span>
+                      </div>
+                      <div class="ext-connector"></div>
+                    </div>
+                    <div class="spool-holder">
+                      <svg viewBox="0 0 70 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <!-- Spool holder box -->
+                        <path d="M5 25 L40 12 L65 25 L65 65 L40 78 L5 65 Z" fill="#f0f0f0" stroke="#ccc" stroke-width="1.5"/>
+                        <path d="M5 25 L40 38 L65 25" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                        <path d="M40 38 L40 78" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                        <!-- Vent lines -->
+                        <line x1="48" y1="45" x2="60" y2="40" stroke="#ddd" stroke-width="1"/>
+                        <line x1="48" y1="52" x2="60" y2="47" stroke="#ddd" stroke-width="1"/>
+                        <line x1="48" y1="59" x2="60" y2="54" stroke="#ddd" stroke-width="1"/>
+                        <!-- Spool -->
+                        <ellipse cx="25" cy="28" rx="15" ry="6" fill="#00ae42" stroke="#008833" stroke-width="1"/>
+                        <rect x="10" y="28" width="30" height="10" fill="#00ae42"/>
+                        <ellipse cx="25" cy="38" rx="15" ry="6" fill="#009938" stroke="#008833" stroke-width="1"/>
+                        <!-- Spool center -->
+                        <ellipse cx="25" cy="28" rx="6" ry="2.5" fill="#e0e0e0"/>
+                        <ellipse cx="25" cy="38" rx="6" ry="2.5" fill="#ccc"/>
+                        <!-- PTFE tube -->
+                        <path d="M25 44 Q25 52 35 56 L40 54" fill="none" stroke="#00ae42" stroke-width="2.5"/>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Hub Row -->
+              <div class="hub-row">
+                <div class="hub-line"></div>
+                <div class="hub-graphic">
+                  <div class="hub-port"></div>
+                  <div class="hub-port"></div>
+                </div>
+                <div class="hub-line"></div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Selector Boxes -->
+              <div class="ams-selector-row">
+                <div class="ams-selector-box active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-selector-box">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                  <span class="count">0</span>
+                </div>
+              </div>
+
+              <!-- AMS Content: Slots + Ext -->
+              <div class="ams-content">
+                <!-- AMS Slots Area -->
+                <div class="ams-slots-area">
+                  <div class="ams-header">
+                    <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                    <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                  </div>
+
+                  <div class="slot-labels">
+                    <div class="slot-label">B1<span class="arrow">↓</span></div>
+                    <div class="slot-label">B2<span class="arrow">↓</span></div>
+                    <div class="slot-label">B3<span class="arrow">↓</span></div>
+                    <div class="slot-label">B4<span class="arrow">↓</span></div>
+                  </div>
+
+                  <div class="ams-slots">
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #FFFFFF;">
+                        <span class="ams-slot-type dark">PLA</span>
+                        <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #222;">
+                        <span class="ams-slot-type">PLA</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #666;">
+                        <span class="ams-slot-type">PLA</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                    <div class="ams-slot">
+                      <div class="ams-slot-fill" style="background: #999;">
+                        <span class="ams-slot-type">PLA</span>
+                        <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Slot Connectors -->
+                  <div class="slot-connectors">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                    <div class="connector-down"></div>
+                  </div>
+                </div>
+
+                <!-- External Spool Section -->
+                <div class="ext-section">
+                  <div class="ext-label">Ext</div>
+                  <div class="ext-content">
+                    <div class="ext-slot-wrapper">
+                      <div class="ext-slot">
+                        <span class="question">?</span>
+                        <span class="slash">⁄</span>
+                      </div>
+                      <div class="ext-connector"></div>
+                    </div>
+                    <div class="spool-holder">
+                      <svg viewBox="0 0 70 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 25 L40 12 L65 25 L65 65 L40 78 L5 65 Z" fill="#f0f0f0" stroke="#ccc" stroke-width="1.5"/>
+                        <path d="M5 25 L40 38 L65 25" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                        <path d="M40 38 L40 78" fill="none" stroke="#ccc" stroke-width="1.5"/>
+                        <line x1="48" y1="45" x2="60" y2="40" stroke="#ddd" stroke-width="1"/>
+                        <line x1="48" y1="52" x2="60" y2="47" stroke="#ddd" stroke-width="1"/>
+                        <line x1="48" y1="59" x2="60" y2="54" stroke="#ddd" stroke-width="1"/>
+                        <ellipse cx="25" cy="28" rx="15" ry="6" fill="#00ae42" stroke="#008833" stroke-width="1"/>
+                        <rect x="10" y="28" width="30" height="10" fill="#00ae42"/>
+                        <ellipse cx="25" cy="38" rx="15" ry="6" fill="#009938" stroke="#008833" stroke-width="1"/>
+                        <ellipse cx="25" cy="28" rx="6" ry="2.5" fill="#e0e0e0"/>
+                        <ellipse cx="25" cy="38" rx="6" ry="2.5" fill="#ccc"/>
+                        <path d="M25 44 Q25 52 35 56 L40 54" fill="none" stroke="#00ae42" stroke-width="2.5"/>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Hub Row -->
+              <div class="hub-row">
+                <div class="hub-line"></div>
+                <div class="hub-graphic">
+                  <div class="hub-port"></div>
+                  <div class="hub-port"></div>
+                </div>
+                <div class="hub-line"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v17.html

@@ -0,0 +1,1032 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v18</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 680px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 16px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 5px 6px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 3px 5px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 28px;
+      height: 22px;
+      object-fit: contain;
+    }
+
+    .ams-tab.ams-ht-tab .ht-dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 12px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 75px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Slot Connectors */
+    .slot-connectors {
+      display: flex;
+      padding: 0 8px;
+      position: relative;
+      height: 16px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 10px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 6px;
+      left: 12%;
+      right: 12%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Extruder Divider - centered at bottom between panels */
+    .extruder-divider {
+      display: flex;
+      justify-content: center;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .extruder-divider img {
+      height: 60px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1↓</div>
+                  <div class="slot-label">B2↓</div>
+                  <div class="slot-label">B3↓</div>
+                  <div class="slot-label">B4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+
+          <!-- Centered Extruder Divider at bottom -->
+          <div class="extruder-divider">
+            <img src="icons/extruder-left-right.png">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v18.html

@@ -0,0 +1,1061 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v19</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 680px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 16px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 5px 6px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 3px 5px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 28px;
+      height: 22px;
+      object-fit: contain;
+    }
+
+    .ams-tab.ams-ht-tab .ht-dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 12px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 75px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Slot Connectors */
+    .slot-connectors {
+      display: flex;
+      padding: 0 8px;
+      position: relative;
+      height: 20px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 6px;
+      left: 10%;
+      right: 10%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub rectangle under each panel */
+    .hub-container {
+      display: flex;
+      justify-content: center;
+      margin-top: -2px;
+      margin-bottom: 8px;
+    }
+
+    .hub-rect {
+      width: 30px;
+      height: 12px;
+      background: #d0d0d0;
+      border-radius: 2px;
+      position: relative;
+    }
+
+    .hub-rect::after {
+      content: '';
+      position: absolute;
+      bottom: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 20px;
+      background: #c0c0c0;
+    }
+
+    /* Extruder in actions row */
+    .extruder-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .extruder-center img {
+      height: 45px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-top: 20px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1↓</div>
+                  <div class="slot-label">B2↓</div>
+                  <div class="slot-label">B3↓</div>
+                  <div class="slot-label">B4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions with Extruder in center -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="extruder-center">
+              <img src="icons/extruder-left-right.png">
+            </div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v19.html

@@ -0,0 +1,1061 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v20</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 680px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 16px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 5px 6px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 3px 5px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 28px;
+      height: 22px;
+      object-fit: contain;
+    }
+
+    .ams-tab.ams-ht-tab .ht-dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 12px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 75px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Slot Connectors */
+    .slot-connectors {
+      display: flex;
+      padding: 0 8px;
+      position: relative;
+      height: 20px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 14px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 6px;
+      left: 10%;
+      right: 10%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub rectangle under each panel */
+    .hub-container {
+      display: flex;
+      justify-content: center;
+      margin-top: -2px;
+      margin-bottom: 8px;
+    }
+
+    .hub-rect {
+      width: 30px;
+      height: 12px;
+      background: #d0d0d0;
+      border-radius: 2px;
+      position: relative;
+    }
+
+    .hub-rect::after {
+      content: '';
+      position: absolute;
+      bottom: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 20px;
+      background: #c0c0c0;
+    }
+
+    /* Extruder in actions row */
+    .extruder-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .extruder-center img {
+      height: 45px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-top: 20px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1↓</div>
+                  <div class="slot-label">B2↓</div>
+                  <div class="slot-label">B3↓</div>
+                  <div class="slot-label">B4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions with Extruder in center -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="extruder-center">
+              <img src="icons/extruder-left-right.png">
+            </div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v2.html

@@ -0,0 +1,1123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - Bambu Studio Style</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg-primary: #1a1a1a;
+      --bg-secondary: #2d2d2d;
+      --bg-tertiary: #3d3d3d;
+      --bg-card: #252525;
+      --text-primary: #ffffff;
+      --text-secondary: #888888;
+      --text-muted: #666666;
+      --accent: #00ae42;
+      --accent-hover: #00c94b;
+      --orange: #f5a623;
+      --red: #e74c3c;
+      --border: #404040;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+      font-size: 13px;
+    }
+
+    /* Printer Tabs */
+    .printer-tabs {
+      display: flex;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      padding: 0 12px;
+    }
+
+    .printer-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 13px;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+    }
+
+    .printer-tab:hover {
+      color: var(--text-primary);
+    }
+
+    .printer-tab.active {
+      color: var(--text-primary);
+      border-bottom-color: var(--accent);
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent);
+    }
+
+    .status-dot.offline { background: var(--red); }
+    .status-dot.printing { background: var(--orange); }
+
+    .status-badge {
+      font-size: 10px;
+      padding: 2px 6px;
+      background: var(--bg-tertiary);
+      border-radius: 3px;
+      color: var(--text-secondary);
+    }
+
+    /* Main Layout */
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 340px;
+      height: calc(100vh - 41px);
+    }
+
+    /* Left Column */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      background: #000;
+    }
+
+    /* Camera */
+    .camera-section {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+    }
+
+    .camera-placeholder {
+      color: var(--text-muted);
+      font-size: 14px;
+    }
+
+    .camera-controls {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 4px;
+    }
+
+    .cam-btn {
+      padding: 4px 10px;
+      background: rgba(0,0,0,0.7);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text-primary);
+      font-size: 11px;
+      cursor: pointer;
+    }
+
+    .cam-btn:hover {
+      background: rgba(0,0,0,0.9);
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-secondary);
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      border-top: 1px solid var(--border);
+    }
+
+    .print-thumb {
+      width: 56px;
+      height: 56px;
+      background: var(--bg-tertiary);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .print-info {
+      flex: 1;
+    }
+
+    .print-name {
+      font-weight: 500;
+      margin-bottom: 6px;
+    }
+
+    .progress-bar {
+      height: 4px;
+      background: var(--bg-tertiary);
+      border-radius: 2px;
+      margin-bottom: 6px;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      width: 0%;
+    }
+
+    .print-stats {
+      display: flex;
+      gap: 20px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .print-stats span { color: var(--text-primary); }
+
+    .print-btns {
+      display: flex;
+      gap: 6px;
+    }
+
+    .print-btn {
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .print-btn.pause { background: var(--orange); color: white; }
+    .print-btn.stop { background: var(--red); color: white; }
+    .print-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    /* Right Panel */
+    .control-panel {
+      background: var(--bg-secondary);
+      overflow-y: auto;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .section-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    /* Temperature Grid */
+    .temp-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+
+    .temp-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 10px;
+      background: var(--bg-card);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .temp-item:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .temp-icon {
+      font-size: 14px;
+    }
+
+    .temp-value {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .temp-target {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    /* Quick Buttons */
+    .quick-row {
+      display: flex;
+      gap: 6px;
+    }
+
+    .quick-btn {
+      flex: 1;
+      padding: 8px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .quick-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .quick-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    /* Speed Control */
+    .speed-row {
+      display: flex;
+      gap: 4px;
+    }
+
+    .speed-btn {
+      flex: 1;
+      padding: 8px 4px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+
+    .speed-btn:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .speed-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .speed-btn.ludicrous {
+      color: var(--red);
+    }
+
+    .speed-btn.ludicrous.active {
+      background: var(--red);
+      color: white;
+    }
+
+    /* Movement Section */
+    .movement-row {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    /* XY Jog Pad - Bambu Studio Style */
+    .jog-container {
+      position: relative;
+      width: 110px;
+      height: 110px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--bg-card);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .jog-quadrant {
+      position: absolute;
+      width: 50%;
+      height: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .jog-quadrant:hover {
+      background: rgba(255,255,255,0.1);
+    }
+
+    .jog-quadrant.top { top: 0; left: 25%; width: 50%; height: 35%; }
+    .jog-quadrant.bottom { bottom: 0; left: 25%; width: 50%; height: 35%; }
+    .jog-quadrant.left { left: 0; top: 25%; width: 35%; height: 50%; }
+    .jog-quadrant.right { right: 0; top: 25%; width: 35%; height: 50%; }
+
+    .jog-arrow {
+      font-size: 16px;
+      color: var(--text-secondary);
+    }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover {
+      background: var(--accent-hover);
+    }
+
+    .jog-home svg {
+      width: 20px;
+      height: 20px;
+      fill: white;
+    }
+
+    /* Z Control */
+    .z-control {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .z-btn {
+      width: 36px;
+      height: 32px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .z-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .z-label {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    /* Step Sizes */
+    .step-col {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    .step-btn {
+      padding: 6px 10px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    .step-btn:hover, .step-btn.active {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    /* Extruder Toggle */
+    .extruder-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .extruder-toggle {
+      display: flex;
+      background: var(--bg-card);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .extruder-toggle button {
+      padding: 5px 12px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+
+    .extruder-toggle button.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    /* Extruder Graphic */
+    .extruder-graphic {
+      width: 50px;
+      height: 70px;
+      position: relative;
+    }
+
+    .extruder-graphic svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .extruder-btns {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .ext-btn {
+      width: 28px;
+      height: 22px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    .ext-btn:hover {
+      background: var(--bg-tertiary);
+    }
+
+    /* AMS Section */
+    .ams-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Nozzle Assignment (dual nozzle printers) */
+    .nozzle-assignment {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 10px;
+      align-items: center;
+    }
+
+    .nozzle-group {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 6px 10px;
+      background: var(--bg-card);
+      border-radius: 6px;
+      border: 2px solid transparent;
+    }
+
+    .nozzle-group.active {
+      border-color: var(--accent);
+    }
+
+    .nozzle-colors {
+      display: flex;
+      gap: 3px;
+    }
+
+    .nozzle-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .nozzle-dot.empty {
+      background: var(--bg-tertiary);
+      border-style: dashed;
+    }
+
+    .nozzle-separator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+
+    .ams-tabs {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      padding: 5px 8px;
+      background: var(--bg-card);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .ams-tab.active {
+      border-color: var(--accent);
+    }
+
+    .ams-tab-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .ams-tab-num {
+      font-size: 10px;
+      color: var(--text-secondary);
+      margin-left: 2px;
+    }
+
+    /* AMS Slots Container */
+    .ams-content {
+      background: var(--bg-card);
+      border-radius: 8px;
+      padding: 10px;
+    }
+
+    .ams-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      justify-content: center;
+    }
+
+    /* AMS Slot - Bambu Studio Style */
+    .ams-slot {
+      width: 52px;
+      cursor: pointer;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      overflow: hidden;
+      transition: all 0.15s;
+      background: var(--bg-secondary);
+    }
+
+    .ams-slot:hover {
+      border-color: var(--text-muted);
+    }
+
+    .ams-slot.active {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 1px var(--accent);
+    }
+
+    .ams-slot.empty {
+      opacity: 0.4;
+    }
+
+    .ams-slot-color {
+      height: 38px;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      padding-bottom: 4px;
+    }
+
+    .ams-slot-icon {
+      width: 14px;
+      height: 14px;
+      opacity: 0.8;
+    }
+
+    .ams-slot-info {
+      background: var(--bg-tertiary);
+      padding: 4px;
+      text-align: center;
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .ams-slot-num {
+      font-size: 8px;
+      color: var(--text-muted);
+    }
+
+    /* External Spool Row */
+    .ext-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 10px;
+    }
+
+    .ext-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      width: 24px;
+    }
+
+    .ext-slot {
+      width: 52px;
+      height: 58px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      border: 2px solid transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      color: var(--text-muted);
+    }
+
+    .ext-slot:hover {
+      border-color: var(--text-muted);
+    }
+
+    .ext-slot-label {
+      font-size: 8px;
+      margin-top: 2px;
+    }
+
+    /* Spool Holder Graphic */
+    .spool-holder {
+      flex: 1;
+      height: 58px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .spool-holder svg {
+      width: 80px;
+      height: 50px;
+    }
+
+    /* AMS Buttons */
+    .ams-buttons {
+      display: flex;
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .ams-btn {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .ams-btn.secondary {
+      background: var(--bg-card);
+      color: var(--text-primary);
+    }
+
+    .ams-btn.secondary:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .ams-btn.primary {
+      background: var(--accent);
+      color: white;
+    }
+
+    .ams-btn.primary:hover {
+      background: var(--accent-hover);
+    }
+
+    /* AMS Animation Area */
+    .ams-animation {
+      flex: 1;
+      min-height: 80px;
+      margin-top: 10px;
+      background: var(--bg-card);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .hub-graphic {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .hub-connector {
+      width: 30px;
+      height: 2px;
+      background: var(--text-muted);
+    }
+
+    .hub-box {
+      width: 50px;
+      height: 20px;
+      background: var(--bg-tertiary);
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 9px;
+      color: var(--text-muted);
+    }
+
+    .ams-status {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+  </style>
+</head>
+<body>
+  <!-- Printer Tabs -->
+  <div class="printer-tabs">
+    <button class="printer-tab active">
+      <span class="status-dot"></span>
+      H2D-1
+      <span class="status-badge">IDLE</span>
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot printing"></span>
+      X1C-2
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot offline"></span>
+      P1S-3
+    </button>
+  </div>
+
+  <div class="main-content">
+    <!-- Left: Camera + Progress -->
+    <div class="left-column">
+      <div class="camera-section">
+        <div class="camera-controls">
+          <button class="cam-btn">▶ Start</button>
+          <button class="cam-btn">⛶ Fullscreen</button>
+        </div>
+        <span class="camera-placeholder">📷 Camera Feed</span>
+      </div>
+
+      <div class="print-progress">
+        <div class="print-thumb">No Print</div>
+        <div class="print-info">
+          <div class="print-name">Idle</div>
+          <div class="progress-bar"><div class="progress-fill"></div></div>
+          <div class="print-stats">
+            Layer: <span>--/--</span>
+            Time: <span>--:--</span>
+            Remaining: <span>--:--</span>
+          </div>
+        </div>
+        <div class="print-btns">
+          <button class="print-btn pause" disabled>⏸</button>
+          <button class="print-btn stop" disabled>⏹</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right: Control Panel -->
+    <div class="control-panel">
+      <!-- Temperature -->
+      <div>
+        <div class="section-label">Temperature</div>
+        <div class="temp-grid">
+          <div class="temp-item">
+            <span class="temp-icon">🔥</span>
+            <span style="font-size: 11px; color: var(--accent); margin-right: 2px;">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <span class="temp-icon">🔥</span>
+            <span style="font-size: 11px; color: var(--accent); margin-right: 2px;">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <span class="temp-icon">🛏️</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <span class="temp-icon">📦</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+        </div>
+        <div class="quick-row" style="margin-top: 8px;">
+          <button class="quick-btn">❄️ Fans</button>
+          <button class="quick-btn active">💡 Lamp</button>
+          <button class="quick-btn">🌀 Cool</button>
+        </div>
+      </div>
+
+      <!-- Speed -->
+      <div>
+        <div class="section-label">Print Speed</div>
+        <div class="speed-row">
+          <button class="speed-btn">Silent</button>
+          <button class="speed-btn active">Standard</button>
+          <button class="speed-btn">Sport</button>
+          <button class="speed-btn ludicrous">Ludicrous</button>
+        </div>
+      </div>
+
+      <!-- Movement -->
+      <div>
+        <div class="section-label">Movement</div>
+        <div class="movement-row">
+          <!-- XY Jog -->
+          <div class="jog-container">
+            <div class="jog-ring">
+              <div class="jog-quadrant top"><span class="jog-arrow">▲</span></div>
+              <div class="jog-quadrant bottom"><span class="jog-arrow">▼</span></div>
+              <div class="jog-quadrant left"><span class="jog-arrow">◀</span></div>
+              <div class="jog-quadrant right"><span class="jog-arrow">▶</span></div>
+              <button class="jog-home">
+                <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Z -->
+          <div class="z-control">
+            <button class="z-btn">▲</button>
+            <span class="z-label">Z</span>
+            <button class="z-btn">▼</button>
+          </div>
+
+          <!-- Steps -->
+          <div class="step-col">
+            <button class="step-btn">10mm</button>
+            <button class="step-btn active">1mm</button>
+            <button class="step-btn">0.1mm</button>
+          </div>
+
+          <!-- Extruder -->
+          <div class="extruder-col">
+            <div class="extruder-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic">
+              <svg viewBox="0 0 60 80">
+                <!-- Filament tubes -->
+                <path d="M20 0 L20 25 Q20 30 25 35 L25 50" stroke="#00ae42" stroke-width="3" fill="none"/>
+                <path d="M40 0 L40 25 Q40 30 35 35 L35 50" stroke="#00ae42" stroke-width="3" fill="none"/>
+                <!-- Extruder body -->
+                <rect x="10" y="45" width="40" height="30" rx="4" fill="#4a4a4a"/>
+                <!-- Nozzles -->
+                <rect x="18" y="75" width="8" height="5" fill="#666"/>
+                <rect x="34" y="75" width="8" height="5" fill="#666"/>
+                <!-- Gears -->
+                <circle cx="20" cy="55" r="6" fill="#555"/>
+                <circle cx="40" cy="55" r="6" fill="#555"/>
+              </svg>
+            </div>
+            <div class="extruder-btns">
+              <button class="ext-btn">▲</button>
+              <button class="ext-btn">▼</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- AMS -->
+      <div class="ams-section">
+        <div class="section-label">AMS</div>
+
+        <!-- Nozzle Assignment Row (for dual nozzle printers) -->
+        <div class="nozzle-assignment">
+          <div class="nozzle-group">
+            <div class="nozzle-colors">
+              <div class="nozzle-dot" style="background: #FFD700;"></div>
+              <div class="nozzle-dot" style="background: #8B4513;"></div>
+              <div class="nozzle-dot" style="background: #1a1a1a;"></div>
+              <div class="nozzle-dot" style="background: #222;"></div>
+            </div>
+          </div>
+          <div class="nozzle-separator">
+            <div class="nozzle-dot" style="background: #0066FF;"></div>
+            <span>/</span>
+            <div class="nozzle-dot" style="background: #FF0000;"></div>
+          </div>
+          <div class="nozzle-group right">
+            <div class="nozzle-colors">
+              <div class="nozzle-dot empty"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="ams-tabs">
+          <div class="ams-tab active">
+            <div class="ams-tab-dot" style="background: #FFD700;"></div>
+            <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+            <div class="ams-tab-dot" style="background: #8B4513;"></div>
+            <div class="ams-tab-dot" style="background: #222;"></div>
+            <span class="ams-tab-num">1</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-dot" style="background: #FF0000;"></div>
+            <div class="ams-tab-dot" style="background: #0066FF;"></div>
+            <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+            <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+            <span class="ams-tab-num">2</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-dot" style="background: #00FF00;"></div>
+            <div class="ams-tab-dot" style="background: #FFF;"></div>
+            <div class="ams-tab-dot" style="background: #FF69B4;"></div>
+            <div class="ams-tab-dot" style="background: #9932CC;"></div>
+            <span class="ams-tab-num">3</span>
+          </div>
+        </div>
+
+        <div class="ams-content">
+          <div class="ams-header">
+            <span>AMS 1</span>
+            <span>💧 18% · 🌡 24°C</span>
+          </div>
+          <div class="ams-slots">
+            <div class="ams-slot active">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #FFD700 0%, #E6C200 100%);">
+                <svg class="ams-slot-icon" viewBox="0 0 24 24" fill="rgba(0,0,0,0.5)">
+                  <circle cx="12" cy="12" r="8" stroke-width="2" fill="none" stroke="currentColor"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A1</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);">
+                <svg class="ams-slot-icon" viewBox="0 0 24 24" fill="rgba(255,255,255,0.5)">
+                  <circle cx="12" cy="12" r="8" stroke-width="2" fill="none" stroke="currentColor"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A2</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #8B4513 0%, #6B3510 100%);">
+                <svg class="ams-slot-icon" viewBox="0 0 24 24" fill="rgba(255,255,255,0.5)">
+                  <circle cx="12" cy="12" r="8" stroke-width="2" fill="none" stroke="currentColor"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A3</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #222 0%, #111 100%);">
+                <svg class="ams-slot-icon" viewBox="0 0 24 24" fill="rgba(255,255,255,0.5)">
+                  <circle cx="12" cy="12" r="8" stroke-width="2" fill="none" stroke="currentColor"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A4</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- External -->
+        <div class="ext-row">
+          <span class="ext-label">Ext</span>
+          <div class="ext-slot">
+            ?
+            <span class="ext-slot-label">Spool</span>
+          </div>
+          <div class="spool-holder">
+            <svg viewBox="0 0 100 60">
+              <!-- Spool holder base -->
+              <rect x="10" y="40" width="80" height="15" rx="3" fill="#4a4a4a"/>
+              <!-- Spool -->
+              <ellipse cx="50" cy="30" rx="25" ry="25" fill="#3a3a3a" stroke="#555" stroke-width="2"/>
+              <ellipse cx="50" cy="30" rx="10" ry="10" fill="#2a2a2a"/>
+              <ellipse cx="50" cy="30" rx="5" ry="5" fill="#00ae42"/>
+              <!-- Filament coming out -->
+              <path d="M75 30 Q85 30 90 25" stroke="#00ae42" stroke-width="2" fill="none"/>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="ams-buttons">
+          <button class="ams-btn secondary">Unload</button>
+          <button class="ams-btn primary">Load</button>
+        </div>
+
+        <!-- Animation Area -->
+        <div class="ams-animation">
+          <div class="hub-graphic">
+            <div class="hub-connector"></div>
+            <div class="hub-box">HUB</div>
+            <div class="hub-connector"></div>
+          </div>
+          <div class="ams-status">Ready - Select a slot to load</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v20.html

@@ -0,0 +1,1131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v20</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 640px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 16px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 5px 6px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 3px 5px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 28px;
+      height: 22px;
+      object-fit: contain;
+    }
+
+    .ams-tab.ams-ht-tab .ht-dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 12px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 16px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 16px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots - thinner */
+    .ams-slots {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 60px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Slot Connectors - vertical lines from each slot */
+    .slot-connectors {
+      display: flex;
+      padding: 0 8px;
+      position: relative;
+      height: 16px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 16px;
+      background: #c0c0c0;
+    }
+
+    /* Horizontal bar connecting all vertical lines */
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 10%;
+      right: 10%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub rectangle centered under slots */
+    .hub-container {
+      display: flex;
+      justify-content: center;
+      position: relative;
+    }
+
+    .hub-rect {
+      width: 40px;
+      height: 14px;
+      background: #d0d0d0;
+      border-radius: 3px;
+      border: 1px solid #bbb;
+    }
+
+    /* Line from hub going down to extruder area */
+    .hub-line-down {
+      display: flex;
+      justify-content: center;
+      height: 25px;
+    }
+
+    .hub-line-down .vline {
+      width: 2px;
+      height: 100%;
+      background: #c0c0c0;
+    }
+
+    /* Extruder row with wiring */
+    .extruder-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      margin-top: 8px;
+    }
+
+    /* Horizontal line connecting both hub lines to extruder */
+    .extruder-hbar {
+      position: absolute;
+      top: 0;
+      left: 25%;
+      right: 25%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Extruder image centered */
+    .extruder-center {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    .extruder-center .vline-to-extruder {
+      width: 2px;
+      height: 8px;
+      background: #c0c0c0;
+    }
+
+    .extruder-center img {
+      height: 50px;
+    }
+
+    /* AMS Actions - left aligned group, center extruder placeholder, right aligned group */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 12px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-actions-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .ams-actions-center img {
+      height: 45px;
+    }
+
+    .ams-actions-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+
+                <div class="hub-line-down">
+                  <div class="vline"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors: 4x AMS + 1x AMS-HT -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1↓</div>
+                  <div class="slot-label">B2↓</div>
+                  <div class="slot-label">B3↓</div>
+                  <div class="slot-label">B4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="slot-connectors">
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-line"><div class="vline"></div></div>
+                  <div class="connector-hbar"></div>
+                </div>
+
+                <div class="hub-container">
+                  <div class="hub-rect"></div>
+                </div>
+
+                <div class="hub-line-down">
+                  <div class="vline"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Extruder centered between both panels -->
+          <div class="extruder-row">
+            <div class="extruder-hbar"></div>
+            <div class="extruder-center">
+              <div class="vline-to-extruder"></div>
+              <img src="icons/extruder-left-right.png">
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="auto-refill-btn">Auto-refill</button>
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            </div>
+            <div class="ams-actions-center">
+              <!-- spacer -->
+            </div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v21.html

@@ -0,0 +1,1108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v21</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 720px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 12px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 4px 5px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 2px 4px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 24px;
+      height: 18px;
+      object-fit: contain;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 10px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 5px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 9px;
+      color: var(--text-muted);
+      padding: 2px 0;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+
+    /* AMS Slots - taller */
+    .ams-slots {
+      display: flex;
+      gap: 4px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 80px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Wiring container */
+    .wiring-container {
+      position: relative;
+      height: 50px;
+      margin-top: 4px;
+    }
+
+    /* Vertical lines from slots */
+    .slot-vlines {
+      display: flex;
+      padding: 0 4px;
+      height: 20px;
+    }
+
+    .slot-vline {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .slot-vline .vline {
+      width: 2px;
+      height: 20px;
+      background: #c0c0c0;
+    }
+
+    /* Horizontal bar */
+    .slot-hbar {
+      position: absolute;
+      top: 18px;
+      left: 12%;
+      right: 12%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub */
+    .hub-wrapper {
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .hub-rect {
+      width: 36px;
+      height: 12px;
+      background: #d0d0d0;
+      border: 1px solid #bbb;
+      border-radius: 2px;
+    }
+
+    .hub-vline {
+      width: 2px;
+      height: 20px;
+      background: #c0c0c0;
+    }
+
+    /* Connecting wiring between panels */
+    .connecting-wiring {
+      position: relative;
+      height: 25px;
+      margin-top: -8px;
+    }
+
+    .connecting-hbar {
+      position: absolute;
+      top: 0;
+      left: 25%;
+      right: 25%;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    .connecting-vline {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 25px;
+      background: #c0c0c0;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 12px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-actions-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .ams-actions-center img {
+      height: 45px;
+    }
+
+    .ams-actions-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1↓</div>
+                  <div class="slot-label">A2↓</div>
+                  <div class="slot-label">A3↓</div>
+                  <div class="slot-label">A4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-container">
+                  <div class="slot-vlines">
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                  </div>
+                  <div class="slot-hbar"></div>
+                  <div class="hub-wrapper">
+                    <div class="hub-rect"></div>
+                    <div class="hub-vline"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1↓</div>
+                  <div class="slot-label">B2↓</div>
+                  <div class="slot-label">B3↓</div>
+                  <div class="slot-label">B4↓</div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-container">
+                  <div class="slot-vlines">
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                  </div>
+                  <div class="slot-hbar"></div>
+                  <div class="hub-wrapper">
+                    <div class="hub-rect"></div>
+                    <div class="hub-vline"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Connecting wiring between panels -->
+          <div class="connecting-wiring">
+            <div class="connecting-hbar"></div>
+            <div class="connecting-vline"></div>
+          </div>
+
+          <!-- AMS Actions: [Auto-refill][Settings] ... [Extruder] ... [Unload][Load] -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="auto-refill-btn">Auto-refill</button>
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            </div>
+            <div class="ams-actions-center">
+              <img src="icons/extruder-left-right.png">
+            </div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v22.html

@@ -0,0 +1,1119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v22</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 720px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 12px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row - compact */
+    .ams-tab-row {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 4px 5px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 2px 4px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 24px;
+      height: 18px;
+      object-fit: contain;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 10px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 5px;
+    }
+
+    .slot-label {
+      flex: 1;
+      max-width: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      font-size: 9px;
+      color: var(--text-muted);
+      padding: 2px 4px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+
+    .slot-label img {
+      width: 10px;
+      height: 10px;
+      opacity: 0.5;
+    }
+
+    /* AMS Slots - narrower */
+    .ams-slots {
+      display: flex;
+      gap: 4px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      max-width: 60px;
+      height: 80px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* Wiring container */
+    .wiring-container {
+      position: relative;
+      height: 45px;
+      margin-top: 4px;
+    }
+
+    /* Vertical lines from slots */
+    .slot-vlines {
+      display: flex;
+      gap: 4px;
+      height: 18px;
+    }
+
+    .slot-vline {
+      flex: 1;
+      max-width: 60px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .slot-vline .vline {
+      width: 2px;
+      height: 18px;
+      background: #c0c0c0;
+    }
+
+    /* Horizontal bar connecting slots */
+    .slot-hbar {
+      position: absolute;
+      top: 16px;
+      left: 30px;
+      right: 30px;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub */
+    .hub-wrapper {
+      position: absolute;
+      top: 14px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .hub-rect {
+      width: 36px;
+      height: 12px;
+      background: #d0d0d0;
+      border: 1px solid #bbb;
+      border-radius: 2px;
+    }
+
+    .hub-vline {
+      width: 2px;
+      height: 18px;
+      background: #c0c0c0;
+    }
+
+    /* Connecting wiring between panels to extruder */
+    .connecting-wiring {
+      position: relative;
+      height: 30px;
+      margin-top: -5px;
+    }
+
+    .connecting-hbar {
+      position: absolute;
+      top: 0;
+      left: calc(25% + 6px);
+      right: calc(25% + 6px);
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    .connecting-vline {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 30px;
+      background: #c0c0c0;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 5px;
+      padding-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-actions-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .ams-actions-center img {
+      height: 45px;
+    }
+
+    .ams-actions-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-container">
+                  <div class="slot-vlines">
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                  </div>
+                  <div class="slot-hbar"></div>
+                  <div class="hub-wrapper">
+                    <div class="hub-rect"></div>
+                    <div class="hub-vline"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-container">
+                  <div class="slot-vlines">
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                    <div class="slot-vline"><div class="vline"></div></div>
+                  </div>
+                  <div class="slot-hbar"></div>
+                  <div class="hub-wrapper">
+                    <div class="hub-rect"></div>
+                    <div class="hub-vline"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Connecting wiring between panels -->
+          <div class="connecting-wiring">
+            <div class="connecting-hbar"></div>
+            <div class="connecting-vline"></div>
+          </div>
+
+          <!-- AMS Actions: [Auto-refill][Settings] ... [Extruder] ... [Unload][Load] -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="auto-refill-btn">Auto-refill</button>
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            </div>
+            <div class="ams-actions-center">
+              <img src="icons/extruder-left-right.png">
+            </div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v23.html

@@ -0,0 +1,1127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v23</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 720px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 20px;
+      position: relative;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row */
+    .ams-tab-row {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 4px 5px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 2px 4px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 24px;
+      height: 18px;
+      object-fit: contain;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 10px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      margin-bottom: 5px;
+    }
+
+    .slot-label {
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 6px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    .slot-label img {
+      width: 12px;
+      height: 12px;
+      opacity: 0.5;
+    }
+
+    /* AMS Slots - narrow and tall */
+    .ams-slots {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .ams-slot {
+      width: 48px;
+      height: 70px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* ========== WIRING ========== */
+    .wiring-area {
+      position: relative;
+      height: 70px;
+      margin-top: 8px;
+    }
+
+    /* Vertical lines from slots */
+    .slot-wires {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .slot-wire {
+      width: 48px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .slot-wire .vline {
+      width: 2px;
+      height: 20px;
+      background: #c8c8c8;
+    }
+
+    /* Horizontal bar */
+    .wire-hbar {
+      position: absolute;
+      top: 18px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 180px;
+      height: 2px;
+      background: #c8c8c8;
+    }
+
+    /* Hub rectangle ON the horizontal bar */
+    .hub-box {
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 14px;
+      background: #e0e0e0;
+      border: 1px solid #ccc;
+      border-radius: 2px;
+    }
+
+    /* Line from hub going down toward extruder */
+    .hub-down-line {
+      position: absolute;
+      top: 26px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 44px;
+      background: #c8c8c8;
+    }
+
+    /* Center extruder area - positioned at convergence */
+    .center-extruder-area {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      position: relative;
+      height: 60px;
+      margin-top: -15px;
+    }
+
+    /* Horizontal bar connecting both sides */
+    .center-hbar {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 300px;
+      height: 2px;
+      background: #c8c8c8;
+    }
+
+    /* Extruder at convergence point */
+    .center-extruder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: -2px;
+    }
+
+    .center-extruder .vline {
+      width: 2px;
+      height: 12px;
+      background: #c8c8c8;
+    }
+
+    .center-extruder img {
+      height: 45px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-actions-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      flex: 1;
+    }
+
+    .ams-actions-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-down-line"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-down-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Center extruder at convergence of both wiring paths -->
+          <div class="center-extruder-area">
+            <div class="center-hbar"></div>
+            <div class="center-extruder">
+              <div class="vline"></div>
+              <img src="icons/extruder-left-right.png">
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="auto-refill-btn">Auto-refill</button>
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            </div>
+            <div class="ams-actions-center"></div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v24.html

@@ -0,0 +1,1136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v24</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+      --wire-color: #c8c8c8;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 720px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
+    .camera-overlay img {
+      width: 24px;
+      height: 24px;
+      opacity: 0.7;
+      filter: invert(1);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 7px 20px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 13px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .bed-btn {
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .extruder-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 80px;
+      margin: 8px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+      position: relative;
+    }
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 20px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row */
+    .ams-tab-row {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 4px 5px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 2px 4px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 24px;
+      height: 18px;
+      object-fit: contain;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 10px;
+      position: relative;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      margin-bottom: 5px;
+    }
+
+    .slot-label {
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 6px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    .slot-label img {
+      width: 12px;
+      height: 12px;
+      opacity: 0.5;
+    }
+
+    /* AMS Slots - narrow and tall */
+    .ams-slots {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .ams-slot {
+      width: 48px;
+      height: 70px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 9px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 3px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* ========== WIRING ========== */
+    .wiring-area {
+      position: relative;
+      height: 55px;
+      margin-top: 8px;
+    }
+
+    /* Vertical lines from slots */
+    .slot-wires {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .slot-wire {
+      width: 48px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .slot-wire .vline {
+      width: 2px;
+      height: 16px;
+      background: var(--wire-color);
+    }
+
+    /* Horizontal bar connecting slot wires */
+    .wire-hbar {
+      position: absolute;
+      top: 14px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 180px;
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    /* Hub rectangle ON the horizontal bar */
+    .hub-box {
+      position: absolute;
+      top: 9px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 28px;
+      height: 12px;
+      background: #e8e8e8;
+      border: 1px solid #d0d0d0;
+      border-radius: 2px;
+    }
+
+    /* Vertical line from hub going down */
+    .hub-vline {
+      position: absolute;
+      top: 21px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 34px;
+      background: var(--wire-color);
+    }
+
+    /* L-bend for left panel (goes right toward center) */
+    .ams-panel.left-panel .wire-bend {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: calc(50% + 10px);
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    /* L-bend for right panel (goes left toward center) */
+    .ams-panel.right-panel .wire-bend {
+      position: absolute;
+      bottom: 0;
+      right: 50%;
+      width: calc(50% + 10px);
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    /* Center extruder area */
+    .center-extruder-area {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      height: 55px;
+      margin-top: -5px;
+    }
+
+    .center-extruder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .center-extruder .vline {
+      width: 2px;
+      height: 8px;
+      background: var(--wire-color);
+    }
+
+    .center-extruder img {
+      height: 45px;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-actions-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      flex: 1;
+    }
+
+    .ams-actions-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        <div class="camera-overlay">
+          <img src="icons/micro-sd.svg">
+        </div>
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel left-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-vline"></div>
+                  <div class="wire-bend"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel right-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-vline"></div>
+                  <div class="wire-bend"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Center extruder at convergence of both wiring paths -->
+          <div class="center-extruder-area">
+            <div class="center-extruder">
+              <div class="vline"></div>
+              <img src="icons/extruder-left-right.png">
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="auto-refill-btn">Auto-refill</button>
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            </div>
+            <div class="ams-actions-center"></div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v25.html

@@ -0,0 +1,1155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v25</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f8f8f8;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+      --wire-color: #c8c8c8;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 580px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      display: none;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+      position: relative;
+    }
+
+    .camera-overlay {
+      display: none;
+    }
+
+    .sd-card-icon {
+      width: 18px;
+      height: 18px;
+      opacity: 0.6;
+      transform: rotate(-90deg);
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 16px; align-items: center; }
+    .progress-thumb {
+      width: 80px; height: 80px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 7px 16px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 12px 16px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 24px;
+      margin-bottom: 16px;
+      min-height: 220px;
+      align-items: flex-start;
+    }
+
+    /* Temperature Column */
+    .temp-column {
+      flex: 0 0 auto;
+      min-width: 160px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 8px;
+      border-radius: 4px;
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .temp-badge-spacer {
+      min-width: 24px;
+      padding: 2px 8px;
+    }
+
+    .temp-value { font-size: 18px; font-weight: 500; }
+    .temp-target { font-size: 15px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      margin-top: 10px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 18px; opacity: 0.5; }
+
+    .air-values {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 8px;
+    }
+
+    .air-value {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .air-value img { width: 16px; opacity: 0.5; }
+
+    .lamp-section {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .jog-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+
+    .nozzle-toggle button {
+      padding: 5px 14px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 20px;
+      align-items: stretch;
+      flex: 1;
+    }
+
+    .jog-pad {
+      position: relative;
+      width: 130px;
+      height: 130px;
+      margin-bottom: 12px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 18px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 18px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 20px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .bed-btn {
+      padding: 6px 12px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 12px; color: var(--text-muted); padding: 0 6px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      flex: 1;
+    }
+
+    .extruder-btn {
+      width: 32px;
+      height: 32px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 90px;
+      margin: 6px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 12px; color: var(--text-muted); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      background: var(--bg-panel);
+      border-radius: 10px;
+      padding: 12px;
+      margin-bottom: 12px;
+      position: relative;
+    }
+
+    /* Center vertical wire - removed, using center-wiring instead */
+
+    /* Dual nozzle layout */
+    .ams-dual-layout {
+      display: flex;
+      gap: 20px;
+    }
+
+    .ams-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .ams-panel-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    /* AMS Tab Selector Row */
+    .ams-tab-row {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      padding: 4px 5px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { border-color: #ccc; }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab .color-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab .color-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .ams-tab .color-dot.empty {
+      background: #e0e0e0;
+    }
+
+    /* AMS-HT Tab */
+    .ams-tab.ams-ht-tab {
+      padding: 2px 4px;
+    }
+
+    .ams-tab.ams-ht-tab img {
+      width: 24px;
+      height: 18px;
+      object-fit: contain;
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-white);
+      border-radius: 10px;
+      padding: 10px;
+      padding-bottom: 0;
+      position: relative;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-stat img { width: 14px; opacity: 0.5; }
+    .ams-stat .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      margin-bottom: 5px;
+    }
+
+    .slot-label {
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 3px 6px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    .slot-label img {
+      width: 9px;
+      height: 9px;
+      opacity: 0.5;
+    }
+
+    /* AMS Slots - narrow and tall */
+    .ams-slots {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .ams-slot {
+      width: 48px;
+      height: 70px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 5px;
+    }
+
+    .ams-slot-type {
+      font-size: 11px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 14px; height: 14px; }
+    .ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    /* ========== WIRING (per panel) ========== */
+    .wiring-area {
+      position: relative;
+      height: 40px;
+      margin-top: 6px;
+      overflow: visible;
+    }
+
+    /* Vertical lines from slots */
+    .slot-wires {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .slot-wire {
+      width: 48px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .slot-wire .vline {
+      width: 2px;
+      height: 14px;
+      background: var(--wire-color);
+    }
+
+    /* Horizontal bar connecting slot wires */
+    .wire-hbar {
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 180px;
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    /* Hub rectangle ON the horizontal bar */
+    .hub-box {
+      position: absolute;
+      top: 7px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 28px;
+      height: 12px;
+      background: #e8e8e8;
+      border: 1px solid #d0d0d0;
+      border-radius: 2px;
+    }
+
+    /* Vertical line from hub going down */
+    .hub-vline {
+      position: absolute;
+      top: 19px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 16px;
+      background: var(--wire-color);
+    }
+
+    /* Horizontal bend - extends from hub toward center */
+    .ams-panel:first-child .wire-bend {
+      position: absolute;
+      top: 33px;
+      left: 50%;
+      width: calc(50% + 40px);
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    .ams-panel:last-child .wire-bend {
+      position: absolute;
+      top: 33px;
+      right: 50%;
+      width: calc(50% + 40px);
+      height: 2px;
+      background: var(--wire-color);
+    }
+
+    /* ========== CENTER WIRING ========== */
+    .center-wiring {
+      position: relative;
+      height: 0;
+      margin-top: -7px;
+      z-index: 10;
+    }
+
+    .wire-center-hbar {
+      display: none;
+    }
+
+    .wire-center-down {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 68px;
+      background: var(--wire-color);
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 0;
+      padding-top: 8px;
+    }
+
+    .ams-actions-left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-actions-center {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    .ams-actions-center .wire-to-extruder {
+      width: 2px;
+      height: 20px;
+      background: var(--wire-color);
+    }
+
+    .ams-actions-center img {
+      height: 45px;
+    }
+
+    .ams-actions-right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 40px;
+      height: 40px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 22px; opacity: 0.5; }
+
+    .ams-action-btn {
+      padding: 10px 28px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img class="sd-card-icon" src="icons/micro-sd.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+      </div>
+      <div class="camera-feed">
+        Camera Feed
+      </div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-badge-spacer"></span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div class="air-values">
+              <div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <div class="ams-dual-layout">
+            <!-- LEFT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Left Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFD700;"></div>
+                    <div class="color-dot" style="background: #333;"></div>
+                    <div class="color-dot" style="background: #8B4513;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FF6600;"></div>
+                    <div class="color-dot" style="background: #00AA00;"></div>
+                    <div class="color-dot" style="background: #0066FF;"></div>
+                    <div class="color-dot" style="background: #FF0000;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">A1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">A4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #333;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring (per panel) -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-vline"></div>
+                  <div class="wire-bend"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- RIGHT NOZZLE PANEL -->
+            <div class="ams-panel">
+              <div class="ams-panel-label">Right Nozzle</div>
+
+              <!-- AMS Tab Selectors -->
+              <div class="ams-tab-row">
+                <div class="ams-tab active">
+                  <div class="color-dots">
+                    <div class="color-dot" style="background: #FFFFFF; border-color: #999;"></div>
+                    <div class="color-dot" style="background: #222;"></div>
+                    <div class="color-dot" style="background: #666;"></div>
+                    <div class="color-dot" style="background: #999;"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab">
+                  <div class="color-dots">
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                    <div class="color-dot empty"></div>
+                  </div>
+                </div>
+                <div class="ams-tab ams-ht-tab">
+                  <img src="icons/ams-ht.png">
+                </div>
+              </div>
+
+              <!-- AMS Content -->
+              <div class="ams-content">
+                <div class="ams-header">
+                  <div class="ams-stat"><img src="icons/water.svg"> 14 %</div>
+                  <div class="ams-stat"><span class="sun">&#9788;</span></div>
+                </div>
+
+                <div class="slot-labels">
+                  <div class="slot-label">B1 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B2 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B3 <img src="icons/reload.svg"></div>
+                  <div class="slot-label">B4 <img src="icons/reload.svg"></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #FFFFFF;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #666;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #999;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Wiring (per panel) -->
+                <div class="wiring-area">
+                  <div class="slot-wires">
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                    <div class="slot-wire"><div class="vline"></div></div>
+                  </div>
+                  <div class="wire-hbar"></div>
+                  <div class="hub-box"></div>
+                  <div class="hub-vline"></div>
+                  <div class="wire-bend"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Center wiring connecting both panels to extruder -->
+          <div class="center-wiring">
+            <div class="wire-center-hbar"></div>
+            <div class="wire-center-down"></div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <div class="ams-actions-left">
+              <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+              <button class="auto-refill-btn">Auto-refill</button>
+            </div>
+            <div class="ams-actions-center">
+              <div class="wire-to-extruder"></div>
+              <img src="icons/extruder-left-right.png">
+            </div>
+            <div class="ams-actions-right">
+              <button class="ams-action-btn">Unload</button>
+              <button class="ams-action-btn">Load</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v3.html

@@ -0,0 +1,1082 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - With Bambu Assets</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg-primary: #1a1a1a;
+      --bg-secondary: #2d2d2d;
+      --bg-tertiary: #3d3d3d;
+      --bg-card: #252525;
+      --text-primary: #ffffff;
+      --text-secondary: #888888;
+      --text-muted: #666666;
+      --accent: #00ae42;
+      --accent-hover: #00c94b;
+      --orange: #f5a623;
+      --red: #e74c3c;
+      --border: #404040;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+      font-size: 13px;
+    }
+
+    /* Icon styling */
+    .icon {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+
+    .icon-sm {
+      width: 14px;
+      height: 14px;
+    }
+
+    .icon-lg {
+      width: 24px;
+      height: 24px;
+    }
+
+    /* Printer Tabs */
+    .printer-tabs {
+      display: flex;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      padding: 0 12px;
+    }
+
+    .printer-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 13px;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+    }
+
+    .printer-tab:hover { color: var(--text-primary); }
+    .printer-tab.active {
+      color: var(--text-primary);
+      border-bottom-color: var(--accent);
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent);
+    }
+    .status-dot.offline { background: var(--red); }
+    .status-dot.printing { background: var(--orange); }
+
+    .status-badge {
+      font-size: 10px;
+      padding: 2px 6px;
+      background: var(--bg-tertiary);
+      border-radius: 3px;
+      color: var(--text-secondary);
+    }
+
+    /* Main Layout */
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 360px;
+      height: calc(100vh - 41px);
+    }
+
+    /* Left Column */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      background: #000;
+    }
+
+    .camera-section {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+    }
+
+    .camera-placeholder {
+      color: var(--text-muted);
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .camera-controls {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 4px;
+    }
+
+    .cam-btn {
+      padding: 4px 10px;
+      background: rgba(0,0,0,0.7);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text-primary);
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .cam-btn:hover { background: rgba(0,0,0,0.9); }
+    .cam-btn .icon { width: 14px; height: 14px; }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-secondary);
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      border-top: 1px solid var(--border);
+    }
+
+    .print-thumb {
+      width: 56px;
+      height: 56px;
+      background: var(--bg-tertiary);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .print-info { flex: 1; }
+    .print-name { font-weight: 500; margin-bottom: 6px; }
+
+    .progress-bar {
+      height: 4px;
+      background: var(--bg-tertiary);
+      border-radius: 2px;
+      margin-bottom: 6px;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      width: 0%;
+    }
+
+    .print-stats {
+      display: flex;
+      gap: 20px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+    .print-stats span { color: var(--text-primary); }
+
+    .print-btns { display: flex; gap: 6px; }
+
+    .print-btn {
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .print-btn.pause { background: var(--orange); color: white; }
+    .print-btn.stop { background: var(--red); color: white; }
+    .print-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    /* Right Panel */
+    .control-panel {
+      background: var(--bg-secondary);
+      overflow-y: auto;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .section-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    /* Temperature Grid */
+    .temp-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+
+    .temp-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      background: var(--bg-card);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .temp-item:hover { background: var(--bg-tertiary); }
+
+    .temp-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .temp-icon img {
+      width: 100%;
+      height: 100%;
+      filter: brightness(0) invert(1);
+      opacity: 0.7;
+    }
+
+    .temp-label {
+      font-size: 11px;
+      color: var(--accent);
+      font-weight: 600;
+      min-width: 14px;
+    }
+
+    .temp-value {
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    .temp-target {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    /* Quick Buttons */
+    .quick-row {
+      display: flex;
+      gap: 6px;
+      margin-top: 8px;
+    }
+
+    .quick-btn {
+      flex: 1;
+      padding: 10px 8px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 8px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.15s;
+    }
+
+    .quick-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .quick-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .quick-btn img {
+      width: 16px;
+      height: 16px;
+      filter: brightness(0) invert(0.6);
+    }
+
+    .quick-btn:hover img,
+    .quick-btn.active img {
+      filter: brightness(0) invert(1);
+    }
+
+    /* Speed */
+    .speed-row {
+      display: flex;
+      gap: 4px;
+    }
+
+    .speed-btn {
+      flex: 1;
+      padding: 10px 4px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 8px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      transition: all 0.15s;
+    }
+
+    .speed-btn:hover { background: var(--bg-tertiary); }
+    .speed-btn.active { background: var(--accent); color: white; }
+    .speed-btn.ludicrous { color: var(--red); }
+    .speed-btn.ludicrous.active { background: var(--red); color: white; }
+
+    /* Movement */
+    .movement-row {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+    }
+
+    /* Jog Pad */
+    .jog-container {
+      position: relative;
+      width: 100px;
+      height: 100px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--bg-card);
+      position: relative;
+    }
+
+    .jog-btn {
+      position: absolute;
+      width: 28px;
+      height: 28px;
+      background: var(--bg-tertiary);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--accent); color: white; }
+    .jog-btn.up { top: 4px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 4px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 4px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 4px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 36px;
+      height: 36px;
+      background: var(--accent);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: var(--accent-hover); }
+    .jog-home img {
+      width: 18px;
+      height: 18px;
+      filter: brightness(0) invert(1);
+    }
+
+    /* Z Control */
+    .z-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .z-btn {
+      width: 32px;
+      height: 28px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+
+    .z-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+    .z-label { font-size: 10px; color: var(--text-muted); }
+
+    /* Steps */
+    .step-col {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    .step-btn {
+      padding: 6px 10px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 6px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    .step-btn:hover, .step-btn.active {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    /* Extruder */
+    .extruder-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .extruder-toggle {
+      display: flex;
+      background: var(--bg-card);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .extruder-toggle button {
+      padding: 6px 14px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+
+    .extruder-toggle button.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .extruder-graphic {
+      height: 90px;
+    }
+
+    .extruder-graphic img {
+      height: 100%;
+      width: auto;
+    }
+
+    .extruder-btns {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .ext-btn {
+      width: 28px;
+      height: 22px;
+      background: var(--bg-card);
+      border: none;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    .ext-btn:hover { background: var(--bg-tertiary); }
+
+    /* AMS Section */
+    .ams-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Nozzle Assignment */
+    .nozzle-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+
+    .nozzle-group {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 6px 10px;
+      background: var(--bg-card);
+      border-radius: 6px;
+      border: 2px solid transparent;
+      cursor: pointer;
+    }
+
+    .nozzle-group:hover { background: var(--bg-tertiary); }
+    .nozzle-group.active { border-color: var(--accent); }
+
+    .nozzle-colors {
+      display: flex;
+      gap: 3px;
+    }
+
+    .nozzle-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .nozzle-dot.empty {
+      background: var(--bg-tertiary) !important;
+      border-style: dashed;
+    }
+
+    .nozzle-sep {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+
+    /* AMS Tabs */
+    .ams-tabs {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      padding: 5px 8px;
+      background: var(--bg-card);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { background: var(--bg-tertiary); }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(255,255,255,0.15);
+    }
+
+    .ams-tab-num {
+      font-size: 10px;
+      color: var(--text-secondary);
+      margin-left: 2px;
+    }
+
+    /* AMS Content */
+    .ams-content {
+      background: var(--bg-card);
+      border-radius: 8px;
+      padding: 10px;
+    }
+
+    .ams-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .ams-header-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ams-header-info img {
+      width: 12px;
+      height: 12px;
+      filter: brightness(0) invert(0.5);
+    }
+
+    .ams-slots {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+    }
+
+    .ams-slot {
+      width: 56px;
+      cursor: pointer;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      overflow: hidden;
+      transition: all 0.15s;
+      background: var(--bg-secondary);
+    }
+
+    .ams-slot:hover { border-color: var(--text-muted); }
+    .ams-slot.active { border-color: var(--accent); }
+    .ams-slot.empty { opacity: 0.4; }
+
+    .ams-slot-color {
+      height: 42px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      padding-bottom: 4px;
+    }
+
+    .ams-slot-color img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.6;
+    }
+
+    .ams-slot-info {
+      background: var(--bg-tertiary);
+      padding: 4px;
+      text-align: center;
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .ams-slot-num {
+      font-size: 8px;
+      color: var(--text-muted);
+    }
+
+    /* External */
+    .ext-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 10px;
+    }
+
+    .ext-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      width: 24px;
+    }
+
+    .ext-slot {
+      width: 56px;
+      height: 62px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      border: 2px solid transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      color: var(--text-muted);
+    }
+
+    .ext-slot:hover { border-color: var(--text-muted); }
+    .ext-slot-label { font-size: 8px; margin-top: 2px; }
+
+    .spool-holder {
+      flex: 1;
+      height: 62px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .spool-holder img {
+      height: 50px;
+      opacity: 0.7;
+    }
+
+    /* AMS Buttons */
+    .ams-btns {
+      display: flex;
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .ams-btn {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .ams-btn.secondary { background: var(--bg-card); color: var(--text-primary); }
+    .ams-btn.secondary:hover { background: var(--bg-tertiary); }
+    .ams-btn.primary { background: var(--accent); color: white; }
+    .ams-btn.primary:hover { background: var(--accent-hover); }
+
+    /* AMS Animation */
+    .ams-animation {
+      flex: 1;
+      min-height: 100px;
+      margin-top: 12px;
+      background: var(--bg-card);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 16px;
+    }
+
+    .ams-graphic {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+    }
+
+    .ams-graphic img {
+      height: 40px;
+      opacity: 0.8;
+    }
+
+    .hub-label {
+      font-size: 10px;
+      color: var(--text-muted);
+      padding: 4px 12px;
+      background: var(--bg-tertiary);
+      border-radius: 4px;
+    }
+
+    .ams-status {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+  </style>
+</head>
+<body>
+  <!-- Printer Tabs -->
+  <div class="printer-tabs">
+    <button class="printer-tab active">
+      <span class="status-dot"></span>
+      H2D-1
+      <span class="status-badge">IDLE</span>
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot printing"></span>
+      X1C-2
+    </button>
+    <button class="printer-tab">
+      <span class="status-dot offline"></span>
+      P1S-3
+    </button>
+  </div>
+
+  <div class="main-content">
+    <!-- Left: Camera + Progress -->
+    <div class="left-column">
+      <div class="camera-section">
+        <div class="camera-controls">
+          <button class="cam-btn">
+            <img src="icons/video-camera.svg" class="icon" alt="">
+            Start
+          </button>
+          <button class="cam-btn">⛶ Fullscreen</button>
+        </div>
+        <span class="camera-placeholder">
+          <img src="icons/webcam.svg" style="width: 24px; height: 24px; filter: brightness(0) invert(0.4);">
+          Camera Feed
+        </span>
+      </div>
+
+      <div class="print-progress">
+        <div class="print-thumb">No Print</div>
+        <div class="print-info">
+          <div class="print-name">Idle</div>
+          <div class="progress-bar"><div class="progress-fill"></div></div>
+          <div class="print-stats">
+            Layer: <span>--/--</span>
+            Time: <span>--:--</span>
+            Remaining: <span>--:--</span>
+          </div>
+        </div>
+        <div class="print-btns">
+          <button class="print-btn pause" disabled>⏸</button>
+          <button class="print-btn stop" disabled>⏹</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right: Control Panel -->
+    <div class="control-panel">
+      <!-- Temperature -->
+      <div>
+        <div class="section-label">Temperature</div>
+        <div class="temp-grid">
+          <div class="temp-item">
+            <div class="temp-icon"><img src="icons/hotend.svg" alt=""></div>
+            <span class="temp-label">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon"><img src="icons/hotend.svg" alt=""></div>
+            <span class="temp-label">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon"><img src="icons/heatbed.svg" alt=""></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+          <div class="temp-item">
+            <div class="temp-icon"><img src="icons/chamber.svg" alt=""></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0°C</span>
+          </div>
+        </div>
+        <div class="quick-row">
+          <button class="quick-btn">
+            <img src="icons/ventilation.svg" alt="">
+            Fans
+          </button>
+          <button class="quick-btn active">
+            <img src="icons/lamp.svg" alt="">
+            Lamp
+          </button>
+          <button class="quick-btn">
+            <img src="icons/snowflake.svg" alt="">
+            Cool
+          </button>
+        </div>
+      </div>
+
+      <!-- Speed -->
+      <div>
+        <div class="section-label">Print Speed</div>
+        <div class="speed-row">
+          <button class="speed-btn">Silent</button>
+          <button class="speed-btn active">Standard</button>
+          <button class="speed-btn">Sport</button>
+          <button class="speed-btn ludicrous">Ludicrous</button>
+        </div>
+      </div>
+
+      <!-- Movement -->
+      <div>
+        <div class="section-label">Movement</div>
+        <div class="movement-row">
+          <!-- XY Jog -->
+          <div class="jog-container">
+            <div class="jog-ring">
+              <button class="jog-btn up">▲</button>
+              <button class="jog-btn down">▼</button>
+              <button class="jog-btn left">◀</button>
+              <button class="jog-btn right">▶</button>
+              <button class="jog-home">
+                <img src="icons/home.svg" alt="">
+              </button>
+            </div>
+          </div>
+
+          <!-- Z -->
+          <div class="z-col">
+            <button class="z-btn">▲</button>
+            <span class="z-label">Z</span>
+            <button class="z-btn">▼</button>
+          </div>
+
+          <!-- Steps -->
+          <div class="step-col">
+            <button class="step-btn">10mm</button>
+            <button class="step-btn active">1mm</button>
+            <button class="step-btn">0.1mm</button>
+          </div>
+
+          <!-- Extruder -->
+          <div class="extruder-col">
+            <div class="extruder-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic">
+              <img src="icons/dual-extruder.png" alt="Extruder">
+            </div>
+            <div class="extruder-btns">
+              <button class="ext-btn">▲</button>
+              <button class="ext-btn">▼</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- AMS -->
+      <div class="ams-section">
+        <div class="section-label">AMS</div>
+
+        <!-- Nozzle Assignment -->
+        <div class="nozzle-row">
+          <div class="nozzle-group active">
+            <div class="nozzle-colors">
+              <div class="nozzle-dot" style="background: #FFD700;"></div>
+              <div class="nozzle-dot" style="background: #8B4513;"></div>
+              <div class="nozzle-dot" style="background: #1a1a1a;"></div>
+              <div class="nozzle-dot" style="background: #222;"></div>
+            </div>
+          </div>
+          <div class="nozzle-sep">
+            <div class="nozzle-dot" style="background: #0066FF;"></div>
+            <span>/</span>
+            <div class="nozzle-dot" style="background: #FF0000;"></div>
+          </div>
+          <div class="nozzle-group">
+            <div class="nozzle-colors">
+              <div class="nozzle-dot empty"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Tabs -->
+        <div class="ams-tabs">
+          <div class="ams-tab active">
+            <div class="ams-tab-dot" style="background: #FFD700;"></div>
+            <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+            <div class="ams-tab-dot" style="background: #8B4513;"></div>
+            <div class="ams-tab-dot" style="background: #222;"></div>
+            <span class="ams-tab-num">1</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-dot" style="background: #FF0000;"></div>
+            <div class="ams-tab-dot" style="background: #0066FF;"></div>
+            <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+            <div class="ams-tab-dot" style="background: #3d3d3d;"></div>
+            <span class="ams-tab-num">2</span>
+          </div>
+          <div class="ams-tab">
+            <div class="ams-tab-dot" style="background: #00FF00;"></div>
+            <div class="ams-tab-dot" style="background: #FFF;"></div>
+            <div class="ams-tab-dot" style="background: #FF69B4;"></div>
+            <div class="ams-tab-dot" style="background: #9932CC;"></div>
+            <span class="ams-tab-num">3</span>
+          </div>
+        </div>
+
+        <!-- AMS Slots -->
+        <div class="ams-content">
+          <div class="ams-header">
+            <span>AMS 1</span>
+            <div class="ams-header-info">
+              <img src="icons/water.svg" alt=""> 18%
+              <span style="margin: 0 4px;">·</span>
+              🌡 24°C
+            </div>
+          </div>
+          <div class="ams-slots">
+            <div class="ams-slot active">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #FFD700 0%, #E6C200 100%);">
+                <img src="icons/eye.svg" alt="">
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A1</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);">
+                <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A2</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #8B4513 0%, #6B3510 100%);">
+                <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PETG</div>
+                <div class="ams-slot-num">A3</div>
+              </div>
+            </div>
+            <div class="ams-slot">
+              <div class="ams-slot-color" style="background: linear-gradient(180deg, #222 0%, #111 100%);">
+                <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+              </div>
+              <div class="ams-slot-info">
+                <div class="ams-slot-type">PLA</div>
+                <div class="ams-slot-num">A4</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- External -->
+        <div class="ext-row">
+          <span class="ext-label">Ext</span>
+          <div class="ext-slot">
+            ?
+            <span class="ext-slot-label">Spool</span>
+          </div>
+          <div class="spool-holder">
+            <img src="icons/single-extruder1.png" alt="Spool holder">
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="ams-btns">
+          <button class="ams-btn secondary">Unload</button>
+          <button class="ams-btn primary">Load</button>
+        </div>
+
+        <!-- Animation Area -->
+        <div class="ams-animation">
+          <div class="ams-graphic">
+            <img src="icons/ams.png" alt="AMS">
+          </div>
+          <div class="hub-label">HUB</div>
+          <div class="ams-status">Ready - Select a slot to load</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v4.html

@@ -0,0 +1,1051 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - Bambu Studio Exact</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-hover: #f0f0f0;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+      --accent-light: #e8f5e9;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    /* Main Layout */
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 320px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 4px;
+    }
+
+    .camera-title {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-right: auto;
+    }
+
+    .camera-icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .camera-icon-btn:hover {
+      background: var(--bg-hover);
+    }
+
+    .camera-icon-btn img {
+      width: 18px;
+      height: 18px;
+      opacity: 0.6;
+    }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #666;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 12px 16px;
+    }
+
+    .progress-header {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-bottom: 10px;
+    }
+
+    .progress-content {
+      display: flex;
+      gap: 12px;
+    }
+
+    .progress-thumb {
+      width: 60px;
+      height: 60px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .progress-thumb img {
+      width: 40px;
+      opacity: 0.5;
+    }
+
+    .progress-info {
+      flex: 1;
+    }
+
+    .progress-name {
+      font-weight: 500;
+      margin-bottom: 2px;
+    }
+
+    .progress-status {
+      color: var(--accent);
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    .progress-bar-container {
+      height: 4px;
+      background: var(--border-light);
+      border-radius: 2px;
+      margin-bottom: 6px;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      width: 0%;
+    }
+
+    .progress-details {
+      display: flex;
+      gap: 16px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .progress-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: flex-end;
+    }
+
+    .progress-icons {
+      display: flex;
+      gap: 4px;
+    }
+
+    .progress-icon-btn {
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .progress-icon-btn:hover {
+      background: var(--bg-hover);
+    }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .header-btn {
+      padding: 4px 10px;
+      font-size: 11px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .header-btn:hover {
+      opacity: 0.9;
+    }
+
+    .control-content {
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    /* Temperature Section */
+    .temp-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 0;
+    }
+
+    .temp-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .temp-icon img {
+      width: 18px;
+      height: 18px;
+      opacity: 0.7;
+    }
+
+    .temp-badge {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--accent);
+      background: var(--accent-light);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    .temp-value {
+      font-size: 15px;
+      font-weight: 500;
+    }
+
+    .temp-target {
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    .temp-unit {
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    /* Air Condition */
+    .air-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 0;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.6;
+    }
+
+    .air-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--bg-light);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .air-item:hover {
+      background: var(--bg-hover);
+    }
+
+    .air-item img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.6;
+    }
+
+    .lamp-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--accent);
+    }
+
+    /* Movement Section */
+    .movement-section {
+      display: flex;
+      gap: 12px;
+      padding-top: 8px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .jog-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+    }
+
+    .nozzle-toggle button {
+      padding: 4px 16px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 11px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .jog-pad {
+      position: relative;
+      width: 120px;
+      height: 120px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.y-plus { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.y-minus { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.x-minus { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.x-plus { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-secondary);
+    }
+
+    .jog-btn:hover {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+    }
+
+    .jog-home img {
+      width: 18px;
+      height: 18px;
+      filter: brightness(0) invert(1);
+    }
+
+    .step-col {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      font-size: 10px;
+    }
+
+    .step-btn {
+      padding: 4px 8px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--text-secondary);
+      font-size: 10px;
+    }
+
+    .step-btn:hover, .step-btn.active {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .step-label {
+      text-align: center;
+      color: var(--text-muted);
+      padding: 2px 0;
+    }
+
+    /* Extruder */
+    .extruder-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .extruder-label {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .extruder-graphic {
+      height: 80px;
+    }
+
+    .extruder-graphic img {
+      height: 100%;
+    }
+
+    .extruder-btns {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .ext-btn {
+      width: 24px;
+      height: 20px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 9px;
+      color: var(--text-secondary);
+    }
+
+    .ext-btn:hover {
+      background: var(--bg-hover);
+    }
+
+    /* AMS Nozzle Colors */
+    .nozzle-colors-row {
+      display: flex;
+      gap: 8px;
+      padding: 8px 0;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .nozzle-color-box {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+    }
+
+    .nozzle-color-box.active {
+      border-color: var(--accent);
+    }
+
+    .color-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .color-dot.empty {
+      background: var(--bg-light) !important;
+      border: 1px dashed var(--border);
+    }
+
+    /* AMS Section */
+    .ams-section {
+      border-top: 1px solid var(--border-light);
+      padding-top: 12px;
+    }
+
+    .ams-header-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .ams-humidity img {
+      width: 12px;
+      height: 12px;
+      opacity: 0.5;
+    }
+
+    .ams-slots-row {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot-label {
+      font-size: 9px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+    }
+
+    .ams-slot {
+      width: 52px;
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover {
+      border-color: var(--text-muted);
+    }
+
+    .ams-slot.active {
+      border-color: var(--accent);
+    }
+
+    .ams-slot-color {
+      height: 36px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      padding-bottom: 4px;
+    }
+
+    .ams-slot-color img {
+      width: 14px;
+      height: 14px;
+      opacity: 0.5;
+    }
+
+    .ams-slot-info {
+      background: var(--bg-light);
+      padding: 4px;
+      text-align: center;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-slot-type {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    /* AMS Connector Lines */
+    .ams-connector {
+      display: flex;
+      justify-content: center;
+      padding: 8px 0;
+      position: relative;
+    }
+
+    .connector-lines {
+      display: flex;
+      gap: 20px;
+    }
+
+    .connector-line {
+      width: 2px;
+      height: 20px;
+      background: var(--border);
+    }
+
+    .connector-hub {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    /* External Spool */
+    .ext-spool-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 0;
+    }
+
+    .ext-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      width: 24px;
+    }
+
+    .ext-slot {
+      width: 52px;
+      height: 52px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      color: var(--text-muted);
+      cursor: pointer;
+    }
+
+    .ext-slot:hover {
+      background: var(--bg-hover);
+    }
+
+    .ext-slot-label {
+      font-size: 8px;
+    }
+
+    .spool-graphic {
+      flex: 1;
+      height: 52px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .spool-graphic img {
+      height: 45px;
+      opacity: 0.8;
+    }
+
+    /* AMS Buttons */
+    .ams-actions {
+      display: flex;
+      gap: 8px;
+      padding-top: 8px;
+    }
+
+    .ams-action-btn {
+      padding: 6px 12px;
+      font-size: 11px;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-action-btn.auto {
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .ams-action-btn.auto img {
+      width: 14px;
+      height: 14px;
+      opacity: 0.5;
+    }
+
+    .ams-action-btn.auto:hover {
+      background: var(--bg-hover);
+    }
+
+    .ams-spacer {
+      flex: 1;
+    }
+
+    .ams-action-btn.unload {
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn.unload:hover {
+      background: var(--bg-hover);
+    }
+
+    .ams-action-btn.load {
+      background: var(--accent);
+      border: none;
+      color: white;
+    }
+
+    .ams-action-btn.load:hover {
+      opacity: 0.9;
+    }
+
+    /* Hub Graphic */
+    .hub-area {
+      display: flex;
+      justify-content: center;
+      padding: 12px 0;
+    }
+
+    .hub-graphic {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .hub-line {
+      width: 30px;
+      height: 2px;
+      background: var(--border);
+    }
+
+    .hub-box {
+      padding: 4px 12px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="camera-icon-btn"><img src="icons/video-camera.svg" alt=""></button>
+        <button class="camera-icon-btn"><img src="icons/webcam.svg" alt=""></button>
+        <button class="camera-icon-btn"><img src="icons/settings.svg" alt=""></button>
+        <button class="camera-icon-btn"><img src="icons/reload.svg" alt=""></button>
+      </div>
+
+      <div class="camera-feed">
+        Camera Feed
+      </div>
+
+      <div class="print-progress">
+        <div class="progress-header">Printing Progress</div>
+        <div class="progress-content">
+          <div class="progress-thumb">
+            <img src="icons/micro-sd.svg" alt="">
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill"></div>
+            </div>
+            <div class="progress-details">
+              <span>Layer: N/A &nbsp; N/A</span>
+            </div>
+            <div class="progress-details" style="margin-top: 4px;">
+              <span>Estimated finish time: N/A</span>
+            </div>
+          </div>
+          <div class="progress-actions">
+            <div class="progress-icons">
+              <button class="progress-icon-btn">⌂</button>
+              <button class="progress-icon-btn">⏸</button>
+              <button class="progress-icon-btn">⏹</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-content">
+        <!-- Temperature -->
+        <div class="temp-list">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg" alt=""></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0</span>
+            <span class="temp-unit">°C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg" alt=""></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0</span>
+            <span class="temp-unit">°C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg" alt=""></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0</span>
+            <span class="temp-unit">°C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg" alt=""></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0</span>
+            <span class="temp-unit">°C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-row">
+          <div class="air-label">
+            <img src="icons/ventilation.svg" alt="">
+            Air Condition
+          </div>
+          <div class="air-item">
+            <img src="icons/ventilation.svg" alt="">
+            <span>100%</span>
+          </div>
+          <div class="air-item">
+            <span>Lamp</span>
+            <div class="lamp-dot"></div>
+          </div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-area">
+            <div class="jog-pad">
+              <div class="jog-ring">
+                <span class="jog-label y-plus">Y</span>
+                <span class="jog-label y-minus">-Y</span>
+                <span class="jog-label x-minus">-X</span>
+                <span class="jog-label x-plus">X</span>
+                <button class="jog-btn up">▲</button>
+                <button class="jog-btn down">▼</button>
+                <button class="jog-btn left">◀</button>
+                <button class="jog-btn right">▶</button>
+                <button class="jog-home">
+                  <img src="icons/home.svg" alt="">
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-col">
+            <button class="step-btn">↑ 10</button>
+            <button class="step-btn active">↑ 1</button>
+            <span class="step-label">Bed</span>
+            <button class="step-btn">↓ 1</button>
+            <button class="step-btn">↓ 10</button>
+          </div>
+
+          <div class="extruder-area">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic">
+              <img src="icons/dual-extruder.png" alt="">
+            </div>
+            <span class="extruder-label">Extruder</span>
+            <div class="extruder-btns">
+              <button class="ext-btn">▲</button>
+              <button class="ext-btn">▼</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Nozzle Color Assignment -->
+        <div class="nozzle-colors-row">
+          <div class="nozzle-color-box active">
+            <div class="color-dot" style="background: #FFD700;"></div>
+            <div class="color-dot" style="background: #8B4513;"></div>
+            <div class="color-dot" style="background: #1a1a1a;"></div>
+            <div class="color-dot" style="background: #222;"></div>
+          </div>
+          <div class="nozzle-color-box">
+            <div class="color-dot empty"></div>
+          </div>
+        </div>
+
+        <!-- AMS -->
+        <div class="ams-section">
+          <div class="ams-header-row">
+            <div class="ams-humidity">
+              <img src="icons/water.svg" alt="">
+              18 %
+            </div>
+            <div class="ams-humidity">
+              ☀
+            </div>
+          </div>
+
+          <div class="ams-slots-row">
+            <span class="ams-slot-label">A1 <img src="icons/reload.svg" style="width:10px;opacity:0.4"></span>
+            <span class="ams-slot-label">A2 <img src="icons/reload.svg" style="width:10px;opacity:0.4"></span>
+            <span class="ams-slot-label">A3 <img src="icons/reload.svg" style="width:10px;opacity:0.4"></span>
+            <span class="ams-slot-label">A4 <img src="icons/reload.svg" style="width:10px;opacity:0.4"></span>
+            <span style="flex:1"></span>
+            <span class="ams-slot-label">Ext</span>
+          </div>
+
+          <div style="display: flex; gap: 12px;">
+            <div class="ams-slots">
+              <div class="ams-slot active">
+                <div class="ams-slot-color" style="background: linear-gradient(180deg, #FFD700 60%, #E6C200 100%);">
+                  <img src="icons/eye.svg" alt="">
+                </div>
+                <div class="ams-slot-info">
+                  <div class="ams-slot-type">PLA</div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-color" style="background: linear-gradient(180deg, #1a1a1a 60%, #0a0a0a 100%);">
+                  <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+                </div>
+                <div class="ams-slot-info">
+                  <div class="ams-slot-type">PETG</div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-color" style="background: linear-gradient(180deg, #8B4513 60%, #6B3510 100%);">
+                  <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+                </div>
+                <div class="ams-slot-info">
+                  <div class="ams-slot-type">PETG</div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-color" style="background: linear-gradient(180deg, #222 60%, #111 100%);">
+                  <img src="icons/eye.svg" alt="" style="filter: invert(1);">
+                </div>
+                <div class="ams-slot-info">
+                  <div class="ams-slot-type">PLA</div>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
+              <div class="ext-slot">
+                ?
+                <span class="ext-slot-label">∠</span>
+              </div>
+              <div class="spool-graphic">
+                <img src="icons/single-extruder1.png" alt="">
+              </div>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="ams-actions">
+            <button class="ams-action-btn auto">
+              Auto-refill
+              <img src="icons/ams-settings.svg" alt="">
+            </button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn unload">Unload</button>
+            <button class="ams-action-btn load">Load</button>
+          </div>
+
+          <!-- Hub -->
+          <div class="hub-area">
+            <div class="hub-graphic">
+              <div class="hub-line"></div>
+              <div class="hub-box">HUB</div>
+              <div class="hub-line"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v5.html

@@ -0,0 +1,952 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - Exact Match</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-hover: #f0f0f0;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 340px;
+      height: 100vh;
+    }
+
+    /* Left Panel */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 6px;
+    }
+
+    .camera-title {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 26px;
+      height: 26px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 16px; height: 16px; opacity: 0.5; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 12px 16px;
+    }
+
+    .progress-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+
+    .progress-row {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .progress-thumb {
+      width: 50px;
+      height: 50px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .progress-thumb img { width: 30px; opacity: 0.4; }
+
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 13px; }
+    .progress-status { color: var(--accent); font-size: 12px; margin: 2px 0 6px; }
+
+    .progress-bar-bg {
+      height: 3px;
+      background: var(--border-light);
+      border-radius: 2px;
+      margin-bottom: 6px;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      width: 0%;
+    }
+
+    .progress-details {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .progress-btns {
+      display: flex;
+      gap: 4px;
+    }
+
+    .progress-btn {
+      width: 28px;
+      height: 28px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--border);
+      gap: 6px;
+    }
+
+    .control-title {
+      font-size: 13px;
+      margin-right: auto;
+    }
+
+    .header-btn {
+      padding: 5px 12px;
+      font-size: 11px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .control-body {
+      padding: 12px;
+    }
+
+    /* Temperature */
+    .temp-section {
+      margin-bottom: 12px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+    }
+
+    .temp-icon { width: 18px; height: 18px; }
+    .temp-icon img { width: 100%; opacity: 0.6; }
+
+    .temp-badge {
+      font-size: 9px;
+      font-weight: 700;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
+
+    .temp-value { font-size: 16px; font-weight: 500; }
+    .temp-target { font-size: 14px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 0;
+      border-top: 1px solid var(--border-light);
+      border-bottom: 1px solid var(--border-light);
+      margin-bottom: 12px;
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 14px; opacity: 0.5; }
+
+    .air-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 10px;
+      background: var(--bg-light);
+      border-radius: 6px;
+      font-size: 12px;
+    }
+
+    .air-item img { width: 14px; opacity: 0.5; }
+    .lamp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement */
+    .movement-section {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    .jog-pad {
+      position: relative;
+      width: 100px;
+      height: 100px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 9px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 6px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 6px; top: 50%; transform: translateY(-50%); }
+
+    .jog-arrow {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .jog-arrow:hover { color: var(--accent); }
+    .jog-arrow.up { top: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-arrow.down { bottom: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-arrow.left { left: 18px; top: 50%; transform: translateY(-50%); }
+    .jog-arrow.right { right: 18px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home img { width: 16px; filter: brightness(0) invert(1); }
+
+    .step-col {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      font-size: 10px;
+    }
+
+    .step-btn {
+      padding: 4px 8px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 9px;
+      color: var(--text-secondary);
+    }
+
+    .step-btn.active { background: var(--bg-hover); color: var(--text-primary); }
+    .step-label { text-align: center; color: var(--text-muted); font-size: 9px; padding: 2px 0; }
+
+    .extruder-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 4px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+    }
+
+    .nozzle-toggle button {
+      padding: 3px 12px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 10px;
+      cursor: pointer;
+    }
+
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .extruder-img { height: 70px; }
+    .extruder-img img { height: 100%; }
+    .extruder-label { font-size: 9px; color: var(--text-muted); }
+
+    .ext-btns { display: flex; flex-direction: column; gap: 2px; }
+    .ext-btn {
+      width: 22px;
+      height: 18px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 8px;
+      color: var(--text-muted);
+    }
+
+    /* AMS Section */
+    .ams-section {
+      border-top: 1px solid var(--border-light);
+      padding-top: 12px;
+    }
+
+    /* Nozzle Color Boxes */
+    .nozzle-boxes {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .nozzle-box {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+    }
+
+    .nozzle-box.active { border-color: var(--accent); }
+
+    .nozzle-dots {
+      display: flex;
+      gap: 3px;
+    }
+
+    .n-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .n-dot.empty {
+      background: var(--bg-light) !important;
+      border: 1px dashed var(--border);
+    }
+
+    .nozzle-box-spacer { flex: 1; }
+
+    .nozzle-box-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 4px 8px;
+      background: var(--bg-light);
+      border-radius: 4px;
+    }
+
+    /* AMS Middle Row - Tabs */
+    .ams-tabs-row {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      padding: 4px 8px;
+      background: var(--bg-light);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 3px;
+      border: 1px solid rgba(0,0,0,0.08);
+    }
+
+    /* AMS Content Area */
+    .ams-content {
+      background: var(--bg-light);
+      border-radius: 10px;
+      padding: 12px;
+    }
+
+    .ams-info-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      padding-left: 4px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ams-humidity img { width: 14px; opacity: 0.5; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 6px;
+      padding: 0 4px;
+    }
+
+    .slot-label {
+      width: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .slot-label img { width: 12px; opacity: 0.4; }
+
+    /* AMS Main Grid */
+    .ams-grid {
+      display: flex;
+      gap: 12px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 8px;
+    }
+
+    .ams-slot {
+      width: 60px;
+      height: 90px;
+      border-radius: 12px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: var(--text-muted); }
+    .ams-slot.active { border-color: var(--accent); }
+
+    .ams-slot-color {
+      flex: 1;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      padding-bottom: 6px;
+      position: relative;
+    }
+
+    .ams-slot-color img {
+      width: 18px;
+      height: 18px;
+      opacity: 0.7;
+    }
+
+    .ams-slot-bottom {
+      padding: 6px 4px;
+      text-align: center;
+      background: var(--bg-light);
+      border-top: 1px solid var(--border-light);
+    }
+
+    .ams-slot-type {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      padding: 8px 0;
+      margin-left: 30px;
+    }
+
+    .connector-group {
+      display: flex;
+      gap: 32px;
+      position: relative;
+    }
+
+    .connector-line {
+      width: 2px;
+      height: 20px;
+      background: #ccc;
+    }
+
+    .connector-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #ccc;
+    }
+
+    /* External Section */
+    .ext-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .ext-title {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .ext-slot-box {
+      width: 60px;
+      height: 70px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 20px;
+      color: var(--text-muted);
+    }
+
+    .ext-slot-box:hover { border-color: var(--text-muted); }
+    .ext-slot-symbol { font-size: 14px; }
+
+    .spool-holder-img {
+      height: 70px;
+    }
+
+    .spool-holder-img img { height: 100%; }
+
+    /* Hub Row */
+    .hub-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 0;
+      margin-left: 30px;
+    }
+
+    .hub-line { width: 40px; height: 2px; background: #ccc; }
+
+    .hub-graphic {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 8px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent);
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 10px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+    .auto-refill-btn img { width: 16px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 12px;
+      cursor: pointer;
+      border: none;
+    }
+
+    .ams-btn.unload {
+      background: #e0e0e0;
+      color: var(--text-secondary);
+    }
+
+    .ams-btn.unload:hover { background: #d5d5d5; }
+
+    .ams-btn.load {
+      background: #e0e0e0;
+      color: var(--text-secondary);
+    }
+
+    .ams-btn.load:hover { background: #d5d5d5; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-details">Layer: N/A &nbsp; N/A</div>
+            <div class="progress-details">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">⌂</button>
+            <button class="progress-btn">⏸</button>
+            <button class="progress-btn">⏹</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Temperature -->
+        <div class="temp-section">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-row">
+          <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+          <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+          <div class="air-item">Lamp <div class="lamp-dot"></div></div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-pad">
+            <div class="jog-ring">
+              <span class="jog-label top">Y</span>
+              <span class="jog-label bottom">-Y</span>
+              <span class="jog-label left">-X</span>
+              <span class="jog-label right">X</span>
+              <button class="jog-arrow up">▲</button>
+              <button class="jog-arrow down">▼</button>
+              <button class="jog-arrow left">◀</button>
+              <button class="jog-arrow right">▶</button>
+              <button class="jog-home"><img src="icons/home.svg"></button>
+            </div>
+          </div>
+
+          <div class="step-col">
+            <button class="step-btn">↑ 10</button>
+            <button class="step-btn active">↑ 1</button>
+            <span class="step-label">Bed</span>
+            <button class="step-btn">↓ 1</button>
+            <button class="step-btn">↓ 10</button>
+          </div>
+
+          <div class="extruder-col">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-img"><img src="icons/dual-extruder.png"></div>
+            <span class="extruder-label">Extruder</span>
+            <div class="ext-btns">
+              <button class="ext-btn">▲</button>
+              <button class="ext-btn">▼</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <!-- Nozzle Color Boxes -->
+          <div class="nozzle-boxes">
+            <div class="nozzle-box active">
+              <div class="nozzle-dots">
+                <div class="n-dot" style="background: #FFD700;"></div>
+                <div class="n-dot" style="background: #8B4513;"></div>
+                <div class="n-dot" style="background: #1a1a1a;"></div>
+                <div class="n-dot" style="background: #222;"></div>
+              </div>
+            </div>
+            <div class="nozzle-box">
+              <div class="nozzle-dots">
+                <div class="n-dot" style="background: #0066FF;"></div>
+                <div class="n-dot" style="background: #FF0000;"></div>
+              </div>
+              <div class="nozzle-box-spacer"></div>
+              <div class="nozzle-box-label">0</div>
+            </div>
+            <div class="nozzle-box">
+              <div class="nozzle-dots">
+                <div class="n-dot empty"></div>
+                <div class="n-dot empty"></div>
+                <div class="n-dot empty"></div>
+              </div>
+              <div class="nozzle-box-spacer"></div>
+              <div class="nozzle-box-label" style="background: var(--accent); color: white;">0</div>
+            </div>
+          </div>
+
+          <!-- AMS Content -->
+          <div class="ams-content">
+            <!-- Info Row -->
+            <div class="ams-info-row">
+              <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-humidity">☀</div>
+            </div>
+
+            <!-- Slot Labels -->
+            <div class="slot-labels">
+              <div class="slot-label">A1↓</div>
+              <div class="slot-label">A2↓</div>
+              <div class="slot-label">A3↓</div>
+              <div class="slot-label">A4↓</div>
+              <div style="flex: 1;"></div>
+              <div class="slot-label">Ext</div>
+            </div>
+
+            <!-- AMS Grid -->
+            <div class="ams-grid">
+              <!-- Slots -->
+              <div class="ams-slots">
+                <div class="ams-slot active">
+                  <div class="ams-slot-color" style="background: #FFD700;">
+                    <img src="icons/eye.svg">
+                  </div>
+                  <div class="ams-slot-bottom">
+                    <div class="ams-slot-type">PLA</div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-color" style="background: #1a1a1a;">
+                    <img src="icons/eye.svg" style="filter: invert(1);">
+                  </div>
+                  <div class="ams-slot-bottom">
+                    <div class="ams-slot-type">PETG</div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-color" style="background: #8B4513;">
+                    <img src="icons/eye.svg" style="filter: invert(1);">
+                  </div>
+                  <div class="ams-slot-bottom">
+                    <div class="ams-slot-type">PETG</div>
+                  </div>
+                </div>
+                <div class="ams-slot">
+                  <div class="ams-slot-color" style="background: #222;">
+                    <img src="icons/eye.svg" style="filter: invert(1);">
+                  </div>
+                  <div class="ams-slot-bottom">
+                    <div class="ams-slot-type">PLA</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- External -->
+              <div class="ext-section">
+                <div class="ext-slot-box">
+                  ?
+                  <span class="ext-slot-symbol">∠</span>
+                </div>
+                <div class="spool-holder-img">
+                  <img src="icons/single-extruder1.png">
+                </div>
+              </div>
+            </div>
+
+            <!-- Connectors -->
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"></div>
+                <div class="connector-line"></div>
+                <div class="connector-line"></div>
+                <div class="connector-line"></div>
+              </div>
+            </div>
+
+            <!-- Hub -->
+            <div class="hub-row">
+              <div class="hub-line"></div>
+              <div class="hub-graphic">
+                <div class="hub-dot"></div>
+                <div class="hub-dot"></div>
+              </div>
+              <div class="hub-line"></div>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">
+              Auto-refill
+              <img src="icons/ams-settings.svg">
+            </button>
+            <div class="ams-spacer"></div>
+            <button class="ams-btn unload">Unload</button>
+            <button class="ams-btn load">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v6-multi-ams.html

@@ -0,0 +1,690 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v6 Multi-AMS</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f0f0f0;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      height: 100vh;
+    }
+
+    /* Left Panel */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
+    .progress-row { display: flex; gap: 14px; align-items: center; }
+    .progress-thumb {
+      width: 54px; height: 54px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .progress-thumb img { width: 32px; opacity: 0.4; }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 12px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { display: flex; gap: 20px; font-size: 11px; color: var(--text-muted); }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; }
+    .header-btn {
+      padding: 6px 14px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .control-body { padding: 14px; }
+
+    /* Temperature */
+    .temp-section { margin-bottom: 14px; }
+    .temp-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+    .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 18px; opacity: 0.6; }
+    .temp-badge {
+      font-size: 10px; font-weight: 700; color: var(--accent);
+      background: #e8f5e9; padding: 2px 6px; border-radius: 4px;
+    }
+    .temp-value { font-size: 15px; font-weight: 500; }
+    .temp-target { font-size: 14px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 0;
+      border-top: 1px solid var(--border-light);
+      border-bottom: 1px solid var(--border-light);
+      margin-bottom: 14px;
+    }
+    .air-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
+    .air-label img { width: 16px; opacity: 0.5; }
+    .air-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-light); border-radius: 6px; font-size: 12px; }
+    .air-item img { width: 16px; opacity: 0.5; }
+    .lamp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement */
+    .movement-section { display: flex; gap: 16px; margin-bottom: 16px; }
+    .jog-pad { position: relative; width: 100px; height: 100px; }
+    .jog-ring {
+      width: 100%; height: 100%; border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
+      border: 1px solid var(--border); position: relative;
+    }
+    .jog-label { position: absolute; font-size: 10px; color: var(--text-muted); }
+    .jog-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 6px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 6px; top: 50%; transform: translateY(-50%); }
+    .jog-btn {
+      position: absolute; width: 22px; height: 22px;
+      background: var(--bg-light); border: 1px solid var(--border);
+      border-radius: 4px; cursor: pointer; font-size: 9px; color: var(--text-muted);
+    }
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 18px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 18px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 18px; top: 50%; transform: translateY(-50%); }
+    .jog-home {
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px; height: 32px; border-radius: 50%;
+      background: var(--accent); border: none; cursor: pointer;
+    }
+    .jog-home img { width: 16px; filter: brightness(0) invert(1); }
+
+    .step-section { display: flex; flex-direction: column; gap: 4px; }
+    .step-row { display: flex; gap: 6px; }
+    .step-btn {
+      padding: 5px 8px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 6px;
+      cursor: pointer; font-size: 10px; color: var(--text-secondary);
+    }
+    .step-btn.active { background: var(--bg-hover); border-color: var(--text-muted); }
+    .step-label { font-size: 10px; color: var(--text-muted); text-align: center; padding: 3px 0; }
+
+    .extruder-section { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+    .nozzle-toggle { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
+    .nozzle-toggle button {
+      padding: 5px 14px; border: none; background: var(--bg-white);
+      font-size: 10px; cursor: pointer; color: var(--text-secondary);
+    }
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+    .extruder-graphic { height: 70px; }
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 10px; color: var(--text-muted); }
+    .ext-controls { display: flex; flex-direction: column; gap: 3px; }
+    .ext-btn {
+      width: 26px; height: 26px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 6px;
+      cursor: pointer; font-size: 11px; color: var(--text-muted);
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section { border-top: 1px solid var(--border-light); padding-top: 14px; }
+
+    /* Nozzle Filament Boxes */
+    .nozzle-filament-row { display: flex; gap: 8px; margin-bottom: 10px; }
+    .nozzle-filament-box {
+      display: flex; align-items: center; gap: 6px;
+      padding: 8px 10px; background: var(--bg-white);
+      border: 2px solid var(--border); border-radius: 8px; cursor: pointer;
+    }
+    .nozzle-filament-box:hover { border-color: #ccc; }
+    .nozzle-filament-box.active { border-color: var(--accent); }
+    .filament-dots { display: flex; gap: 3px; }
+    .f-dot { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
+    .f-dot.empty { background: #eee !important; border: 1px dashed #ccc; }
+    .f-dot-separator { width: 1px; height: 16px; background: #ccc; margin: 0 2px; }
+    .filament-count { font-size: 11px; color: var(--text-muted); padding: 2px 6px; background: var(--bg-light); border-radius: 4px; margin-left: auto; }
+    .filament-count.active { background: var(--accent); color: white; }
+
+    /* AMS Tabs */
+    .ams-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
+    .ams-tab {
+      display: flex; align-items: center; gap: 4px;
+      padding: 5px 8px; background: var(--bg-light);
+      border: 2px solid transparent; border-radius: 6px;
+      cursor: pointer; font-size: 10px; color: var(--text-secondary);
+    }
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); }
+    .ams-tab-dots { display: flex; gap: 2px; }
+    .ams-tab-dot { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.08); }
+    .ams-tab-label { font-size: 9px; color: var(--text-muted); margin-left: 2px; }
+
+    /* AMS-HT Tab (single slot indicator) */
+    .ams-tab.ams-ht .ams-tab-dots { gap: 0; }
+    .ams-tab.ams-ht .ams-tab-dot { width: 14px; height: 14px; border-radius: 3px; }
+
+    /* AMS Content Panel */
+    .ams-content { background: var(--bg-panel); border-radius: 12px; padding: 12px; }
+
+    /* AMS Info Row */
+    .ams-info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+    .ams-humidity { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
+    .ams-humidity img { width: 14px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 14px; color: #f5a623; }
+
+    /* AMS Main Area */
+    .ams-main { display: flex; gap: 16px; }
+
+    /* AMS Slots Container */
+    .ams-slots-container { flex: 1; }
+
+    /* Slot Labels Row */
+    .slot-labels-row { display: flex; gap: 6px; margin-bottom: 4px; padding-left: 2px; }
+    .slot-label-item { width: 50px; display: flex; align-items: center; justify-content: center; }
+    .slot-label-badge {
+      display: flex; align-items: center; gap: 2px;
+      padding: 2px 5px; background: var(--bg-white);
+      border: 1px solid var(--border); border-radius: 10px;
+      font-size: 9px; color: var(--text-muted);
+    }
+    .slot-label-badge .arrow { font-size: 7px; }
+
+    /* AMS Slots */
+    .ams-slots { display: flex; gap: 6px; }
+    .ams-slot {
+      width: 50px; height: 72px;
+      border-radius: 8px; overflow: hidden;
+      cursor: pointer; border: 2px solid var(--border);
+    }
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+    .ams-slot.selected { border-color: var(--accent); }
+    .ams-slot-fill {
+      width: 100%; height: 100%;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: flex-end;
+      padding-bottom: 6px;
+    }
+    .ams-slot-type { font-size: 11px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-bottom: 2px; }
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+    .ams-slot-eye { width: 18px; height: 18px; }
+    .ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+    .ams-slot-empty {
+      width: 100%; height: 100%;
+      background: var(--bg-white);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      color: var(--text-muted);
+    }
+    .ams-slot-empty .question { font-size: 16px; }
+    .ams-slot-empty .angle { font-size: 12px; margin-top: 2px; }
+
+    /* Connector Lines */
+    .ams-connectors { display: flex; padding-left: 2px; margin-top: 4px; }
+    .connector-lines { display: flex; gap: 6px; position: relative; }
+    .connector-line { width: 50px; display: flex; justify-content: center; }
+    .connector-line .vline { width: 2px; height: 12px; background: #c0c0c0; }
+    .connector-hbar { position: absolute; bottom: 0; left: 25px; right: 25px; height: 2px; background: #c0c0c0; }
+
+    /* Hub Row */
+    .hub-row { display: flex; align-items: center; padding-left: 2px; margin-top: -1px; }
+    .hub-line-left { width: calc(100px + 3px); height: 2px; background: #c0c0c0; }
+    .hub-graphic { display: flex; padding: 3px 5px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 3px; }
+    .hub-port { width: 8px; height: 12px; background: var(--accent); border-radius: 2px; margin: 0 1px; }
+    .hub-line-right { width: 30px; height: 2px; background: #c0c0c0; }
+
+    /* External Spool Section */
+    .ext-spool-section { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
+    .ext-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
+    .ext-content { display: flex; gap: 6px; align-items: flex-start; }
+    .ext-slot {
+      width: 50px; height: 72px;
+      background: var(--bg-white); border: 2px solid var(--border);
+      border-radius: 8px; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      cursor: pointer; color: var(--text-muted);
+    }
+    .ext-slot:hover { border-color: #bbb; }
+    .ext-slot .question { font-size: 18px; }
+    .ext-slot .angle { font-size: 12px; margin-top: 2px; }
+    .ext-connector { width: 2px; height: 16px; background: #c0c0c0; margin-top: 4px; }
+    .spool-holder-graphic { width: 70px; height: 90px; }
+    .spool-holder-graphic img { width: 100%; height: 100%; object-fit: contain; }
+
+    /* AMS Actions */
+    .ams-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+    .auto-refill-btn {
+      display: flex; align-items: center; gap: 5px;
+      padding: 8px 12px; background: var(--bg-white);
+      border: 1px solid var(--border); border-radius: 6px;
+      cursor: pointer; font-size: 12px; color: var(--text-secondary);
+    }
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn {
+      width: 32px; height: 32px;
+      background: var(--bg-white); border: 1px solid var(--border);
+      border-radius: 6px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 18px; opacity: 0.5; }
+    .ams-spacer { flex: 1; }
+    .ams-action-btn {
+      padding: 8px 20px; border-radius: 6px;
+      font-size: 12px; cursor: pointer; border: none;
+      background: #e0e0e0; color: var(--text-secondary);
+    }
+    .ams-action-btn:hover { background: #d5d5d5; }
+
+    /* AMS-HT Specific Styles */
+    .ams-ht-content { padding: 10px; }
+    .ams-ht-slot {
+      width: 60px; height: 80px;
+      border-radius: 10px; overflow: hidden;
+      cursor: pointer; border: 2px solid var(--border);
+      margin: 0 auto;
+    }
+    .ams-ht-label { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 4px; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta"><span>Layer: N/A</span><span>N/A</span></div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Temperature -->
+        <div class="temp-section">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-section">
+          <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+          <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+          <div class="air-item">Lamp <div class="lamp-dot"></div></div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-pad">
+            <div class="jog-ring">
+              <span class="jog-label top">Y</span>
+              <span class="jog-label bottom">-Y</span>
+              <span class="jog-label left">-X</span>
+              <span class="jog-label right">X</span>
+              <button class="jog-btn up">&#9650;</button>
+              <button class="jog-btn down">&#9660;</button>
+              <button class="jog-btn left">&#9664;</button>
+              <button class="jog-btn right">&#9654;</button>
+              <button class="jog-home"><img src="icons/home.svg"></button>
+            </div>
+          </div>
+
+          <div class="step-section">
+            <div class="step-row">
+              <button class="step-btn">&#8593; 10</button>
+              <button class="step-btn active">&#8593; 1</button>
+            </div>
+            <div class="step-label">Bed</div>
+            <div class="step-row">
+              <button class="step-btn">&#8595; 1</button>
+              <button class="step-btn">&#8595; 10</button>
+            </div>
+          </div>
+
+          <div class="extruder-section">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+            <span class="extruder-label">Extruder</span>
+            <div class="ext-controls">
+              <button class="ext-btn">&#9650;</button>
+              <button class="ext-btn">&#9660;</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <!-- Nozzle Filament Assignment Boxes -->
+          <div class="nozzle-filament-row">
+            <div class="nozzle-filament-box active">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FFD700;"></div>
+                <div class="f-dot" style="background: #8B4513;"></div>
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot" style="background: #222;"></div>
+              </div>
+            </div>
+            <div class="nozzle-filament-box">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FF6600;"></div>
+                <div class="f-dot" style="background: #00AA00;"></div>
+                <div class="f-dot" style="background: #0066FF;"></div>
+                <div class="f-dot" style="background: #FF0000;"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Tabs - Shows all connected AMS/AMS-HT units -->
+          <div class="ams-tabs">
+            <!-- AMS 1 (Regular AMS - 4 slots) -->
+            <div class="ams-tab active">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FFD700;"></div>
+                <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+                <div class="ams-tab-dot" style="background: #8B4513;"></div>
+                <div class="ams-tab-dot" style="background: #222;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 1</span>
+            </div>
+            <!-- AMS 2 (Regular AMS - 4 slots) -->
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FF6600;"></div>
+                <div class="ams-tab-dot" style="background: #00AA00;"></div>
+                <div class="ams-tab-dot" style="background: #0066FF;"></div>
+                <div class="ams-tab-dot" style="background: #FF0000;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 2</span>
+            </div>
+            <!-- AMS 3 (Regular AMS - 4 slots) -->
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FFFFFF; border-color: #ccc;"></div>
+                <div class="ams-tab-dot" style="background: #333;"></div>
+                <div class="ams-tab-dot" style="background: #666;"></div>
+                <div class="ams-tab-dot" style="background: #999;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 3</span>
+            </div>
+            <!-- AMS-HT 1 (High Temp - single slot) -->
+            <div class="ams-tab ams-ht">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #8844AA;"></div>
+              </div>
+              <span class="ams-tab-label">HT 1</span>
+            </div>
+            <!-- AMS-HT 2 (High Temp - single slot) -->
+            <div class="ams-tab ams-ht">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #44AA88;"></div>
+              </div>
+              <span class="ams-tab-label">HT 2</span>
+            </div>
+          </div>
+
+          <!-- AMS Content Panel -->
+          <div class="ams-content">
+            <!-- Info Row -->
+            <div class="ams-info-row">
+              <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-humidity"><span class="sun">&#9788;</span></div>
+            </div>
+
+            <!-- Main AMS Area -->
+            <div class="ams-main">
+              <!-- AMS Slots Container -->
+              <div class="ams-slots-container">
+                <!-- Slot Labels -->
+                <div class="slot-labels-row">
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A1 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A2 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A3 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A4 <span class="arrow">&#8595;</span></div>
+                  </div>
+                </div>
+
+                <!-- Slots -->
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #1a1a1a;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Connectors -->
+                <div class="ams-connectors">
+                  <div class="connector-lines">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                  </div>
+                </div>
+
+                <!-- Hub -->
+                <div class="hub-row">
+                  <div class="hub-line-left"></div>
+                  <div class="hub-graphic">
+                    <div class="hub-port"></div>
+                    <div class="hub-port"></div>
+                  </div>
+                  <div class="hub-line-right"></div>
+                </div>
+              </div>
+
+              <!-- External Spool Section -->
+              <div class="ext-spool-section">
+                <div class="ext-label">Ext</div>
+                <div class="ext-content">
+                  <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div class="ext-slot">
+                      <span class="question">?</span>
+                      <span class="angle">&#8736;</span>
+                    </div>
+                    <div class="ext-connector"></div>
+                  </div>
+                  <div class="spool-holder-graphic">
+                    <img src="icons/single-extruder1.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v6.html

@@ -0,0 +1,1125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v6 Exact Match</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f0f0f0;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 380px;
+      height: 100vh;
+    }
+
+    /* Left Panel */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 16px 20px;
+    }
+
+    .progress-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-bottom: 10px;
+    }
+
+    .progress-row {
+      display: flex;
+      gap: 14px;
+      align-items: center;
+    }
+
+    .progress-thumb {
+      width: 54px;
+      height: 54px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .progress-thumb img { width: 32px; opacity: 0.4; }
+
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 12px; margin-bottom: 8px; }
+
+    .progress-bar-bg {
+      height: 4px;
+      background: var(--border-light);
+      border-radius: 2px;
+      margin-bottom: 8px;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      width: 0%;
+    }
+
+    .progress-meta {
+      display: flex;
+      gap: 20px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .progress-btns {
+      display: flex;
+      gap: 6px;
+    }
+
+    .progress-btn {
+      width: 32px;
+      height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title {
+      font-size: 13px;
+      margin-right: auto;
+    }
+
+    .header-btn {
+      padding: 6px 14px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .header-btn:hover { background: #009938; }
+
+    .control-body {
+      padding: 14px;
+    }
+
+    /* Temperature Section */
+    .temp-section {
+      margin-bottom: 14px;
+    }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+    }
+
+    .temp-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .temp-icon img { width: 18px; opacity: 0.6; }
+
+    .temp-badge {
+      font-size: 10px;
+      font-weight: 700;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 6px;
+      border-radius: 4px;
+      min-width: 18px;
+      text-align: center;
+    }
+
+    .temp-value { font-size: 15px; font-weight: 500; }
+    .temp-target { font-size: 14px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      border-top: 1px solid var(--border-light);
+      border-bottom: 1px solid var(--border-light);
+      margin-bottom: 14px;
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 16px; opacity: 0.5; }
+
+    .air-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--bg-light);
+      border-radius: 6px;
+      font-size: 12px;
+    }
+
+    .air-item img { width: 16px; opacity: 0.5; }
+    .lamp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Section */
+    .movement-section {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+
+    .jog-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .jog-pad {
+      position: relative;
+      width: 110px;
+      height: 110px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 10px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+
+    .jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 10px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+    .jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 18px; filter: brightness(0) invert(1); }
+
+    /* Step Buttons */
+    .step-section {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .step-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .step-btn {
+      padding: 6px 10px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 11px;
+      color: var(--text-secondary);
+      min-width: 44px;
+      text-align: center;
+    }
+
+    .step-btn:hover { background: var(--bg-hover); }
+    .step-btn.active { background: var(--bg-hover); border-color: var(--text-muted); }
+
+    .step-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-align: center;
+      padding: 4px 0;
+    }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+    }
+
+    .nozzle-toggle button {
+      padding: 6px 16px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 11px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .extruder-graphic {
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-graphic img { height: 100%; }
+
+    .extruder-label { font-size: 11px; color: var(--text-muted); }
+
+    .ext-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .ext-btn {
+      width: 28px;
+      height: 28px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ext-btn:hover { background: var(--bg-hover); }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      border-top: 1px solid var(--border-light);
+      padding-top: 14px;
+    }
+
+    /* Nozzle Filament Boxes */
+    .nozzle-filament-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .nozzle-filament-box {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .nozzle-filament-box:hover { border-color: #ccc; }
+    .nozzle-filament-box.active { border-color: var(--accent); }
+
+    .filament-dots {
+      display: flex;
+      gap: 4px;
+    }
+
+    .f-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #eee !important;
+      border: 1px dashed #ccc;
+    }
+
+    .f-dot-separator {
+      width: 1px;
+      height: 18px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 12px;
+      color: var(--text-muted);
+      padding: 2px 8px;
+      background: var(--bg-light);
+      border-radius: 4px;
+      margin-left: auto;
+    }
+
+    .filament-count.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    /* AMS Tabs (for multiple AMS units) */
+    .ams-tabs {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .ams-tab {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      background: var(--bg-light);
+      border: 2px solid transparent;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); }
+
+    .ams-tab-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .ams-tab-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
+      border: 1px solid rgba(0,0,0,0.08);
+    }
+
+    /* AMS Content Panel */
+    .ams-content {
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 14px;
+    }
+
+    /* AMS Info Row */
+    .ams-info-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-humidity img { width: 16px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 16px; color: #f5a623; }
+
+    /* AMS Main Area */
+    .ams-main {
+      display: flex;
+      gap: 20px;
+    }
+
+    /* AMS Slots Container */
+    .ams-slots-container {
+      flex: 1;
+    }
+
+    /* Slot Labels Row */
+    .slot-labels-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 6px;
+      padding-left: 4px;
+    }
+
+    .slot-label-item {
+      width: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .slot-label-badge {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 3px 6px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .slot-label-badge .arrow { font-size: 8px; }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 8px;
+    }
+
+    .ams-slot {
+      width: 56px;
+      height: 80px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+    .ams-slot.selected { border-color: var(--accent); }
+
+    .ams-slot-fill {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+      position: relative;
+    }
+
+    .ams-slot-type {
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 4px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-slot-eye img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.8;
+    }
+
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    .ams-slot-empty {
+      flex: 1;
+      background: var(--bg-white);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 18px;
+    }
+
+    .ams-slot-empty .angle { font-size: 14px; margin-top: 4px; }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: flex-start;
+      padding: 0 4px;
+      margin-top: 6px;
+    }
+
+    .connector-lines {
+      display: flex;
+      gap: 8px;
+      position: relative;
+    }
+
+    .connector-line {
+      width: 56px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 16px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 28px;
+      right: 28px;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* Hub Row */
+    .hub-row {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 4px;
+      margin-top: -1px;
+    }
+
+    .hub-line-left {
+      width: calc(112px + 4px);
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    .hub-graphic {
+      display: flex;
+      align-items: center;
+      padding: 4px 6px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-port {
+      width: 10px;
+      height: 14px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 2px;
+    }
+
+    .hub-line-right {
+      width: 40px;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* External Spool Section */
+    .ext-spool-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 100px;
+    }
+
+    .ext-label {
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 6px;
+    }
+
+    .ext-content {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+    }
+
+    .ext-slot {
+      width: 56px;
+      height: 80px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--text-muted);
+    }
+
+    .ext-slot:hover { border-color: #bbb; }
+    .ext-slot .question { font-size: 20px; }
+    .ext-slot .angle { font-size: 14px; margin-top: 4px; }
+
+    .ext-connector {
+      width: 2px;
+      height: 22px;
+      background: #c0c0c0;
+      margin-top: 6px;
+    }
+
+    .spool-holder-graphic {
+      width: 80px;
+      height: 100px;
+    }
+
+    .spool-holder-graphic img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 12px;
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 16px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 36px;
+      height: 36px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 20px; opacity: 0.5; }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 10px 24px;
+      border-radius: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      border: none;
+      background: #e0e0e0;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #d5d5d5; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">
+              <span>Layer: N/A</span>
+              <span>N/A</span>
+            </div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Temperature -->
+        <div class="temp-section">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-section">
+          <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+          <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+          <div class="air-item">Lamp <div class="lamp-dot"></div></div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-container">
+            <div class="jog-pad">
+              <div class="jog-ring">
+                <span class="jog-label top">Y</span>
+                <span class="jog-label bottom">-Y</span>
+                <span class="jog-label left">-X</span>
+                <span class="jog-label right">X</span>
+                <button class="jog-btn up">&#9650;</button>
+                <button class="jog-btn down">&#9660;</button>
+                <button class="jog-btn left">&#9664;</button>
+                <button class="jog-btn right">&#9654;</button>
+                <button class="jog-home"><img src="icons/home.svg"></button>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-section">
+            <div class="step-row">
+              <button class="step-btn">&#8593; 10</button>
+              <button class="step-btn active">&#8593; 1</button>
+            </div>
+            <div class="step-label">Bed</div>
+            <div class="step-row">
+              <button class="step-btn">&#8595; 1</button>
+              <button class="step-btn">&#8595; 10</button>
+            </div>
+          </div>
+
+          <div class="extruder-section">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+            <span class="extruder-label">Extruder</span>
+            <div class="ext-controls">
+              <button class="ext-btn">&#9650;</button>
+              <button class="ext-btn">&#9660;</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <!-- Nozzle Filament Assignment Boxes -->
+          <div class="nozzle-filament-row">
+            <div class="nozzle-filament-box active">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FFD700;"></div>
+                <div class="f-dot" style="background: #8B4513;"></div>
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot" style="background: #222;"></div>
+              </div>
+            </div>
+            <div class="nozzle-filament-box">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot-separator"></div>
+                <div class="f-dot" style="background: #FF0000;"></div>
+              </div>
+              <span class="filament-count">0</span>
+            </div>
+            <div class="nozzle-filament-box">
+              <div class="filament-dots">
+                <div class="f-dot empty"></div>
+                <div class="f-dot empty"></div>
+                <div class="f-dot empty"></div>
+              </div>
+              <span class="filament-count active">0</span>
+            </div>
+          </div>
+
+          <!-- AMS Content Panel -->
+          <div class="ams-content">
+            <!-- Info Row -->
+            <div class="ams-info-row">
+              <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-humidity"><span class="sun">&#9788;</span></div>
+            </div>
+
+            <!-- Main AMS Area -->
+            <div class="ams-main">
+              <!-- AMS Slots Container -->
+              <div class="ams-slots-container">
+                <!-- Slot Labels -->
+                <div class="slot-labels-row">
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A1 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A2 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A3 <span class="arrow">&#8595;</span></div>
+                  </div>
+                  <div class="slot-label-item">
+                    <div class="slot-label-badge">A4 <span class="arrow">&#8595;</span></div>
+                  </div>
+                </div>
+
+                <!-- Slots -->
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #1a1a1a;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Connectors -->
+                <div class="ams-connectors">
+                  <div class="connector-lines">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                  </div>
+                </div>
+
+                <!-- Hub -->
+                <div class="hub-row">
+                  <div class="hub-line-left"></div>
+                  <div class="hub-graphic">
+                    <div class="hub-port"></div>
+                    <div class="hub-port"></div>
+                  </div>
+                  <div class="hub-line-right"></div>
+                </div>
+              </div>
+
+              <!-- External Spool Section -->
+              <div class="ext-spool-section">
+                <div class="ext-label">Ext</div>
+                <div class="ext-content">
+                  <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div class="ext-slot">
+                      <span class="question">?</span>
+                      <span class="angle">&#8736;</span>
+                    </div>
+                    <div class="ext-connector"></div>
+                  </div>
+                  <div class="spool-holder-graphic">
+                    <img src="icons/single-extruder1.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Actions -->
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v7.html

@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v7</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f0f0f0;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 300px;
+      height: 100vh;
+    }
+
+    /* Left Panel */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 6px;
+    }
+
+    .camera-title {
+      font-size: 12px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 16px; height: 16px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 12px 16px;
+    }
+
+    .progress-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
+    .progress-row { display: flex; gap: 12px; align-items: center; }
+    .progress-thumb {
+      width: 48px; height: 48px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .progress-thumb img { width: 28px; opacity: 0.4; }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 13px; }
+    .progress-status { color: var(--accent); font-size: 12px; margin: 2px 0 6px; }
+    .progress-bar-bg { height: 3px; background: var(--border-light); border-radius: 2px; margin-bottom: 6px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 11px; color: var(--text-muted); }
+    .progress-btns { display: flex; gap: 4px; }
+    .progress-btn {
+      width: 28px; height: 28px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--border);
+      gap: 6px;
+    }
+
+    .control-title { font-size: 12px; margin-right: auto; }
+    .header-btn {
+      padding: 5px 10px;
+      font-size: 11px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .control-body { padding: 10px; flex: 1; overflow-y: auto; }
+
+    /* Temperature - Compact */
+    .temp-section { margin-bottom: 10px; }
+    .temp-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+    .temp-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 14px; opacity: 0.6; }
+    .temp-badge {
+      font-size: 9px; font-weight: 700; color: var(--accent);
+      background: #e8f5e9; padding: 1px 4px; border-radius: 3px;
+    }
+    .temp-value { font-size: 14px; font-weight: 500; }
+    .temp-target { font-size: 12px; color: var(--text-muted); }
+
+    /* Air Condition - Compact */
+    .air-section {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 0;
+      border-top: 1px solid var(--border-light);
+      border-bottom: 1px solid var(--border-light);
+      margin-bottom: 10px;
+    }
+    .air-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
+    .air-label img { width: 14px; opacity: 0.5; }
+    .air-item { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--bg-light); border-radius: 4px; font-size: 11px; }
+    .air-item img { width: 14px; opacity: 0.5; }
+    .lamp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement - Compact */
+    .movement-section { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
+
+    .jog-pad { position: relative; width: 90px; height: 90px; }
+    .jog-ring {
+      width: 100%; height: 100%; border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
+      border: 1px solid var(--border); position: relative;
+    }
+    .jog-label { position: absolute; font-size: 9px; color: var(--text-muted); }
+    .jog-label.top { top: 5px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 5px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 5px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 5px; top: 50%; transform: translateY(-50%); }
+    .jog-btn {
+      position: absolute; width: 18px; height: 18px;
+      background: var(--bg-light); border: 1px solid var(--border);
+      border-radius: 3px; cursor: pointer; font-size: 8px; color: var(--text-muted);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 16px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 16px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 16px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 16px; top: 50%; transform: translateY(-50%); }
+    .jog-home {
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 28px; height: 28px; border-radius: 50%;
+      background: var(--accent); border: none; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .jog-home img { width: 14px; filter: brightness(0) invert(1); }
+
+    .step-section { display: flex; flex-direction: column; gap: 2px; }
+    .step-row { display: flex; gap: 4px; }
+    .step-btn {
+      padding: 4px 6px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 4px;
+      cursor: pointer; font-size: 9px; color: var(--text-secondary);
+    }
+    .step-btn.active { background: var(--bg-hover); border-color: var(--text-muted); }
+    .step-label { font-size: 9px; color: var(--text-muted); text-align: center; padding: 2px 0; }
+
+    .extruder-section { display: flex; flex-direction: column; align-items: center; gap: 3px; }
+    .nozzle-toggle { display: flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
+    .nozzle-toggle button {
+      padding: 4px 10px; border: none; background: var(--bg-white);
+      font-size: 9px; cursor: pointer; color: var(--text-secondary);
+    }
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+    .extruder-graphic { height: 60px; }
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 9px; color: var(--text-muted); }
+    .ext-controls { display: flex; flex-direction: column; gap: 2px; }
+    .ext-btn {
+      width: 22px; height: 22px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 4px;
+      cursor: pointer; font-size: 10px; color: var(--text-muted);
+      display: flex; align-items: center; justify-content: center;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section { border-top: 1px solid var(--border-light); padding-top: 10px; }
+
+    /* Nozzle Filament Boxes */
+    .nozzle-filament-row { display: flex; gap: 6px; margin-bottom: 8px; }
+    .nozzle-filament-box {
+      display: flex; align-items: center; gap: 4px;
+      padding: 6px 8px; background: var(--bg-white);
+      border: 2px solid var(--border); border-radius: 6px; cursor: pointer;
+    }
+    .nozzle-filament-box:hover { border-color: #ccc; }
+    .nozzle-filament-box.active { border-color: var(--accent); }
+    .filament-dots { display: flex; gap: 2px; }
+    .f-dot { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
+    .f-dot.empty { background: #eee !important; border: 1px dashed #ccc; }
+
+    /* AMS Tabs */
+    .ams-tabs { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
+    .ams-tab {
+      display: flex; align-items: center; gap: 3px;
+      padding: 4px 6px; background: var(--bg-light);
+      border: 2px solid transparent; border-radius: 5px;
+      cursor: pointer; font-size: 9px; color: var(--text-secondary);
+    }
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); }
+    .ams-tab-dots { display: flex; gap: 1px; }
+    .ams-tab-dot { width: 8px; height: 8px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.08); }
+    .ams-tab-label { font-size: 8px; color: var(--text-muted); }
+
+    /* AMS Content Panel */
+    .ams-content { background: var(--bg-panel); border-radius: 10px; padding: 10px; }
+
+    /* AMS Info Row */
+    .ams-info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+    .ams-humidity { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-secondary); }
+    .ams-humidity img { width: 12px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 12px; color: #f5a623; }
+
+    /* AMS Main Area */
+    .ams-main { display: flex; gap: 8px; }
+
+    /* AMS Slots Container */
+    .ams-slots-container { flex: 1; }
+
+    /* Slot Labels Row */
+    .slot-labels-row { display: flex; gap: 4px; margin-bottom: 3px; }
+    .slot-label-item { width: 44px; display: flex; align-items: center; justify-content: center; }
+    .slot-label-badge {
+      display: flex; align-items: center; gap: 1px;
+      padding: 2px 4px; background: var(--bg-white);
+      border: 1px solid var(--border); border-radius: 8px;
+      font-size: 8px; color: var(--text-muted);
+    }
+
+    /* AMS Slots */
+    .ams-slots { display: flex; gap: 4px; }
+    .ams-slot {
+      width: 44px; height: 64px;
+      border-radius: 6px; overflow: hidden;
+      cursor: pointer; border: 2px solid var(--border);
+    }
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+    .ams-slot-fill {
+      width: 100%; height: 100%;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: flex-end;
+      padding-bottom: 4px;
+    }
+    .ams-slot-type { font-size: 10px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-bottom: 2px; }
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+    .ams-slot-eye { width: 14px; height: 14px; }
+    .ams-slot-eye img { width: 12px; height: 12px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+    .ams-slot-empty {
+      width: 100%; height: 100%;
+      background: var(--bg-white);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      color: var(--text-muted);
+    }
+    .ams-slot-empty .question { font-size: 14px; }
+    .ams-slot-empty .angle { font-size: 10px; }
+
+    /* Connector Lines */
+    .ams-connectors { display: flex; margin-top: 3px; }
+    .connector-lines { display: flex; gap: 4px; position: relative; }
+    .connector-line { width: 44px; display: flex; justify-content: center; }
+    .connector-line .vline { width: 2px; height: 10px; background: #c0c0c0; }
+    .connector-hbar { position: absolute; bottom: 0; left: 22px; right: 22px; height: 2px; background: #c0c0c0; }
+
+    /* Hub Row */
+    .hub-row { display: flex; align-items: center; margin-top: -1px; }
+    .hub-line-left { width: 88px; height: 2px; background: #c0c0c0; }
+    .hub-graphic { display: flex; padding: 2px 4px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 3px; }
+    .hub-port { width: 6px; height: 10px; background: var(--accent); border-radius: 1px; margin: 0 1px; }
+    .hub-line-right { width: 20px; height: 2px; background: #c0c0c0; }
+
+    /* External Spool Section */
+    .ext-spool-section { display: flex; flex-direction: column; align-items: center; }
+    .ext-label { font-size: 10px; color: var(--text-secondary); margin-bottom: 3px; }
+    .ext-content { display: flex; gap: 4px; align-items: flex-start; }
+    .ext-slot {
+      width: 44px; height: 64px;
+      background: var(--bg-white); border: 2px solid var(--border);
+      border-radius: 6px; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      cursor: pointer; color: var(--text-muted);
+    }
+    .ext-slot:hover { border-color: #bbb; }
+    .ext-slot .question { font-size: 14px; }
+    .ext-slot .angle { font-size: 10px; }
+    .ext-connector { width: 2px; height: 12px; background: #c0c0c0; margin-top: 3px; }
+    .spool-holder-graphic { width: 50px; height: 70px; }
+    .spool-holder-graphic img { width: 100%; height: 100%; object-fit: contain; }
+
+    /* AMS Actions */
+    .ams-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
+    .auto-refill-btn {
+      display: flex; align-items: center; gap: 4px;
+      padding: 6px 10px; background: var(--bg-white);
+      border: 1px solid var(--border); border-radius: 5px;
+      cursor: pointer; font-size: 11px; color: var(--text-secondary);
+    }
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn {
+      width: 28px; height: 28px;
+      background: var(--bg-white); border: 1px solid var(--border);
+      border-radius: 5px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 16px; opacity: 0.5; }
+    .ams-spacer { flex: 1; }
+    .ams-action-btn {
+      padding: 6px 16px; border-radius: 5px;
+      font-size: 11px; cursor: pointer; border: none;
+      background: #e0e0e0; color: var(--text-secondary);
+    }
+    .ams-action-btn:hover { background: #d5d5d5; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Temperature -->
+        <div class="temp-section">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-section">
+          <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+          <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+          <div class="air-item">Lamp <div class="lamp-dot"></div></div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-pad">
+            <div class="jog-ring">
+              <span class="jog-label top">Y</span>
+              <span class="jog-label bottom">-Y</span>
+              <span class="jog-label left">-X</span>
+              <span class="jog-label right">X</span>
+              <button class="jog-btn up">&#9650;</button>
+              <button class="jog-btn down">&#9660;</button>
+              <button class="jog-btn left">&#9664;</button>
+              <button class="jog-btn right">&#9654;</button>
+              <button class="jog-home"><img src="icons/home.svg"></button>
+            </div>
+          </div>
+
+          <div class="step-section">
+            <div class="step-row">
+              <button class="step-btn">&#8593;10</button>
+              <button class="step-btn active">&#8593;1</button>
+            </div>
+            <div class="step-label">Bed</div>
+            <div class="step-row">
+              <button class="step-btn">&#8595;1</button>
+              <button class="step-btn">&#8595;10</button>
+            </div>
+          </div>
+
+          <div class="extruder-section">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+            <span class="extruder-label">Extruder</span>
+            <div class="ext-controls">
+              <button class="ext-btn">&#9650;</button>
+              <button class="ext-btn">&#9660;</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <!-- Nozzle Filament Assignment Boxes -->
+          <div class="nozzle-filament-row">
+            <div class="nozzle-filament-box active">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FFD700;"></div>
+                <div class="f-dot" style="background: #8B4513;"></div>
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot" style="background: #222;"></div>
+              </div>
+            </div>
+            <div class="nozzle-filament-box">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FF6600;"></div>
+                <div class="f-dot" style="background: #00AA00;"></div>
+                <div class="f-dot" style="background: #0066FF;"></div>
+                <div class="f-dot" style="background: #FF0000;"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Tabs -->
+          <div class="ams-tabs">
+            <div class="ams-tab active">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FFD700;"></div>
+                <div class="ams-tab-dot" style="background: #8B4513;"></div>
+                <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+                <div class="ams-tab-dot" style="background: #222;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 1</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FF6600;"></div>
+                <div class="ams-tab-dot" style="background: #00AA00;"></div>
+                <div class="ams-tab-dot" style="background: #0066FF;"></div>
+                <div class="ams-tab-dot" style="background: #FF0000;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 2</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #fff; border-color: #ccc;"></div>
+                <div class="ams-tab-dot" style="background: #333;"></div>
+                <div class="ams-tab-dot" style="background: #666;"></div>
+                <div class="ams-tab-dot" style="background: #999;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 3</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #8844AA;"></div>
+              </div>
+              <span class="ams-tab-label">HT 1</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #44AA88;"></div>
+              </div>
+              <span class="ams-tab-label">HT 2</span>
+            </div>
+          </div>
+
+          <!-- AMS Content Panel -->
+          <div class="ams-content">
+            <div class="ams-info-row">
+              <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-humidity"><span class="sun">&#9788;</span></div>
+            </div>
+
+            <div class="ams-main">
+              <div class="ams-slots-container">
+                <div class="slot-labels-row">
+                  <div class="slot-label-item"><div class="slot-label-badge">A1&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A2&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A3&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A4&#8595;</div></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #1a1a1a;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="ams-connectors">
+                  <div class="connector-lines">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                  </div>
+                </div>
+
+                <div class="hub-row">
+                  <div class="hub-line-left"></div>
+                  <div class="hub-graphic">
+                    <div class="hub-port"></div>
+                    <div class="hub-port"></div>
+                  </div>
+                  <div class="hub-line-right"></div>
+                </div>
+              </div>
+
+              <div class="ext-spool-section">
+                <div class="ext-label">Ext</div>
+                <div class="ext-content">
+                  <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div class="ext-slot">
+                      <span class="question">?</span>
+                      <span class="angle">&#8736;</span>
+                    </div>
+                    <div class="ext-connector"></div>
+                  </div>
+                  <div class="spool-holder-graphic">
+                    <img src="icons/single-extruder1.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v8.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v8</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f0f0f0;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 280px;
+      height: 100vh;
+    }
+
+    /* Left Panel */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 6px;
+    }
+
+    .camera-title {
+      font-size: 12px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 16px; height: 16px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      border-top: 1px solid var(--border);
+      padding: 10px 14px;
+    }
+
+    .progress-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
+    .progress-row { display: flex; gap: 10px; align-items: center; }
+    .progress-thumb {
+      width: 44px; height: 44px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .progress-thumb img { width: 26px; opacity: 0.4; }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 12px; }
+    .progress-status { color: var(--accent); font-size: 11px; margin: 2px 0 4px; }
+    .progress-bar-bg { height: 3px; background: var(--border-light); border-radius: 2px; margin-bottom: 4px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 10px; color: var(--text-muted); }
+    .progress-btns { display: flex; gap: 4px; }
+    .progress-btn {
+      width: 26px; height: 26px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--border);
+      gap: 4px;
+    }
+
+    .control-title { font-size: 11px; margin-right: auto; }
+    .header-btn {
+      padding: 4px 8px;
+      font-size: 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+
+    .control-body { padding: 8px; flex: 1; overflow-y: auto; }
+
+    /* Temperature - Compact */
+    .temp-section { margin-bottom: 8px; }
+    .temp-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
+    .temp-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 12px; opacity: 0.6; }
+    .temp-badge {
+      font-size: 8px; font-weight: 700; color: var(--accent);
+      background: #e8f5e9; padding: 1px 3px; border-radius: 2px;
+    }
+    .temp-value { font-size: 13px; font-weight: 500; }
+    .temp-target { font-size: 11px; color: var(--text-muted); }
+
+    /* Air Condition - Compact */
+    .air-section {
+      display: flex; align-items: center; gap: 6px;
+      padding: 6px 0;
+      border-top: 1px solid var(--border-light);
+      border-bottom: 1px solid var(--border-light);
+      margin-bottom: 8px;
+    }
+    .air-label { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-secondary); }
+    .air-label img { width: 12px; opacity: 0.5; }
+    .air-item { display: flex; align-items: center; gap: 3px; padding: 3px 6px; background: var(--bg-light); border-radius: 4px; font-size: 10px; }
+    .air-item img { width: 12px; opacity: 0.5; }
+    .lamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement - Compact */
+    .movement-section { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; }
+
+    .jog-pad { position: relative; width: 80px; height: 80px; }
+    .jog-ring {
+      width: 100%; height: 100%; border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
+      border: 1px solid var(--border); position: relative;
+    }
+    .jog-label { position: absolute; font-size: 8px; color: var(--text-muted); }
+    .jog-label.top { top: 4px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 4px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 4px; top: 50%; transform: translateY(-50%); }
+    .jog-btn {
+      position: absolute; width: 16px; height: 16px;
+      background: var(--bg-light); border: 1px solid var(--border);
+      border-radius: 3px; cursor: pointer; font-size: 7px; color: var(--text-muted);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 14px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 14px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 14px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 14px; top: 50%; transform: translateY(-50%); }
+    .jog-home {
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 24px; height: 24px; border-radius: 50%;
+      background: var(--accent); border: none; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .jog-home img { width: 12px; filter: brightness(0) invert(1); }
+
+    .step-section { display: flex; flex-direction: column; gap: 2px; }
+    .step-row { display: flex; gap: 3px; }
+    .step-btn {
+      padding: 3px 5px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 3px;
+      cursor: pointer; font-size: 8px; color: var(--text-secondary);
+    }
+    .step-btn.active { background: var(--bg-hover); border-color: var(--text-muted); }
+    .step-label { font-size: 8px; color: var(--text-muted); text-align: center; padding: 1px 0; }
+
+    .extruder-section { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+    .nozzle-toggle { display: flex; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
+    .nozzle-toggle button {
+      padding: 3px 8px; border: none; background: var(--bg-white);
+      font-size: 8px; cursor: pointer; color: var(--text-secondary);
+    }
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+    .extruder-graphic { height: 50px; }
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 8px; color: var(--text-muted); }
+    .ext-controls { display: flex; flex-direction: column; gap: 2px; }
+    .ext-btn {
+      width: 20px; height: 20px; background: var(--bg-light);
+      border: 1px solid var(--border); border-radius: 3px;
+      cursor: pointer; font-size: 9px; color: var(--text-muted);
+      display: flex; align-items: center; justify-content: center;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section { border-top: 1px solid var(--border-light); padding-top: 8px; }
+
+    /* Nozzle Filament Boxes */
+    .nozzle-filament-row { display: flex; gap: 4px; margin-bottom: 6px; }
+    .nozzle-filament-box {
+      display: flex; align-items: center; gap: 3px;
+      padding: 5px 6px; background: var(--bg-white);
+      border: 2px solid var(--border); border-radius: 5px; cursor: pointer;
+    }
+    .nozzle-filament-box:hover { border-color: #ccc; }
+    .nozzle-filament-box.active { border-color: var(--accent); }
+    .filament-dots { display: flex; gap: 2px; }
+    .f-dot { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); }
+
+    /* AMS Tabs */
+    .ams-tabs { display: flex; gap: 3px; margin-bottom: 5px; flex-wrap: wrap; }
+    .ams-tab {
+      display: flex; align-items: center; gap: 2px;
+      padding: 3px 5px; background: var(--bg-light);
+      border: 2px solid transparent; border-radius: 4px;
+      cursor: pointer; font-size: 8px; color: var(--text-secondary);
+    }
+    .ams-tab:hover { background: var(--bg-hover); }
+    .ams-tab.active { border-color: var(--accent); }
+    .ams-tab-dots { display: flex; gap: 1px; }
+    .ams-tab-dot { width: 7px; height: 7px; border-radius: 1px; border: 1px solid rgba(0,0,0,0.08); }
+    .ams-tab-label { font-size: 7px; color: var(--text-muted); }
+
+    /* AMS Content Panel */
+    .ams-content { background: var(--bg-panel); border-radius: 8px; padding: 8px; }
+
+    /* AMS Info Row */
+    .ams-info-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
+    .ams-humidity { display: flex; align-items: center; gap: 2px; font-size: 10px; color: var(--text-secondary); }
+    .ams-humidity img { width: 11px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 11px; color: #f5a623; }
+
+    /* AMS Main Area */
+    .ams-main { display: flex; gap: 6px; }
+
+    /* AMS Slots Container */
+    .ams-slots-container { flex: 1; }
+
+    /* Slot Labels Row */
+    .slot-labels-row { display: flex; gap: 3px; margin-bottom: 2px; }
+    .slot-label-item { width: 40px; display: flex; align-items: center; justify-content: center; }
+    .slot-label-badge {
+      display: flex; align-items: center;
+      padding: 1px 3px;
+      font-size: 7px; color: var(--text-muted);
+    }
+
+    /* AMS Slots */
+    .ams-slots { display: flex; gap: 3px; }
+    .ams-slot {
+      width: 40px; height: 56px;
+      border-radius: 5px; overflow: hidden;
+      cursor: pointer; border: 2px solid var(--border);
+    }
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+    .ams-slot-fill {
+      width: 100%; height: 100%;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: flex-end;
+      padding-bottom: 3px;
+    }
+    .ams-slot-type { font-size: 9px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-bottom: 1px; }
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+    .ams-slot-eye { width: 12px; height: 12px; }
+    .ams-slot-eye img { width: 10px; height: 10px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+    .ams-slot-empty {
+      width: 100%; height: 100%;
+      background: var(--bg-white);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      color: var(--text-muted);
+    }
+    .ams-slot-empty .question { font-size: 12px; }
+    .ams-slot-empty .angle { font-size: 9px; }
+
+    /* Connector Lines */
+    .ams-connectors { display: flex; margin-top: 2px; }
+    .connector-lines { display: flex; gap: 3px; position: relative; }
+    .connector-line { width: 40px; display: flex; justify-content: center; }
+    .connector-line .vline { width: 2px; height: 8px; background: #c0c0c0; }
+    .connector-hbar { position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background: #c0c0c0; }
+
+    /* Hub Row */
+    .hub-row { display: flex; align-items: center; margin-top: -1px; }
+    .hub-line-left { width: 78px; height: 2px; background: #c0c0c0; }
+    .hub-graphic { display: flex; padding: 2px 3px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 2px; }
+    .hub-port { width: 5px; height: 8px; background: var(--accent); border-radius: 1px; margin: 0 1px; }
+    .hub-line-right { width: 14px; height: 2px; background: #c0c0c0; }
+
+    /* External Spool Section */
+    .ext-spool-section { display: flex; flex-direction: column; align-items: center; width: 80px; }
+    .ext-label { font-size: 9px; color: var(--text-secondary); margin-bottom: 2px; }
+    .ext-row { display: flex; align-items: flex-start; gap: 4px; }
+    .ext-slot {
+      width: 40px; height: 56px;
+      background: var(--bg-white); border: 2px solid var(--border);
+      border-radius: 5px; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      cursor: pointer; color: var(--text-muted);
+    }
+    .ext-slot:hover { border-color: #bbb; }
+    .ext-slot .question { font-size: 12px; }
+    .ext-slot .angle { font-size: 9px; }
+    .ext-connector { width: 2px; height: 10px; background: #c0c0c0; margin: 2px auto 0; }
+    .spool-holder { width: 36px; height: 56px; display: flex; align-items: center; justify-content: center; }
+    .spool-holder img { width: 100%; height: 100%; object-fit: contain; }
+
+    /* AMS Actions */
+    .ams-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
+    .auto-refill-btn {
+      display: flex; align-items: center; gap: 3px;
+      padding: 5px 8px; background: var(--bg-white);
+      border: 1px solid var(--border); border-radius: 4px;
+      cursor: pointer; font-size: 10px; color: var(--text-secondary);
+    }
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn {
+      width: 24px; height: 24px;
+      background: var(--bg-white); border: 1px solid var(--border);
+      border-radius: 4px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 14px; opacity: 0.5; }
+    .ams-spacer { flex: 1; }
+    .ams-action-btn {
+      padding: 5px 12px; border-radius: 4px;
+      font-size: 10px; cursor: pointer; border: none;
+      background: #e0e0e0; color: var(--text-secondary);
+    }
+    .ams-action-btn:hover { background: #d5d5d5; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp; Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Temperature -->
+        <div class="temp-section">
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">L</span>
+            <span class="temp-value">22</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/hotend.svg"></div>
+            <span class="temp-badge">R</span>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+          <div class="temp-row">
+            <div class="temp-icon"><img src="icons/chamber.svg"></div>
+            <span class="temp-value">21</span>
+            <span class="temp-target">/0 °C</span>
+          </div>
+        </div>
+
+        <!-- Air Condition -->
+        <div class="air-section">
+          <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+          <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+          <div class="air-item">Lamp <div class="lamp-dot"></div></div>
+        </div>
+
+        <!-- Movement -->
+        <div class="movement-section">
+          <div class="jog-pad">
+            <div class="jog-ring">
+              <span class="jog-label top">Y</span>
+              <span class="jog-label bottom">-Y</span>
+              <span class="jog-label left">-X</span>
+              <span class="jog-label right">X</span>
+              <button class="jog-btn up">&#9650;</button>
+              <button class="jog-btn down">&#9660;</button>
+              <button class="jog-btn left">&#9664;</button>
+              <button class="jog-btn right">&#9654;</button>
+              <button class="jog-home"><img src="icons/home.svg"></button>
+            </div>
+          </div>
+
+          <div class="step-section">
+            <div class="step-row">
+              <button class="step-btn">&#8593;10</button>
+              <button class="step-btn active">&#8593;1</button>
+            </div>
+            <div class="step-label">Bed</div>
+            <div class="step-row">
+              <button class="step-btn">&#8595;1</button>
+              <button class="step-btn">&#8595;10</button>
+            </div>
+          </div>
+
+          <div class="extruder-section">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+            <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+            <span class="extruder-label">Extruder</span>
+            <div class="ext-controls">
+              <button class="ext-btn">&#9650;</button>
+              <button class="ext-btn">&#9660;</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Section -->
+        <div class="ams-section">
+          <!-- Nozzle Filament Boxes -->
+          <div class="nozzle-filament-row">
+            <div class="nozzle-filament-box active">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FFD700;"></div>
+                <div class="f-dot" style="background: #8B4513;"></div>
+                <div class="f-dot" style="background: #1a1a1a;"></div>
+                <div class="f-dot" style="background: #222;"></div>
+              </div>
+            </div>
+            <div class="nozzle-filament-box">
+              <div class="filament-dots">
+                <div class="f-dot" style="background: #FF6600;"></div>
+                <div class="f-dot" style="background: #00AA00;"></div>
+                <div class="f-dot" style="background: #0066FF;"></div>
+                <div class="f-dot" style="background: #FF0000;"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Tabs -->
+          <div class="ams-tabs">
+            <div class="ams-tab active">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FFD700;"></div>
+                <div class="ams-tab-dot" style="background: #8B4513;"></div>
+                <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
+                <div class="ams-tab-dot" style="background: #222;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 1</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #FF6600;"></div>
+                <div class="ams-tab-dot" style="background: #00AA00;"></div>
+                <div class="ams-tab-dot" style="background: #0066FF;"></div>
+                <div class="ams-tab-dot" style="background: #FF0000;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 2</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #fff; border-color: #ccc;"></div>
+                <div class="ams-tab-dot" style="background: #333;"></div>
+                <div class="ams-tab-dot" style="background: #666;"></div>
+                <div class="ams-tab-dot" style="background: #999;"></div>
+              </div>
+              <span class="ams-tab-label">AMS 3</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #8844AA;"></div>
+              </div>
+              <span class="ams-tab-label">HT 1</span>
+            </div>
+            <div class="ams-tab">
+              <div class="ams-tab-dots">
+                <div class="ams-tab-dot" style="background: #44AA88;"></div>
+              </div>
+              <span class="ams-tab-label">HT 2</span>
+            </div>
+          </div>
+
+          <!-- AMS Content Panel -->
+          <div class="ams-content">
+            <div class="ams-info-row">
+              <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
+              <div class="ams-humidity"><span class="sun">&#9788;</span></div>
+            </div>
+
+            <div class="ams-main">
+              <div class="ams-slots-container">
+                <div class="slot-labels-row">
+                  <div class="slot-label-item"><div class="slot-label-badge">A1&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A2&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A3&#8595;</div></div>
+                  <div class="slot-label-item"><div class="slot-label-badge">A4&#8595;</div></div>
+                </div>
+
+                <div class="ams-slots">
+                  <div class="ams-slot active">
+                    <div class="ams-slot-fill" style="background: #FFD700;">
+                      <span class="ams-slot-type dark">PLA</span>
+                      <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #1a1a1a;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #8B4513;">
+                      <span class="ams-slot-type">PETG</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                  <div class="ams-slot">
+                    <div class="ams-slot-fill" style="background: #222;">
+                      <span class="ams-slot-type">PLA</span>
+                      <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="ams-connectors">
+                  <div class="connector-lines">
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-line"><div class="vline"></div></div>
+                    <div class="connector-hbar"></div>
+                  </div>
+                </div>
+
+                <div class="hub-row">
+                  <div class="hub-line-left"></div>
+                  <div class="hub-graphic">
+                    <div class="hub-port"></div>
+                    <div class="hub-port"></div>
+                  </div>
+                  <div class="hub-line-right"></div>
+                </div>
+              </div>
+
+              <div class="ext-spool-section">
+                <div class="ext-label">Ext</div>
+                <div class="ext-row">
+                  <div>
+                    <div class="ext-slot">
+                      <span class="question">?</span>
+                      <span class="angle">&#8736;</span>
+                    </div>
+                    <div class="ext-connector"></div>
+                  </div>
+                  <div class="spool-holder">
+                    <img src="icons/single-extruder1.png">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ams-actions">
+            <button class="auto-refill-btn">Auto-refill</button>
+            <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+            <div class="ams-spacer"></div>
+            <button class="ams-action-btn">Unload</button>
+            <button class="ams-action-btn">Load</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/control-page-v9.html

@@ -0,0 +1,924 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BambuTrack Control - v9</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg-main: #f5f5f5;
+      --bg-white: #ffffff;
+      --bg-light: #fafafa;
+      --bg-panel: #f5f5f5;
+      --bg-hover: #e8e8e8;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --border: #e0e0e0;
+      --border-light: #eeeeee;
+      --accent: #00ae42;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-main);
+      color: var(--text-primary);
+      font-size: 13px;
+    }
+
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr 380px;
+      height: 100vh;
+    }
+
+    /* Left Panel - Camera */
+    .left-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-main);
+    }
+
+    .camera-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-white);
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .camera-title {
+      font-size: 13px;
+      color: var(--text-primary);
+      margin-right: auto;
+    }
+
+    .icon-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-btn:hover { background: var(--bg-hover); }
+    .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
+
+    .camera-feed {
+      flex: 1;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 14px;
+    }
+
+    /* Status bar */
+    .status-bar {
+      background: var(--accent);
+      padding: 4px 12px;
+    }
+
+    /* Print Progress */
+    .print-progress {
+      background: var(--bg-white);
+      padding: 16px 20px;
+    }
+
+    .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .progress-row { display: flex; gap: 14px; align-items: center; }
+    .progress-thumb {
+      width: 60px; height: 60px;
+      background: var(--bg-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-direction: column;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+    .progress-thumb-icon { font-size: 20px; margin-bottom: 2px; }
+    .progress-info { flex: 1; }
+    .progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
+    .progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
+    .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
+    .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
+    .progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .progress-btns { display: flex; gap: 6px; }
+    .progress-btn {
+      width: 32px; height: 32px;
+      border: 1px solid var(--border);
+      background: var(--bg-white);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+    .progress-btn:hover { background: var(--bg-hover); }
+
+    /* Right Panel - Control */
+    .right-panel {
+      background: var(--bg-white);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .control-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      gap: 8px;
+    }
+
+    .control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
+    .header-btn {
+      padding: 6px 14px;
+      font-size: 12px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--accent);
+      color: white;
+    }
+    .header-btn:hover { background: #009938; }
+
+    .control-body { padding: 14px; flex: 1; overflow-y: auto; }
+
+    /* Top Section: Temp + Movement side by side */
+    .top-section {
+      display: flex;
+      gap: 20px;
+      margin-bottom: 16px;
+    }
+
+    /* Temperature Column */
+    .temp-column { flex: 0 0 auto; }
+
+    .temp-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 0;
+    }
+
+    .temp-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
+    .temp-icon img { width: 16px; opacity: 0.5; }
+
+    .temp-badge {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #e8f5e9;
+      padding: 2px 6px;
+      border-radius: 4px;
+      min-width: 16px;
+      text-align: center;
+    }
+
+    .temp-value { font-size: 16px; font-weight: 500; }
+    .temp-target { font-size: 14px; color: var(--text-muted); }
+
+    /* Air Condition */
+    .air-section {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 0;
+      margin-top: 8px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .air-label {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .air-label img { width: 16px; opacity: 0.5; }
+
+    .air-item {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .air-item img { width: 16px; opacity: 0.5; }
+    .lamp-label { display: flex; align-items: center; gap: 5px; }
+    .lamp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
+
+    /* Movement Column */
+    .movement-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .nozzle-toggle {
+      display: flex;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      margin-bottom: 10px;
+    }
+
+    .nozzle-toggle button {
+      padding: 6px 18px;
+      border: none;
+      background: var(--bg-white);
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--text-secondary);
+    }
+
+    .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
+    .nozzle-toggle button.active { background: var(--accent); color: white; }
+
+    .movement-row {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+    }
+
+    .jog-section { display: flex; flex-direction: column; align-items: center; }
+
+    .jog-pad {
+      position: relative;
+      width: 100px;
+      height: 100px;
+      margin-bottom: 8px;
+    }
+
+    .jog-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
+      border: 1px solid var(--border);
+      position: relative;
+    }
+
+    .jog-label {
+      position: absolute;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .jog-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
+    .jog-label.left { left: 6px; top: 50%; transform: translateY(-50%); }
+    .jog-label.right { right: 6px; top: 50%; transform: translateY(-50%); }
+
+    .jog-btn {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 9px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-btn:hover { background: var(--bg-hover); }
+    .jog-btn.up { top: 16px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.down { bottom: 16px; left: 50%; transform: translateX(-50%); }
+    .jog-btn.left { left: 16px; top: 50%; transform: translateY(-50%); }
+    .jog-btn.right { right: 16px; top: 50%; transform: translateY(-50%); }
+
+    .jog-home {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--accent);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .jog-home:hover { background: #009938; }
+    .jog-home img { width: 16px; filter: brightness(0) invert(1); }
+
+    /* Bed Controls */
+    .bed-controls {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .bed-btn {
+      padding: 6px 10px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .bed-btn:hover { background: var(--bg-hover); }
+    .bed-label { font-size: 11px; color: var(--text-muted); padding: 0 4px; }
+
+    /* Extruder Section */
+    .extruder-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .extruder-btn {
+      width: 28px;
+      height: 28px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .extruder-btn:hover { background: var(--bg-hover); }
+
+    .extruder-graphic {
+      height: 60px;
+      margin: 4px 0;
+    }
+
+    .extruder-graphic img { height: 100%; }
+    .extruder-label { font-size: 11px; color: var(--text-muted); }
+
+    /* ========== FILAMENT BOXES ========== */
+    .filament-boxes {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--border-light);
+    }
+
+    .filament-box {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 10px;
+      background: var(--bg-white);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .filament-box:hover { border-color: #ccc; }
+    .filament-box.active { border-color: var(--accent); }
+
+    .filament-dots { display: flex; gap: 3px; }
+
+    .f-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
+
+    .f-dot.empty {
+      background: #e8e8e8 !important;
+      border: 1px solid #ccc;
+    }
+
+    .f-dot-sep {
+      width: 1px;
+      height: 16px;
+      background: #ccc;
+      margin: 0 2px;
+    }
+
+    .filament-count {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-left: 4px;
+    }
+
+    /* ========== AMS SECTION ========== */
+    .ams-section {
+      display: flex;
+      gap: 12px;
+    }
+
+    .ams-unit {
+      flex: 1;
+      background: var(--bg-panel);
+      border-radius: 12px;
+      padding: 12px;
+    }
+
+    /* AMS Header */
+    .ams-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+
+    .ams-humidity {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .ams-humidity img { width: 14px; opacity: 0.5; }
+    .ams-humidity .sun { font-size: 14px; color: #f5a623; }
+
+    /* Slot Labels */
+    .slot-labels {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 6px;
+    }
+
+    .slot-label {
+      flex: 1;
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 2px 0;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    /* AMS Slots */
+    .ams-slots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    .ams-slot {
+      flex: 1;
+      height: 70px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid var(--border);
+      background: var(--bg-white);
+    }
+
+    .ams-slot:hover { border-color: #bbb; }
+    .ams-slot.active { border-color: #d4a84b; }
+
+    .ams-slot-fill {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      padding-bottom: 6px;
+    }
+
+    .ams-slot-type {
+      font-size: 11px;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+      margin-bottom: 2px;
+    }
+
+    .ams-slot-type.dark { color: #333; text-shadow: none; }
+
+    .ams-slot-eye { width: 16px; height: 16px; }
+    .ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
+    .ams-slot-eye.invert img { filter: invert(1); }
+
+    .ams-slot-empty {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+
+    /* Connector Lines */
+    .ams-connectors {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 4px;
+    }
+
+    .connector-group {
+      display: flex;
+      gap: 6px;
+      position: relative;
+      padding: 0 10px;
+    }
+
+    .connector-line {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .connector-line .vline {
+      width: 2px;
+      height: 12px;
+      background: #c0c0c0;
+    }
+
+    .connector-hbar {
+      position: absolute;
+      bottom: 0;
+      left: 20px;
+      right: 20px;
+      height: 2px;
+      background: #c0c0c0;
+    }
+
+    /* AMS Actions */
+    .ams-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-light);
+    }
+
+    .auto-refill-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .auto-refill-btn:hover { background: var(--bg-hover); }
+
+    .ams-settings-btn {
+      width: 32px;
+      height: 32px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ams-settings-btn:hover { background: var(--bg-hover); }
+    .ams-settings-btn img { width: 18px; opacity: 0.5; }
+
+    /* Hub */
+    .hub-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .hub-line { width: 30px; height: 2px; background: #c0c0c0; }
+
+    .hub-graphic {
+      display: flex;
+      padding: 4px 6px;
+      background: var(--bg-white);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+    }
+
+    .hub-port {
+      width: 8px;
+      height: 12px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 2px;
+    }
+
+    .ams-spacer { flex: 1; }
+
+    .ams-action-btn {
+      padding: 8px 20px;
+      border-radius: 8px;
+      font-size: 12px;
+      cursor: pointer;
+      border: none;
+      background: #e8e8e8;
+      color: var(--text-secondary);
+    }
+
+    .ams-action-btn:hover { background: #ddd; }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <!-- Left Panel - Camera -->
+    <div class="left-panel">
+      <div class="camera-header">
+        <span class="camera-title">Camera</span>
+        <button class="icon-btn"><img src="icons/video-camera.svg"></button>
+        <button class="icon-btn"><img src="icons/webcam.svg"></button>
+        <button class="icon-btn"><img src="icons/settings.svg"></button>
+        <button class="icon-btn"><img src="icons/reload.svg"></button>
+      </div>
+      <div class="camera-feed">Camera Feed</div>
+      <div class="status-bar"></div>
+      <div class="print-progress">
+        <div class="progress-label">Printing Progress</div>
+        <div class="progress-row">
+          <div class="progress-thumb">
+            <span class="progress-thumb-icon">&#128506;</span>
+            Bambu<br>Lab
+          </div>
+          <div class="progress-info">
+            <div class="progress-name">N/A</div>
+            <div class="progress-status">N/A</div>
+            <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
+            <div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
+            <div class="progress-meta">Estimated finish time: N/A</div>
+          </div>
+          <div class="progress-btns">
+            <button class="progress-btn">&#8962;</button>
+            <button class="progress-btn">&#9208;</button>
+            <button class="progress-btn">&#9632;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Control -->
+    <div class="right-panel">
+      <div class="control-header">
+        <span class="control-title">Control</span>
+        <button class="header-btn">Printer Parts</button>
+        <button class="header-btn">Print Options</button>
+        <button class="header-btn">Calibration</button>
+      </div>
+
+      <div class="control-body">
+        <!-- Top Section: Temp + Movement side by side -->
+        <div class="top-section">
+          <!-- Temperature Column -->
+          <div class="temp-column">
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">L</span>
+              <span class="temp-value">24</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/hotend.svg"></div>
+              <span class="temp-badge">R</span>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/heatbed.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+            <div class="temp-row">
+              <div class="temp-icon"><img src="icons/chamber.svg"></div>
+              <span class="temp-value">23</span>
+              <span class="temp-target">/0 °C</span>
+            </div>
+
+            <!-- Air Condition -->
+            <div class="air-section">
+              <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
+            </div>
+            <div style="display: flex; align-items: center; gap: 12px; margin-top: 6px;">
+              <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
+              <div class="lamp-label">Lamp <div class="lamp-dot"></div></div>
+            </div>
+          </div>
+
+          <!-- Movement Column -->
+          <div class="movement-column">
+            <div class="nozzle-toggle">
+              <button class="active">Left</button>
+              <button>Right</button>
+            </div>
+
+            <div class="movement-row">
+              <div class="jog-section">
+                <div class="jog-pad">
+                  <div class="jog-ring">
+                    <span class="jog-label top">Y</span>
+                    <span class="jog-label bottom">-Y</span>
+                    <span class="jog-label left">-X</span>
+                    <span class="jog-label right">X</span>
+                    <button class="jog-btn up">&#9650;</button>
+                    <button class="jog-btn down">&#9660;</button>
+                    <button class="jog-btn left">&#9664;</button>
+                    <button class="jog-btn right">&#9654;</button>
+                    <button class="jog-home"><img src="icons/home.svg"></button>
+                  </div>
+                </div>
+                <div class="bed-controls">
+                  <button class="bed-btn">&#8593;10</button>
+                  <button class="bed-btn">&#8593;1</button>
+                  <span class="bed-label">Bed</span>
+                  <button class="bed-btn">&#8595;1</button>
+                  <button class="bed-btn">&#8595;10</button>
+                </div>
+              </div>
+
+              <div class="extruder-section">
+                <button class="extruder-btn">&#9650;</button>
+                <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
+                <button class="extruder-btn">&#9660;</button>
+                <span class="extruder-label">Extruder</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filament Assignment Boxes -->
+        <div class="filament-boxes">
+          <div class="filament-box active">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #FFD700;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+            </div>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot" style="background: #333;"></div>
+              <div class="f-dot-sep"></div>
+              <div class="f-dot" style="background: #FF3366;"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+          <div class="filament-box">
+            <div class="filament-dots">
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+              <div class="f-dot empty"></div>
+            </div>
+            <span class="filament-count">0</span>
+          </div>
+        </div>
+
+        <!-- AMS Section - Two units side by side -->
+        <div class="ams-section">
+          <!-- AMS Unit 1 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 17 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">A1&#8595;</div>
+              <div class="slot-label">A2&#8595;</div>
+              <div class="slot-label">A3&#8595;</div>
+              <div class="slot-label">A4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot active">
+                <div class="ams-slot-fill" style="background: #FFD700;">
+                  <span class="ams-slot-type dark">PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #333;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #8B4513;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AMS Unit 2 -->
+          <div class="ams-unit">
+            <div class="ams-header">
+              <div class="ams-humidity"><img src="icons/water.svg"> 14 %</div>
+              <div class="ams-humidity"><span class="sun">&#9728;</span></div>
+            </div>
+            <div class="slot-labels">
+              <div class="slot-label">B1&#8595;</div>
+              <div class="slot-label">B2&#8595;</div>
+              <div class="slot-label">B3&#8595;</div>
+              <div class="slot-label">B4&#8595;</div>
+            </div>
+            <div class="ams-slots">
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #666;">
+                  <span class="ams-slot-type">PETG</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #888;">
+                  <span class="ams-slot-type">PLA</span>
+                  <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+              <div class="ams-slot">
+                <div class="ams-slot-fill" style="background: #aaa;">
+                  <span class="ams-slot-type dark">Sup.PLA</span>
+                  <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
+                </div>
+              </div>
+            </div>
+            <div class="ams-connectors">
+              <div class="connector-group">
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-line"><div class="vline"></div></div>
+                <div class="connector-hbar"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AMS Actions -->
+        <div class="ams-actions">
+          <button class="auto-refill-btn">Auto-refill</button>
+          <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
+          <div class="hub-section">
+            <div class="hub-line"></div>
+            <div class="hub-graphic">
+              <div class="hub-port"></div>
+              <div class="hub-port"></div>
+            </div>
+            <div class="hub-line"></div>
+          </div>
+          <div class="ams-spacer"></div>
+          <button class="ams-action-btn">Unload</button>
+          <button class="ams-action-btn">Load</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

mockup/icons/ams-settings.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#000" fill-rule="evenodd"><path d="m2.25 6c0-.41421.33579-.75.75-.75h3.5c.41421 0 .75.33579.75.75s-.33579.75-.75.75h-3.5c-.41421 0-.75-.33579-.75-.75zm8.5 0c0-.41421.3358-.75.75-.75h9.5c.4142 0 .75.33579.75.75s-.3358.75-.75.75h-9.5c-.4142 0-.75-.33579-.75-.75z"/><path d="m9 4.25c-.9665 0-1.75.7835-1.75 1.75s.7835 1.75 1.75 1.75 1.75-.7835 1.75-1.75-.7835-1.75-1.75-1.75zm-3.25 1.75c0-1.79493 1.45507-3.25 3.25-3.25 1.7949 0 3.25 1.45507 3.25 3.25s-1.4551 3.25-3.25 3.25c-1.79493 0-3.25-1.45507-3.25-3.25z"/><path d="m21.75 12c0-.4142-.3358-.75-.75-.75h-2c-.4142 0-.75.3358-.75.75s.3358.75.75.75h2c.4142 0 .75-.3358.75-.75zm-7 0c0-.4142-.3358-.75-.75-.75h-5c-.41421 0-.75.3358-.75.75s.33579.75.75.75h5c.4142 0 .75-.3358.75-.75zm-9 0c0-.4142-.33579-.75-.75-.75h-2c-.41421 0-.75.3358-.75.75s.33579.75.75.75h2c.41421 0 .75-.3358.75-.75z"/><path d="m16.5 10.25c.9665 0 1.75.7835 1.75 1.75s-.7835 1.75-1.75 1.75-1.75-.7835-1.75-1.75.7835-1.75 1.75-1.75zm3.25 1.75c0-1.7949-1.4551-3.25-3.25-3.25s-3.25 1.4551-3.25 3.25 1.4551 3.25 3.25 3.25 3.25-1.4551 3.25-3.25z"/><path d="m2.25 18c0-.4142.33579-.75.75-.75h5c.41421 0 .75.3358.75.75s-.33579.75-.75.75h-5c-.41421 0-.75-.3358-.75-.75zm10 0c0-.4142.3358-.75.75-.75h8c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-8c-.4142 0-.75-.3358-.75-.75z"/><path d="m10.5 16.25c-.9665 0-1.75.7835-1.75 1.75s.7835 1.75 1.75 1.75 1.75-.7835 1.75-1.75-.7835-1.75-1.75-1.75zm-3.25 1.75c0-1.7949 1.45507-3.25 3.25-3.25 1.7949 0 3.25 1.4551 3.25 3.25s-1.4551 3.25-3.25 3.25c-1.79493 0-3.25-1.4551-3.25-3.25z"/></g></svg>

mockup/icons/eye.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M508.745,246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818,239.784,3.249,246.035
+			c-4.332,5.936-4.332,13.987,0,19.923c4.569,6.257,113.557,153.206,252.748,153.206s248.174-146.95,252.748-153.201
+			C513.083,260.028,513.083,251.971,508.745,246.041z M255.997,385.406c-102.529,0-191.33-97.533-217.617-129.418
+			c26.253-31.913,114.868-129.395,217.617-129.395c102.524,0,191.319,97.516,217.617,129.418
+			C447.361,287.923,358.746,385.406,255.997,385.406z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M255.997,154.725c-55.842,0-101.275,45.433-101.275,101.275s45.433,101.275,101.275,101.275
+			s101.275-45.433,101.275-101.275S311.839,154.725,255.997,154.725z M255.997,323.516c-37.23,0-67.516-30.287-67.516-67.516
+			s30.287-67.516,67.516-67.516s67.516,30.287,67.516,67.516S293.227,323.516,255.997,323.516z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

mockup/icons/heatbed.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><g fill="rgb(0,0,0)"><path d="m6.3 3.9c.54-.4 1.2-.9 1.2-1.9 0-.28-.22-.5-.5-.5s-.5.22-.5.5c0 .48-.29.71-.8 1.1-.53.4-1.2.9-1.2 1.9s.67 1.5 1.2 1.9c.51.38.8.62.8 1.1s-.29.72-.8 1.1c-.54.4-1.2.9-1.2 1.9 0 .28.22.5.5.5s.5-.22.5-.5c0-.48.29-.72.8-1.1.54-.4 1.2-.9 1.2-1.9s-.67-1.5-1.2-1.9c-.51-.38-.8-.62-.8-1.1s.29-.72.8-1.1z"/><path d="m12.3 3.9c.54-.4 1.2-.9 1.2-1.9 0-.28-.22-.5-.5-.5s-.5.22-.5.5c0 .48-.29.71-.8 1.1-.53.4-1.2.9-1.2 1.9s.67 1.5 1.2 1.9c.51.38.8.62.8 1.1s-.29.72-.8 1.1c-.54.4-1.2.9-1.2 1.9 0 .28.22.5.5.5s.5-.22.5-.5c0-.48.29-.72.8-1.1.54-.4 1.2-.9 1.2-1.9s-.67-1.5-1.2-1.9c-.51-.38-.8-.62-.8-1.1s.29-.72.8-1.1z"/><path d="m18.3 3.9c.54-.4 1.2-.9 1.2-1.9 0-.28-.22-.5-.5-.5s-.5.22-.5.5c0 .48-.29.71-.8 1.1-.53.4-1.2.9-1.2 1.9s.67 1.5 1.2 1.9c.51.38.8.62.8 1.1s-.29.72-.8 1.1c-.54.4-1.2.9-1.2 1.9 0 .28.22.5.5.5s.5-.22.5-.5c0-.48.29-.72.8-1.1.54-.4 1.2-.9 1.2-1.9s-.67-1.5-1.2-1.9c-.51-.38-.8-.62-.8-1.1s.29-.72.8-1.1z"/><path d="m22 13.5c-1.07 0-1.61.65-2.05 1.18-.44.52-.71.82-1.29.82s-.85-.3-1.29-.82c-.44-.53-.98-1.18-2.05-1.18s-1.61.65-2.05 1.18c-.44.52-.71.82-1.28.82s-.85-.3-1.28-.82c-.44-.53-.98-1.18-2.05-1.18s-1.61.65-2.05 1.18c-.44.52-.71.82-1.28.82s-.84-.3-1.28-.82c-.44-.53-.98-1.18-2.05-1.18-.28 0-.5.22-.5.5s.22.5.5.5c.57 0 .84.3 1.28.82.44.53.98 1.18 2.05 1.18s1.61-.65 2.05-1.18c.44-.52.71-.82 1.28-.82s.85.3 1.28.82c.44.53.98 1.18 2.05 1.18s1.61-.65 2.05-1.18c.44-.52.71-.82 1.28-.82s.85.3 1.29.82c.44.53.98 1.18 2.05 1.18s1.61-.65 2.05-1.18c.44-.52.71-.82 1.29-.82.28 0 .5-.22.5-.5s-.22-.5-.5-.5z"/><path d="m21 18.5h-18c-.83 0-1.5.67-1.5 1.5v1c0 .83.67 1.5 1.5 1.5h18c.83 0 1.5-.67 1.5-1.5v-1c0-.83-.67-1.5-1.5-1.5zm.5 2.5c0 .28-.22.5-.5.5h-18c-.28 0-.5-.22-.5-.5v-1c0-.28.22-.5.5-.5h18c.28 0 .5.22.5.5z"/></g></svg>

mockup/icons/home.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 476.912 476.912" style="enable-background:new 0 0 476.912 476.912;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M461.776,209.408L249.568,4.52c-6.182-6.026-16.042-6.026-22.224,0L15.144,209.4c-3.124,3.015-4.888,7.17-4.888,11.512
+			c0,8.837,7.164,16,16,16h28.2v224c0,8.837,7.163,16,16,16h112c8.837,0,16-7.163,16-16v-128h80v128c0,8.837,7.163,16,16,16h112
+			c8.837,0,16-7.163,16-16v-224h28.2c4.338,0,8.489-1.761,11.504-4.88C468.301,225.678,468.129,215.549,461.776,209.408z
+			 M422.456,220.912c-8.837,0-16,7.163-16,16v224h-112v-128c0-8.837-7.163-16-16-16h-80c-8.837,0-16,7.163-16,16v128h-112v-224
+			c0-8.837-7.163-16-16-16h-28.2l212.2-204.88l212.28,204.88H422.456z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

mockup/icons/hotend.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g id="Front_Heater" data-name="Front Heater"><path d="m33.14 29h2.86l-4-7-4 7h3l1.5 3.7a8.38 8.38 0 0 1 -.92 8l-.67.82a10.43 10.43 0 0 0 -.29 11.74 1 1 0 0 0 .82.42 1 1 0 0 0 .58-.19 1 1 0 0 0 .23-1.39 8.4 8.4 0 0 1 .21-9.32l.67-.82a10.32 10.32 0 0 0 1.22-10z"/><path d="m23.22 29h2.78l-4-7-4 7h3.06l1.5 3.7a8.35 8.35 0 0 1 -.92 8l-.67.82a10.43 10.43 0 0 0 -.29 11.74 1 1 0 0 0 .82.42 1 1 0 0 0 .58-.19 1 1 0 0 0 .24-1.39 8.4 8.4 0 0 1 .2-9.32l.67-.82a10.32 10.32 0 0 0 1.22-10z"/><path d="m57.88 20.09a3 3 0 0 0 -1.49-1.84l-7.73-4.1a35.48 35.48 0 0 0 -33.32 0l-7.72 4.1a3 3 0 0 0 -1.22 4.2l9.72 17a3 3 0 0 0 2.6 1.55 3 3 0 0 0 1.39-.34 1 1 0 0 0 .42-1.35 1 1 0 0 0 -1.34-.42 1 1 0 0 1 -1.33-.39l-9.72-17a1 1 0 0 1 -.1-.81 1 1 0 0 1 .52-.69l7.72-4.1a33.46 33.46 0 0 1 31.44 0l7.73 4.1a1 1 0 0 1 .51.63 1 1 0 0 1 -.1.81l-9.72 17a1 1 0 0 1 -1.33.39l-.2-.11a10.82 10.82 0 0 0 -.36-6.72l-1.19-3h2.94l-4-7-4 7h2.9l1.5 3.7a8.38 8.38 0 0 1 -.93 8l-.66.82a10.43 10.43 0 0 0 -.29 11.74 1 1 0 0 0 .82.42 1 1 0 0 0 .58-.19 1 1 0 0 0 .23-1.39 8.4 8.4 0 0 1 .21-9.32l.64-.78a8.27 8.27 0 0 0 .84-1.3 3 3 0 0 0 4-1.17l9.72-17a3 3 0 0 0 .32-2.44z"/></g></svg>

mockup/icons/lamp.svg

@@ -0,0 +1 @@
+<svg id="Ecommerce" enable-background="new 0 0 48 48" height="512" viewBox="0 0 48 48" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m25 7.03c0-.552-.447-1-1-1-5.514 0-10 4.486-10 10 0 .552.447 1 1 1s1-.448 1-1c0-4.411 3.589-8 8-8 .553 0 1-.448 1-1z"/><path d="m22.246 45.79h1.754 1.754c1.652 0 2.999-1.345 3-3v-1.099c1.032-.475 1.755-1.512 1.755-2.721v-3.72c.176-.382.281-.802.281-1.25 0-1.016.226-2 .671-2.927.441-.919 1.086-1.752 1.864-2.409 3.746-3.165 5.709-7.989 5.25-12.909-.7-7.375-6.813-13.189-14.265-13.525l-.31-.01-.354.011c-7.408.335-13.521 6.149-14.222 13.526-.458 4.917 1.505 9.742 5.251 12.906.778.658 1.423 1.491 1.864 2.41.445.927.671 1.911.671 2.927 0 .447.105.868.281 1.25v3.721c0 1.209.722 2.247 1.755 2.721v1.1c.001 1.653 1.348 2.998 3 2.998zm4.508-3c0 .552-.449 1-1 1h-1.754-1.754c-.551 0-1-.449-1-1v-.82h2.754 2.754zm1.755-3.819c0 .551-.448 1-1 1h-3.509-3.509c-.552 0-1-.449-1-1v-2.068c.232.058.47.097.719.097h3.79 3.79c.249 0 .487-.039.719-.097zm-9.299-4.971c0-1.318-.292-2.595-.868-3.793-.563-1.171-1.385-2.233-2.376-3.071-3.247-2.742-4.948-6.926-4.551-11.191.607-6.389 5.903-11.426 12.275-11.715l.31-.01.265.009c6.417.29 11.713 5.327 12.319 11.714.398 4.267-1.303 8.451-4.55 11.193-.991.838-1.813 1.9-2.376 3.071-.576 1.198-.868 2.475-.868 3.793 0 .551-.448 1-1 1h-3.79-3.79c-.552 0-1-.449-1-1z"/></g></svg>

mockup/icons/reload.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 11a1 1 0 0 0 -1 1 9 9 0 1 1 -9-9 8.9 8.9 0 0 1 4.42 1.166l-1.127 1.127a1 1 0 0 0 .707 1.707h4a1 1 0 0 0 1-1v-4a1 1 0 0 0 -1.707-.707l-1.411 1.407a10.9 10.9 0 0 0 -5.882-1.7 11 11 0 1 0 11 11 1 1 0 0 0 -1-1z"/></svg>

mockup/icons/snowflake.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 412.8 412.8" style="enable-background:new 0 0 412.8 412.8;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M378.4,225.6L304,251.2L274,234v-27.6v-27.2l30-17.2l74.4,25.6c5.2,2,11.2-1.2,12.8-6.4c2-5.2-1.2-11.2-6.4-12.8
+			l-57.6-19.6l54-31.2c4.8-2.8,6.4-9.2,3.6-14c-2.8-4.8-9.2-6.4-14-3.6l-54,31.2l11.6-59.6c1.2-5.6-2.4-10.8-8-12
+			c-5.6-1.2-10.8,2.4-12,8l-15.2,77.2l-30,17.2l-22.8-13.2l-0.4-0.4l-23.2-13.6v-34.4L276,48.8c4.4-3.6,4.8-10,0.8-14.4
+			c-3.6-4.4-10-4.8-14.4-0.8l-45.6,40V10.4c0-5.6-4.4-10.4-10.4-10.4C200.8,0,196,4.4,196,10.4v62.4l-45.6-39.6
+			C146,29.6,139.6,30,136,34c-3.6,4.4-3.2,10.8,0.8,14.4L196,100v34.4L172.8,148l-23.2,13.6l-30-17.2l-15.2-77.2
+			c-1.2-5.6-6.4-9.2-12-8c-5.6,1.2-9.2,6.4-8,12L96,130.8L42,99.6c-4.8-2.8-11.2-1.2-14,3.6s-1.2,11.2,3.6,14l54,31.2L28,168
+			c-5.2,2-8.4,7.6-6.4,12.8s7.6,8.4,12.8,6.4l74.4-25.6l30,17.2v27.6v27.2h0.4l-30,17.2l-74.4-25.6c-5.2-2-11.2,1.2-12.8,6.4
+			c-2,5.2,1.2,11.2,6.4,12.8L86,264l-54,31.2c-4.8,2.8-6.4,9.2-3.6,14c2.8,4.8,9.2,6.4,14,3.6l54-31.2l-11.6,59.6
+			c-1.2,5.6,2.4,10.8,8,12c5.6,1.2,10.8-2.4,12-8L120,268l30-17.2l23.6,13.6l23.2,13.6v34.4L137.6,364c-4.4,3.6-4.8,10-0.8,14.4
+			c3.6,4.4,10,4.8,14.4,0.8l45.6-40v63.2c0,5.6,4.4,10.4,10.4,10.4c5.6,0,10.4-4.4,10.4-10.4V340l45.6,40c4.4,3.6,10.8,3.2,14.4-0.8
+			c3.6-4.4,3.2-10.8-0.8-14.4l-60-52v-34.4l23.2-13.6l23.2-13.6l30,17.2l15.2,77.2c1.2,5.6,6.4,9.2,12,8c5.6-1.2,9.2-6.4,8-12
+			L316.8,282l54,31.2c4.8,2.8,11.2,1.2,14-3.6c2.8-4.8,1.2-11.2-3.6-14l-54-31.2l57.6-19.6c5.2-2,8.4-7.6,6.4-12.8
+			C389.2,226.8,383.6,223.6,378.4,225.6z M252.4,206.4v27.2l-23.2,13.6l-22.8,13.2l-23.6-13.6l-23.2-13.6v-26.8v-27.2l23.2-13.6
+			L206,152l23.2,13.6l0.4,0.4l22.8,13.2V206.4z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

mockup/icons/video-camera.svg

@@ -0,0 +1 @@
+<svg height="472pt" viewBox="0 -87 472 472" width="472pt" xmlns="http://www.w3.org/2000/svg"><path d="m467.101562 26.527344c-3.039062-1.800782-6.796874-1.871094-9.898437-.179688l-108.296875 59.132813v-35.480469c-.03125-27.601562-22.398438-49.96875-50-50h-248.90625c-27.601562.03125-49.96875 22.398438-50 50v197.421875c.03125 27.601563 22.398438 49.96875 50 50h248.90625c27.601562-.03125 49.96875-22.398437 50-50v-34.835937l108.300781 59.132812c3.097657 1.691406 6.859375 1.625 9.894531-.175781 3.039063-1.804688 4.898438-5.074219 4.898438-8.601563v-227.816406c0-3.53125-1.863281-6.796875-4.898438-8.597656zm-138.203124 220.898437c-.015626 16.5625-13.4375 29.980469-30 30h-248.898438c-16.5625-.019531-29.980469-13.4375-30-30v-197.425781c.019531-16.558594 13.4375-29.980469 30-30h248.90625c16.558594.019531 29.980469 13.441406 30 30zm123.101562-1.335937-103.09375-56.289063v-81.535156l103.09375-56.285156zm0 0"/></svg>

mockup/icons/water.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512" height="512"><g id="Water"><path d="M24,46A16.0183,16.0183,0,0,1,8,30C8,16.0942,22.708,2.8125,23.3345,2.2539a.9983.9983,0,0,1,1.331,0C25.292,2.8125,40,16.0942,40,30A16.0183,16.0183,0,0,1,24,46ZM24,4.3721C21.1333,7.1372,10,18.6118,10,30a14,14,0,0,0,28,0C38,18.6118,26.8667,7.1372,24,4.3721Z"/><path d="M18.4976,40.5273a.9946.9946,0,0,1-.5-.1342A12.0449,12.0449,0,0,1,12,30a1,1,0,0,1,2,0,10.0373,10.0373,0,0,0,5,8.6616,1,1,0,0,1-.5019,1.8657Z"/></g></svg>

mockup/icons/webcam.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,40c-5.52,0-10,4.48-10,10s4.48,10,10,10s10-4.48,10-10S261.52,40,256,40z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M466,210C466,94.206,371.794,0,256,0S46,94.206,46,210c0,96.488,66.579,180.855,159.516,203.859
+			c-1.591,14.119-6.958,31.441-13.568,38.051l-0.131,0.131c-18.899,0.353-32.638,3.149-42.999,8.73
+			C133.677,468.949,126,482.82,126,502c0,5.522,4.478,10,10,10h240c5.522,0,10-4.478,10-10c0-19.187-7.68-33.058-22.824-41.229
+			c-10.344-5.58-24.082-8.378-42.992-8.731l-0.132-0.132c-6.61-6.609-11.977-23.931-13.568-38.05
+			C399.423,390.853,466,306.486,466,210z M316,472c33.23,0,45.303,7.689,48.794,20H147.226c2.172-7.762,6.862-11.345,11.087-13.626
+			C166.274,474.085,178.603,472,196,472H316z M215.517,452c5.068-10.601,8.238-23.466,9.638-34.27
+			C235.326,419.232,245.658,420,256,420c10.342,0,20.674-0.768,30.845-2.27c1.401,10.804,4.57,23.67,9.638,34.27H215.517z
+			 M294.015,396.179c-0.019,0.004-0.037,0.007-0.056,0.011c-24.788,5.056-51.127,5.057-75.922-0.001
+			c-0.017-0.004-0.035-0.007-0.052-0.01C129.918,378.227,66,299.929,66,210c0-104.767,85.233-190,190-190s190,85.233,190,190
+			C446,299.929,382.082,378.227,294.015,396.179z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M389.606,104.994c-23.072-29.303-55.544-50.505-91.434-59.701c-5.355-1.374-10.799,1.855-12.17,7.205
+			c-1.37,5.35,1.855,10.798,7.205,12.169c31.66,8.112,60.314,26.828,80.686,52.7c3.426,4.352,9.716,5.077,14.043,1.67
+			C392.275,115.621,393.023,109.333,389.606,104.994z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,100c-60.654,0-110,49.346-110,110s49.346,110,110,110s110-49.346,110-110S316.654,100,256,100z M256,300
+			c-49.626,0-90-40.374-90-90c0-49.626,40.374-90,90-90c49.626,0,90,40.374,90,90C346,259.626,305.626,300,256,300z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,140c-38.598,0-70,31.402-70,70c0,38.598,31.402,70,70,70c38.598,0,70-31.402,70-70C326,171.402,294.598,140,256,140z
+			 M256,260c-27.57,0-50-22.43-50-50s22.43-50,50-50s50,22.43,50,50S283.57,260,256,260z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/index.html

@@ -7,8 +7,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
-    <script type="module" crossorigin src="/assets/index-CLsUm3wk.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dqi_M3E3.css">
+    <script type="module" crossorigin src="/assets/index-BarB10XI.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DiPSi5MU.css">
   </head>
   <body>
     <div id="root"></div>