fix(cms): stable bottom bar and self-save no longer trips the 409 lock

MITHOME-68: the optimistic-lock fingerprint was frozen at page load, so the
user's own second save 409'd. /save now returns the hash of the written
content and the client refreshes CONTENT_HASH on success — 409 only fires
for genuine external changes (deploy, other tab, restore). Also: successful
logins no longer consume the auth failure budget (only failed attempts do).

MITHOME-69: bottom bar items no longer shift while saving/publishing — the
status message occupies a constant flex slot (visibility instead of
display), the publish button locks its width while running and restores
its env-specific label, auto margins removed. Layout guard test added.

Test markers are now run-unique so a crashed run can never poison the
next one's expectations.

scripts/cms-pages.js

@@ -66,7 +66,7 @@ const HTML = (activeFile, jsonData, message, csrfToken, fileLabels, clientJs, co
 
     /* Bottom bar */
     .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0f1117; border-top: 1px solid #2d3748; padding: 14px 32px; display: flex; gap: 14px; align-items: center; z-index: 50; }
-    .btn-logout { margin-left: auto; background: #1f2937; color: #e2e8f0; border: 1px solid #374151; border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer; }
+    .btn-logout { background: #1f2937; color: #e2e8f0; border: 1px solid #374151; border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer; }
     .btn-logout:hover { background: #374151; }
     .version-tag { color: #475569; font-size: 12px; font-family: monospace; }
     .btn-save { background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; border: none; padding: 11px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s, transform .1s; }
@@ -75,9 +75,11 @@ const HTML = (activeFile, jsonData, message, csrfToken, fileLabels, clientJs, co
     .btn-publish { background: linear-gradient(135deg,#10b981,#059669); color: #fff; border: none; padding: 11px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s, transform .1s; }
     .btn-publish:hover { opacity: .9; transform: translateY(-1px); }
     .btn-publish:active { transform: translateY(0); }
-    .preview-link { color: #64748b; font-size: 13px; text-decoration: none; margin-left: auto; }
+    .preview-link { color: #64748b; font-size: 13px; text-decoration: none; }
     .preview-link:hover { color: #94a3b8; }
-    .save-status { font-size: 13px; font-weight: 500; display: none; margin-left: 8px; }
+    /* WHY: the status slot always occupies the same flex space (visibility, not
+       display) so showing/hiding messages never shifts the other bar items. */
+    .save-status { flex: 1 1 0; min-width: 0; margin: 0 8px; font-size: 13px; font-weight: 500; visibility: hidden; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
     /* Toast */
     .toast { position: fixed; top: 20px; right: 20px; padding: 13px 18px; border-radius: 9px; font-size: 14px; font-weight: 500; z-index: 200; animation: slideIn .3s ease; }
@@ -124,7 +126,7 @@ ${message ? `<div class="toast ${message.type === 'ok' ? 'ok' : 'err'}">${messag
 const DATA = JSON.parse(document.getElementById('page-data').textContent);
 const FILE = "${activeFile}";
 const CSRF_TOKEN = "${csrfToken}";
-const CONTENT_HASH = "${contentHash}";
+let CONTENT_HASH = "${contentHash}";
 
 ${clientJs}
 </script>