Add dashboard TV frame styles and update rendering structure for animated charts

theme/assets/css/main.css

@@ -1995,6 +1995,61 @@ p:last-child { margin-bottom: 0; }
   box-shadow: none;
 }
 
+/* ── Dashboard TV frame ────────────────────────── */
+.dashboard-tv {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dashboard-tv__body {
+  width: 100%;
+  max-width: 520px;
+  background: var(--color-bg-alt);
+  border: 4px solid var(--color-bg-alt);
+  border-radius: 6px 6px 4px 4px;
+  outline: 1px solid var(--color-border);
+  padding: 3px;
+  position: relative;
+  box-shadow: 0 14px 48px rgba(0,0,0,0.55);
+}
+.dashboard-tv__body::after {
+  content: '\25B6';
+  position: absolute;
+  bottom: -13px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 8px;
+  color: rgba(74,222,128,0.7);
+}
+.dashboard-tv__screen {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background: #111;
+  border-radius: 2px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-tv__screen .dashboard-chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.dashboard-tv__feet {
+  display: flex;
+  justify-content: space-between;
+  width: 60%;
+  max-width: 300px;
+}
+.dashboard-tv__foot {
+  width: 12px;
+  height: 8px;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 0 0 4px 4px;
+}
+
 /* ── 10b. Device Animator ───────────────────────────────────── */
 .platform-visual.has-anim {
   background: none !important;
@@ -2614,17 +2669,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 /* ── Dashboard Chart ───────────────────────────────────── */
-.dashboard-chart-container {
-  position: relative;
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 1.5rem;
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-}
 .dashboard-chart {
   width: 100%;
   height: auto;

theme/blocks/index.php

@@ -1347,8 +1347,10 @@ function oribi_render_platform_row( $a ) {
         // Render animated dashboard chart SVG
         // Text uses class hooks: .ct = title, .cl = label, .cv = value
         // JS will dynamically set fill colours based on data-theme
-        $visual_html = '<div class="dashboard-chart-container" data-dashboard-container="true">
+        $visual_html = '<div class="dashboard-tv" data-dashboard-container="true">
-<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts" style="border-radius:4px">
+<div class="dashboard-tv__body">
+<div class="dashboard-tv__screen">
+<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts">
   <defs>
     <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0%"   stop-color="#004225" stop-opacity="1"/>
@@ -1455,6 +1457,8 @@ function oribi_render_platform_row( $a ) {
     </g>
   </g>
 </svg>
+</div></div>
+<div class="dashboard-tv__feet"><div class="dashboard-tv__foot"></div><div class="dashboard-tv__foot"></div></div>
 </div>';
         $visual_cls  = 'platform-visual has-dashboard';
     } elseif ( $img_url ) {