Add social features and harden beta release

app/static/style.css

@@ -93,6 +93,8 @@ a {
     width: 100%;
     background: #0a0d12;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
     padding: 25px;
 }
@@ -363,3 +365,61 @@ a {
     }
 
 }
+
+/* Dark metal theme */
+body {
+    background: radial-gradient(circle at 50% -15%, #320909 0, transparent 34rem), #050505;
+    color: #f5f5f4;
+}
+
+.concert-detail,
+.comment,
+.attendance-option {
+    background-color: #101010;
+    border-color: #3a3030;
+}
+
+.info-item,
+.attendance-section,
+.comments-section,
+.coming-soon {
+    background-color: #090909;
+    border-color: #3a3030;
+}
+
+.concert-content h1,
+.description h2,
+.attendance-section h2,
+.comments-section h2 {
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    letter-spacing: .04em;
+}
+
+.concert-action-edit,
+.ticket-button,
+.attendance-option:hover,
+.attendance-option.is-selected {
+    background: #7f1d1d;
+    border-color: #dc2626;
+}
+
+.concert-action:hover,
+.concert-action-edit:hover,
+.ticket-button:hover {
+    background: #991b1b;
+    border-color: #ef4444;
+}
+
+.attendance-list summary { color: #ef4444; }
+
+.user-menu { position: relative; margin-left: auto; }
+.user-menu summary { padding: 9px 12px; border: 1px solid #3a3030; 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: #dc2626; background: #1a1111; }
+.user-menu-panel { position: absolute; top: calc(100% + 7px); right: 0; z-index: 100; min-width: 170px; padding: 7px; background: #090909; border: 1px solid #3a3030; 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: #f5f5f4; 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: #1a1111; color: #f87171; }
+.user-menu-panel form { 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; }