Updated Device Details Design

Data/Engine/web-interface/src/GUI_SYLING_GUIDE.md

@@ -4,7 +4,9 @@
 - **Full-Bleed Canvas**: Let hero shells run edge-to-edge inside the content column (no dark voids); reserve inset padding for interior cards so gradients feel immersive.
 - **Glass Panels**: Primary panels/cards use glassmorphic layers (`rgba(15,23,42,0.7)`), rounded 16–24px corners, blurred backdrops, and micro borders; add radial light flares via pseudo-elements for motion while keeping content readable.
 - **Hero Storytelling**: Each view begins with a stat-forward hero—gradient StatTiles (min 160px) and uppercase pills (HERO_BADGE_SX) summarize live signals, active filters, and selections so telemetry feels alive at a glance.
+- **Summary Data Grids**: When metadata runs long (device summary, network facts) render it with AG Grid inside a glass wrapper—two columns (Field/Value), matte navy background, and no row striping so it reads like structured cards instead of spreadsheets.
 - **Tile Palettes**: Online tiles lean cyan→green, stale tiles go orange→red, “needs update” stays violet→cyan, and secondary metrics fade from cyan into desaturated steel so each KPI has a consistent hue family across pages.
+- **Hardware Islands**: Storage, memory, and network blocks reuse the Quartz AG Grid theme inside rounded glass shells with flat fills (no gradients); show readable numeric columns (`Capacity`, `Used`, `Free`, `%`) instead of custom bars so panels match the Device Inventory surface.
 - **Action Surfaces**: Control bars (view selectors, tool strips) live inside translucent glass bands with generous spacing; selectors get filled dark inputs with cyan hover borders, while primary actions are pill-shaped gradients and secondary controls use soft-outline icon buttons.
 - **Anchored Controls**: Align view selectors/utility buttons directly with grid edges, keeping the controls in a single horizontal row that feels docked to the data surface; reserve glass backdrops for hero sections so the content canvas stays flush.
 - **Buttons & Chips**: Reserve gradient pills (`linear-gradient(135deg,#34d399,#22d3ee)` for success, `#7dd3fc→#c084fc` for creation) for primary CTAs; neutral actions rely on rounded outlines with `rgba(148,163,184,0.4)` borders and uppercase microcopy for supporting tokens.