Polish typography and responsive admin navigation

app/static/css/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Roboto+Condensed:wght@400;500;700&display=swap');
+
 :root {
     --bg: #050505;
     --surface: #101010;
@@ -16,12 +18,7 @@
 body {
     margin: 0;
     min-height: 100vh;
-    font-family:
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        sans-serif;
+    font-family: "Roboto Condensed", "Nimbus Sans Narrow", system-ui, sans-serif;
 
     background:
         linear-gradient(rgba(4, 4, 6, .58), rgba(4, 4, 6, .72)),
@@ -74,6 +71,7 @@ header {
 }
 
 .user-menu { position: relative; margin-left: auto; }
+.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
 .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); }
@@ -232,6 +230,10 @@ main {
     .concert-grid {
         grid-template-columns: 1fr;
     }
+
+    .header-actions { width: 100%; justify-content: flex-start; }
+    .header-actions > a { flex: 1 1 auto; text-align: center; }
+    .header-actions .user-menu { margin-left: 0; }
 }
 form {
     max-width: 650px;
@@ -393,9 +395,14 @@ body::after {
 
 header, main, .container { position: relative; z-index: 1; }
 
-h1, h2, h3, .logo, .button, button, .page-title h1 {
-    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
-    letter-spacing: .045em;
+h1, h2, h3, .logo, .page-title h1 {
+    font-family: "Metal Mania", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    letter-spacing: .055em;
+}
+
+.button, button {
+    font-family: "Roboto Condensed", "Nimbus Sans Narrow", system-ui, sans-serif;
+    letter-spacing: .06em;
 }
 
 h1, .page-title h1 {