Add user registration/login, persistent likes, category hiding, and contact email

- User auth: register (nickname + password + email), login, logout with PHP sessions
- Persistent likes: logged-in users' likes saved to users.json, anonymous via session
- "Tykkäämäni" filter button next to search — filter liked posts, combinable with search
- Hide empty/sparse categories from filter buttons until posts exist
- Replace broken contact form with simple mailto link (info@tykkaa.fi)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style.css

@@ -324,30 +324,18 @@ nav a:hover { color: #fff; }
 .contact h2 { font-size: 1.9rem; color: var(--warm-brown); margin-bottom: 8px; }
 .contact > .container > p { color: var(--text-light); margin-bottom: 28px; }
 
-.contact-form {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  max-width: 520px;
-  margin: 0 auto;
-}
-
-.contact-form input,
-.contact-form textarea {
-  padding: 12px 18px;
-  border: 2px solid var(--border);
-  border-radius: 10px;
-  font-size: 1rem;
+.contact-email {
+  font-size: 1.3rem;
   font-family: 'Georgia', serif;
-  background: #fff;
-  color: var(--text);
-  outline: none;
-  transition: border-color 0.2s;
-  resize: vertical;
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.2s;
 }
 
-.contact-form input:focus,
-.contact-form textarea:focus { border-color: var(--accent); }
+.contact-email:hover {
+  color: #a0522d;
+  text-decoration: underline;
+}
 
 /* =====================
    FOOTER
@@ -770,6 +758,120 @@ footer {
   font-weight: bold;
 }
 
+/* =====================
+   USER AREA (header)
+   ===================== */
+.user-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 8px 0;
+  flex-wrap: wrap;
+}
+
+.user-greeting {
+  color: #e8c9a8;
+  font-family: 'Arial', sans-serif;
+  font-size: 0.85rem;
+}
+
+.user-greeting strong { color: #fff; }
+
+.user-btn {
+  padding: 6px 16px;
+  border: 2px solid rgba(255,255,255,0.4);
+  border-radius: 20px;
+  background: transparent;
+  color: #f5dfc0;
+  font-family: 'Arial', sans-serif;
+  font-size: 0.82rem;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.user-btn:hover {
+  background: rgba(255,255,255,0.15);
+  color: #fff;
+  border-color: #fff;
+}
+
+.register-btn {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.register-btn:hover {
+  background: var(--accent-dark);
+  border-color: var(--accent-dark);
+}
+
+/* =====================
+   SEARCH ROW
+   ===================== */
+.search-row {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  max-width: 600px;
+  align-items: center;
+}
+
+.search-row #search { flex: 1; }
+
+.likes-filter-btn {
+  padding: 8px 18px;
+  border: 2px solid var(--border);
+  border-radius: 20px;
+  background: #fff;
+  color: #c06080;
+  font-family: 'Arial', sans-serif;
+  font-size: 0.85rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.likes-filter-btn:hover {
+  background: #fde8f0;
+  border-color: #e07090;
+}
+
+.likes-filter-btn.active {
+  background: #fde8f0;
+  border-color: #e07090;
+  color: #c03060;
+}
+
+/* =====================
+   AUTH MODAL
+   ===================== */
+.auth-error {
+  color: #c04040;
+  font-size: 0.9rem;
+  margin-top: 8px;
+  display: none;
+}
+
+.auth-switch {
+  text-align: center;
+  margin-top: 14px;
+  font-family: 'Arial', sans-serif;
+  font-size: 0.85rem;
+  color: var(--accent);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.auth-switch:hover {
+  color: var(--accent-dark);
+  text-decoration: underline;
+}
+
 /* =====================
    RESPONSIVE
    ===================== */
@@ -779,4 +881,7 @@ footer {
   .recipe-grid { grid-template-columns: 1fr; }
   nav { gap: 16px; }
   .form-row { grid-template-columns: 1fr; }
+  .search-row { flex-direction: column; }
+  .likes-filter-btn { width: 100%; }
+  .user-area { font-size: 0.78rem; }
 }