feat(ui): content-first shelf redesign — responsive cover grid, hover overlays, format badges, skeletons, sticky blurred top bar, brand login, SVG icon set, animated toasts

frontend/src/components/Toaster.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
+import { IconAlert, IconCheck } from "./icons";
 
 type Toast = { id: number; kind: "ok" | "err"; text: ReactNode };
 
@@ -31,10 +32,13 @@ export function Toaster() {
         <div
           key={t.id}
           role="status"
-          className={`max-w-sm rounded-lg px-4 py-2 text-sm shadow-lg ring-1 ring-white/10 ${
-            t.kind === "ok" ? "bg-emerald-900 text-emerald-100" : "bg-red-900 text-red-100"
+          className={`fx-rise flex max-w-sm items-center gap-2 rounded-xl px-4 py-2.5 text-sm shadow-xl ring-1 backdrop-blur-md ${
+            t.kind === "ok"
+              ? "bg-emerald-950/90 text-emerald-100 ring-emerald-500/25"
+              : "bg-red-950/90 text-red-100 ring-red-500/30"
           }`}
         >
+          {t.kind === "ok" ? <IconCheck className="size-4 shrink-0 text-emerald-400" /> : <IconAlert className="size-4 shrink-0 text-red-400" />}
           {t.text}
         </div>
       ))}