diff --git a/public/styles.css b/public/styles.css
index b0f3fb7..1a0d2fb 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,27 +1,31 @@
-/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-html, body {
-  height: 100%;
-}
-body {
-  font-family: Arial, sans-serif;
-  background-color: #eeeeee;
-  color: #333;
-  /* push content below fixed header */
-  padding-top: 70px;
-  overflow: hidden; /* inner containers will scroll */
+/* ================= CSS VARIABLES ================= */
+:root {
+  --square-size:       60px;
+  --gap:               8px;
+  --v-gap:             40px;
+  --warehouse-height:  200px;
+  --region-height:     480px;
 }
 
-/* ─── HEADER & NAVIGATION ─────────────────────────────────────────────────── */
+/* ================= GLOBAL & RESET ================= */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+  background: #f4f4f4;
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+/* ================= HEADER & NAV ================= */
 .main-header {
   background-color: #232F3E;
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 2rem;
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 1000;
@@ -50,42 +54,35 @@ body {
   background-color: #e48f00;
 }
 
-/* ─── PAGE CONTAINER ───────────────────────────────────────────────────────── */
+/* ================= PAGE & CONTAINERS ================= */
+.page-container,
+.heatmap-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 70px; /* height of header */
+}
 .page-container {
   width: 95%;
   max-width: 1200px;
   margin: 0 auto;
-  background: #fff;
-  overflow: auto;
-  position: absolute;
-  top: 70px;    /* header height */
-  left: 0; right: 0; bottom: 0;
   padding: 1rem;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  background: #fff;
   border-radius: 6px;
 }
+.heatmap-container {
+  height: calc(100vh - 70px);
+}
 
-/* ─── INPUT/FORM STYLES (input.html) ───────────────────────────────────────── */
-.form-input,
-.form-textarea,
-select {
-  width: 90%;
-  margin: 0.5rem auto;
+/* ================= FORM STYLES ================= */
+.form-input, .form-textarea {
+  width: 80%;
+  max-width: 400px;
+  margin: 1rem auto;
   display: block;
-  padding: 0.75rem;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 1rem;
-}
-fieldset {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  margin: 1rem 0;
   padding: 1rem;
-}
-legend {
-  padding: 0 0.5rem;
-  font-weight: bold;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
 }
 .big-button {
   background-color: #28a745;
@@ -101,144 +98,157 @@ legend {
 .big-button:hover {
   background-color: #218838;
 }
-
-/* ─── HEATMAP PAGE STYLES ──────────────────────────────────────────────────── */
-.page-container.heatmap {
-  padding: 0;              /* remove default padding */
-  background: #f9f9f9;
+fieldset {
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
 }
-#heatmap-container {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  position: relative;
-}
-.map-svg-container {
-  /* adjust these to your actual map dimensions */
-  min-width: 2000px;
-  min-height: 400px;
-  transform-origin: 0 0;
-  cursor: grab;
-}
-.map-svg-container:active {
-  cursor: grabbing;
-}
-.dock-door {
-  fill: #ccc;
-  stroke: #999;
-  stroke-width: 1;
-  cursor: pointer;
-}
-.dock-door:hover {
-  stroke: #FF9900;
-  stroke-width: 2;
-}
-.area-rect {
-  fill: rgba(200,200,200,0.3);
-  stroke: #999;
-  stroke-width: 1;
-}
-.area-rect text {
-  font-size: 0.85rem;
+legend {
   font-weight: bold;
 }
+
+/* ================= FLOOR SELECTOR ================= */
 .floor-selector {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: rgba(255,255,255,0.9);
-  padding: 0.5rem;
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  text-align: center;
+  padding: 0.5rem 0;
+  background: #fafafa;
+  border-bottom: 1px solid #ddd;
 }
 .floor-selector label {
-  margin-right: 0.75rem;
-  font-size: 0.9rem;
+  margin: 0 1rem;
+  font-weight: bold;
   cursor: pointer;
 }
+.floor-selector input {
+  margin-right: 0.25rem;
+}
 
-/* ─── TRENDS PAGE STYLES (trends.html) ───────────────────────────────────── */
-.page-container.trends {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 0);
-  padding: 1rem;
-}
-.page-container.trends h1 {
-  margin-bottom: 1rem;
-}
-.trends-controls {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-#timeframe-slider {
+/* ================= HEATMAP SCROLL & ZOOM ================= */
+.heatmap-scroll {
   flex: 1;
-}
-#timeframe-label {
-  margin-left: 1rem;
-  white-space: nowrap;
-}
-.trends-metrics {
-  margin-bottom: 1rem;
-}
-.chart-container {
-  flex: 0 0 50%;
-  margin-bottom: 1rem;
+  overflow: auto;
   position: relative;
 }
-.chart-container canvas {
-  width: 100% !important;
-  height: 100% !important;
-}
-.table-wrapper {
-  flex: 0 0 45%;
-  overflow: auto;
-  border: 1px solid #ddd;
-}
-.table-wrapper table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-.table-wrapper th,
-.table-wrapper td {
-  padding: 8px;
-  text-align: center;
-  border: 1px solid #ccc;
-}
-.table-wrapper thead th {
-  background: #f2f2f2;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  cursor: pointer;
-}
-.table-wrapper tbody tr:nth-child(even) {
-  background: #fafafa;
-}
-.sortable::after {
-  content: '▲▼';
-  font-size: 0.6em;
-  margin-left: 4px;
-  color: #888;
-}
-.sortable.asc::after {
-  content: '▲';
-}
-.sortable.desc::after {
-  content: '▼';
+
+/* ================= DIAGRAM LAYOUT ================= */
+.diagram-container {
+  width: calc((var(--square-size) * 83) + (var(--gap) * 82));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--v-gap);
+  padding: var(--v-gap);
+  box-sizing: border-box;
 }
 
-/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
-@media (max-width: 768px) {
-  .nav-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.9rem;
-  }
-  .form-input,
-  .form-textarea,
-  select {
-    width: 100%;
-  }
+/* Dock-door row */
+.dock-row {
+  display: flex;
+  gap: var(--gap);
+  flex-wrap: nowrap;
 }
+.dock-square {
+  width: var(--square-size);
+  height: var(--square-size);
+  background: #ddd;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: #333;
+  user-select: none;
+}
+
+/* ================= REGIONS ================= */
+.regions-container {
+  display: flex;
+  width: 100%;
+  gap: var(--gap);
+}
+.region {
+  position: relative;
+  flex: 1;
+  height: var(--region-height);
+  border: 2px solid #666;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.region-amod    { background: #eef; }
+.region-preslam { background: #efe; }
+.region-bmod    { background: #fee; }
+
+/* AFE override: line up station squares horizontally */
+#region-preslam {
+  display: flex !important;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: nowrap;
+  padding: var(--gap) 0;
+}
+#region-preslam .station-square {
+  position: static;
+  flex: 0 0 auto;
+  margin: calc(var(--gap)/2);
+}
+
+/* ================= CENTER LABEL ================= */
+.region .ar-center {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%,-50%);
+  white-space: pre-line;
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: rgba(0,0,0,0.6);
+  pointer-events: none;
+}
+
+/* ================= STATION SQUARES ================= */
+.region .station-square {
+  position: absolute;
+  width: var(--square-size);
+  height: var(--square-size);
+  line-height: var(--square-size);
+  text-align: center;
+  font-size: 0.75rem;
+  color: #111;
+  background: #ddd;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.3s;
+}
+
+/* ================= WAREHOUSE RECTANGLE ================= */
+.warehouse {
+  width: calc((var(--square-size) * 83) + (var(--gap) * 82));
+  height: var(--warehouse-height);
+  background: #ccc;
+  border-radius: 6px;
+}
+
+/* ================= TOOLTIP ================= */
+.tooltip {
+  position: absolute;
+  pointer-events: none;
+  background: rgba(0,0,0,0.75);
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  line-height: 1.2;
+  display: none;
+  z-index: 2000;
+}
+
+/* ================= UTILITY ================= */
+.hidden {
+  display: none !important;
+}
+