Index: src/views/pages/account.ejs
===================================================================
--- src/views/pages/account.ejs	(revision 2165b6d3d57ceaa8b5d1f70491868482149470cf)
+++ src/views/pages/account.ejs	(revision 7bc636b391c66ac399c33e54f7173a022c6a3cbd)
@@ -2,8 +2,8 @@
 
   <header class="ax-header">
-    <a href="/" class="ax-back" aria-label="<%= t('acct.back_home') %>">←</a>
+    <a href="/" class="ax-back" aria-label="Terug naar home">←</a>
     <div>
-      <h1><%= t('acct.title') %></h1>
-      <p class="ax-tagline"><%= t('acct.subtitle') %></p>
+      <h1>Account</h1>
+      <p class="ax-tagline">Profiel en wachtwoord.</p>
     </div>
   </header>
@@ -12,165 +12,80 @@
   <% if (error)   { %><div class="ax-flash ax-flash-err"><%= error %></div><% } %>
 
-  <% if (isViewer) { %>
-    <div class="ax-viewer-note" role="note">
-      <span class="ax-viewer-ico" aria-hidden="true">👁️</span>
-      <div>
-        <strong><%= t('acct.viewer_mode') %></strong>
-        <span><%= t('acct.viewer_note') %></span>
-      </div>
-    </div>
-  <% } %>
-
   <%# ── PROFILE ────────────────────────────────────────────── %>
   <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.profile') %></div>
+    <div class="ax-card-title">Profiel</div>
 
     <div class="ax-profile-id">
-      <span class="ax-profile-avatar ax-profile-avatar-static">
-        <% var _av = (typeof siteAvatar !== 'undefined' ? siteAvatar : null); %>
-        <% if (_av) { %>
-          <img src="<%= avatar(_av, 128) %>" alt="">
+      <div class="ax-profile-avatar">
+        <% if (account.avatar_url) { %>
+          <img src="<%= account.avatar_url %>" alt="">
         <% } else { %>
           <span><%= account.username.charAt(0).toUpperCase() %></span>
         <% } %>
-      </span>
+      </div>
       <div class="ax-profile-meta">
         <div class="ax-profile-name"><%= account.username %></div>
         <div class="ax-profile-role"><%= account.role %> · <%= account.email %></div>
         <% if (account.created_at) { %>
-          <div class="ax-profile-joined"><%= t('acct.member_since') %> <%= formatDate(account.created_at) %></div>
+          <div class="ax-profile-joined">Lid sinds <%= formatDate(account.created_at) %></div>
         <% } %>
-        <% if (canMutate) { %>
-          <div class="ax-profile-joined"><%- t('acct.photo_site_hint') %></div>
-        <% } %>
       </div>
     </div>
 
-    <% if (canMutate) { %>
-      <form action="/account/profile" method="post" class="ax-form ax-form-bio">
-        <label class="ax-field">
-          <span><%= t('acct.username') %></span>
-          <input type="text" name="username" value="<%= account.username %>" minlength="2" maxlength="30" pattern="[A-Za-z0-9_\-]{2,30}" autocomplete="username">
-        </label>
-        <label class="ax-field">
-          <span><%= t('acct.email') %></span>
-          <input type="email" name="email" value="<%= account.email || '' %>" maxlength="254" autocomplete="email" placeholder="<%= t('acct.email_ph') %>">
-        </label>
-        <label class="ax-field">
-          <span><%= t('acct.bio') %></span>
-          <textarea name="bio" rows="3" maxlength="500" placeholder="<%= t('acct.bio_ph') %>"><%= account.bio || '' %></textarea>
-        </label>
-        <div class="ax-form-actions">
-          <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.save') %></button>
-        </div>
-      </form>
-    <% } else { %>
-      <div class="ax-form ax-form-bio">
-        <label class="ax-field">
-          <span><%= t('acct.bio') %></span>
-          <textarea rows="3" disabled placeholder="<%= t('acct.bio_empty') %>"><%= account.bio || '' %></textarea>
-        </label>
-      </div>
-    <% } %>
-  </section>
-
-  <%# ── PERSONAL LANGUAGE ──────────────────────────────────── %>
-  <% if (canMutate) { %>
-  <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.lang_label') %></div>
-    <form action="/account/lang" method="post" class="ax-form">
-      <label class="ax-field">
-        <span><%= t('acct.lang_label') %> <small><%= t('acct.lang_hint') %></small></span>
-        <select name="lang">
-          <% langs.forEach(function(l){ var sel = (account && account.lang) ? (account.lang === l.code) : l.active; %>
-            <option value="<%= l.code %>"<%= sel ? ' selected' : '' %>><%= l.name %></option>
-          <% }); %>
-        </select>
+    <form action="/account/avatar" method="post" enctype="multipart/form-data" class="ax-form">
+      <label class="ax-field ax-file">
+        <span>Avatar uploaden <small>(jpg/png/webp/gif, max 5 MB)</small></span>
+        <span class="ax-file-control">
+          <span class="ax-btn ax-btn-secondary ax-file-btn">📷 Kies bestand</span>
+          <span class="ax-file-name" data-empty>Geen bestand gekozen</span>
+          <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" required>
+        </span>
       </label>
       <div class="ax-form-actions">
-        <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.save') %></button>
+        <button type="submit" class="ax-btn ax-btn-primary">⬆ Uploaden</button>
+        <% if (account.avatar_url) { %>
+          <%# Separate <form> block kept inline since it submits to a different endpoint. %>
+          <button type="button" class="ax-btn" onclick="document.getElementById('avatar-remove-form').submit()">Avatar verwijderen</button>
+        <% } %>
+      </div>
+    </form>
+    <% if (account.avatar_url) { %>
+      <form action="/account/avatar/remove" method="post" id="avatar-remove-form" hidden></form>
+    <% } %>
+
+    <form action="/account/profile" method="post" class="ax-form ax-form-bio">
+      <label class="ax-field">
+        <span>Bio</span>
+        <textarea name="bio" rows="3" maxlength="500" placeholder="Een korte regel over jezelf"><%= account.bio || '' %></textarea>
+      </label>
+      <div class="ax-form-actions">
+        <button type="submit" class="ax-btn ax-btn-primary">💾 Bio opslaan</button>
       </div>
     </form>
   </section>
-  <% } %>
-
-  <%# ── SITE (owner may update their site name) ─────────── %>
-  <% if (typeof editableSite !== 'undefined' && editableSite && canMutate) { %>
+
+  <%# ── PASSWORD ──────────────────────────────────────────── %>
   <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.site') %></div>
-    <form action="/account/site" method="post" class="ax-form">
-      <label class="ax-field">
-        <span><%= t('acct.site_name') %> <small><%= t('acct.site_name_hint') %></small></span>
-        <input type="text" name="site_title" value="<%= editableSite.title || '' %>" maxlength="200" required>
-      </label>
-      <label class="ax-field">
-        <span><%= t('acct.tagline') %> <small><%= t('acct.tagline_hint') %></small></span>
-        <input type="text" name="site_tagline" value="<%= editableSite.tagline || '' %>" maxlength="200">
-      </label>
-      <div class="ax-form-actions">
-        <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.site_save') %></button>
-      </div>
-    </form>
-  </section>
-  <% } %>
-
-  <%# ── PASSWORD ──────────────────────────────────────────── %>
-  <%# In viewer mode there is no password section (nothing to change). %>
-  <%# ── CONNECTED APPS (OAuth C2S) ─────────────────────────── %>
-  <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.oauth_apps') %></div>
-    <p class="ax-tagline" style="margin:0 0 .6rem"><%= t('acct.oauth_hint') %></p>
-    <% if (!authorizations || !authorizations.length) { %>
-      <p class="ax-oauth-empty"><%= t('acct.oauth_none') %></p>
-    <% } else { %>
-      <ul class="ax-oauth-list">
-        <% authorizations.forEach(function(a){ %>
-          <li class="ax-oauth-item">
-            <div class="ax-oauth-info">
-              <strong><%= a.client_name || t('acct.oauth_unknown_app') %></strong>
-              <span class="ax-oauth-meta">@<%= a.site_slug %> · <%= a.scope || 'c2s' %> · <%= t('acct.oauth_last_used') %> <%= a.last_used_at ? formatDate(a.last_used_at) : t('acct.oauth_never') %></span>
-            </div>
-            <form action="/account/oauth/revoke" method="post">
-              <input type="hidden" name="token_hash" value="<%= a.token_hash %>">
-              <button type="submit" class="ax-btn ax-btn-danger"><%= t('acct.oauth_revoke') %></button>
-            </form>
-          </li>
-        <% }); %>
-      </ul>
-    <% } %>
-  </section>
-
-  <% if (canMutate) { %>
-  <% if (hasPassword) { %>
-  <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.password_change') %></div>
+    <div class="ax-card-title">Wachtwoord wijzigen</div>
     <form action="/account/password" method="post" class="ax-form">
       <label class="ax-field">
-        <span><%= t('acct.password_current') %></span>
+        <span>Huidig wachtwoord</span>
         <input type="password" name="current" required autocomplete="current-password">
       </label>
       <div class="ax-row ax-row-2">
         <label class="ax-field">
-          <span><%= t('acct.password_new') %> <small><%= t('acct.password_min') %></small></span>
+          <span>Nieuw wachtwoord <small>(min 8 tekens)</small></span>
           <input type="password" name="new_password" required minlength="8" autocomplete="new-password">
         </label>
         <label class="ax-field">
-          <span><%= t('acct.password_confirm') %></span>
+          <span>Bevestig nieuw wachtwoord</span>
           <input type="password" name="confirm" required minlength="8" autocomplete="new-password">
         </label>
       </div>
       <div class="ax-form-actions">
-        <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.password_change') %></button>
+        <button type="submit" class="ax-btn ax-btn-primary">🔒 Wachtwoord wijzigen</button>
       </div>
     </form>
   </section>
-
-  <% } else { %>
-  <section class="ax-card">
-    <div class="ax-card-title"><%= t('acct.login') %></div>
-    <p class="ax-tagline" style="margin:0"><%= t('acct.login_google_only', { email: account.email }) %></p>
-  </section>
-  <% } %>
-  <% } %>
 
 </div>
@@ -193,19 +108,4 @@
 .ax-flash-ok  { background: rgba(40,160,90,.15); color: #2a9d5e; border: 1px solid rgba(40,160,90,.3); }
 .ax-flash-err { background: rgba(200,60,60,.15); color: #c33; border: 1px solid rgba(200,60,60,.3); }
-
-/* ─── Kijker-modus notice ──────────────────────────────────────── */
-.ax-viewer-note {
-  display: flex; align-items: flex-start; gap: 0.75rem;
-  padding: 0.85rem 1rem; margin-bottom: 1rem;
-  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
-  border-left: 3px solid var(--accent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
-}
-.ax-viewer-ico { font-size: 1.1rem; line-height: 1.4; }
-.ax-viewer-note strong { display: block; font-size: 0.92rem; }
-.ax-viewer-note span { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }
-.ax-profile-avatar-static { flex-shrink: 0; }
-.ax-form-bio textarea:disabled { opacity: 0.7; cursor: default; }
 
 /* ─── Cards ────────────────────────────────────────────────────── */
@@ -299,6 +199,6 @@
 .ax-btn:hover { border-color: var(--accent); }
 .ax-btn-secondary { background: var(--paper-2); }
-.ax-btn-primary, a.ax-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
-.ax-btn-primary:hover, a.ax-btn-primary:hover { opacity: 0.92; border-color: var(--accent); color: #fff; }
+.ax-btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
+.ax-btn-primary:hover { opacity: 0.92; border-color: var(--accent); }
 
 /* ─── Profile ID row ──────────────────────────────────────────── */
@@ -309,11 +209,6 @@
   margin-bottom: 1rem;
 }
-.ax-avatar-form { margin: 0; flex-shrink: 0; }
-.ax-avatar-wrap {
-  position: relative; display: block;
-  width: 84px; height: 84px; cursor: pointer;
-}
 .ax-profile-avatar {
-  width: 84px; height: 84px;
+  width: 64px; height: 64px;
   border-radius: 50%;
   overflow: hidden;
@@ -322,26 +217,8 @@
   display: inline-flex; align-items: center; justify-content: center;
   font-family: var(--font-display, serif);
-  font-size: 1.7rem; font-weight: 600;
-  border: 1px solid var(--rule);
-  transition: border-color 120ms;
-}
-.ax-avatar-wrap:hover .ax-profile-avatar { border-color: var(--accent); }
+  font-size: 1.6rem; font-weight: 600;
+  flex-shrink: 0;
+}
 .ax-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.ax-avatar-edit {
-  position: absolute; right: -2px; bottom: -2px;
-  width: 28px; height: 28px; border-radius: 50%;
-  background: var(--accent); color: #fff;
-  display: flex; align-items: center; justify-content: center;
-  border: 3px solid var(--paper);
-  transition: transform 120ms;
-}
-.ax-avatar-wrap:hover .ax-avatar-edit { transform: scale(1.08); }
-.ax-avatar-remove { margin-top: 0.45rem; }
-.ax-linkbtn {
-  background: none; border: 0; padding: 0; cursor: pointer;
-  color: var(--ink-muted, var(--ink-soft)); font-size: 0.8rem; text-decoration: underline;
-  font-family: var(--font-ui, system-ui), sans-serif;
-}
-.ax-linkbtn:hover { color: #c33; }
 .ax-profile-meta { min-width: 0; }
 .ax-profile-name { font-weight: 600; font-size: 1.1rem; }
@@ -355,13 +232,3 @@
   .ax-profile-id { flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; }
 }
-
-.ax-oauth-empty { margin: 0; color: var(--ink-soft, #888); }
-.ax-oauth-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
-.ax-oauth-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-radius: 12px; background: var(--paper-2, rgba(0,0,0,.04)); }
-.ax-oauth-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
-.ax-oauth-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ax-oauth-meta { font-size: .8rem; color: var(--ink-soft, #888); }
-@media (max-width: 480px) {
-  .ax-oauth-item { flex-direction: column; align-items: stretch; }
-}
 </style>