fix(layout): redesign first-run guide with visual step indicators

- Replace plain numbered list with icon circles (primary-soft bg)
- Each step uses flex layout: indicator + content
- Step titles and body text have clear hierarchy
- Remove legacy padding-left on ol, use gap-based spacing
- Consistent 14px font size for step content

frontend/src/screens/HomeScreen.tsx

@@ -296,17 +296,20 @@ function PublicationResult({
 }
 
 function FirstRunGuide() {
-  const steps: { title: string; body: string }[] = [
+  const steps: { icon: string; title: string; body: string }[] = [
     {
-      title: '1 · Create a profile',
+      icon: 'users',
+      title: 'Create a profile',
       body: 'The app generates a public npub address and a private key for you. They are stored only on this computer.',
     },
     {
-      title: '2 · Share your npub',
+      icon: 'copy',
+      title: 'Share your npub',
       body: 'Your npub is public and safe to share. Never share your private key with anyone.',
     },
     {
-      title: '3 · Publish a note',
+      icon: 'edit',
+      title: 'Publish a note',
       body: 'Write a note in Compose and publish it. Your note is signed locally and sent to the enabled relays.',
     },
   ];
@@ -315,9 +318,14 @@ function FirstRunGuide() {
       <h2>How it works</h2>
       <ol>
         {steps.map((step) => (
-          <li key={step.title}>
+          <li key={step.title} className="first-run-step">
-            <strong>{step.title}</strong>
+            <span className="first-run-step-indicator" aria-hidden="true">
-            <p>{step.body}</p>
+              <Icon name={step.icon as any} size={16} />
+            </span>
+            <div className="first-run-step-content">
+              <strong>{step.title}</strong>
+              <p>{step.body}</p>
+            </div>
           </li>
         ))}
       </ol>

frontend/src/styles.css

@@ -1674,16 +1674,45 @@ select {
   text-align: left;
 }
 
-.first-run-guide ol {
+.first-run-guide h2 {
-  margin: 12px 0 0;
+  margin-bottom: 4px;
-  padding-left: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
 }
 
-.first-run-guide p {
+.first-run-guide ol {
-  margin: 2px 0 0;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.first-run-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.first-run-step-indicator {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--primary-soft);
+  color: var(--primary);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.first-run-step-content strong {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+.first-run-step-content p {
+  margin: 0;
   color: var(--text-muted);
   font-size: 14px;
 }