@arcblock/did-connect-service 4.0.6 → 4.0.7

package/dist/assets/admin-extra.7ca9c16b.js

@@ -0,0 +1,2529 @@
+
+var membersPage = 1;
+var membersPageSize = 20;
+var memberSearchTimeout = null;
+var currentMembersList = [];
+var selectedMember = null;
+var __membersAggregated = false;
+// Sort state: empty string = default (server decides + self-first on client).
+// Three-state click cycle: (none) → desc → asc → (none).
+// Persisted in location.search as sortBy/sortOrder so it survives refresh + share.
+var membersSortBy = "";
+var membersSortOrder = "";
+var MEMBERS_SORT_VALID = ["name", "role", "status", "source", "joined"];
+
+/** Populate module sort state from the current URL query string. Idempotent. */
+function readMembersSortFromURL() {
+  membersSortBy = "";
+  membersSortOrder = "";
+  var params = new URLSearchParams(location.search);
+  var by = params.get("sortBy");
+  var order = params.get("sortOrder");
+  if (by && MEMBERS_SORT_VALID.indexOf(by) >= 0) {
+    membersSortBy = by;
+    membersSortOrder = (order === "asc" || order === "desc") ? order : "desc";
+  }
+}
+
+/** Write current sort state back to location.search without reloading. */
+function writeMembersSortToURL() {
+  var params = new URLSearchParams(location.search);
+  if (membersSortBy) {
+    params.set("sortBy", membersSortBy);
+    params.set("sortOrder", membersSortOrder || "desc");
+  } else {
+    params.delete("sortBy");
+    params.delete("sortOrder");
+  }
+  var qs = params.toString();
+  var newUrl = location.pathname + (qs ? "?" + qs : "") + location.hash;
+  history.replaceState(null, "", newUrl);
+}
+
+/** Cycle sort state for a column key and reload. */
+function toggleSort(key) {
+  if (membersSortBy !== key) {
+    membersSortBy = key;
+    membersSortOrder = "desc";
+  } else if (membersSortOrder === "desc") {
+    membersSortOrder = "asc";
+  } else {
+    // Third click — back to default.
+    membersSortBy = "";
+    membersSortOrder = "";
+  }
+  writeMembersSortToURL();
+  loadMembers(1);
+}
+
+/** Render a <th> with click-to-sort behavior. */
+function sortableTh(key, label, extraClass) {
+  var isActive = membersSortBy === key;
+  var arrow;
+  if (isActive) {
+    arrow = membersSortOrder === "asc"
+      ? '<span class="sort-arrow sort-arrow-active">\u2191</span>'
+      : '<span class="sort-arrow sort-arrow-active">\u2193</span>';
+  } else {
+    arrow = '<span class="sort-arrow">\u2195</span>';
+  }
+  var cls = "sortable" + (isActive ? " sort-active" : "") + (extraClass ? " " + extraClass : "");
+  return '<th class="' + cls + '" onclick="toggleSort(\'' + key + '\')">' + label + arrow + '</th>';
+}
+
+function providerLabel(sp) {
+  if (!sp) return "\u2014";
+  var key = "members.providers." + sp;
+  var val = __t(key);
+  return val !== key ? val : sp;
+}
+
+function debouncedMemberSearch() {
+  clearTimeout(memberSearchTimeout);
+  memberSearchTimeout = setTimeout(function() { loadMembers(1); }, 300);
+}
+
+// Load registered instances for the filter dropdown (system admin only)
+var __instanceNames = {};
+var __instanceFilterInitialized = false;
+async function initInstanceFilter() {
+  if (__instanceFilterInitialized) return;
+  try {
+    var data = await api("GET", "/../admin/instances");
+    if (data.ok && data.instances && data.instances.length > 0) {
+      __instanceFilterInitialized = true;
+      var sel = document.getElementById("members-instance-filter");
+      data.instances.forEach(function(inst) {
+        __instanceNames[inst.instanceDid] = inst.appName || inst.instanceDid.substring(0, 16);
+        var opt = document.createElement("option");
+        opt.value = inst.instanceDid;
+        opt.textContent = __instanceNames[inst.instanceDid];
+        sel.appendChild(opt);
+      });
+      sel.style.display = "";
+    }
+  } catch(e) { /* not admin or no instances */ }
+}
+
+// Also support specific instance filter via query param
+// When ?instance=z1xxx, team handler needs to use that instanceDid
+
+async function loadMembers(page) {
+  membersPage = page || 1;
+  var instanceFilter = document.getElementById("members-instance-filter").value;
+  var qs = "?page=" + membersPage + "&pageSize=" + membersPageSize;
+  // System view ("") → use defaultInstanceDid so we query membership, not global users
+  if (instanceFilter === "" && __pageData.instanceDid) {
+    qs += "&instance=" + encodeURIComponent(__pageData.instanceDid);
+  } else if (instanceFilter) {
+    qs += "&instance=" + encodeURIComponent(instanceFilter);
+  }
+  var search = document.getElementById("members-search").value.trim();
+  if (search) qs += "&search=" + encodeURIComponent(search);
+  var role = document.getElementById("members-role-filter").value;
+  if (role) qs += "&role=" + encodeURIComponent(role);
+  var status = document.getElementById("members-status-filter").value;
+  if (status !== "") qs += "&approved=" + status;
+  var source = document.getElementById("members-source-filter").value;
+  if (source) qs += "&sourceProvider=" + encodeURIComponent(source);
+  if (membersSortBy) {
+    qs += "&sortBy=" + encodeURIComponent(membersSortBy);
+    qs += "&sortOrder=" + encodeURIComponent(membersSortOrder || "desc");
+  }
+
+  document.getElementById("members-table-wrap").innerHTML = skeletonTable(8, 6);
+  document.getElementById("members-pagination").innerHTML = "";
+  var data = await api("GET", "/members" + qs);
+  if (!data.ok) {
+    document.getElementById("members-table-wrap").innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg></div><div class="empty-state-title">' + __t("members.loadFailed") + '</div></div>';
+    return;
+  }
+  __membersAggregated = !!data.aggregated;
+  // Only pin the caller to the top when using the default (server) order.
+  // Under explicit sort, honor the user's intent without re-shuffling.
+  if (membersSortBy) {
+    currentMembersList = data.users || [];
+  } else {
+    currentMembersList = (data.users || []).slice().sort(function(a, b) {
+      if (a.did === __caller.did) return -1;
+      if (b.did === __caller.did) return 1;
+      return (a.createdAt || 0) - (b.createdAt || 0);
+    });
+  }
+  renderMembersTable(currentMembersList, data.paging);
+  updateTransferSection(data.users);
+}
+
+function renderMembersTable(users, paging) {
+  var wrap = document.getElementById("members-table-wrap");
+  if (!users || users.length === 0) {
+    wrap.innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div><div class="empty-state-title">' + __t("members.noMembers") + '</div><div class="empty-state-desc">' + __t("members.noMembersHint") + '</div></div>';
+    document.getElementById("members-pagination").innerHTML = "";
+    return;
+  }
+
+  var instanceSel = document.getElementById("members-instance-filter");
+  var instanceVisible = instanceSel && instanceSel.style.display !== 'none';
+  var showInstance = instanceVisible && instanceSel.value === "all";
+  var html = '<table class="table"><thead><tr>';
+  html += sortableTh("name", __t("members.col.member"));
+  html += sortableTh("role", __t("members.col.role"));
+  if (showInstance) html += '<th>' + __t("members.col.instance") + '</th>';
+  html += sortableTh("source", __t("members.col.source"), "col-hide-sm");
+  html += sortableTh("status", __t("members.col.status"), "col-hide-sm");
+  html += sortableTh("joined", __t("members.col.joined"), "col-hide-md");
+  // Registered/Last Login From columns removed — domain info not meaningful in Worker context
+  html += '<th></th></tr></thead><tbody>';
+  users.forEach(function(u) {
+    var userDid = u.did || u.user_did || '';
+    var av = renderAvatar(u.avatar, u.fullName, "sm");
+    var name = u.fullName ? escapeHtml(u.fullName) : '<span class="text-muted">(unnamed)</span>';
+    var did = '<did-address did="' + escapeHtml(userDid) + '" compact></did-address>';
+    var roleBadge = '<span class="badge badge-' + (u.role || "guest") + '">' + __t("common." + (u.role || "guest")) + '</span>';
+    var statusBadge = u.approved !== undefined ? (u.approved ? '<span class="badge badge-active">' + __t("common.active") + '</span>' : '<span class="badge badge-blocked">' + __t("common.blocked") + '</span>') : '<span class="text-muted">—</span>';
+    var joined = (u.createdAt || u.joined_at) ? '<span class="cell-date">' + escapeHtml(relativeTime(u.createdAt || u.joined_at)) + '</span>' : '<span class="text-muted">—</span>';
+    html += '<tr style="cursor:pointer" onclick="openMemberDetail(\'' + escapeHtml(userDid) + '\')">';
+    html += '<td><div class="member-identity">' + av + '<div><div class="member-name">' + name + '</div><div class="member-email">' + did + '</div></div></div></td>';
+    html += '<td>' + roleBadge + '</td>';
+    if (showInstance) {
+      if (__membersAggregated && u.instance_count > 1) {
+        html += '<td><a href="javascript:void(0)" onclick="event.stopPropagation();openMemberDetail(\'' + escapeHtml(userDid) + '\')" style="color:var(--blue);font-size:14px;text-decoration:none">' + u.instance_count + ' ' + __t("members.instances") + '</a></td>';
+      } else {
+        var instDid = (__membersAggregated && u.instances && u.instances.length === 1) ? u.instances[0].instance_did : (u.instance_did || '');
+        var instName = __instanceNames[instDid] || '';
+        if (!instName) instName = instDid ? __t("members.currentInstance") : '—';
+        html += '<td><div>' + escapeHtml(instName);
+        if (instDid) html += '<div style="font-size:11px;color:var(--text-secondary);margin-top:2px" onclick="event.stopPropagation()"><did-address did="' + escapeHtml(instDid) + '" compact></did-address></div>';
+        html += '</div></td>';
+      }
+    }
+    var sourceBadge = '<span class="text-muted">' + escapeHtml(providerLabel(u.sourceProvider)) + '</span>';
+    html += '<td class="col-hide-sm">' + sourceBadge + '</td>';
+    html += '<td class="col-hide-sm">' + statusBadge + '</td>';
+    html += '<td class="col-hide-md">' + joined + '</td>';
+    // Actions: only for current instance members, not cross-instance
+    var canOperate = !instanceVisible || (instanceVisible && instanceSel.value === '');
+    // In aggregated mode, only allow actions on users whose instance matches current system
+    if (__membersAggregated) canOperate = false;
+    html += '<td class="action-cell">' + (canOperate ? renderMemberActions(u) : '') + '</td>';
+    html += '</tr>';
+  });
+  html += '</tbody></table>';
+  wrap.innerHTML = html;
+
+  renderPagination("members-pagination", paging, loadMembers);
+}
+
+function renderMemberActions(u) {
+  var isOwner = __caller.role === "owner";
+  var isAdmin = __caller.role === "admin";
+  var isSelf = u.did === __caller.did;
+  var ROLE_LEVEL = { owner: 3, admin: 2, member: 1, guest: 0 };
+  var callerLevel = ROLE_LEVEL[__caller.role] || 0;
+  var targetLevel = ROLE_LEVEL[u.role] || 0;
+  // Can only act on members with lower privilege
+  var canManage = !isSelf && targetLevel < callerLevel;
+  var items = [];
+
+  // Change role: can manage lower-level members
+  if (canManage) {
+    items.push('<button class="action-menu-item" onclick="event.stopPropagation();openChangeRoleForDid(\'' + escapeHtml(u.did) + '\')">' + __t("members.changeRole") + '</button>');
+  }
+  if (canManage && u.approved) {
+    items.push('<button class="action-menu-item" onclick="event.stopPropagation();blockMember(\'' + escapeHtml(u.did) + '\',\'' + escapeHtml(u.fullName || u.did) + '\')">' + __t("members.block") + '</button>');
+  }
+  if (canManage && !u.approved) {
+    items.push('<button class="action-menu-item" onclick="event.stopPropagation();unblockMember(\'' + escapeHtml(u.did) + '\',\'' + escapeHtml(u.fullName || u.did) + '\')">' + __t("members.unblock") + '</button>');
+  }
+  if (items.length > 0 && canManage) {
+    items.push('<div class="action-menu-sep"></div>');
+  }
+  if (canManage) {
+    items.push('<button class="action-menu-item danger" onclick="event.stopPropagation();removeMember(\'' + escapeHtml(u.did) + '\',\'' + escapeHtml(u.fullName || u.did) + '\')">' + __t("members.remove") + '</button>');
+  }
+
+  if (items.length === 0) return "";
+  return '<button class="action-trigger" onclick="event.stopPropagation();toggleActionMenu(this)">⋯</button><div class="action-menu">' + items.join("") + '</div>';
+}
+
+function toggleActionMenu(trigger) {
+  var menu = trigger.nextElementSibling;
+  var wasOpen = menu.classList.contains("open");
+  // Close all menus first
+  document.querySelectorAll(".action-menu.open").forEach(function(m) { m.classList.remove("open"); });
+  if (!wasOpen) menu.classList.toggle("open");
+}
+
+async function openMemberDetail(did) {
+  var u = currentMembersList.find(function(m) { return m.did === did; });
+  if (!u) return;
+  selectedMember = u;
+
+  // Fetch full member info (with connectedAccounts) from API.
+  // Falls back to in-memory list data if the request fails.
+  var detail = u;
+  try {
+    var resp = await api("GET", "/members/" + encodeURIComponent(did));
+    if (resp && resp.ok && resp.user) {
+      // Merge: in-memory list has fields the API may omit (instances, passkeyCount in some paths).
+      detail = Object.assign({}, u, resp.user);
+      selectedMember = detail;
+    }
+  } catch (e) {}
+
+  var body = document.getElementById("member-detail-body");
+  var html = '<div class="profile-header">' + renderAvatar(detail.avatar, detail.fullName) + '<div>';
+  html += '<div style="font-weight:500;font-size:16px;color:var(--text-white)">' + escapeHtml(detail.fullName || "(unnamed)") + '</div>';
+  html += '<did-address did="' + escapeHtml(detail.did) + '" compact></did-address>';
+  html += '</div></div>';
+
+  html += '<div class="settings-card" style="margin-top:16px">';
+  html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailRole") + '</span><span class="settings-value"><span class="badge badge-' + (detail.role || "guest") + '">' + __t("common." + (detail.role || "guest")) + '</span></span></div>';
+  html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailStatus") + '</span><span class="settings-value">' + (detail.approved ? '<span class="badge badge-active">' + __t("common.active") + '</span>' : '<span class="badge badge-blocked">' + __t("common.blocked") + '</span>') + '</span></div>';
+  html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailSource") + '</span><span class="settings-value">' + escapeHtml(providerLabel(detail.sourceProvider)) + '</span></div>';
+  if (detail.email) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailEmail") + '</span><span class="settings-value">' + escapeHtml(detail.email) + '</span></div>';
+  if (detail.inviterName) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailInvitedBy") + '</span><span class="settings-value">' + escapeHtml(detail.inviterName) + '</span></div>';
+  if (detail.createdAt) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailJoined") + '</span><span class="settings-value">' + escapeHtml(absoluteTime(detail.createdAt)) + '</span></div>';
+  if (detail.lastLoginAt) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailLastLogin") + '</span><span class="settings-value">' + escapeHtml(absoluteTime(detail.lastLoginAt)) + '</span></div>';
+  if (detail.sourceDomain) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailRegisteredFrom") + '</span><span class="settings-value">' + escapeHtml(detail.sourceDomain) + '</span></div>';
+  if (detail.lastLoginDomain) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailLastLoginFrom") + '</span><span class="settings-value">' + escapeHtml(detail.lastLoginDomain) + '</span></div>';
+  if (detail.passkeyCount !== undefined) html += '<div class="settings-row"><span class="settings-label">' + __t("members.detailPasskeys") + '</span><span class="settings-value">' + detail.passkeyCount + '</span></div>';
+  html += '</div>';
+
+  // Connected Accounts (read-only)
+  if (detail.connectedAccounts && detail.connectedAccounts.length > 0) {
+    html += '<div class="settings-card" style="margin-top:16px">';
+    html += '<div class="settings-card-header"><span>' + __t("members.detailConnectedAccounts") + ' (' + detail.connectedAccounts.length + ')</span></div>';
+    html += '<div style="max-height:240px;overflow-y:auto">';
+    detail.connectedAccounts.forEach(function(a) {
+      var label = providerLabel(a.provider);
+      var info = '';
+      if (a.userInfo && a.userInfo.name) info = a.userInfo.name;
+      else if (a.userInfo && a.userInfo.email) info = a.userInfo.email;
+      else if (a.id) info = a.id;
+      html += '<div class="settings-row" style="gap:12px;align-items:flex-start">';
+      html += '<div style="flex:1;min-width:0">';
+      html += '<div style="font-size:14px;font-weight:500;color:var(--text)">' + escapeHtml(label);
+      if (a.isMain) html += ' <span class="badge badge-active" style="font-size:10px;padding:1px 6px;">' + __t("profile.mainAccount") + '</span>';
+      html += '</div>';
+      if (info) html += '<div style="font-size:12px;color:var(--text-secondary);margin-top:2px">' + escapeHtml(info) + '</div>';
+      if (a.did) html += '<div style="font-size:11px;color:var(--text-secondary);margin-top:2px"><did-address did="' + escapeHtml(a.did) + '" compact></did-address></div>';
+      html += '</div>';
+      if (a.lastLoginAt) html += '<div style="font-size:12px;color:var(--text-secondary);flex-shrink:0">' + escapeHtml(relativeTime(a.lastLoginAt)) + '</div>';
+      html += '</div>';
+    });
+    html += '</div></div>';
+  }
+
+  // Instance memberships (aggregated mode)
+  if (detail.instances && detail.instances.length > 0) {
+    html += '<div class="settings-card" style="margin-top:16px">';
+    html += '<div class="settings-card-header"><span>' + __t("members.instanceMemberships") + ' (' + detail.instances.length + ')</span></div>';
+    html += '<div style="max-height:240px;overflow-y:auto">';
+    detail.instances.forEach(function(inst) {
+      var instName = __instanceNames[inst.instance_did] || '';
+      var instDid = inst.instance_did || '';
+      html += '<div class="settings-row" style="gap:12px">';
+      html += '<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:500;color:var(--text)">' + escapeHtml(instName || __t("members.currentInstance")) + '</div>';
+      if (instDid) html += '<div style="font-size:11px;color:var(--text-secondary);margin-top:2px"><did-address did="' + escapeHtml(instDid) + '" compact></did-address></div>';
+      html += '</div>';
+      html += '<div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><span class="badge badge-' + inst.role + '">' + __t("common." + inst.role) + '</span>';
+      if (inst.joined_at) html += '<span style="font-size:12px;color:var(--text-secondary)">' + escapeHtml(relativeTime(inst.joined_at)) + '</span>';
+      html += '</div></div>';
+    });
+    html += '</div></div>';
+  }
+
+  body.innerHTML = html;
+
+  // Change role: mirror list's canOperate + renderMemberActions logic exactly.
+  // Use post-merge detail so role/did reflect the latest API response.
+  var changeRoleBtn = document.getElementById("member-detail-change-role");
+  var instanceSel = document.getElementById("members-instance-filter");
+  var instanceVisible = instanceSel && instanceSel.style.display !== 'none';
+  var canOperate = !instanceVisible || (instanceVisible && instanceSel.value === '');
+  if (__membersAggregated) canOperate = false;
+  var isSelf = detail.did === __caller.did;
+  var ROLE_LEVEL = { owner: 3, admin: 2, member: 1, guest: 0 };
+  var callerLevel = ROLE_LEVEL[__caller.role] || 0;
+  var targetLevel = ROLE_LEVEL[detail.role] || 0;
+  var canChangeRole = canOperate && !isSelf && targetLevel < callerLevel;
+  if (canChangeRole) {
+    changeRoleBtn.classList.remove("hidden");
+  } else {
+    changeRoleBtn.classList.add("hidden");
+  }
+
+  showDialog("member-detail-dialog");
+}
+
+function openChangeRoleForDid(did) {
+  var u = currentMembersList.find(function(m) { return m.did === did; });
+  if (!u) return;
+  selectedMember = u;
+  openChangeRoleDialog();
+}
+
+function openChangeRoleDialog() {
+  if (!selectedMember) return;
+  document.getElementById("change-role-title").textContent = __t("members.changeRole");
+  document.getElementById("change-role-subtitle").textContent = __t("members.changeRoleFor", { name: selectedMember.fullName || truncateDid(selectedMember.did) });
+  // Show/hide role options based on caller's level (only owner can assign admin)
+  var radios = document.querySelectorAll('input[name="new-role"]');
+  radios.forEach(function(r) {
+    r.checked = r.value === selectedMember.role;
+    var label = r.closest('label');
+    if (label) {
+      if (r.value === 'admin' && __caller.role !== 'owner') label.style.display = 'none';
+      else label.style.display = '';
+    }
+  });
+  closeDialog("member-detail-dialog");
+  showDialog("change-role-dialog");
+}
+
+async function saveRoleChange() {
+  if (!selectedMember) return;
+  var selected = document.querySelector('input[name="new-role"]:checked');
+  if (!selected) return;
+  var newRole = selected.value;
+  var data = await api("PUT", "/members/" + encodeURIComponent(selectedMember.did) + "/role", { role: newRole });
+  if (data.ok) {
+    showToast(__t("members.roleUpdated"), "success");
+    closeDialog("change-role-dialog");
+    loadMembers(membersPage);
+  }
+}
+
+async function blockMember(did, name) {
+  var ok = await confirmDialog({ title: __t("members.blockTitle"), message: __t("members.blockMsg", { name: name }), confirmLabel: __t("members.blockBtn"), danger: true });
+  if (!ok) return;
+  var data = await api("PUT", "/members/" + encodeURIComponent(did) + "/approval", { approved: false });
+  if (data.ok) { showToast(__t("members.blockSuccess"), "success"); loadMembers(membersPage); }
+}
+
+async function unblockMember(did, name) {
+  var ok = await confirmDialog({ title: __t("members.unblockTitle"), message: __t("members.unblockMsg", { name: name }), confirmLabel: __t("members.unblock") });
+  if (!ok) return;
+  var data = await api("PUT", "/members/" + encodeURIComponent(did) + "/approval", { approved: true });
+  if (data.ok) { showToast(__t("members.unblockSuccess"), "success"); loadMembers(membersPage); }
+}
+
+async function removeMember(did, name) {
+  var ok = await confirmDialog({ title: __t("members.removeTitle"), message: __t("members.removeMsg", { name: name }), confirmLabel: __t("members.remove"), danger: true });
+  if (!ok) return;
+  var data = await api("DELETE", "/members/" + encodeURIComponent(did));
+  if (data.ok) { showToast(__t("members.removeSuccess"), "success"); loadMembers(membersPage); }
+}
+
+function updateTransferSection(users) {
+  var section = document.getElementById("ownership-transfer-section");
+  if (__caller.role !== "owner") {
+    section.classList.add("hidden");
+    return;
+  }
+  section.classList.remove("hidden");
+  var select = document.getElementById("transfer-target");
+  var html = '<option value="">' + __t("members.transferSelect") + '</option>';
+  users.forEach(function(u) {
+    if (u.did !== __caller.did && u.approved && u.role !== "owner") {
+      html += '<option value="' + escapeHtml(u.did) + '">' + escapeHtml(u.fullName || truncateDid(u.did)) + ' (' + u.role + ')</option>';
+    }
+  });
+  select.innerHTML = html;
+}
+
+async function handleTransferOwnership() {
+  var target = document.getElementById("transfer-target").value;
+  if (!target) { showToast(__t("members.selectMemberFirst"), "error"); return; }
+  var targetUser = currentMembersList.find(function(u) { return u.did === target; });
+  var name = targetUser ? (targetUser.fullName || truncateDid(target)) : truncateDid(target);
+  var ok = await confirmDialog({
+    title: __t("members.transferTitle"),
+    message: __t("members.transferMsg", { name: name }),
+    confirmLabel: __t("members.transferConfirm"),
+    danger: true,
+  });
+  if (!ok) return;
+  var data = await api("POST", "/transfer-ownership", { targetDid: target });
+  if (data.ok) {
+    showToast(__t("members.transferSuccess"), "success");
+    setTimeout(function() { location.reload(); }, 1000);
+  }
+}
+
+// Close action menus on outside click
+document.addEventListener("click", function() {
+  document.querySelectorAll(".action-menu.open").forEach(function(m) { m.classList.remove("open"); });
+});
+
+registerTab("members", function() {
+  initInstanceFilter().then(function() {
+    // Auto-select instance from URL query (e.g., ?instance=z1xxx)
+    var urlInstance = new URLSearchParams(window.location.search).get("instance");
+    if (urlInstance) {
+      var sel = document.getElementById("members-instance-filter");
+      if (sel) sel.value = urlInstance;
+    }
+    // Restore sort state from URL (sortBy / sortOrder) on tab enter.
+    readMembersSortFromURL();
+    loadMembers(1);
+  });
+});
+
+;
+
+var invitationsPage = 1;
+var invitationsPageSize = 20;
+
+
+function updateRemarkCounter() {
+  document.getElementById("remark-counter").textContent = document.getElementById("invite-remark").value.length;
+}
+
+async function loadInvitations(page) {
+  invitationsPage = page || 1;
+  var qs = "?page=" + invitationsPage + "&pageSize=" + invitationsPageSize;
+  document.getElementById("invitations-table-wrap").innerHTML = skeletonTable(6, 4);
+  document.getElementById("invitations-pagination").innerHTML = "";
+  var data = await api("GET", "/invitations" + qs);
+  if (!data.ok) {
+    document.getElementById("invitations-table-wrap").innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg></div><div class="empty-state-title">' + __t("invitations.loadFailed") + '</div></div>';
+    return;
+  }
+  renderInvitationsTable(data.invitations, data.paging);
+}
+
+function renderInvitationsTable(invitations, paging) {
+  var wrap = document.getElementById("invitations-table-wrap");
+  if (!invitations || invitations.length === 0) {
+    wrap.innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div><div class="empty-state-title">' + __t("invitations.noInvitations") + '</div><div class="empty-state-desc">' + __t("invitations.noInvitationsHint") + '</div></div>';
+    document.getElementById("invitations-pagination").innerHTML = "";
+    return;
+  }
+
+  var html = '<table class="table"><thead><tr><th>' + __t("invitations.col.role") + '</th><th class="col-hide-sm">' + __t("invitations.col.remark") + '</th><th>' + __t("invitations.col.uses") + '</th><th>' + __t("invitations.col.expires") + '</th><th class="col-hide-md">' + __t("invitations.col.createdBy") + '</th><th></th></tr></thead><tbody>';
+  invitations.forEach(function(inv) {
+    var roleBadge = '<span class="badge badge-' + inv.role + '">' + __t("common." + inv.role) + '</span>';
+    var remark = inv.remark ? escapeHtml(inv.remark.length > 30 ? inv.remark.slice(0, 30) + "..." : inv.remark) : '<span class="text-muted">—</span>';
+    var uses = inv.useCount + " / " + inv.maxUses;
+    if (inv.useCount >= inv.maxUses) uses += ' <span class="badge badge-blocked">' + __t("invitations.closed") + '</span>';
+    var expired = new Date(inv.expireAt) < new Date();
+    var expireText = expired ? '<span class="badge badge-expired">expired</span>' : '<span class="cell-date">' + escapeHtml(relativeTime(inv.expireAt)) + '</span>';
+    var isActive = !expired && inv.status !== "closed" && inv.useCount < inv.maxUses;
+    var inviter = inv.inviterName ? escapeHtml(inv.inviterName) : '<span class="text-muted">—</span>';
+
+    var actions = '';
+    if (isActive) {
+      actions += '<button class="action-menu-item" onclick="event.stopPropagation();copyToClipboard(\'' + escapeHtml(inv.link) + '\')">' + __t("invitations.copyLink") + '</button>';
+    }
+    var canDelete = __caller.role === "owner" || inv.inviterDid === __caller.did;
+    if (canDelete) {
+      if (actions) actions += '<div class="action-menu-sep"></div>';
+      actions += '<button class="action-menu-item danger" onclick="event.stopPropagation();deleteInvitation(\'' + escapeHtml(inv.id) + '\')">' + __t("common.delete") + '</button>';
+    }
+    var actionMenu = actions ? '<td class="action-cell"><button class="action-trigger" onclick="event.stopPropagation();toggleActionMenu(this)">⋯</button><div class="action-menu">' + actions + '</div></td>' : '<td></td>';
+
+    html += '<tr><td>' + roleBadge + '</td><td class="col-hide-sm">' + remark + '</td><td>' + uses + '</td><td>' + expireText + '</td><td class="col-hide-md">' + inviter + '</td>' + actionMenu + '</tr>';
+  });
+  html += '</tbody></table>';
+  wrap.innerHTML = html;
+
+  renderPagination("invitations-pagination", paging, loadInvitations);
+}
+
+async function createInvitation() {
+  var btn = document.getElementById("create-invite-btn");
+  btn.disabled = true;
+
+  var role = document.getElementById("invite-role").value;
+  var remark = document.getElementById("invite-remark").value.trim();
+  var expireHours = parseInt(document.getElementById("invite-expire").value, 10);
+  var maxUses = parseInt(document.getElementById("invite-max-uses").value, 10) || 1;
+  maxUses = Math.min(100, Math.max(1, maxUses));
+
+  var data = await api("POST", "/invitations", { role: role, remark: remark, expireHours: expireHours, maxUses: maxUses });
+  btn.disabled = false;
+
+  if (data.ok && data.invitation) {
+    closeDialog("create-invitation-dialog");
+    copyToClipboard(data.invitation.link);
+    showToast(__t("invitations.created"), "success");
+    // Reset form
+    document.getElementById("invite-remark").value = "";
+    document.getElementById("invite-max-uses").value = "1";
+    updateRemarkCounter();
+    loadInvitations(invitationsPage);
+  }
+}
+
+async function deleteInvitation(id) {
+  var ok = await confirmDialog({ title: __t("invitations.deleteTitle"), message: __t("invitations.deleteMsg"), confirmLabel: __t("common.delete"), danger: true });
+  if (!ok) return;
+  var data = await api("DELETE", "/invitations/" + encodeURIComponent(id));
+  if (data.ok) { showToast(__t("invitations.deleted"), "success"); loadInvitations(invitationsPage); }
+}
+
+// Initialize role options based on caller role
+function initInviteRoleOptions() {
+  var select = document.getElementById("invite-role");
+  if (__caller.role === "owner") {
+    select.innerHTML = '<option value="guest">Guest</option><option value="member">Member</option><option value="admin">Admin</option>';
+  }
+}
+
+registerTab("invitations", function() {
+  initInviteRoleOptions();
+  loadInvitations(1);
+});
+
+;
+
+var auditPage = 1;
+var auditPageSize = 50;
+
+var AUDIT_ACTION_I18N = {
+  "login": "audit.actions.login",
+  "user.register": "audit.actions.register",
+  "user.login": "audit.actions.login",
+  "user.accept_invitation": "audit.actions.acceptInvitation",
+  "user.remove": "audit.actions.removeMember",
+  "user.block": "audit.actions.blockMember",
+  "user.unblock": "audit.actions.unblockMember",
+  "user.role_change": "audit.actions.roleChange",
+  "user.transfer_ownership": "audit.actions.transferOwnership",
+  "user.profile_update": "audit.actions.profileUpdate",
+  "user.avatar_update": "audit.actions.avatarUpdate",
+  "user.avatar_delete": "audit.actions.avatarDelete",
+  "user.email_change": "audit.actions.emailChange",
+  "user.register_blocked": "audit.actions.registerBlocked",
+  "invitation.create": "audit.actions.createInvitation",
+  "invitation.delete": "audit.actions.deleteInvitation",
+  "oauth.bind": "audit.actions.oauthBind",
+  "oauth.unbind": "audit.actions.oauthUnbind",
+  "accessKey.create": "audit.actions.accessKeyCreate",
+  "accessKey.update": "audit.actions.accessKeyUpdate",
+  "accessKey.delete": "audit.actions.accessKeyDelete",
+  "membership.create": "audit.actions.membershipCreate",
+  "membership.update_role": "audit.actions.membershipUpdateRole",
+  "membership.remove": "audit.actions.membershipRemove",
+  "passkey.connect": "audit.actions.passkeyConnect",
+  "passkey.disconnect": "audit.actions.passkeyDisconnect",
+  "access_policy.create": "audit.actions.accessPolicyCreate",
+  "access_policy.update": "audit.actions.accessPolicyUpdate",
+  "access_policy.delete": "audit.actions.accessPolicyDelete",
+  "security_rule.create": "audit.actions.securityRuleCreate",
+  "security_rule.update": "audit.actions.securityRuleUpdate",
+  "security_rule.delete": "audit.actions.securityRuleDelete",
+  "settings.oauth_update": "audit.actions.settingsOauthUpdate",
+  "settings.oauth_delete": "audit.actions.settingsOauthDelete",
+  "settings.builtin_providers_update": "audit.actions.settingsBuiltinProvidersUpdate",
+  "settings.session_update": "audit.actions.settingsSessionUpdate",
+  "settings.email_update": "audit.actions.settingsEmailUpdate",
+};
+
+function translateAction(action) {
+  var key = AUDIT_ACTION_I18N[action];
+  return key ? __t(key) : action;
+}
+
+var _ICONS = {
+  login:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>',
+  register: '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>',
+  block:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>',
+  unblock:  '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>',
+  remove:   '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="22" y1="11" x2="16" y2="11"/></svg>',
+  trash:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>',
+  edit:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+  create:   '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
+  key:      '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>',
+  link:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
+  unlink:   '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/><line x1="2" y1="2" x2="22" y2="22"/></svg>',
+  mail:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>',
+  settings: '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+  shield:   '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
+  lock:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>',
+  image:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
+  at:       '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>',
+  user:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
+  crown:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4l4.5 9L12 4l5.5 9L22 4l-3 13H5L2 4z"/><line x1="5" y1="17" x2="19" y2="17"/></svg>',
+  role:     '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16V4m0 0L3 8m4-4 4 4"/><path d="M17 8v12m0 0 4-4m-4 4-4-4"/></svg>',
+  users:    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+};
+
+function actionIcon(action) {
+  if (!action) return "";
+  switch (action) {
+    case "login":
+    case "user.login":        return _ICONS.login;
+    case "user.register":     return _ICONS.register;
+    case "user.register_blocked":
+    case "user.block":        return _ICONS.block;
+    case "user.unblock":      return _ICONS.unblock;
+    case "user.remove":
+    case "membership.remove": return _ICONS.remove;
+    case "user.role_change":
+    case "membership.update_role": return _ICONS.role;
+    case "user.transfer_ownership": return _ICONS.crown;
+    case "user.profile_update":    return _ICONS.user;
+    case "user.avatar_update":
+    case "user.avatar_delete":     return _ICONS.image;
+    case "user.email_change":      return _ICONS.at;
+    case "user.accept_invitation":
+    case "invitation.create":
+    case "invitation.delete":      return _ICONS.mail;
+    case "membership.create":      return _ICONS.users;
+    case "oauth.bind":             return _ICONS.link;
+    case "oauth.unbind":           return _ICONS.unlink;
+    case "passkey.connect":
+    case "passkey.disconnect":
+    case "accessKey.create":
+    case "accessKey.update":
+    case "accessKey.delete":       return _ICONS.key;
+    case "access_policy.create":
+    case "access_policy.update":
+    case "access_policy.delete":   return _ICONS.shield;
+    case "security_rule.create":
+    case "security_rule.update":
+    case "security_rule.delete":   return _ICONS.lock;
+    case "settings.oauth_update":
+    case "settings.oauth_delete":
+    case "settings.builtin_providers_update":
+    case "settings.session_update":
+    case "settings.email_update":  return _ICONS.settings;
+    default:
+      if (action.indexOf("delete") !== -1) return _ICONS.trash;
+      if (action.indexOf("create") !== -1) return _ICONS.create;
+      if (action.indexOf("update") !== -1) return _ICONS.edit;
+      return "";
+  }
+}
+
+function actionBadgeClass(action) {
+  if (!action) return "badge-neutral";
+  var a = action.toLowerCase();
+  // Destructive: delete / remove / block / unbind / disconnect / register_blocked
+  if (a.indexOf("delete") !== -1 || a.indexOf("remove") !== -1 ||
+      a.indexOf(".block") !== -1 || a.indexOf("unbind") !== -1 ||
+      a.indexOf("disconnect") !== -1 || a.indexOf("register_blocked") !== -1) {
+    return "badge-blocked";
+  }
+  // Auth events: login / register
+  if (a === "login" || a === "user.login" || a === "user.register") {
+    return "badge-member";
+  }
+  // Restore: unblock
+  if (a.indexOf("unblock") !== -1) {
+    return "badge-admin";
+  }
+  // Modifications: update / change / role_change / transfer / settings.*
+  if (a.indexOf("update") !== -1 || a.indexOf("change") !== -1 ||
+      a.indexOf("role_change") !== -1 || a.indexOf("transfer") !== -1 ||
+      a.indexOf("settings.") !== -1) {
+    return "badge-guest";
+  }
+  // Create / bind / connect / accept / add
+  return "badge-owner";
+}
+
+async function loadAuditLogs(page) {
+  auditPage = page || 1;
+  var action = document.getElementById("audit-action-filter").value;
+  var qs = "?page=" + auditPage + "&pageSize=" + auditPageSize;
+  if (action) qs += "&action=" + encodeURIComponent(action);
+  document.getElementById("audit-table-wrap").innerHTML = skeletonTable(4, 8);
+  document.getElementById("audit-pagination").innerHTML = "";
+  var data = await api("GET", "/audit-logs" + qs);
+  if (!data.ok) {
+    document.getElementById("audit-table-wrap").innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg></div><div class="empty-state-title">' + __t("audit.loadFailed") + '</div></div>';
+    return;
+  }
+  renderAuditLogs(data.logs, data.paging);
+}
+
+function renderAuditLogs(logs, paging) {
+  var wrap = document.getElementById("audit-table-wrap");
+  if (!logs || logs.length === 0) {
+    wrap.innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div><div class="empty-state-title">' + __t("audit.noLogs") + '</div><div class="empty-state-desc">' + __t("audit.noLogsHint") + '</div></div>';
+    document.getElementById("audit-pagination").innerHTML = "";
+    return;
+  }
+
+  var html = '<table class="table"><thead><tr><th>' + __t("audit.col.time") + '</th><th>' + __t("audit.col.action") + '</th><th>' + __t("audit.col.operator") + '</th><th>' + __t("audit.col.target") + '</th></tr></thead><tbody>';
+  logs.forEach(function(log) {
+    var time = relativeTime(log.createdAt);
+    var absTime = absoluteTime(log.createdAt);
+    var operatorName = log.operatorName
+      ? escapeHtml(log.operatorName)
+      : (log.operatorDid ? '<did-address did="' + escapeHtml(log.operatorDid) + '" compact></did-address>' : "—");
+    var operatorRoleBadge = log.operatorRole
+      ? ' <span class="badge badge-' + escapeHtml(log.operatorRole) + '" style="font-size:10px;padding:1px 6px;">' + escapeHtml(__t("common." + log.operatorRole)) + '</span>'
+      : "";
+    var target = log.targetName
+      ? escapeHtml(log.targetName)
+      : (log.targetDid ? '<did-address did="' + escapeHtml(log.targetDid) + '" compact></did-address>' : "—");
+
+    // For register_blocked: show IP, method, reason in detail column
+    var detail = "";
+    if (log.action === "user.register_blocked") {
+      var meta = {};
+      try { meta = typeof log.metadata === "string" ? JSON.parse(log.metadata) : (log.metadata || {}); } catch(e) {}
+      var parts = [];
+      if (log.ip) parts.push('<span class="badge badge-neutral" style="font-size:10px;padding:1px 6px;">' + escapeHtml(log.ip) + '</span>');
+      if (meta.source) parts.push('<span style="color:var(--fg-muted);font-size:12px">' + escapeHtml(meta.source) + '</span>');
+      if (meta.method) parts.push('<span class="badge ' + (meta.method === "invite" ? "badge-guest" : "badge-blocked") + '" style="font-size:10px;padding:1px 6px;">' + escapeHtml(meta.method) + '</span>');
+      if (meta.reason) parts.push('<span style="color:var(--fg-muted);font-size:12px">' + escapeHtml(meta.reason) + '</span>');
+      detail = parts.length > 0 ? parts.join(" ") : "—";
+    }
+
+    html += '<tr><td><span class="cell-date" title="' + escapeHtml(absTime) + '">' + escapeHtml(time) + '</span></td>';
+    html += '<td><span class="badge ' + actionBadgeClass(log.action) + '" style="gap:3px">' + actionIcon(log.action) + escapeHtml(translateAction(log.action)) + '</span></td>';
+    html += '<td>' + operatorName + operatorRoleBadge + '</td>';
+    html += '<td>' + (detail || target) + '</td></tr>';
+  });
+  html += '</tbody></table>';
+  wrap.innerHTML = html;
+
+  renderPagination("audit-pagination", paging, loadAuditLogs);
+}
+
+registerTab("audit-logs", function() { loadAuditLogs(1); });
+
+;
+
+// ─── Access Tab State ──────────────────────────────────────────────────────
+var apPolicies = [];
+var apRules = [];
+var apDefaultRule = null;
+var apEditingPolicyId = null;
+var apEditingRuleId = null;
+
+// ─── Icon constants ────────────────────────────────────────────────────────
+var AP_ICON_EDIT = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>';
+var AP_ICON_DELETE = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>';
+var AP_ICON_LOCK = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
+
+// ─── Access Type helpers ───────────────────────────────────────────────────
+var AP_TYPE_LABELS = {
+  public: __t("access.typeLabels.public"),
+  invited: __t("access.typeLabels.invited"),
+  owner: __t("access.typeLabels.owner"),
+  admin: __t("access.typeLabels.admin"),
+  roles: __t("access.typeLabels.roles"),
+  roles_reverse: __t("access.typeLabels.rolesReverse")
+};
+
+var AP_TYPE_DESCS = {
+  public: __t("access.typeDescs.public"),
+  invited: __t("access.typeDescs.invited"),
+  admin: __t("access.typeDescs.admin"),
+  owner: __t("access.typeDescs.owner")
+};
+
+function apAccessTypeLabel(policy) {
+  if (policy.accessType === "roles" || policy.accessType === "roles_reverse") {
+    return AP_TYPE_LABELS[policy.accessType] + ": " + (policy.roles || []).join(", ");
+  }
+  return AP_TYPE_LABELS[policy.accessType] || policy.accessType;
+}
+
+function apIsBuiltin(policy) {
+  return !!policy.isProtected;
+}
+
+function apPolicyAccessType(policyId) {
+  var p = apPolicies.find(function(x) { return x.id === policyId; });
+  return p ? p.accessType : "public";
+}
+
+function apIconBtn(icon, title, onclick, variant) {
+  var cls = variant === "danger" ? "ap-icon-btn ap-icon-btn-danger" : "ap-icon-btn";
+  return '<button class="' + cls + '" title="' + escapeHtml(title) + '" onclick="event.stopPropagation();' + onclick + '">' + icon + '</button>';
+}
+
+// ─── Load Data ─────────────────────────────────────────────────────────────
+async function apLoadAll() {
+  document.getElementById("ap-policies-wrap").innerHTML = skeletonTable(3, 3);
+  document.getElementById("ap-rules-wrap").innerHTML = skeletonTable(5, 2);
+
+  var pRes = await api("GET", "/access-policies");
+  if (pRes.ok) apPolicies = pRes.policies;
+
+  var rRes = await api("GET", "/security-rules");
+  if (rRes.ok) apRules = rRes.rules;
+
+  // Find the default rule
+  apDefaultRule = apRules.find(function(r) { return r.id.indexOf("default") === 0; }) || null;
+
+  apRenderPolicies();
+  apRenderRules();
+}
+
+// ─── Render All Policies (built-in + custom in one table) ─────────────────
+function apRenderPolicies() {
+  var wrap = document.getElementById("ap-policies-wrap");
+
+  if (!apPolicies.length) {
+    wrap.innerHTML = '<div class="empty-state" style="padding:16px"><div class="empty-state-title">' + __t("access.noPolicies") + '</div></div>';
+    return;
+  }
+
+  // Built-in first, then custom
+  var builtins = apPolicies.filter(function(p) { return apIsBuiltin(p); });
+  var customs = apPolicies.filter(function(p) { return !apIsBuiltin(p); });
+  var sorted = builtins.concat(customs);
+
+  var html = '<table class="table"><thead><tr>'
+    + '<th>' + __t("access.name") + '</th>'
+    + '<th>' + __t("access.accessType") + '</th>'
+    + '<th style="width:80px;text-align:center">' + __t("common.actions") + '</th>'
+    + '</tr></thead><tbody>';
+
+  builtins.forEach(function(p) {
+    html += "<tr>";
+    html += '<td><span class="ap-lock-name">' + AP_ICON_LOCK + ' ' + escapeHtml(p.name) + '</span>';
+    if (p.description) html += '<div class="text-muted" style="font-size:12px;margin-top:2px">' + escapeHtml(p.description) + '</div>';
+    html += "</td>";
+    html += "<td>" + escapeHtml(apAccessTypeLabel(p)) + "</td>";
+    html += "<td></td>";
+    html += "</tr>";
+  });
+
+  if (builtins.length > 0 && customs.length > 0) {
+    html += '<tr class="ap-separator"><td colspan="3"></td></tr>';
+  }
+
+  customs.forEach(function(p) {
+    html += "<tr>";
+    html += "<td>" + escapeHtml(p.name);
+    if (p.description) html += '<div class="text-muted" style="font-size:12px;margin-top:2px">' + escapeHtml(p.description) + '</div>';
+    html += "</td>";
+    html += "<td>" + escapeHtml(apAccessTypeLabel(p)) + "</td>";
+    html += '<td class="ap-actions">';
+    html += apIconBtn(AP_ICON_EDIT, __t("common.edit"), "openPolicyDialog('edit','" + escapeHtml(p.id) + "')");
+    html += apIconBtn(AP_ICON_DELETE, __t("common.delete"), "apDeletePolicy('" + escapeHtml(p.id) + "')", "danger");
+    html += "</td></tr>";
+  });
+
+  html += "</tbody></table>";
+  wrap.innerHTML = html;
+}
+
+// ─── Render Path Rules ────────────────────────────────────────────────────
+function apRenderRules() {
+  var wrap = document.getElementById("ap-rules-wrap");
+  var nonDefaultRules = apRules.filter(function(r) { return r.id.indexOf("default") !== 0; });
+
+  // Sort non-default rules by priority ascending
+  nonDefaultRules.sort(function(a, b) { return a.priority - b.priority; });
+
+  var html = '<table class="table"><thead><tr>'
+    + '<th style="width:80px">#</th>'
+    + '<th>' + __t("access.urlPattern") + '</th>'
+    + '<th>' + __t("access.accessPolicy") + '</th>'
+    + '<th style="width:80px">' + __t("common.status") + '</th>'
+    + '<th style="width:80px;text-align:center">' + __t("common.actions") + '</th>'
+    + '</tr></thead><tbody>';
+
+  // Default rule — first row, special style
+  if (apDefaultRule) {
+    var policyOptions = apPolicies.map(function(p) {
+      var label = escapeHtml(p.name) + ' \u2014 ' + escapeHtml(apAccessTypeLabel(p));
+      var selected = p.id === apDefaultRule.accessPolicyId ? ' selected' : '';
+      return '<option value="' + escapeHtml(p.id) + '"' + selected + '>' + label + '</option>';
+    }).join("");
+
+    html += '<tr style="background:var(--bg-elevated)">';
+    html += '<td><span class="badge badge-active">' + __t("access.defaultLabel") + '</span></td>';
+    html += '<td><code>*</code></td>';
+    html += '<td><select class="select select-sm" onchange="apSaveDefaultRulePolicy(this.value)" style="max-width:280px">' + policyOptions + '</select></td>';
+    html += '<td></td>';
+    html += '<td></td>';
+    html += '</tr>';
+  }
+
+  // Empty state for non-default rules
+  if (nonDefaultRules.length === 0 && apDefaultRule) {
+    html += '<tr><td colspan="5" class="text-muted" style="text-align:center;padding:16px">' + __t("access.noRules") + '</td></tr>';
+  }
+
+  nonDefaultRules.forEach(function(r, i) {
+    html += "<tr>";
+    html += "<td>#" + (i + 1) + "</td>";
+    html += "<td><code>" + escapeHtml(r.pathPattern) + "</code></td>";
+    html += "<td>" + escapeHtml(r.accessPolicyName) + "</td>";
+    html += '<td><label class="ap-switch" title="' + (r.enabled ? __t("access.clickToDisable") : __t("access.clickToEnable")) + '"><input type="checkbox"' + (r.enabled ? ' checked' : '') + ' onchange="apToggleRule(&#39;' + escapeHtml(r.id) + '&#39;,' + (r.enabled ? 0 : 1) + ')"><span class="ap-switch-slider"></span></label></td>';
+    html += '<td class="ap-actions">';
+    html += apIconBtn(AP_ICON_EDIT, __t("common.edit"), "openRuleDialog('edit','" + escapeHtml(r.id) + "')");
+    html += apIconBtn(AP_ICON_DELETE, __t("common.delete"), "apDeleteRule('" + escapeHtml(r.id) + "')", "danger");
+    html += "</td></tr>";
+  });
+
+  html += "</tbody></table>";
+  wrap.innerHTML = html;
+}
+
+async function apSaveDefaultRulePolicy(policyId) {
+  if (!apDefaultRule) return;
+  var res = await api("PUT", "/security-rules/" + apDefaultRule.id, {
+    accessPolicyId: policyId,
+    remark: apDefaultRule.remark || "Default fallback rule"
+  });
+  if (res.ok) {
+    showToast(__t("access.ruleSaved"), "success");
+    apDefaultRule.accessPolicyId = policyId;
+  }
+}
+
+async function apToggleRule(id, enabled) {
+  var r = apRules.find(function(x) { return x.id === id; });
+  if (!r) return;
+  var res = await api("PUT", "/security-rules/" + id, {
+    accessPolicyId: r.accessPolicyId,
+    pathPattern: r.pathPattern,
+    priority: r.priority,
+    enabled: enabled,
+    remark: r.remark || ""
+  });
+  if (res.ok) {
+    r.enabled = enabled;
+    apRenderRules();
+    showToast(__t("access.ruleSaved"), "success");
+  }
+}
+
+// ─── Policy Dialog (custom only) ──────────────────────────────────────────
+function openPolicyDialog(mode, id) {
+  apEditingPolicyId = (mode === "edit") ? id : null;
+  document.getElementById("ap-policy-dialog-title").textContent = mode === "edit" ? __t("access.editPolicyTitle") : __t("access.policyTitle");
+
+  if (mode === "edit") {
+    var p = apPolicies.find(function(x) { return x.id === id; });
+    if (!p) return;
+    document.getElementById("ap-policy-name").value = p.name;
+    document.getElementById("ap-policy-type").value = p.accessType || "roles";
+    document.getElementById("ap-policy-desc").value = p.description || "";
+    document.querySelectorAll(".ap-role-cb").forEach(function(cb) {
+      cb.checked = (p.roles || []).includes(cb.value);
+    });
+  } else {
+    document.getElementById("ap-policy-name").value = "";
+    document.getElementById("ap-policy-type").value = "roles";
+    document.getElementById("ap-policy-desc").value = "";
+    document.querySelectorAll(".ap-role-cb").forEach(function(cb) { cb.checked = false; });
+  }
+  showDialog("ap-policy-dialog");
+}
+
+async function apSavePolicy() {
+  var body = {
+    name: document.getElementById("ap-policy-name").value.trim(),
+    accessType: document.getElementById("ap-policy-type").value,
+    description: document.getElementById("ap-policy-desc").value.trim(),
+  };
+  body.roles = [];
+  document.querySelectorAll(".ap-role-cb:checked").forEach(function(cb) { body.roles.push(cb.value); });
+  if (body.roles.length === 0) { showToast(__t("access.roleRequired"), "error"); return; }
+  if (!body.name) { showToast(__t("access.nameRequired"), "error"); return; }
+
+  var res;
+  if (apEditingPolicyId) {
+    res = await api("PUT", "/access-policies/" + apEditingPolicyId, body);
+  } else {
+    res = await api("POST", "/access-policies", body);
+  }
+  if (res.ok) {
+    showToast(__t("access.policySaved"), "success");
+    closeDialog("ap-policy-dialog");
+    apLoadAll();
+  }
+}
+
+async function apDeletePolicy(id) {
+  var ok = await confirmDialog({ title: __t("access.deletePolicy"), message: __t("access.deletePolicyMsg"), danger: true });
+  if (!ok) return;
+  var res = await api("DELETE", "/access-policies/" + id);
+  if (res.ok) { showToast(__t("access.policyDeleted"), "success"); apLoadAll(); }
+}
+
+// ─── Rule Dialog ───────────────────────────────────────────────────────────
+function openRuleDialog(mode, id) {
+  apEditingRuleId = (mode === "edit") ? id : null;
+  document.getElementById("ap-rule-dialog-title").textContent = mode === "edit" ? __t("access.editRuleTitle") : __t("access.ruleTitle");
+
+  // Populate policy dropdown with all policies
+  var sel = document.getElementById("ap-rule-policy");
+  sel.innerHTML = apPolicies.map(function(p) {
+    return '<option value="' + escapeHtml(p.id) + '">' + escapeHtml(p.name) + ' \u2014 ' + escapeHtml(apAccessTypeLabel(p)) + '</option>';
+  }).join("");
+
+  document.getElementById("ap-rule-pattern").disabled = false;
+  document.getElementById("ap-rule-priority").disabled = false;
+
+  if (mode === "edit") {
+    var r = apRules.find(function(x) { return x.id === id; });
+    if (!r) return;
+    document.getElementById("ap-rule-pattern").value = r.pathPattern;
+    document.getElementById("ap-rule-priority").value = r.priority;
+    document.getElementById("ap-rule-remark").value = r.remark || "";
+    sel.value = r.accessPolicyId;
+  } else {
+    document.getElementById("ap-rule-pattern").value = "";
+    document.getElementById("ap-rule-priority").value = "0";
+    document.getElementById("ap-rule-remark").value = "";
+  }
+  showDialog("ap-rule-dialog");
+}
+
+async function apSaveRule() {
+  var body = {
+    accessPolicyId: document.getElementById("ap-rule-policy").value,
+    remark: document.getElementById("ap-rule-remark").value.trim(),
+    pathPattern: document.getElementById("ap-rule-pattern").value.trim(),
+    priority: parseInt(document.getElementById("ap-rule-priority").value, 10) || 0,
+  };
+  if (!body.pathPattern) { showToast(__t("access.patternRequired"), "error"); return; }
+
+  var res;
+  if (apEditingRuleId) {
+    res = await api("PUT", "/security-rules/" + apEditingRuleId, body);
+  } else {
+    res = await api("POST", "/security-rules", body);
+  }
+  if (res.ok) {
+    showToast(__t("access.ruleSaved"), "success");
+    closeDialog("ap-rule-dialog");
+    apLoadAll();
+  }
+}
+
+async function apDeleteRule(id) {
+  var ok = await confirmDialog({ title: __t("access.deleteRule"), message: __t("access.deleteRuleMsg"), danger: true });
+  if (!ok) return;
+  var res = await api("DELETE", "/security-rules/" + id);
+  if (res.ok) { showToast(__t("access.ruleDeleted"), "success"); apLoadAll(); }
+}
+
+// ─── Register Tab ──────────────────────────────────────────────────────────
+registerTab("access", function() { apLoadAll(); });
+
+;
+
+// ─── Crop aspect ratios per logo type ──────────────────────────
+var CROP_RATIOS = {
+  'square': 1, 'square-dark': 1, 'favicon': 1,
+  'rect': NaN, 'rect-dark': NaN,
+  'splash-portrait': 9/16, 'splash-landscape': 16/9,
+  'og-image': 40/21
+};
+// Target dimensions and output format per logo type
+var CROP_OUTPUT = {
+  'square':           { maxW: 512,  maxH: 512,  fmt: 'image/webp', q: 0.9,  ext: 'webp' },
+  'square-dark':      { maxW: 512,  maxH: 512,  fmt: 'image/webp', q: 0.9,  ext: 'webp' },
+  'favicon':          { maxW: 128,  maxH: 128,  fmt: 'image/png',  q: 1,    ext: 'png'  },
+  'rect':             { maxW: 800,  maxH: 400,  fmt: 'image/webp', q: 0.9,  ext: 'webp' },
+  'rect-dark':        { maxW: 800,  maxH: 400,  fmt: 'image/webp', q: 0.9,  ext: 'webp' },
+  'og-image':         { maxW: 1200, maxH: 630,  fmt: 'image/jpeg', q: 0.85, ext: 'jpg'  },
+  'splash-portrait':  { maxW: 1080, maxH: 1920, fmt: 'image/webp', q: 0.85, ext: 'webp' },
+  'splash-landscape': { maxW: 1920, maxH: 1080, fmt: 'image/webp', q: 0.85, ext: 'webp' }
+};
+var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+var ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'];
+
+// ─── Lazy-load cropperjs from CDN ──────────────────────────────
+var __cropperLoaded = false;
+function loadCropperJS() {
+  if (__cropperLoaded) return Promise.resolve();
+  return new Promise(function(resolve, reject) {
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css';
+    document.head.appendChild(link);
+    var script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js';
+    script.onload = function() { __cropperLoaded = true; resolve(); };
+    script.onerror = function() { reject(new Error('CDN load failed')); };
+    document.head.appendChild(script);
+  });
+}
+
+// ─── Cropper state ─────────────────────────────────────────────
+var __cropper = null;
+var __cropType = null;
+
+// ─── Handle file selection (entry point from branding tab) ─────
+function handleLogoFile(type, input) {
+  var file = input.files && input.files[0];
+  input.value = ''; // reset so same file can be re-selected
+  if (!file) return;
+
+  // Validate file size
+  if (file.size > MAX_FILE_SIZE) {
+    showToast(__t('branding.fileTooLarge'), 'error');
+    return;
+  }
+
+  // Validate file type
+  if (ALLOWED_TYPES.indexOf(file.type) === -1) {
+    showToast(__t('branding.invalidFormat'), 'error');
+    return;
+  }
+
+  // SVG: skip cropper, upload directly
+  if (file.type === 'image/svg+xml' || file.name.toLowerCase().endsWith('.svg')) {
+    doUploadLogo(type, file);
+    return;
+  }
+
+  // Open cropper
+  openCropper(type, file);
+}
+
+function openCropper(type, file) {
+  __cropType = type;
+
+  loadCropperJS().then(function() {
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      var dialog = document.getElementById('crop-dialog');
+      var img = document.getElementById('crop-image');
+      if (!dialog || !img) return;
+
+      img.src = e.target.result;
+
+      // Destroy previous cropper instance if any
+      if (__cropper) { __cropper.destroy(); __cropper = null; }
+
+      dialog.showModal();
+
+      // Initialize cropperjs after dialog is visible (needs layout)
+      setTimeout(function() {
+        var ratio = CROP_RATIOS[type];
+        __cropper = new Cropper(img, {
+          aspectRatio: isNaN(ratio) ? NaN : ratio,
+          viewMode: 1,
+          autoCrop: true,
+          autoCropArea: 1,
+          responsive: true,
+          background: false,
+          guides: true,
+          center: true,
+          highlight: true,
+          cropBoxMovable: true,
+          cropBoxResizable: true,
+          toggleDragModeOnDblclick: false,
+        });
+      }, 100);
+    };
+    reader.readAsDataURL(file);
+  }).catch(function(err) {
+    // CDN load failed — fallback to direct upload
+    console.warn('Cropper load failed:', err);
+    showToast(__t('branding.cropperLoadFailed'), 'error');
+    doUploadLogo(type, file);
+  });
+}
+
+function confirmCrop() {
+  if (!__cropper || !__cropType) return;
+  var output = CROP_OUTPUT[__cropType] || { maxW: 512, maxH: 512, fmt: 'image/webp', q: 0.9, ext: 'webp' };
+
+  // Get cropped canvas at target dimensions (resize during crop for best quality)
+  var canvas = __cropper.getCroppedCanvas({
+    maxWidth: output.maxW,
+    maxHeight: output.maxH,
+    imageSmoothingEnabled: true,
+    imageSmoothingQuality: 'high',
+  });
+  if (!canvas) {
+    showToast(__t('branding.uploadError'), 'error');
+    closeCropDialog();
+    return;
+  }
+
+  // Show uploading state in dialog
+  var actions = document.querySelector('#crop-dialog .dialog-actions');
+  var content = document.querySelector('#crop-dialog .crop-toolbar');
+  if (actions) actions.innerHTML = '<div style="display:flex;align-items:center;gap:12px;width:100%;justify-content:center;"><div class="crop-progress" style="flex:1;max-width:200px;"><div class="crop-progress-bar"></div></div><span style="font-size:13px;color:var(--text-secondary);">' + __t('common.upload') + '...</span></div>';
+  if (content) content.style.opacity = '0.5';
+
+  canvas.toBlob(function(blob) {
+    if (!blob) {
+      showToast(__t('branding.uploadError'), 'error');
+      closeCropDialog();
+      return;
+    }
+    var file = new File([blob], __cropType + '.' + output.ext, { type: output.fmt });
+    doUploadLogo(__cropType, file).then(function() {
+      closeCropDialog();
+    }).catch(function() {
+      closeCropDialog();
+    });
+  }, output.fmt, output.q);
+}
+
+function cancelCrop() {
+  closeCropDialog();
+}
+
+function closeCropDialog() {
+  var dialog = document.getElementById('crop-dialog');
+  if (dialog && dialog.open) dialog.close();
+  if (__cropper) { __cropper.destroy(); __cropper = null; }
+  __cropType = null;
+  // Restore dialog actions and toolbar to initial state
+  var actions = document.querySelector('#crop-dialog .dialog-actions');
+  if (actions) actions.innerHTML = '<button class="btn btn-secondary" onclick="cancelCrop()">' + __t('branding.cropCancel') + '</button><button class="btn" onclick="confirmCrop()">' + __t('branding.cropConfirm') + '</button>';
+  var toolbar = document.querySelector('#crop-dialog .crop-toolbar');
+  if (toolbar) toolbar.style.opacity = '';
+}
+
+// ─── Toolbar actions ───────────────────────────────────────────
+function cropZoomIn() { if (__cropper) __cropper.zoom(0.1); }
+function cropZoomOut() { if (__cropper) __cropper.zoom(-0.1); }
+function cropRotateLeft() { if (__cropper) __cropper.rotate(-90); }
+function cropRotateRight() { if (__cropper) __cropper.rotate(90); }
+function cropFlipH() {
+  if (!__cropper) return;
+  var d = __cropper.getData();
+  __cropper.scaleX(d.scaleX === -1 ? 1 : -1);
+}
+function cropFlipV() {
+  if (!__cropper) return;
+  var d = __cropper.getData();
+  __cropper.scaleY(d.scaleY === -1 ? 1 : -1);
+}
+
+;
+
+// ─── Branding Tab ────────────────────────────────────────────────────
+
+var __brandingApiBase = "/.well-known/service/api";
+
+async function brandingApi(method, path, body) {
+  try {
+    var opts = { method: method, headers: {} };
+    if (body !== undefined) {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+    var res = await fetch(__brandingApiBase + path, opts);
+    if (!res.ok) {
+      var data = await res.json().catch(function() { return {}; });
+      showToast(data.error || __t("common.requestFailed"), "error");
+      return { ok: false, error: data.error };
+    }
+    return await res.json();
+  } catch (err) {
+    showToast(__t("common.networkError"), "error");
+    return { ok: false, error: err.message };
+  }
+}
+
+var __brandingData = {};
+var __brandingDirty = false;
+var __pendingLogos = {}; // { camelType: r2Key } for new uploads, { camelType: null } for deletions
+
+function markBrandingDirty() {
+  __brandingDirty = true;
+  var bar = document.getElementById("br-save-bar");
+  if (bar) bar.classList.add("visible");
+}
+
+function hideSaveBar() {
+  __brandingDirty = false;
+  var bar = document.getElementById("br-save-bar");
+  if (bar) bar.classList.remove("visible");
+}
+
+async function discardBrandingChanges() {
+  __pendingLogos = {};
+  await loadBranding();
+}
+
+async function loadBranding() {
+  var data = await brandingApi("GET", "/branding");
+  if (!data) return;
+  __brandingData = data;
+
+  // App Info
+  var br = data.branding || {};
+  document.getElementById("br-name").value = br.name || "";
+  document.getElementById("br-desc").value = br.description || "";
+  document.getElementById("br-url").value = br.url || "";
+  var pc = br.passportColor || "#1DC1C7";
+  document.getElementById("br-passport-color").value = pc;
+  document.getElementById("br-copyright-owner").value = (br.copyright && br.copyright.owner) || "";
+  document.getElementById("br-copyright-year").value = (br.copyright && br.copyright.year) || "";
+
+  // Accent color
+  updateAccentUI(pc);
+
+  // Logos
+  var logos = data.logos || {};
+  var LOGO_URLS = { "square": "/logo", "square-dark": "/logo-dark", "rect": "/logo-rect", "rect-dark": "/logo-rect-dark", "favicon": "/logo-favicon", "og-image": "/og-image", "splash-portrait": "/splash/portrait", "splash-landscape": "/splash/landscape" };
+  [{"type":"square","nameKey":"branding.logoAppLight","subKey":"branding.subLight","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"5\"/><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"/><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"/><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"/><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"/><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"/><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"/><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"/></svg>","spec":"512×512"},{"type":"square-dark","nameKey":"branding.logoAppDark","subKey":"branding.subDark","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/></svg>","spec":"512×512"},{"type":"rect","nameKey":"branding.logoWebLight","subKey":"branding.subLight","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"5\"/><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"/><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"/><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"/><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"/><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"/><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"/><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"/></svg>","spec":"SVG/PNG"},{"type":"rect-dark","nameKey":"branding.logoWebDark","subKey":"branding.subDark","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/></svg>","spec":"SVG/PNG"},{"type":"favicon","nameKey":"branding.logoFavicon","subKey":"branding.subBrowser","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"/></svg>","spec":"32×32 ICO"},{"type":"splash-portrait","nameKey":"branding.logoSplashP","subKey":"branding.subPortrait","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"/><circle cx=\"12\" cy=\"18\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/></svg>","spec":"9:16"},{"type":"splash-landscape","nameKey":"branding.logoSplashL","subKey":"branding.subLandscape","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><circle cx=\"18\" cy=\"12\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/></svg>","spec":"16:9"},{"type":"og-image","nameKey":"branding.logoOg","subKey":"branding.subSocial","icon":"<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/></svg>","spec":"1200×630"}].forEach(function(l) {
+    var key = l.type.replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+    var preview = document.getElementById("br-logo-preview-" + l.type);
+    var actions = document.getElementById("br-logo-actions-" + l.type);
+    var item = document.getElementById("br-logo-" + l.type);
+    // Remove any existing uploaded overlay
+    var oldOverlay = item && item.querySelector(".logo-uploaded-overlay");
+    if (oldOverlay) oldOverlay.remove();
+
+    if (logos[key]) {
+      var url = "/.well-known/service/blocklet" + (LOGO_URLS[l.type] || "/logo");
+      preview.innerHTML = '<img src="' + url + '?t=' + Date.now() + '" />';
+      // Add hover overlay with Replace + Discard buttons
+      if (item) {
+        var overlay = document.createElement("div");
+        overlay.className = "logo-uploaded-overlay";
+        // Build with DOM to avoid escaping issues
+        var replaceLabel = document.createElement("label");
+        replaceLabel.className = "logo-overlay-btn logo-overlay-btn-replace";
+        replaceLabel.textContent = __t("branding.replace");
+        var replaceInput = document.createElement("input");
+        replaceInput.type = "file";
+        replaceInput.accept = "image/png,image/jpeg,image/webp,image/svg+xml";
+        replaceInput.style.display = "none";
+        (function(logoType) {
+          replaceInput.onchange = function() { handleLogoFile(logoType, replaceInput); };
+        })(l.type);
+        replaceLabel.appendChild(replaceInput);
+        var discardBtn = document.createElement("button");
+        discardBtn.className = "logo-overlay-btn logo-overlay-btn-discard";
+        discardBtn.textContent = __t("branding.removeLogo");
+        (function(logoType) {
+          discardBtn.onclick = function() { deleteLogo(logoType); };
+        })(l.type);
+        overlay.appendChild(replaceLabel);
+        overlay.appendChild(discardBtn);
+        item.appendChild(overlay);
+      }
+    } else {
+      preview.innerHTML = '';
+    }
+  });
+
+  // Languages
+  var langs = data.languages || [];
+  var codes = langs.map(function(l) { return l.code; });
+  document.querySelectorAll(".lang-toggle").forEach(function(btn) {
+    if (codes.indexOf(btn.dataset.lang) !== -1) btn.classList.add("active");
+    else btn.classList.remove("active");
+  });
+
+  // Apple App IDs
+  var appleInput = document.getElementById("br-apple-app-ids");
+  if (appleInput) {
+    var appleIds = data.appleAppIds || [];
+    appleInput.value = Array.isArray(appleIds) ? appleIds.join(", ") : "";
+  }
+
+  hideSaveBar();
+}
+
+// Language toggle — changes are saved with the main Save Configuration button
+function toggleLang(code) {
+  var btn = document.querySelector('.lang-toggle[data-lang="' + code + '"]');
+  if (!btn) return;
+  // If deselecting, ensure at least one language remains active
+  if (btn.classList.contains("active")) {
+    var activeCount = document.querySelectorAll(".lang-toggle.active").length;
+    if (activeCount <= 1) {
+      showToast("At least one language is required", "error");
+      return;
+    }
+  }
+  btn.classList.toggle("active");
+  markBrandingDirty();
+}
+
+// Accent color (compact UI)
+function updateAccentUI(color) {
+  var picker = document.getElementById("br-accent-picker");
+  var hex = document.getElementById("br-accent-hex");
+  var hidden = document.getElementById("br-passport-color");
+  if (picker) picker.value = color;
+  if (hex) hex.value = color;
+  if (hidden) hidden.value = color;
+  document.querySelectorAll(".accent-dot").forEach(function(d) {
+    if (d.dataset.color === color) d.classList.add("selected");
+    else d.classList.remove("selected");
+  });
+}
+
+function onAccentInput(color) {
+  if (!color || !color.match(/^#[0-9a-fA-F]{6}$/)) return;
+  updateAccentUI(color);
+  markBrandingDirty();
+}
+
+function pickAccent(color) {
+  updateAccentUI(color);
+  markBrandingDirty();
+}
+
+async function saveBrandingInfo() {
+  var copyright = {};
+  var owner = document.getElementById("br-copyright-owner").value.trim();
+  var year = document.getElementById("br-copyright-year").value.trim();
+  if (owner) copyright.owner = owner;
+  if (year) copyright.year = year;
+
+  var body = {
+    branding: {
+      name: document.getElementById("br-name").value.trim(),
+      description: document.getElementById("br-desc").value.trim(),
+      url: document.getElementById("br-url").value.trim(),
+      passportColor: document.getElementById("br-passport-color").value,
+      copyright: copyright
+    }
+  };
+
+  // Also save languages
+  var langs = [];
+  var allLangs = [{"code":"en","name":"English"},{"code":"zh","name":"简体中文"}];
+  document.querySelectorAll(".lang-toggle.active").forEach(function(btn) {
+    var found = allLangs.find(function(l) { return l.code === btn.dataset.lang; });
+    if (found) langs.push(found);
+  });
+  body.languages = langs;
+
+  // Include pending logo changes
+  if (Object.keys(__pendingLogos).length > 0) {
+    body.logos = __pendingLogos;
+  }
+
+  // Apple App IDs
+  var appleRaw = (document.getElementById("br-apple-app-ids").value || "").trim();
+  if (appleRaw) {
+    body.appleAppIds = appleRaw.split(",").map(function(s) { return s.trim(); }).filter(Boolean);
+  } else {
+    body.appleAppIds = [];
+  }
+
+  var res = await brandingApi("PUT", "/branding", body);
+  if (res && res.ok) {
+    __pendingLogos = {};
+    showToast(__t("branding.updated"));
+    // Refresh favicon and header logo with cache-busting
+    var cacheBust = "?t=" + Date.now();
+    var icon = document.querySelector('link[rel="icon"]');
+    if (icon) icon.href = "/.well-known/service/blocklet/logo-favicon" + cacheBust;
+    var headerLogo = document.querySelector('.admin-header-left img');
+    if (headerLogo) headerLogo.src = headerLogo.src.split('?')[0] + cacheBust;
+    await loadBranding();
+  } else {
+    showToast(__t("branding.updateFailed"), "error");
+  }
+}
+
+async function doUploadLogo(type, file) {
+  if (!file) return;
+  var fd = new FormData();
+  fd.append("file", file);
+  try {
+    var resp = await fetch(__brandingApiBase + "/branding/logo/" + type, {
+      method: "POST",
+      body: fd,
+      credentials: "same-origin"
+    });
+    var data = await resp.json();
+    if (data.ok && data.r2Key) {
+      // Store in pending state — not saved to D1 yet
+      var camelType = type.replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+      __pendingLogos[camelType] = data.r2Key;
+      // Show preview using the logo serve endpoint (R2 key is now uploaded)
+      // We need to temporarily update the logos display
+      var LOGO_URLS = { "square": "/logo", "square-dark": "/logo-dark", "rect": "/logo-rect", "rect-dark": "/logo-rect-dark", "favicon": "/logo-favicon", "og-image": "/og-image", "splash-portrait": "/splash/portrait", "splash-landscape": "/splash/landscape" };
+      var preview = document.getElementById("br-logo-preview-" + type);
+      if (preview) {
+        // Use a blob URL from the uploaded file for instant preview
+        var blobUrl = URL.createObjectURL(file);
+        preview.innerHTML = '<img src="' + blobUrl + '" />';
+      }
+      // Add uploaded overlay if not exists
+      var item = document.getElementById("br-logo-" + type);
+      if (item) {
+        var oldOverlay = item.querySelector(".logo-uploaded-overlay");
+        if (oldOverlay) oldOverlay.remove();
+        var overlay = document.createElement("div");
+        overlay.className = "logo-uploaded-overlay";
+        var rl = document.createElement("label");
+        rl.className = "logo-overlay-btn logo-overlay-btn-replace";
+        rl.textContent = __t("branding.replace");
+        var ri = document.createElement("input");
+        ri.type = "file"; ri.accept = "image/png,image/jpeg,image/webp,image/svg+xml"; ri.style.display = "none";
+        (function(t) { ri.onchange = function() { handleLogoFile(t, ri); }; })(type);
+        rl.appendChild(ri);
+        var db = document.createElement("button");
+        db.className = "logo-overlay-btn logo-overlay-btn-discard";
+        db.textContent = __t("branding.removeLogo");
+        (function(t) { db.onclick = function() { deleteLogo(t); }; })(type);
+        overlay.appendChild(rl);
+        overlay.appendChild(db);
+        item.appendChild(overlay);
+      }
+      showToast(__t("branding.logoUploaded"));
+      markBrandingDirty();
+    } else {
+      showToast(data.error || "Upload failed", "error");
+    }
+  } catch(e) {
+    showToast(__t("branding.uploadError"), "error");
+  }
+}
+
+async function deleteLogo(type) {
+  if (!confirm(__t("branding.deleteLogo"))) return;
+  var camelType = type.replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+  __pendingLogos[camelType] = null; // mark for deletion on save
+  // Clear preview
+  var preview = document.getElementById("br-logo-preview-" + type);
+  if (preview) preview.innerHTML = '';
+  var item = document.getElementById("br-logo-" + type);
+  if (item) {
+    var overlay = item.querySelector(".logo-uploaded-overlay");
+    if (overlay) overlay.remove();
+  }
+  showToast(__t("branding.logoDeleted"));
+  markBrandingDirty();
+}
+
+async function saveBrandingLanguages() {
+  var langs = [];
+  var allLangs = [{"code":"en","name":"English"},{"code":"zh","name":"简体中文"}];
+  document.querySelectorAll(".lang-toggle.active").forEach(function(btn) {
+    var found = allLangs.find(function(l) { return l.code === btn.dataset.lang; });
+    if (found) langs.push(found);
+  });
+  var res = await brandingApi("PUT", "/branding", { languages: langs });
+  if (res && res.ok) showToast(__t("branding.languagesUpdated"));
+  else showToast(__t("branding.langUpdateFailed"), "error");
+}
+
+registerTab("branding", loadBranding);
+
+;
+
+// ─── Appearance Tab ──────────────────────────────────────────────────
+
+var __appearanceApiBase = "/.well-known/service/api";
+
+async function appearanceApi(method, path, body) {
+  try {
+    var opts = { method: method, headers: {} };
+    if (body !== undefined) {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+    var res = await fetch(__appearanceApiBase + path, opts);
+    if (!res.ok) {
+      var data = await res.json().catch(function() { return {}; });
+      showToast(data.error || __t("common.requestFailed"), "error");
+      return { ok: false, error: data.error };
+    }
+    return await res.json();
+  } catch (err) {
+    showToast(__t("common.networkError"), "error");
+    return { ok: false, error: err.message };
+  }
+}
+
+var __themeData = {};
+var __themeJsonOriginal = "";
+var __navItems = [];
+
+async function loadAppearance() {
+  document.getElementById("ap-nav-list").innerHTML = skeletonRows(3);
+  // Load theme
+  var tRes = await appearanceApi("GET", "/theme");
+  if (tRes) {
+    __themeData = tRes.theme || {};
+    populateThemeForm(__themeData);
+  }
+
+  // Load navigation
+  var nRes = await appearanceApi("GET", "/navigation");
+  if (nRes) {
+    __navItems = nRes.navigation || [];
+    renderNavList();
+  }
+}
+
+function populateThemeForm(theme) {
+  // Try to extract from concepts-based format
+  var concept = null;
+  if (theme.concepts && theme.currentConceptId) {
+    concept = theme.concepts.find(function(c) { return c.id === theme.currentConceptId; });
+  }
+
+  var prefer = concept ? (concept.prefer || "system") : (theme.prefer || "system");
+  document.getElementById("ap-theme-mode").value = prefer;
+
+  var light = concept ? (concept.themeConfig && concept.themeConfig.light || {}) : (theme.light || {});
+  var dark = concept ? (concept.themeConfig && concept.themeConfig.dark || {}) : (theme.dark || {});
+
+  // Light palette
+  setColorSafe("ap-light-primary", light.palette && light.palette.primary && light.palette.primary.main, "#1976d2");
+  setColorSafe("ap-light-secondary", light.palette && light.palette.secondary && light.palette.secondary.main, "#9c27b0");
+  setColorSafe("ap-light-bg", light.palette && light.palette.background && light.palette.background.default, "#ffffff");
+  setColorSafe("ap-light-text", light.palette && light.palette.text && light.palette.text.primary, "#212121");
+
+  // Dark palette
+  setColorSafe("ap-dark-primary", dark.palette && dark.palette.primary && dark.palette.primary.main, "#90caf9");
+  setColorSafe("ap-dark-secondary", dark.palette && dark.palette.secondary && dark.palette.secondary.main, "#ce93d8");
+  setColorSafe("ap-dark-bg", dark.palette && dark.palette.background && dark.palette.background.default, "#121212");
+  setColorSafe("ap-dark-text", dark.palette && dark.palette.text && dark.palette.text.primary, "#ffffff");
+
+  // Lock
+  document.getElementById("ap-theme-lock").checked = !!(theme.meta && theme.meta.locked);
+
+  // JSON editor
+  var jsonStr = JSON.stringify(theme, null, 2);
+  document.getElementById("ap-theme-json").value = jsonStr;
+  __themeJsonOriginal = jsonStr;
+}
+
+function setColorSafe(id, value, fallback) {
+  var el = document.getElementById(id);
+  if (!el) return;
+  // color inputs need hex format
+  if (value && value.charAt(0) === "#" && (value.length === 4 || value.length === 7)) {
+    el.value = value;
+  } else {
+    el.value = fallback;
+  }
+}
+
+function buildThemeFromForm() {
+  var prefer = document.getElementById("ap-theme-mode").value;
+  var locked = document.getElementById("ap-theme-lock").checked;
+
+  // Only use JSON editor if user manually modified it
+  var jsonText = document.getElementById("ap-theme-json").value.trim();
+  var jsonModified = jsonText && jsonText !== __themeJsonOriginal;
+  if (jsonModified) {
+    try {
+      var parsed = JSON.parse(jsonText);
+      // Add prefer and locked from form controls
+      if (parsed.concepts && parsed.currentConceptId) {
+        var c = parsed.concepts.find(function(c) { return c.id === parsed.currentConceptId; });
+        if (c) c.prefer = prefer;
+      } else {
+        parsed.prefer = prefer;
+      }
+      parsed.meta = { locked: locked };
+      return parsed;
+    } catch(e) {
+      showToast(__t("appearance.invalidJson"), "error");
+      return null;
+    }
+  }
+
+  // Build concepts-based theme from color pickers
+  var conceptId = (__themeData.currentConceptId) || "default";
+  return {
+    concepts: [{
+      id: conceptId,
+      name: "Custom",
+      prefer: prefer,
+      themeConfig: {
+        light: {
+          palette: {
+            primary: { main: document.getElementById("ap-light-primary").value },
+            secondary: { main: document.getElementById("ap-light-secondary").value },
+            background: { default: document.getElementById("ap-light-bg").value },
+            text: { primary: document.getElementById("ap-light-text").value }
+          }
+        },
+        dark: {
+          palette: {
+            primary: { main: document.getElementById("ap-dark-primary").value },
+            secondary: { main: document.getElementById("ap-dark-secondary").value },
+            background: { default: document.getElementById("ap-dark-bg").value },
+            text: { primary: document.getElementById("ap-dark-text").value }
+          }
+        },
+        common: {}
+      }
+    }],
+    currentConceptId: conceptId,
+    meta: { locked: locked }
+  };
+}
+
+async function saveTheme() {
+  var theme = buildThemeFromForm();
+  if (!theme) return;
+  var res = await appearanceApi("PUT", "/theme", { theme: theme });
+  if (res && res.ok) showToast(__t("appearance.themeUpdated"));
+  else showToast((res && res.error) || "Failed to update theme", "error");
+}
+
+// ─── Navigation ──────────────────────────────────────────────────────
+
+function renderNavList() {
+  var list = document.getElementById("ap-nav-list");
+  if (!list) return;
+  if (__navItems.length === 0) {
+    list.innerHTML = '<p style="color:var(--color-text-muted);font-size:13px;padding:8px 0;">' + __t("appearance.noNavItems") + '</p>';
+    return;
+  }
+  list.innerHTML = __navItems.map(function(item, i) {
+    return '<div class="nav-item" style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--color-border);">' +
+      '<span style="min-width:24px;text-align:center;color:var(--color-text-muted);">' + (i+1) + '</span>' +
+      '<span style="flex:1;font-size:14px;">' + escapeHtml(item.title || "(untitled)") + '</span>' +
+      '<span style="color:var(--color-text-muted);font-size:12px;">' + escapeHtml(item.link || "") + '</span>' +
+      '<button class="btn btn-sm" onclick="editNavItem(' + i + ')" style="padding:2px 8px;">' + __t("common.edit") + '</button>' +
+      '<button class="btn btn-sm" onclick="moveNavItem(' + i + ',-1)" style="padding:2px 6px;" ' + (i === 0 ? "disabled" : "") + '>' + __t("appearance.up") + '</button>' +
+      '<button class="btn btn-sm" onclick="moveNavItem(' + i + ',1)" style="padding:2px 6px;" ' + (i === __navItems.length - 1 ? "disabled" : "") + '>' + __t("appearance.down") + '</button>' +
+      '<button class="btn btn-sm btn-danger" onclick="removeNavItem(' + i + ')" style="padding:2px 8px;">' + __t("common.delete") + '</button>' +
+    '</div>';
+  }).join("");
+}
+
+function escapeHtml(str) {
+  return String(str).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
+}
+
+function addNavItem() {
+  var title = prompt(__t("appearance.navTitlePrompt"));
+  if (title === null) return;
+  var link = prompt(__t("appearance.navLinkPrompt"), "/");
+  if (link === null) return;
+  __navItems.push({ title: title, link: link });
+  renderNavList();
+}
+
+function editNavItem(i) {
+  var item = __navItems[i];
+  if (!item) return;
+  var title = prompt(__t("appearance.navTitlePrompt"), item.title || "");
+  if (title === null) return;
+  var link = prompt(__t("appearance.navLinkPrompt"), item.link || "");
+  if (link === null) return;
+  item.title = title;
+  item.link = link;
+  renderNavList();
+}
+
+function removeNavItem(i) {
+  if (!confirm(__t("appearance.deleteNavItem"))) return;
+  __navItems.splice(i, 1);
+  renderNavList();
+}
+
+function moveNavItem(i, dir) {
+  var j = i + dir;
+  if (j < 0 || j >= __navItems.length) return;
+  var tmp = __navItems[i];
+  __navItems[i] = __navItems[j];
+  __navItems[j] = tmp;
+  renderNavList();
+}
+
+async function saveNavigation() {
+  var res = await appearanceApi("PUT", "/navigation", { navigation: __navItems });
+  if (res && res.ok) showToast(__t("appearance.navUpdated"));
+  else showToast((res && res.error) || "Failed to update navigation", "error");
+}
+
+registerTab("appearance", loadAppearance);
+
+;
+
+// ─── Settings tab ─────────────────────────────────────────────────
+
+var __settingsData = null;
+var __oauthEditMode = false;
+var __providerMeta = {"google":{"name":"Google","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 262\"><path fill=\"#4285F4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34A853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#FBBC05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#EB4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>"},"github":{"name":"GitHub","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 250\" fill=\"currentColor\"><path d=\"M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0\"/></svg>"},"apple":{"name":"Apple","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 315\" fill=\"currentColor\"><path d=\"M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.388 39.475 13.675 51.889 13.675c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.808M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.639-22.262\"/></svg>"},"twitter":{"name":"Twitter","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M149.079 108.399L242.33 0h-22.098l-80.97 94.12L74.59 0H0l97.796 142.328L0 256h22.1l85.507-99.395L175.905 256h74.59L149.073 108.399zM118.81 143.58l-9.909-14.172l-78.84-112.773h33.943l63.625 91.011l9.909 14.173l82.705 118.3H186.3l-67.49-96.533z\"/></svg>"},"auth0":{"name":"Auth0","icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 256\"><path fill=\"#EB5424\" d=\"M203.97 200.38L167.47 88l-39.5 112.38h75.98zm0-144.76L167.47 168l75.97-26.16l19.76-60.82c6.64-20.4-1.94-42.72-21.18-52.76l-38.06 27.36zM52.03 55.62L88.54 168l39.5-112.38H52.02zM52.03 200.38L88.54 88L12.56 114.16l-5.92 18.2c-6.64 20.4 1.94 42.72 21.18 52.76l24.2-17.38l.01.01v-.01l-.01.01.01-.37z\"/></svg>"}};
+
+function loadSettings() {
+  document.getElementById("st-oauth-list").innerHTML = skeletonRows(3);
+  api("GET", "/settings").then(function(data) {
+    if (!data.ok) return;
+    __settingsData = data.settings;
+    renderOAuthProviders();
+    renderBuiltinProviders();
+    renderSessionConfig();
+    renderEmailConfig();
+    fedLoad();
+  });
+}
+
+// ─── OAuth Providers (card grid) ─────────────────────────────────
+
+function renderOAuthProviders() {
+  var wrap = document.getElementById("st-oauth-list");
+  if (!wrap || !__settingsData) return;
+  var providers = __settingsData.oauthProviders || {};
+  var keys = Object.keys(providers);
+  if (keys.length === 0) {
+    wrap.innerHTML = '<div class="settings-row" style="color:var(--text-tertiary)">' + __t("settings.noOAuth") + '</div>';
+    return;
+  }
+  keys.sort(function(a, b) {
+    return (providers[a].order || 999) - (providers[b].order || 999);
+  });
+  var html = "";
+  for (var i = 0; i < keys.length; i++) {
+    var name = keys[i];
+    var p = providers[name];
+    var meta = __providerMeta[name];
+    var displayName = meta ? meta.name : (name.charAt(0).toUpperCase() + name.slice(1));
+    var iconHtml = meta && meta.icon ? '<span class="st-oauth-card-icon">' + meta.icon + '</span>' : "";
+    var statusDot = p.enabled !== false
+      ? '<span class="st-oauth-dot st-oauth-dot-on"></span>'
+      : '<span class="st-oauth-dot st-oauth-dot-off"></span>';
+    html += '<div class="st-oauth-card" onclick="openOAuthDialog(\'edit\',\'' + escapeHtml(name) + '\')" title="' + escapeHtml(displayName) + '">'
+      + iconHtml
+      + '<span class="st-oauth-card-name">' + escapeHtml(displayName) + '</span>'
+      + statusDot
+      + '</div>';
+  }
+  wrap.innerHTML = html;
+}
+
+function escapeHtml(s) {
+  var d = document.createElement("div");
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+function renderProviderPicker(selectedProvider) {
+  var picker = document.getElementById("st-oauth-provider-picker");
+  if (!picker) return;
+  var configuredProviders = (__settingsData && __settingsData.oauthProviders) ? __settingsData.oauthProviders : {};
+  var html = "";
+  var keys = Object.keys(__providerMeta);
+  for (var i = 0; i < keys.length; i++) {
+    var id = keys[i];
+    var meta = __providerMeta[id];
+    var isSelected = id === selectedProvider;
+    var isAdded = !__oauthEditMode && !!configuredProviders[id];
+    var cls = "provider-card";
+    if (isSelected) cls += " selected";
+    if (isAdded) cls += " added";
+    var badge = isAdded ? '<span class="provider-added-badge">' + __t("settings.added") + '</span>' : "";
+    var onclick = isAdded ? "" : 'onclick="selectOAuthProvider(\'' + id + '\')"';
+    html += '<div class="' + cls + '" data-provider="' + id + '" ' + onclick + '>'
+      + '<span class="provider-icon">' + meta.icon + '</span>'
+      + '<span class="provider-name">' + escapeHtml(meta.name) + '</span>'
+      + badge
+      + '</div>';
+  }
+  picker.innerHTML = html;
+}
+
+function selectOAuthProvider(id) {
+  document.getElementById("st-oauth-provider").value = id;
+  renderProviderPicker(id);
+  onOAuthProviderChange();
+}
+
+function openOAuthDialog(mode, providerName) {
+  __oauthEditMode = mode === "edit";
+  var title = document.getElementById("st-oauth-dialog-title");
+  title.textContent = __oauthEditMode ? __t("settings.editOAuthTitle") : __t("settings.addOAuthTitle");
+
+  var defaultProvider = "google";
+  if (__oauthEditMode && providerName) {
+    defaultProvider = providerName;
+  } else if (__settingsData && __settingsData.oauthProviders) {
+    var configured = __settingsData.oauthProviders;
+    var keys = Object.keys(__providerMeta);
+    for (var i = 0; i < keys.length; i++) {
+      if (!configured[keys[i]]) { defaultProvider = keys[i]; break; }
+    }
+  }
+  document.getElementById("st-oauth-provider").value = defaultProvider;
+
+  var picker = document.getElementById("st-oauth-provider-picker");
+  var display = document.getElementById("st-oauth-provider-display");
+  if (__oauthEditMode) {
+    picker.style.display = "none";
+    var meta = __providerMeta[defaultProvider] || { name: defaultProvider, icon: "" };
+    display.style.display = "flex";
+    display.innerHTML = '<span style="display:inline-flex;width:20px;height:20px">' + meta.icon + '</span>'
+      + '<span style="font-size:14px;font-weight:500;color:var(--text)">' + escapeHtml(meta.name) + '</span>';
+  } else {
+    picker.style.display = "";
+    display.style.display = "none";
+    renderProviderPicker(defaultProvider);
+  }
+
+  document.getElementById("st-oauth-clientid").value = "";
+  document.getElementById("st-oauth-secret").value = "";
+  document.getElementById("st-oauth-teamid").value = "";
+  document.getElementById("st-oauth-keyid").value = "";
+  document.getElementById("st-oauth-privatekey").value = "";
+  document.getElementById("st-oauth-serviceid").value = "";
+  document.getElementById("st-oauth-bundleid").value = "";
+  document.getElementById("st-oauth-domain").value = "";
+  document.getElementById("st-oauth-enabled").checked = true;
+  document.getElementById("st-oauth-order").value = "0";
+
+  if (__oauthEditMode && providerName && __settingsData) {
+    var p = __settingsData.oauthProviders[providerName];
+    if (p) {
+      document.getElementById("st-oauth-clientid").value = p.clientId || "";
+      document.getElementById("st-oauth-secret").value = p.clientSecret || "";
+      document.getElementById("st-oauth-teamid").value = p.teamId || "";
+      document.getElementById("st-oauth-keyid").value = p.keyId || "";
+      document.getElementById("st-oauth-privatekey").value = p.privateKey || "";
+      document.getElementById("st-oauth-serviceid").value = p.serviceId || "";
+      document.getElementById("st-oauth-bundleid").value = p.bundleId || "";
+      document.getElementById("st-oauth-domain").value = p.domain || "";
+      document.getElementById("st-oauth-enabled").checked = p.enabled !== false;
+      document.getElementById("st-oauth-order").value = String(p.order ?? 0);
+    }
+  }
+
+  onOAuthProviderChange();
+  updateCallbackUrl();
+  showDialog("st-oauth-dialog");
+}
+
+function onOAuthProviderChange() {
+  var provider = document.getElementById("st-oauth-provider").value;
+  var appleFields = document.querySelectorAll('[data-oauth-field="apple"]');
+  var auth0Fields = document.querySelectorAll('[data-oauth-field="auth0"]');
+  for (var i = 0; i < appleFields.length; i++) {
+    appleFields[i].style.display = provider === "apple" ? "" : "none";
+  }
+  for (var i = 0; i < auth0Fields.length; i++) {
+    auth0Fields[i].style.display = provider === "auth0" ? "" : "none";
+  }
+  updateCallbackUrl();
+}
+
+function updateCallbackUrl() {
+  var provider = document.getElementById("st-oauth-provider").value;
+  var el = document.getElementById("st-oauth-callback");
+  if (el) el.textContent = location.origin + "/.well-known/service/oauth/callback/" + provider;
+}
+
+function copyCallbackUrl() {
+  var el = document.getElementById("st-oauth-callback");
+  var btn = document.getElementById("st-copy-callback-btn");
+  if (el && btn && navigator.clipboard) {
+    var originalText = btn.textContent;
+    navigator.clipboard.writeText(el.textContent).then(function() {
+      btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" style="vertical-align:middle"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> ' + __t("common.copied");
+      btn.disabled = true;
+      setTimeout(function() { btn.textContent = originalText; btn.disabled = false; }, 2000);
+    });
+  }
+}
+
+function saveOAuthProvider() {
+  var provider = document.getElementById("st-oauth-provider").value;
+  var body = {
+    clientId: document.getElementById("st-oauth-clientid").value,
+    clientSecret: document.getElementById("st-oauth-secret").value,
+    enabled: document.getElementById("st-oauth-enabled").checked,
+    order: parseInt(document.getElementById("st-oauth-order").value, 10) || 0,
+  };
+
+  if (provider === "apple") {
+    body.teamId = document.getElementById("st-oauth-teamid").value;
+    body.keyId = document.getElementById("st-oauth-keyid").value;
+    body.privateKey = document.getElementById("st-oauth-privatekey").value;
+    body.serviceId = document.getElementById("st-oauth-serviceid").value;
+    body.bundleId = document.getElementById("st-oauth-bundleid").value;
+  }
+  if (provider === "auth0") {
+    body.domain = document.getElementById("st-oauth-domain").value;
+  }
+
+  api("PUT", "/settings/oauth/" + provider, body).then(function(data) {
+    if (data.ok) {
+      closeDialog("st-oauth-dialog");
+      showToast(__t("settings.oauthSaved"), "success");
+      loadSettings();
+    }
+  });
+}
+
+async function deleteOAuthProvider(name) {
+  var ok = await confirmDialog({ title: __t("settings.deleteProvider", { name: name }), message: __t("settings.deleteProviderMsg"), confirmLabel: __t("common.delete"), danger: true });
+  if (!ok) return;
+  var data = await api("DELETE", "/settings/oauth/" + name);
+  if (data.ok) {
+    showToast(__t("settings.providerDeleted"), "success");
+    loadSettings();
+  }
+}
+
+// ─── Built-in Providers ──────────────────────────────────────────
+
+function renderBuiltinProviders() {
+  if (!__settingsData) return;
+  var bp = __settingsData.builtinProviders || {};
+  var email = __settingsData.email || {};
+  var emailConfigured = !!(email.resendApiKey && email.fromAddress);
+
+  document.getElementById("st-bp-passkey").checked = bp.passkey ? bp.passkey.enabled !== false : true;
+  document.getElementById("st-bp-email").checked = bp.email ? bp.email.enabled !== false : true;
+  document.getElementById("st-bp-wallet").checked = bp.wallet ? bp.wallet.enabled !== false : true;
+
+  // Show hint if email not configured
+  var hint = document.getElementById("st-email-hint");
+  var emailToggle = document.getElementById("st-bp-email");
+  if (hint && emailToggle) {
+    if (!emailConfigured) {
+      hint.classList.remove("hidden");
+      emailToggle.disabled = true;
+      emailToggle.checked = false;
+    } else {
+      hint.classList.add("hidden");
+      emailToggle.disabled = false;
+    }
+  }
+}
+
+function saveBuiltinProviders() {
+  var body = {
+    passkey: { enabled: document.getElementById("st-bp-passkey").checked },
+    email: { enabled: document.getElementById("st-bp-email").checked },
+    wallet: { enabled: document.getElementById("st-bp-wallet").checked },
+  };
+  api("PUT", "/settings/builtin-providers", body).then(function(data) {
+    if (data.ok) showToast(__t("settings.saved"), "success");
+  });
+}
+
+// ─── Session ─────────────────────────────────────────────────────
+
+function updateSessionLabel() {
+  var ttl = document.getElementById("st-session-ttl").value;
+  document.getElementById("st-session-lifetime-label").textContent = __t("settings.jwtLifetime", { days: ttl });
+  document.getElementById("st-session-ttl").title = __t("settings.jwtLifetime", { days: ttl });
+}
+
+function renderSessionConfig() {
+  if (!__settingsData) return;
+  var s = __settingsData.session || {};
+  var ttl = s.jwtTtlDays || 7;
+  document.getElementById("st-session-ttl").value = ttl;
+  updateSessionLabel();
+}
+
+function saveSessionConfig() {
+  var ttl = parseInt(document.getElementById("st-session-ttl").value, 10);
+  api("PUT", "/settings/session", { jwtTtlDays: ttl }).then(function(data) {
+    if (data.ok) showToast(__t("settings.sessionSaved"), "success");
+  });
+}
+
+// ─── Email ───────────────────────────────────────────────────────
+
+function renderEmailConfig() {
+  if (!__settingsData) return;
+  var e = __settingsData.email || {};
+  document.getElementById("st-email-apikey").value = e.resendApiKey || "";
+  document.getElementById("st-email-from").value = e.fromAddress || "";
+}
+
+function saveEmailConfig() {
+  var body = {
+    resendApiKey: document.getElementById("st-email-apikey").value,
+    fromAddress: document.getElementById("st-email-from").value,
+  };
+  api("PUT", "/settings/email", body).then(function(data) {
+    if (data.ok) {
+      showToast(__t("settings.emailSaved"), "success");
+      // Re-render builtin providers to update email toggle state
+      loadSettings();
+    }
+  });
+}
+
+registerTab("settings", loadSettings);
+
+
+// ─── Federation (Unified Login) ──────────────────────────────
+
+var __fedData = null;
+var __fedLoading = false;
+
+var FED_ICON_REMOVE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>';
+var FED_ICON_REFRESH = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M21 21v-5h-5"/></svg>';
+var FED_ICON_CHECK = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+var FED_ICON_UNLINK = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 0 10h-3m-6 0H6a5 5 0 0 1 0-10h3"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
+var FED_ICON_DISABLE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>';
+var FED_ICON_ENABLE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>';
+
+function fedIconBtn(icon, title, onclick, variant) {
+  var cls = variant === "danger" ? "ap-icon-btn ap-icon-btn-danger" : variant === "success" ? "ap-icon-btn ap-icon-btn-success" : "ap-icon-btn";
+  return '<button class="' + cls + '" title="' + fedEscAttr(title) + '" onclick="' + onclick + '">' + icon + '</button>';
+}
+
+function fedNormalizeUrl(input) {
+  var s = (input || "").trim();
+  if (!s) return "";
+  if (!/^https?:\/\//i.test(s)) s = "https://" + s;
+  try { return new URL(s).origin; } catch(e) { return s; }
+}
+
+function fedFormatUrl(el) {
+  clearTimeout(el._fedTimer);
+  el._fedTimer = setTimeout(function() {
+    var v = el.value.trim();
+    if (!v) return;
+    var norm = fedNormalizeUrl(v);
+    if (norm && norm !== v && norm !== "https://") {
+      el.value = norm;
+    }
+  }, 800);
+}
+
+function fedLoad() {
+  api("GET", "/admin/federation").then(function(data) {
+    if (!data || data.error) {
+      __fedData = { role: null, enabled: false, sites: [], delegation: { exists: false } };
+    } else {
+      __fedData = data;
+    }
+    fedRender();
+  });
+}
+
+function fedRender() {
+  var el = document.getElementById("fed-section");
+  if (!el || !__fedData) return;
+  if (!__fedData.role) {
+    el.innerHTML = fedRenderUnconfigured();
+  } else if (__fedData.role === "master") {
+    el.innerHTML = fedRenderMaster();
+  } else {
+    el.innerHTML = fedRenderMember();
+  }
+}
+
+function fedRenderUnconfigured() {
+  return '<p class="settings-card-desc">' + __t("federation.desc") + '</p>'
+    + '<div class="fed-init-buttons">'
+    + '<button class="btn" id="fed-enable-btn" onclick="fedEnable()"' + (__fedLoading ? ' disabled' : '') + '>'
+    + (__fedLoading ? '<span class="spinner"></span> ' : '') + __t("federation.enableMaster") + '</button>'
+    + '<button class="btn btn-secondary" onclick="fedOpenJoin()"' + (__fedLoading ? ' disabled' : '') + '>'
+    + __t("federation.joinMember") + '</button>'
+    + '</div>';
+}
+
+function fedRenderMaster() {
+  var html = '<div style="padding:12px 20px;display:flex;align-items:center;gap:8px">'
+    + '<span class="fed-status-badge master">&#9733; ' + __t("federation.masterSite") + '</span>'
+    + '<span style="font-size:13px;color:var(--text-secondary)">' + __t("federation.masterDesc") + '</span>'
+    + '</div>';
+
+  // Sites header with refresh button
+  html += '<div style="padding:0 20px 8px;display:flex;justify-content:space-between;align-items:center">'
+    + '<span style="font-size:13px;font-weight:600;color:var(--text)">' + __t("federation.sites") + '</span>'
+    + '<button class="ap-icon-btn" title="' + __t("federation.refresh") + '" onclick="fedRefresh()" id="fed-refresh-btn">' + FED_ICON_REFRESH + '</button>'
+    + '</div>';
+
+  // Sort: master first, then approved, then pending
+  var sites = (__fedData.sites || []).slice().sort(function(a, b) {
+    if (a.isMaster) return -1;
+    if (b.isMaster) return 1;
+    if (a.status === "pending" && b.status !== "pending") return 1;
+    if (b.status === "pending" && a.status !== "pending") return -1;
+    return 0;
+  });
+  var currentOrigin = location.origin;
+  for (var i = 0; i < sites.length; i++) {
+    var s = sites[i];
+    var star = s.isMaster ? '<span class="fed-star">&#9733;</span> ' : '';
+    var isMe = s.url && fedNormalizeUrl(s.url) === currentOrigin;
+    var meTag = isMe ? ' <span style="font-size:10px;padding:1px 5px;border-radius:999px;background:var(--blue-light,#dbeafe);color:var(--blue-muted,#1d4ed8);font-weight:500">' + __t("federation.currentSite") + '</span>' : '';
+    var isPending = s.status === "pending";
+    var statusBadge = isPending
+      ? ' <span style="font-size:11px;padding:1px 6px;border-radius:999px;background:var(--yellow-light,#fef3c7);color:var(--yellow-text,#92400e);font-weight:500">' + __t("federation.pending") + '</span>'
+      : '';
+
+    var actions = '';
+    if (s.isMaster) {
+      // Disabled placeholder buttons for alignment with member rows
+      actions = '<button class="ap-icon-btn" disabled style="opacity:0.25;cursor:default">' + FED_ICON_DISABLE + '</button>'
+        + '<button class="ap-icon-btn" disabled style="opacity:0.25;cursor:default">' + FED_ICON_UNLINK + '</button>';
+    } else if (isPending) {
+      actions = fedIconBtn(FED_ICON_CHECK, __t("federation.approve"), "fedApproveSite(&#39;" + s.did + "&#39;)", "success")
+        + fedIconBtn(FED_ICON_REMOVE, __t("federation.reject"), "fedRejectSite(&#39;" + s.did + "&#39;,&#39;" + fedEscAttr(s.name) + "&#39;)", "danger");
+    } else {
+      // Approved member: disable/enable toggle + unbind
+      if (s.enabled === false) {
+        actions = fedIconBtn(FED_ICON_ENABLE, __t("federation.enable"), "fedToggleMember(&#39;" + s.did + "&#39;,true)")
+          + fedIconBtn(FED_ICON_UNLINK, __t("federation.unbind"), "fedUnbindSite(&#39;" + s.did + "&#39;,&#39;" + fedEscAttr(s.name) + "&#39;)", "danger");
+      } else {
+        actions = fedIconBtn(FED_ICON_DISABLE, __t("federation.disable"), "fedToggleMember(&#39;" + s.did + "&#39;,false)", "danger")
+          + fedIconBtn(FED_ICON_UNLINK, __t("federation.unbind"), "fedUnbindSite(&#39;" + s.did + "&#39;,&#39;" + fedEscAttr(s.name) + "&#39;)", "danger");
+      }
+    }
+    // Disabled badge for approved but disabled members
+    if (!isPending && !s.isMaster && s.enabled === false) {
+      statusBadge = ' <span style="font-size:11px;padding:1px 6px;border-radius:999px;background:var(--bg-tertiary,#e5e7eb);color:var(--text-tertiary)">' + __t("federation.disabled") + '</span>';
+    }
+
+    html += '<div class="fed-site-row">'
+      + '<div class="fed-site-name">' + star + '<span class="fed-site-label">' + fedEscHtml(s.name) + '</span>' + meTag + statusBadge + '</div>'
+      + '<div class="fed-site-url" title="' + fedEscAttr(s.url) + '"><a href="' + fedEscAttr(s.url) + '" target="_blank">' + fedEscHtml(s.url) + '</a></div>'
+      + '<div class="fed-site-actions">' + actions + '</div>'
+      + '</div>';
+  }
+
+  // Disband
+  html += '<div style="padding:16px 20px;border-top:1px solid var(--border)">'
+    + '<button class="btn btn-danger btn-sm" style="width:auto" onclick="fedDisband()">' + __t("federation.disband") + '</button>'
+    + '</div>';
+
+  return html;
+}
+
+function fedRenderMember() {
+  var enabled = __fedData.enabled;
+  var isPending = !enabled && __fedData.role === "member";
+
+  // Header: badge + status + toggle (no toggle for pending)
+  var badgeClass = isPending ? 'style="background:var(--yellow-light,#fef3c7);color:var(--yellow-text,#92400e)"' : '';
+  var badgeText = isPending ? __t("federation.pending") : __t("federation.member");
+  var statusText = isPending ? __t("federation.pendingDesc") : (enabled ? __t("federation.enabled") : __t("federation.disabled"));
+
+  var html = '<div style="padding:12px 20px;display:flex;align-items:center;gap:12px;justify-content:space-between">'
+    + '<div style="display:flex;align-items:center;gap:8px">'
+    + '<span class="fed-status-badge member" ' + badgeClass + '>' + badgeText + '</span>'
+    + '<span style="font-size:13px;color:var(--text-secondary)">' + statusText + '</span>'
+    + '</div>';
+  if (!isPending) {
+    html += '<label class="toggle-switch">'
+      + '<input type="checkbox" ' + (enabled ? 'checked' : '') + ' onchange="fedToggle(this.checked)" />'
+      + '<span class="toggle-slider"></span>'
+      + '</label>';
+  }
+  html += '</div>';
+
+  // Master URL
+  if (__fedData.masterUrl) {
+    html += '<div style="padding:0 20px 8px;font-size:13px;color:var(--text-secondary)">'
+      + __t("federation.delegatedTo") + ' <a href="' + fedEscAttr(__fedData.masterUrl) + '" target="_blank" style="color:var(--blue)">' + fedEscHtml(__fedData.masterUrl) + '</a>'
+      + '</div>';
+  }
+
+  // Site list — show all sites with role labels; pending sites get "pending" instead of "member"
+  if (__fedData.sites && __fedData.sites.length > 0) {
+    // Sort: master first, then approved, then pending
+    var memberSites = __fedData.sites.slice().sort(function(a, b) {
+      if (a.isMaster) return -1;
+      if (b.isMaster) return 1;
+      if (a.status === "pending" && b.status !== "pending") return 1;
+      if (b.status === "pending" && a.status !== "pending") return -1;
+      return 0;
+    });
+    html += '<div style="padding:8px 20px 4px;display:flex;justify-content:space-between;align-items:center">'
+      + '<span style="font-size:13px;font-weight:600;color:var(--text)">' + __t("federation.sites") + '</span>'
+      + '<button class="ap-icon-btn" title="' + __t("federation.refresh") + '" onclick="fedRefresh()" id="fed-refresh-btn">' + FED_ICON_REFRESH + '</button>'
+      + '</div>';
+    var currentOrigin = location.origin;
+    for (var i = 0; i < memberSites.length; i++) {
+      var s = memberSites[i];
+      var star = s.isMaster ? '<span class="fed-star">&#9733;</span> ' : '';
+      var isMe = s.url && fedNormalizeUrl(s.url) === currentOrigin;
+      var meTag = isMe ? ' <span style="font-size:10px;padding:1px 5px;border-radius:999px;background:var(--blue-light,#dbeafe);color:var(--blue-muted,#1d4ed8);font-weight:500">' + __t("federation.currentSite") + '</span>' : '';
+      var isPendingSite = s.status === "pending";
+      var role = s.isMaster ? __t("federation.master")
+        : (isPendingSite
+          ? '<span style="color:var(--yellow-text,#92400e);font-weight:500">' + __t("federation.pending") + '</span>'
+          : __t("federation.member"));
+      html += '<div class="fed-site-row">'
+        + '<div class="fed-site-name">' + star + '<span class="fed-site-label">' + fedEscHtml(s.name) + '</span>' + meTag + '</div>'
+        + '<div class="fed-site-url" title="' + fedEscAttr(s.url) + '"><a href="' + fedEscAttr(s.url) + '" target="_blank">' + fedEscHtml(s.url) + '</a></div>'
+        + '<div class="fed-site-role">' + role + '</div>'
+        + '</div>';
+    }
+  }
+
+  html += '<div style="padding:16px 20px;border-top:1px solid var(--border)">'
+    + '<button class="btn btn-danger btn-sm" style="width:auto" onclick="fedLeave()">' + __t("federation.leave") + '</button>'
+    + '</div>';
+
+  return html;
+}
+
+function fedEscHtml(str) {
+  if (!str) return '';
+  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+function fedEscAttr(str) {
+  if (!str) return '';
+  return str.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+
+function fedSetLoading(loading) {
+  __fedLoading = loading;
+  fedRender();
+}
+
+function fedEnable() {
+  confirmDialog({
+    title: __t("federation.enableConfirm"),
+    message: __t("federation.enableMasterDesc"),
+    confirmLabel: __t("federation.enableMaster"),
+  }).then(function(ok) {
+    if (!ok) return;
+    fedSetLoading(true);
+    api("POST", "/admin/federation/enable", { url: location.origin, name: document.title || "App" }).then(function(data) {
+      __fedLoading = false;
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.enabled"), "success"); }
+      else { showToast(data.error || "Failed", "error"); fedRender(); }
+    });
+  });
+}
+
+function fedOpenJoin() {
+  document.getElementById("fed-join-url").value = "";
+  showDialog("fed-join-dialog");
+}
+
+function fedJoinSubmit() {
+  var masterUrl = fedNormalizeUrl(document.getElementById("fed-join-url").value);
+  if (!masterUrl) { showToast(__t("federation.masterUrl") + " is required", "error"); return; }
+
+  var btn = document.getElementById("fed-join-btn");
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span>';
+
+  api("POST", "/admin/federation/join", { masterUrl: masterUrl }).then(function(data) {
+    btn.disabled = false;
+    btn.textContent = __t("federation.joinMember");
+    if (data && !data.error) {
+      __fedData = data;
+      fedRender();
+      closeDialog("fed-join-dialog");
+      showToast(__t("federation.pendingApproval"), "success");
+    } else {
+      showToast(data.error || __t("federation.targetNotEnabled"), "error");
+    }
+  });
+}
+
+function fedToggle(enabled) {
+  if (!enabled) {
+    confirmDialog({
+      title: __t("federation.disableTitle"),
+      message: __t("federation.disableDesc") + " " + __t("federation.walletSafe") + " " + __t("federation.sessionWarning"),
+      confirmLabel: __t("common.confirm"),
+      danger: true,
+    }).then(function(ok) {
+      if (!ok) { fedRender(); return; }
+      api("PUT", "/admin/federation/toggle", { enabled: false }).then(function(data) {
+        if (data && !data.error) { __fedData = data; fedRender(); }
+      });
+    });
+    var cb = document.querySelector("#fed-section input[type=checkbox]");
+    if (cb) cb.checked = true;
+  } else {
+    api("PUT", "/admin/federation/toggle", { enabled: true }).then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); }
+    });
+  }
+}
+
+function fedApproveSite(did) {
+  api("POST", "/admin/federation/sites/" + encodeURIComponent(did) + "/approve").then(function(data) {
+    if (data && !data.error) {
+      __fedData = data;
+      fedRender();
+      showToast(__t("federation.approved"), "success");
+    } else {
+      showToast(data.error || "Failed", "error");
+    }
+  });
+}
+
+function fedRejectSite(did, name) {
+  confirmDialog({
+    title: __t("federation.rejectTitle"),
+    message: __t("federation.rejectDesc"),
+    confirmLabel: __t("federation.reject"),
+    danger: true,
+  }).then(function(ok) {
+    if (!ok) return;
+    api("DELETE", "/admin/federation/sites/" + encodeURIComponent(did)).then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.reject") + " \u2713", "success"); }
+    });
+  });
+}
+
+function fedRefresh() {
+  var btn = document.getElementById("fed-refresh-btn");
+  if (btn) { btn.style.opacity = "0.5"; btn.style.pointerEvents = "none"; }
+  fedLoad();
+  setTimeout(function() { if (btn) { btn.style.opacity = ""; btn.style.pointerEvents = ""; } }, 500);
+}
+
+// ─── Actions ─────────────────────────────────────────────────
+
+function fedToggleMember(did, enabled) {
+  if (!enabled) {
+    confirmDialog({
+      title: __t("federation.disableTitle"),
+      message: __t("federation.disableDesc") + " " + __t("federation.walletSafe") + " " + __t("federation.sessionWarning"),
+      confirmLabel: __t("federation.disable"),
+      danger: true,
+    }).then(function(ok) {
+      if (!ok) return;
+      api("PUT", "/admin/federation/sites/" + encodeURIComponent(did) + "/toggle", { enabled: false }).then(function(data) {
+        if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.disabled"), "success"); }
+      });
+    });
+  } else {
+    api("PUT", "/admin/federation/sites/" + encodeURIComponent(did) + "/toggle", { enabled: true }).then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.enabled"), "success"); }
+    });
+  }
+}
+
+function fedUnbindSite(did, name) {
+  confirmDialog({
+    title: __t("federation.unbindTitle"),
+    message: __t("federation.unbindDesc") + " " + __t("federation.walletSafe") + " " + __t("federation.sessionWarning"),
+    confirmLabel: __t("federation.unbind"),
+    danger: true,
+  }).then(function(ok) {
+    if (!ok) return;
+    api("DELETE", "/admin/federation/sites/" + encodeURIComponent(did)).then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.unbind") + " \u2713", "success"); }
+    });
+  });
+}
+
+function fedDisband() {
+  confirmDialog({
+    title: __t("federation.disbandTitle"),
+    message: __t("federation.disbandDesc") + " " + __t("federation.sessionWarning"),
+    confirmLabel: __t("federation.disband"),
+    danger: true,
+  }).then(function(ok) {
+    if (!ok) return;
+    api("POST", "/admin/federation/disband").then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.disband") + " \u2713", "success"); }
+    });
+  });
+}
+
+function fedLeave() {
+  confirmDialog({
+    title: __t("federation.leaveTitle"),
+    message: __t("federation.leaveDesc") + " " + __t("federation.sessionWarning"),
+    confirmLabel: __t("federation.leave"),
+    danger: true,
+  }).then(function(ok) {
+    if (!ok) return;
+    api("POST", "/admin/federation/leave").then(function(data) {
+      if (data && !data.error) { __fedData = data; fedRender(); showToast(__t("federation.leave") + " \u2713", "success"); }
+    });
+  });
+}
+