Apply the theme: tokens, Oswald, song cards, toasts

The theme handoff encoded as CSS custom properties rather than a Tailwind
config, since there is no Tailwind here. Palette, spacing, radii, shadows and
motion follow it as written; docs/theme.md lists what differs and why.

- Oswald vendored as a 21KB variable woff2, latin subset, no CDN. Its phantom
  weight 900 resolved to 700 — loading a weight you don't have is what made
  the brand render differently per platform
- color-scheme: dark makes the native audio element fit the palette, which
  was the handoff's complaint about it
- Songs are text cards rather than artwork tiles, because there is no
  artwork. The unreviewed state keeps its red-brown border and gains a badge,
  so it is never carried by colour alone
- Nav is the three-column grid; the mobile menu is <details>, no JS
- Flash messages became bottom-right toasts

Favicon carried over from the Nuxt project.

templates/admin.html

@@ -1,9 +1,12 @@
 {{define "content"}}
 <h1>Ylläpito</h1>
 
-<section>
-  <h2>Kutsut</h2>
-  <form method="post" action="/admin/invites"><button type="submit">Luo kutsukoodi</button></form>
+<section class="adminsection">
+  <header>
+    <h2>Kutsut</h2>
+    <form method="post" action="/admin/invites"><button type="submit">Luo kutsukoodi</button></form>
+  </header>
+  <div class="body">
   <table>
     <thead><tr><th>Kutsulinkki</th><th>Tila</th><th>Luotu</th></tr></thead>
     <tbody>
@@ -11,12 +14,12 @@
         <tr>
           <td>
             {{if .IsValid}}
-              <a href="{{.Link}}" class="invite">{{.Link}}</a>
+              <a href="{{.Link}}">{{.Link}}</a>
             {{else}}
               <code class="muted">{{.Code}}</code>
             {{end}}
           </td>
-          <td>{{if .IsValid}}käyttämätön{{else}}käytetty{{end}}</td>
+          <td class="nowrap"><span class="dot {{if .IsValid}}on{{else}}off{{end}}"></span> {{if .IsValid}}käyttämätön{{else}}käytetty{{end}}</td>
           <td>{{fidate .CreatedAt}}</td>
         </tr>
       {{else}}
@@ -24,26 +27,28 @@
       {{end}}
     </tbody>
   </table>
-  <p class="muted">Lähetä linkki kaverille — se avaa liittymislomakkeen koodi valmiiksi täytettynä.</p>
+  <p class="muted small">Lähetä linkki kaverille — se avaa liittymislomakkeen koodi valmiiksi täytettynä.</p>
+  </div>
 </section>
 
-<section>
-  <h2>Jäsenet</h2>
+<section class="adminsection">
+  <header><h2>Jäsenet</h2></header>
+  <div class="body">
   <table>
     <thead><tr><th>Nimi</th><th>Sähköposti</th><th>Liittyi</th><th>Toiminnot</th></tr></thead>
     <tbody>
       {{range .Data.Members}}
         <tr{{if .Banned}} class="banned"{{end}}>
-          <td>{{.Name}}{{if .Banned}} <span class="tag">estetty</span>{{end}}</td>
+          <td>{{.Name}}{{if .Banned}} <span class="badge pending">estetty</span>{{end}}</td>
           <td>{{.Email}}</td>
           <td>{{fidate .CreatedAt}}</td>
           <td class="actions">
             <form method="post" action="/admin/users/{{.ID}}/ban">
-              <button type="submit">{{if .Banned}}Poista esto{{else}}Estä{{end}}</button>
+              <button type="submit" class="ghost">{{if .Banned}}Poista esto{{else}}Estä{{end}}</button>
             </form>
             <form method="post" action="/admin/users/{{.ID}}/password">
               <input type="password" name="password" placeholder="uusi salasana" required>
-              <button type="submit">Vaihda salasana</button>
+              <button type="submit" class="ghost">Vaihda salasana</button>
             </form>
           </td>
         </tr>
@@ -52,5 +57,6 @@
       {{end}}
     </tbody>
   </table>
+  </div>
 </section>
 {{end}}