From bd033f5d36bffe58055cf221cf6270c66d789312 Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Sun, 21 Jun 2026 00:40:42 +0500
Subject: [PATCH] =?UTF-8?q?style:=20Bloomberg-style=20KPI=20cards=20?=
 =?UTF-8?q?=E2=80=94=20separate=20bordered=20cards=20with=2010px=20gaps,?=
 =?UTF-8?q?=20same=20width=20as=20charts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard-mockup.html | 47 ++++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/dashboard-mockup.html b/dashboard-mockup.html
index 630f85f..eeeca43 100644
--- a/dashboard-mockup.html
+++ b/dashboard-mockup.html
@@ -105,43 +105,48 @@ body {
 .tab-btn.active::after { transform: scaleX(1); }
 .tab-label { display: flex; align-items: center; gap: 8px; }
 
-/* KPI GRID — IBM Carbon style: single border around all */
+/* KPI GRID — Bloomberg ticker style */
 .kpi-grid {
   display: grid; grid-template-columns: repeat(6, 1fr);
-  gap: 1px; padding: 0; max-width: 1280px; margin: 0 auto;
-  background: var(--border); border: 1px solid var(--border);
-  border-radius: 4px; overflow: hidden;
+  gap: 10px; padding: 0;
+  max-width: 1280px; margin: 0 auto;
 }
 .kpi {
-  background: var(--surface);
-  padding: 20px 24px;
+  background: #121212;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  padding: 14px 16px;
   position: relative;
-  transition: background 0.15s;
+  transition: all 0.2s var(--ease);
   opacity: 0; transform: translateY(8px);
 }
 .kpi.visible { opacity: 1; transform: translateY(0); }
-.kpi:hover { background: var(--surface-hover); }
-.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.kpi:hover {
+  border-color: #3a3a3a;
+  background: #181818;
+  transform: translateY(-1px);
+}
+.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
 .kpi-name {
-  font-size: 11px; font-weight: 600;
-  text-transform: uppercase; letter-spacing: 0.06em;
-  color: var(--text-secondary);
+  font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: #71717a;
 }
 .kpi-badge {
-  font-family: var(--mono); font-size: 10px; font-weight: 500;
-  padding: 2px 6px; border-radius: 0;
-  text-transform: uppercase; letter-spacing: 0.05em;
+  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  padding: 2px 6px; border-radius: 3px;
+  display: inline-flex; align-items: center; gap: 2px;
 }
-.kpi-badge.up { color: var(--green); background: var(--green-dim); }
-.kpi-badge.down { color: var(--red); background: var(--red-dim); }
-.kpi-badge.neutral { color: var(--accent); background: rgba(15,111,255,0.1); }
+.kpi-badge.up { color: #22c55e; background: rgba(34,197,94,0.1); }
+.kpi-badge.down { color: #ef4444; background: rgba(239,68,68,0.1); }
+.kpi-badge.neutral { color: #3b82f6; background: rgba(59,130,246,0.1); }
 .kpi-value {
   font-family: var(--mono);
-  font-size: 24px; font-weight: 600;
+  font-size: 22px; font-weight: 700;
   letter-spacing: -0.5px; line-height: 1.1;
-  color: var(--text-primary); margin-bottom: 8px;
+  color: #f4f4f4; margin-bottom: 4px;
 }
-.kpi-context { font-size: 11px; color: var(--text-tertiary); }
+.kpi-context { font-size: 10px; color: #52525b; }
 
 /* CHARTS WRAPPER */
 .charts-wrap {