Rebuild the web UI on the Cinder design

Replaces the card-and-chip visual language with the Cinder direction from
the design doc: editorial serif, containerless sheets divided by ash
hairlines, one 760px measure, no radii and no shadows.

The organising rule is that heat is typographic. Only a series with an
unread chapter is allowed to be crimson — title, cover foot rule, "Ch N
out", play icon — so the one thing worth acting on is the one thing that
draws the eye. Favourites get brass instead of borrowing the accent, which
is what made the old three-hue palette read as noise. Both states hang off
two classes on the article (is-new, is-dim), so a new sub-element inherits
the state rather than re-deriving it.

The action strip is flex-basis 100% inside the row, which is what lets the
same markup be a full-width six-cell strip under the row on a phone (46px
targets) and a group of 40px squares beside it on a desktop, with no
duplicate template branches. Icons move to a sprite in icons.html: cards
are swapped in by htmx and reference the page's symbols, so a row no
longer carries a screenful of inline SVG paths.

[hidden] gets a display:none override because every disclosure panel is
now a flex container and display beats the attribute. filter.js grows an
.open class alongside hidden so the strip can show which cell the open
panel belongs to.

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

backend/templates/app.html

@@ -6,20 +6,31 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <title>mangaBookmark</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css">
   <script src="/static/htmx.min.js" defer></script>
   <script src="/static/filter.js" defer></script>
 </head>
 <body>
+{{template "icons" .}}
+<div class="sheet">
   <header class="topbar">
-    <h1>mangaBookmark</h1>
+    <h1 class="brand">manga<em>Bookmark</em></h1>
     <form method="post" action="/logout">
       <button type="submit" class="ghost">Log out</button>
     </form>
   </header>
 
-  <input id="search" class="search" type="search" placeholder="Search titles…"
-         autocomplete="off" aria-label="Search titles">
+  {{/* Search sits above the tabs on a phone and folds into the tab row on a
+       wider screen — one flex container, order swapped in CSS. */}}
+  <div class="chrome">
+  <div class="searchbar">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-search"/></svg>
+    <input id="search" class="search" type="search" placeholder="Find a title"
+           autocomplete="off" aria-label="Search titles">
+  </div>
 
   <nav class="tabs" role="tablist">
     <a role="tab" href="/?tab=all" class="{{if eq .Tab "all"}}active{{end}}"
@@ -27,7 +38,8 @@
        hx-push-url="/?tab=all" hx-on::after-request="setActiveTab(this)">All</a>
     <a role="tab" href="/?tab=new" class="tab-new {{if eq .Tab "new"}}active{{end}}"
        hx-get="/ui/list?tab=new" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=new" hx-on::after-request="setActiveTab(this)">Updated</a>
+       hx-push-url="/?tab=new" hx-on::after-request="setActiveTab(this)">Updated{{if .NewCount}}
+      <span class="count">{{.NewCount}}</span>{{end}}</a>
     <a role="tab" href="/?tab=fav" class="{{if eq .Tab "fav"}}active{{end}}"
        hx-get="/ui/list?tab=fav" hx-target="#list" hx-swap="innerHTML"
        hx-push-url="/?tab=fav" hx-on::after-request="setActiveTab(this)">Favourites</a>
@@ -38,20 +50,23 @@
        hx-get="/ui/list?tab=finished" hx-target="#list" hx-swap="innerHTML"
        hx-push-url="/?tab=finished" hx-on::after-request="setActiveTab(this)">Finished</a>
   </nav>
+  </div>
 
   {{if .Recent}}
   <section class="recent">
     <h2>Continue reading</h2>
     <div class="recent-strip">
       {{range .Recent}}
-      <a class="recent-card" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">
+      <a class="recent-card {{if .HasNewChapter}}is-new{{end}}" href="{{.ContinueURL}}"
+         target="_blank" rel="noopener noreferrer">
         <span class="recent-cover">
           {{if .Cover}}<img src="{{.Cover}}" alt="" loading="lazy">
-          {{else}}<span class="cover-blank" aria-hidden="true">{{.Initial}}</span>{{end}}
-          {{if .HasNewChapter}}<span class="new-ribbon new-ribbon-sm">New</span>{{end}}
+          {{else}}<span class="monogram" aria-hidden="true">{{.Initial}}</span>{{end}}
+          {{if .HasNewChapter}}<span class="foot-rule"></span>
+          {{else if .Favorite}}<span class="foot-rule brass"></span>{{end}}
         </span>
         <span class="recent-title">{{.Title}}</span>
-        <span class="recent-chapter">Ch {{.LastChapter}}</span>
+        <span class="recent-chapter">Ch {{.LastChapter}}{{if .HasNewChapter}} · New{{end}}</span>
       </a>
       {{end}}
     </div>
@@ -61,6 +76,7 @@
   <main id="list" class="list">
     {{template "list" .}}
   </main>
+</div>
 </body>
 </html>
 {{end}}