fix: align login buttons; move helper links to their own line

Log in / Continue with SSO now sit in a wrapping button row; "Forgot password? ·
Create an account" moves to a left-aligned line below instead of being crammed
beside the button (where "Create an account" wrapped and misaligned).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/static/css/app.css

@@ -566,6 +566,7 @@ body[data-nav=side] #tab-audit {
 
 .muted { color: var(--muted); }
 .spread { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
+.login-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
 .stack > * + * { margin-top: 16px; }
 .mt { margin-top: 16px; }
 

web/templates/login.html

@@ -16,15 +16,13 @@
       <label for="password">Password</label>
       <input type="password" id="password" name="password" autocomplete="current-password" required>
     </div>
-    <div class="spread">
+    <div class="login-actions">
       <button class="btn primary" type="submit">Log in</button>
-      <span><a href="/forgot-password">Forgot password?</a> · <a href="/register">Create an account</a></span>
+      {{if .OIDCEnabled}}<a class="btn" href="/api/v1/auth/oidc/login">Continue with SSO</a>{{end}}
     </div>
   </form>
-  {{if .OIDCEnabled}}
-  <div class="mt">
-    <a class="btn" href="/api/v1/auth/oidc/login">Continue with SSO</a>
-  </div>
-  {{end}}
+  <p class="muted mt" style="margin-bottom:0">
+    <a href="/forgot-password">Forgot password?</a> · <a href="/register">Create an account</a>
+  </p>
 </div>
 {{end}}