fix: mobile layout + board MCU-mismatch boot guard

Mobile (ERR was: sidebar + bottom-tabs both rendered, scrambling layout):
- Added the missing .hide-mobile / .show-mobile rules — they were
  referenced inline by main.tsx but never defined in styles.css, so on
  phones the desktop sidebar AND mobile bottom-nav both rendered at
  once, overlapping every card and pushing the page off-screen
- Trimmed paddings, reduced page-head gap, and force-collapse all
  inline auto-fit grids (220/280 px min-cols) to 2-column at ≤760 px
  and 1-column at ≤480 px — Hardware/Mesh/Motion screens now lay out
  cleanly on a 360 px viewport

Boot guard (ERR was: 2nd C3 not starting AP after reflash):
- resolve_board_profile now rejects an NVS board.id whose profile->mcu
  doesn't match CONFIG_IDF_TARGET (e.g., "esp32-devkit" pinmap loaded
  on a C3). Wrong pinmap drives USB-JTAG / flash pins as outputs and
  bricks boot before netmgr starts, looking like "device dead". Falls
  back to the compile-time default profile in that case.

Author: Ravi Singh

firmware/components/webui/ui.html

@@ -47,10 +47,22 @@ static const board_profile_t *resolve_board_profile(void) {
     if (err == ESP_OK) {
         const board_profile_t *p = board_profile_by_id(saved_id);
         if (p) {
-            ESP_LOGI(TAG, "Board profile from NVS: %s (%s)", p->id, p->display);
-            return p;
+            /* MCU mismatch guard: if NVS has a profile from a different SoC
+             * (e.g., previous "esp32-devkit" saved on a C3 from a stale flash),
+             * the wrong pin map can drive USB-JTAG / flash pins as outputs and
+             * brick boot before Wi-Fi comes up. Fall back to the compile-time
+             * default whenever the saved profile's MCU doesn't match the
+             * IDF_TARGET we were built for. */
+            if (strcmp(p->mcu, CONFIG_IDF_TARGET) != 0) {
+                ESP_LOGW(TAG, "NVS board.id='%s' is for MCU '%s' but we're running on '%s' — falling back",
+                         p->id, p->mcu, CONFIG_IDF_TARGET);
+            } else {
+                ESP_LOGI(TAG, "Board profile from NVS: %s (%s)", p->id, p->display);
+                return p;
+            }
+        } else {
+            ESP_LOGW(TAG, "NVS board.id='%s' is unknown; falling back to default", saved_id);
         }
-        ESP_LOGW(TAG, "NVS board.id='%s' is unknown; falling back to default", saved_id);
     }
     const board_profile_t *def = board_default_profile();
     ESP_LOGI(TAG, "Board profile (default): %s (%s)", def->id, def->display);

firmware/components/webui/ui.html.gz

@@ -80,7 +80,15 @@ input, select, textarea { font: inherit; color: inherit; }
 .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
 .page-head .sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
 
+/* Responsive helpers used inline by the layout. Without these the desktop
+ * sidebar and mobile bottom-tab nav both render at once on phones, which
+ * is how the UI looked "scrambled" in the v6.0 report. */
+.hide-mobile { /* visible on desktop, hidden via media query below */ }
+.show-mobile { display: none; }
+
 @media (max-width: 760px) {
+  .hide-mobile { display: none !important; }
+  .show-mobile { display: flex !important; }
   .app { grid-template-columns: 1fr; }
   .sidebar {
     position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
@@ -90,8 +98,34 @@ input, select, textarea { font: inherit; color: inherit; }
   }
   .brand { display: none; }
   .navlink { flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 10px; }
-  .main { padding: 16px 14px 88px; }
+  .main { padding: 14px 12px 88px; max-width: 100%; }
+  .page-head { gap: 8px; margin-bottom: 16px; }
   .page-head h1 { font-size: 19px; }
+  .app-header { padding: 10px 12px; }
+  /* Cards lose their inner indent on phones — saves ~14 px per card * 4 cards. */
+  .card-body { padding: 12px 12px 14px; }
+  .card-head { padding: 12px 12px 0; }
+  /* Tame inline grids that hardcode min 280 px columns — they'd overflow
+   * on a 360 px viewport once card padding is subtracted. */
+  .card .card-body > div[style*="grid-template-columns: repeat(auto-fit"] {
+    grid-template-columns: 1fr !important;
+  }
+  /* LED screen's primary 2-col grid (Mode list | Color/Layout column) —
+   * stacks vertically on phones. */
+  .led-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
+  /* Top-level grid wrappers used by Motion advanced + Hardware pin maps. */
+  div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
+  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"],
+  div[style*="grid-template-columns: repeat(auto-fit, minmax(170px, 1fr))"] {
+    grid-template-columns: 1fr 1fr !important;
+  }
+  div[style*="grid-template-columns: repeat(auto-fit, minmax(155px, 1fr))"] {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+@media (max-width: 480px) {
+  /* Single column on the smallest phones. */
+  div[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
 }
 
 /* Atoms */