live results

css/styles.css

@@ -444,17 +444,89 @@ output {
     transition: width var(--transition-normal);
 }
 
-.progress-stats {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-lg);
-    font-size: 0.875rem;
-    color: var(--text-secondary);
+.progress-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
 }
 
-.progress-stats strong {
-    color: var(--text-primary);
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--space-md);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    text-align: center;
+}
+
+.stat-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: var(--space-xs);
+}
+
+.stat-value {
+    font-size: 1.1rem;
+    font-weight: 600;
     font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.stat-highlight {
+    color: var(--accent);
+}
+
+/* Live Preview */
+.live-preview {
+    margin-top: var(--space-lg);
+    padding: var(--space-md);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    border: 1px dashed var(--border-color);
+}
+
+.live-preview h3 {
+    margin: 0 0 var(--space-sm);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+}
+
+.live-preview-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+}
+
+.live-preview-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-sm);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+}
+
+.live-preview-group .group-label {
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.live-preview-group .group-cells {
+    color: var(--text-primary);
+}
+
+.live-preview-group .group-cap {
+    color: var(--accent);
+    margin-left: var(--space-xs);
 }
 
 /* --------------------------------------------------------------------------