Place name controls on their own line in status bar

wwwroot/index.html

@@ -11,7 +11,7 @@
     <span class="status-dot"></span>
     <span id="phase-pill">Loading…</span>
     <span class="counts" id="counts">—</span>
-    <div class="inline-name">
+    <div class="name-inline">
       <label for="name-input" class="label">Name</label>
       <input id="name-input" maxlength="64" placeholder="Pick a name" />
       <button id="save-name" class="ghost">Save</button>
@@ -89,4 +89,3 @@
   <script src="app.js"></script>
 </body>
 </html>
-

wwwroot/styles.css

@@ -18,7 +18,6 @@ body {
   border: 1px solid #1f2937;
   border-radius: 10px;
   box-shadow: 0 10px 24px rgba(0,0,0,0.25);
-  max-width: 540px;
 }
 
 .status-dot {
@@ -34,16 +33,15 @@ body {
   font-size: 13px;
 }
 
-.inline-name {
+.name-inline {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-left: auto;
 }
-.inline-name input {
+.name-inline input {
   width: 160px;
 }
-.inline-name .hint {
+.name-inline .hint {
   margin: 0;
 }