Card + article-page polish

* Placeholder: bold, slightly larger initial letter on the topic word; make
  health (teal) and environment (leaf green) clearly distinct and show more hue
  in the deepened word so they're easy to tell apart.
* Article page: the source name was chopped to its first word ("Read the full
  story at The") — use the full publisher name; open the source link in a new
  tab so upbeatbytes.com stays put.
* Use the new SVG back arrow on the account and admin top bars (matching the
  article page) instead of the old "←" glyph.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/routes/account/+page.svelte

@@ -60,7 +60,7 @@
       <button class="fb" onclick={openFeedback} aria-label="Share feedback" title="Share feedback">
         <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 5h16v11H8l-4 3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
       </button>
-      <a class="back" href="/">← Back</a>
+      <a class="back" href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>Back</a>
     </div>
   </div>
 </header>
@@ -139,7 +139,8 @@
   .bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
   .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
   .logo { height: 40px; display: block; }
-  .back { color: var(--accent-deep); font-size: 0.9rem; }
+  .back { color: var(--accent-deep); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px; }
+  .back svg { width: 17px; height: 17px; display: block; }
   .baractions { display: flex; align-items: center; gap: 14px; }
   .baractions .fb { background: none; border: none; color: var(--accent-deep); cursor: pointer; display: inline-flex; padding: 2px; }
   .page { padding: 20px 20px 70px; }