++ fix grafico

app/static/style.css

@@ -124,6 +124,37 @@ body {
   padding: 0.55rem 0.7rem;
   min-height: 42px;
   word-break: break-word;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.6rem;
+  align-items: center;
+}
+
+.summary-kv {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  padding: 0.15rem 0.45rem;
+  font-size: 0.78rem;
+}
+
+.summary-key {
+  color: #8ecae6;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.sync-in-progress {
+  color: #ffe2a3;
+  animation: pulse-text 1.4s ease-in-out infinite alternate;
+}
+
+@keyframes pulse-text {
+  from { opacity: 0.6; }
+  to   { opacity: 1; }
 }
 
 .status-chip {
@@ -182,12 +213,57 @@ body {
 
 .table thead {
   border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #0b1e2d;
 }
 
 .table tbody tr {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
+.log-scroll {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: auto;
+  border-radius: 10px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+
+.log-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.log-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.2);
+  border-radius: 4px;
+}
+
+@keyframes flash-row {
+  0%   { background: rgba(255, 183, 3, 0.25); }
+  100% { background: transparent; }
+}
+
+.row-new {
+  animation: flash-row 1.8s ease forwards;
+}
+
+.live-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #2ec4b6;
+  flex-shrink: 0;
+  animation: dot-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.4; transform: scale(0.75); }
+}
+
 @media (max-width: 768px) {
   .hero-panel,
   .log-panel {