refactor(ext/popup): extract renderFormHeader + .form-header CSS

Code-review feedback on Task 8: the conditional empty
<div style="margin-bottom:16px;"> spacer was an inline-styled magic
number and the 6-line header pattern was duplicated across all 7 typed
forms.

Now:
- .form-header class owns the bottom margin in both stylesheets.
- :has(+ .form-subtitle) selector drops the margin when a subtitle
  follows, so spacing tokens stay in CSS instead of inline styles.
- renderFormHeader(titleText) shared helper collapses the 6-line
  duplication to a one-liner per form. item-form.ts (type-selection
  screen) is unaffected — it uses a different header structure.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

extension/src/popup/styles.css

@@ -104,6 +104,18 @@ body {
   font-size: 11px;
 }
 
+.form-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+/* When the header is followed by a subtitle, drop the bottom margin so the
+   subtitle's own margin owns the spacing. */
+.form-header:has(+ .form-subtitle) {
+  margin-bottom: 0;
+}
+
 .form-subtitle {
   font-size: 11px;
   color: var(--text-dim);