Add social features and harden beta release

app/static/css/style.css

@@ -1,12 +1,12 @@
 :root {
-    --bg: #0b0f19;
-    --surface: #151b29;
-    --surface-hover: #1b2333;
-    --border: #293449;
-    --text: #f3f4f6;
-    --muted: #9ca3af;
-    --accent: #8b5cf6;
-    --accent-hover: #7c3aed;
+    --bg: #050505;
+    --surface: #101010;
+    --surface-hover: #1a1111;
+    --border: #3a3030;
+    --text: #f5f5f4;
+    --muted: #a8a29e;
+    --accent: #b91c1c;
+    --accent-hover: #dc2626;
 }
 
 * {
@@ -23,7 +23,7 @@ body {
         "Segoe UI",
         sans-serif;
 
-    background: var(--bg);
+    background: radial-gradient(circle at 50% -15%, #320909 0, transparent 32rem), var(--bg);
     color: var(--text);
 }
 
@@ -33,7 +33,7 @@ a {
 }
 
 header {
-    background: rgba(21, 27, 41, 0.95);
+    background: rgba(8, 8, 8, 0.96);
     border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
@@ -54,12 +54,27 @@ header {
 .logo {
     font-size: 1.4rem;
     font-weight: 800;
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    letter-spacing: .06em;
+    text-transform: uppercase;
 }
 
 .logo span {
     color: var(--accent);
 }
 
+.user-menu { position: relative; margin-left: auto; }
+.user-menu summary { padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; list-style: none; font-weight: 700; }
+.user-menu summary::-webkit-details-marker { display: none; }
+.user-menu[open] summary { border-color: var(--accent); background: var(--surface-hover); }
+.user-menu-panel { position: absolute; top: calc(100% + 7px); right: 0; z-index: 100; min-width: 170px; padding: 7px; background: #090909; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 35px rgba(0,0,0,.6); }
+.user-menu-panel a, .user-menu-panel button { display: block; width: 100%; padding: 10px 11px; color: var(--text); background: transparent; border: 0; border-radius: 7px; text-align: left; font: inherit; cursor: pointer; }
+.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--surface-hover); color: #f87171; }
+.user-menu-panel form { max-width: none; margin: 0; }
+.metal-notification { position: relative; display: inline-block; margin-left: 5px; color: #ef4444; filter: saturate(1.5); }
+.metal-notification b { position: absolute; top: -7px; right: -9px; min-width: 16px; padding: 1px 4px; color: #fff; background: #b91c1c; border-radius: 999px; font: 700 .65rem/1.3 system-ui, sans-serif; text-align: center; }
+.menu-count { float: right; min-width: 22px; padding: 1px 6px; color: #fff; background: #b91c1c; border-radius: 999px; text-align: center; }
+
 main {
     max-width: 1100px;
     margin: 0 auto;
@@ -73,6 +88,8 @@ main {
 .page-title h1 {
     margin: 0;
     font-size: 2rem;
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    letter-spacing: .04em;
 }
 
 .page-title p {