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;