Updated interface to show Box A+B

RotaxMonitor/data/style.css

@@ -35,10 +35,13 @@ body {
 .logo {
     height: 50px;
     width: auto;
+    margin: auto;
 }
 
 .page-header h1 {
-    margin: 5px;
+    margin: auto;
+    margin-top: 20px;
+    text-align: center;
     font-size: 28px;
     font-weight: 600;
 }
@@ -159,21 +162,57 @@ button:hover {
     }
 }
 
-/* Data section */
-div[style*="max-width: 900px"] {
+.tables-container {
+    display: flex;
+    gap: 20px;
+    max-width: 1800px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.box {
+    flex: 1;
     background: white;
     padding: 20px;
     border-radius: 6px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.box h2 {
+    margin-top: 0;
+    margin-bottom: 16px;
+    color: var(--primary-blue);
+    font-size: 18px;
+    font-weight: 700;
+    text-align: center;
+}
+
+.box-data {
     margin-bottom: 20px;
 }
 
-div[style*="max-width: 900px"] p {
+.box-data p {
     margin: 8px 0;
     font-size: 14px;
 }
 
-div[style*="max-width: 900px"] strong {
+.box-data strong {
+    color: var(--primary-blue);
+}
+
+.rpm-highlight {
+    background: #c6e4fa;
+    border: 3px double var(--primary-blue);
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--text-dark);
+}
+
+.rpm-highlight strong {
     color: var(--primary-blue);
 }