feat: base UI shell with themes, auth pages, profile, and role navigation (phase 4)

- embedded Go templates + vanilla ES-module JS + hand-written CSS, no build step
- exact §10 beige light / dark design tokens, square edges (radius 2px),
  system font stack, visible focus rings
- theme toggle persisted to localStorage and the user profile
- login/register/change-password pages wired to the auth API
- profile page: avatar upload (image-sniffed, old file cleanup), bio,
  contacts, arbitrary extra key/value fields, optimistic-concurrency 409
- role-based top navigation with placeholders for later-phase areas
- GET /files/{id} with scope-based access (session) or signed token (§5.1)
- security headers incl. CSP without unsafe-inline scripts

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/templates/profile.html

@@ -0,0 +1,78 @@
+{{define "content"}}
+<h1>Your profile</h1>
+<div class="error-box" id="error" role="alert"></div>
+<div class="ok-box" id="ok" role="status"></div>
+
+<div class="card">
+  <h2>Avatar</h2>
+  <div class="spread">
+    <span id="avatar-preview">
+      {{if .User.AvatarFileID}}
+        <img class="avatar large" src="/files/{{.User.AvatarFileID}}" alt="Current avatar">
+      {{else}}
+        <span class="avatar large" aria-hidden="true">{{initials .User.Name}}</span>
+      {{end}}
+    </span>
+    <div>
+      <label for="avatar-file">Upload new avatar (image)</label>
+      <input type="file" id="avatar-file" accept="image/*">
+    </div>
+  </div>
+</div>
+
+<form id="profile-form" class="card" data-version="{{.User.Version}}">
+  <h2>Basics</h2>
+  <div class="field">
+    <label for="p-name">Name</label>
+    <input type="text" id="p-name" value="{{.User.Name}}" required>
+  </div>
+  <div class="field">
+    <label for="p-bio">Bio</label>
+    <textarea id="p-bio">{{.User.Bio}}</textarea>
+  </div>
+
+  <h2>Contact</h2>
+  <div class="row">
+    <div class="field">
+      <label for="p-phone">Phone</label>
+      <input type="text" id="p-phone" value="{{.User.Contact.Phone}}" autocomplete="tel">
+    </div>
+    <div class="field">
+      <label for="p-location">Location</label>
+      <input type="text" id="p-location" value="{{.User.Contact.Location}}">
+    </div>
+  </div>
+  <div class="field">
+    <label for="p-links">Links (one per line)</label>
+    <textarea id="p-links">{{range .User.Contact.Links}}{{.}}
+{{end}}</textarea>
+  </div>
+
+  <h2>Additional fields</h2>
+  <p class="hint">Arbitrary key/value details shown on your profile card.</p>
+  <div id="extra-rows"></div>
+  <button class="btn small" type="button" id="extra-add">+ Add field</button>
+
+  <h2 class="mt">Appearance</h2>
+  <div class="field">
+    <label for="p-theme">Theme</label>
+    <select id="p-theme">
+      <option value="light" {{if eq .User.Settings.Theme "light"}}selected{{end}}>Light (beige)</option>
+      <option value="dark" {{if eq .User.Settings.Theme "dark"}}selected{{end}}>Dark</option>
+    </select>
+  </div>
+
+  <button class="btn primary" type="submit">Save profile</button>
+</form>
+
+<div class="card">
+  <h2>Security</h2>
+  {{if .HasLocalAuth}}
+  <p><a class="btn" href="/change-password">Change password</a></p>
+  {{else}}
+  <p class="muted">This account signs in via SSO and has no local password.</p>
+  {{end}}
+  <p><button class="btn danger" type="button" id="logout-all">Log out everywhere</button></p>
+  <p class="hint">Revokes every active session for your account, including this one.</p>
+</div>
+{{end}}