diff --git a/public/styles.css b/public/styles.css
index b2ce737..6411f3e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -100,8 +100,10 @@ body:not(.viewer-body)::after {
     radial-gradient(90% 60% at 50% 108%, rgba(233,160,92,.045), transparent 65%);
 }
 
-/* Everything real sits above the ambient layers. */
-#login, #app, #modal-root, .center-shell, #toast { position: relative; z-index: 1; }
+/* Everything real sits above the ambient layers. #modal-root and #toast are
+   deliberately left out: their children are fixed with their own z-index and
+   must stack against the root, not inside a container's stacking context. */
+#login, #app, .center-shell { position: relative; z-index: 1; }
 
 a {
   color: var(--mint);
@@ -215,7 +217,8 @@ input, select, textarea {
   color: var(--text);
   transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
 }
-input::placeholder, textarea::placeholder { color: #635e73; }
+/* --text-faint keeps placeholders at ~5:1 on the input well, not decorative mush */
+input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
 input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--line-strong); }
 input:focus, select:focus, textarea:focus {
   outline: none;
@@ -544,6 +547,8 @@ main {
   border: 1px solid var(--line);
   border-radius: 20px;
 }
+/* app.js blanks this when there are no machines — don't leave an empty pill */
+#machines-count:empty { display: none; }
 
 /* ------------------------------------------------------------------ cards */