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/lib/components/ArticleCard.svelte

@@ -22,8 +22,8 @@
   const TOPIC_COLOR = {
     science: '#0083ad',     // azure (sea)
     technology: '#5f72a8',  // muted indigo
-    environment: '#3f9070', // soft green
-    health: '#3aa6a0',      // calm teal
+    environment: '#5a9d3e', // leaf green (clearly distinct from health's teal)
+    health: '#1f9e95',      // teal
     community: '#c79a3a',   // warm gold
     culture: '#c4795a',     // terracotta
     animals: '#9a8246',     // earthy tan
@@ -299,10 +299,13 @@
   }
   .tile .media.placeholder .ph-word {
     font-family: var(--serif); font-size: 2rem; line-height: 1;
-    /* A deep, near-black shade of the topic color so the word reads clearly. */
-    color: color-mix(in srgb, var(--c) 55%, var(--ink)); opacity: 0.9;
+    /* A deep shade of the topic color so the word reads clearly (more hue than
+       before, so health vs environment are easy to tell apart). */
+    color: color-mix(in srgb, var(--c) 64%, var(--ink)); opacity: 0.92;
     text-transform: lowercase; letter-spacing: -0.01em;
   }
+  /* A snazzy bold, slightly larger initial. */
+  .tile .media.placeholder .ph-word::first-letter { font-weight: 800; font-size: 1.2em; }
   /* A thumb card's banner carries the topic identity, so drop the faint corner
      watermark there to avoid a doubled word. */
   .tile.hasthumb::after { display: none; }

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; }

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

@@ -52,7 +52,7 @@
 <header class="bar">
   <div class="container inner">
     <a class="brand" href="/"><img class="logo" src="/logo.svg" alt="Upbeat Bytes" /></a>
-    <a class="back" href="/account">← Account</a>
+    <a class="back" href="/account"><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>Account</a>
   </div>
 </header>
 
@@ -247,7 +247,8 @@
   header.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; }
   .page { padding: 22px 20px 70px; }
   h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 6px 0 2px; }
   .sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }