feat: add double click confirm and consolidate styles

src/client/admin-clients.ts

···
 					<div class="client-actions" style="display: flex; gap: 0.5rem; align-items: center;">
 						${client.isPreregistered ? `
 							<button class="btn-edit" onclick="event.stopPropagation(); editClient('${client.clientId}')">edit</button>
-							<button class="btn-delete" onclick="event.stopPropagation(); deleteClient('${client.clientId}')">delete</button>
+							<button class="btn-delete" onclick="event.stopPropagation(); deleteClient('${client.clientId}', event)">delete</button>
 						` : ''}
 						<span class="expand-indicator">details <span class="arrow">▼</span></span>
 					</div>
···
 	}
 };
 
-(window as any).deleteClient = async function(clientId: string) {
-	if (!confirm('Are you sure you want to delete this client? This will revoke access for all users and cannot be undone.')) {
-		return;
-	}
+(window as any).deleteClient = async function(clientId: string, event?: Event) {
+	const btn = event?.target as HTMLButtonElement | undefined;
+	
+	// Double-click confirmation pattern
+	if (btn?.dataset.confirmState === 'pending') {
+		// Second click - execute delete
+		delete btn.dataset.confirmState;
+		btn.disabled = true;
+		btn.textContent = 'deleting...';
+		
+		try {
+			const response = await fetch(`/api/admin/clients/${encodeURIComponent(clientId)}`, {
+				method: 'DELETE',
+				headers: {
+					'Authorization': `Bearer ${token}`,
+				},
+			});
 
-	try {
-		const response = await fetch(`/api/admin/clients/${encodeURIComponent(clientId)}`, {
-			method: 'DELETE',
-			headers: {
-				'Authorization': `Bearer ${token}`,
-			},
-		});
+			if (!response.ok) {
+				throw new Error('Failed to delete client');
+			}
 
-		if (!response.ok) {
-			throw new Error('Failed to delete client');
+			await loadClients();
+		} catch (error) {
+			console.error('Failed to delete client:', error);
+			showToast('Failed to delete client. Please try again.', 'error');
+			btn.disabled = false;
+			btn.textContent = 'delete';
+		}
+	} else {
+		// First click - set pending state
+		if (btn) {
+			const originalText = btn.textContent;
+			btn.dataset.confirmState = 'pending';
+			btn.textContent = 'you sure?';
+			
+			// Reset after 3 seconds if not confirmed
+			setTimeout(() => {
+				if (btn.dataset.confirmState === 'pending') {
+					delete btn.dataset.confirmState;
+					btn.textContent = originalText;
+				}
+			}, 3000);
 		}
-
-		await loadClients();
-	} catch (error) {
-		console.error('Failed to delete client:', error);
-		showToast('Failed to delete client. Please try again.', 'error');
 	}
 };
 

src/client/admin-invites.ts

···
 						<div class="invite-url">${invite.inviteUrl}</div>
 					</div>
 					<div class="invite-actions-btns">
-						<button class="copy-btn" data-invite-id="${invite.id}" data-invite-url="${invite.inviteUrl}" ${isActive ? '' : 'disabled'}>copy link</button>
-						<button class="edit-btn" onclick="editInvite(${invite.id})" ${isActive ? '' : 'disabled'}>edit</button>
-						<button class="delete-btn" onclick="deleteInvite(${invite.id})">delete</button>
+						<button class="btn-copy" data-invite-id="${invite.id}" data-invite-url="${invite.inviteUrl}" ${isActive ? '' : 'disabled'}>copy link</button>
+						<button class="btn-edit" onclick="editInvite(${invite.id})" ${isActive ? '' : 'disabled'}>edit</button>
+						<button class="btn-delete" onclick="deleteInvite(${invite.id}, event)">delete</button>
 					</div>
 				</div>
 			`;
 		}).join('');
 
 		// Add copy button handlers
-		const copyButtons = invitesList.querySelectorAll('.copy-btn');
+		const copyButtons = invitesList.querySelectorAll('.btn-copy');
 		copyButtons.forEach((btn) => {
 			btn.addEventListener('click', async (e) => {
 				const button = e.target as HTMLButtonElement;
···
 	}
 };
 
-(window as any).deleteInvite = async (inviteId: number) => {
-	if (!confirm('Are you sure you want to delete this invite? This action cannot be undone.')) {
-		return;
-	}
+(window as any).deleteInvite = async (inviteId: number, event?: Event) => {
+	const btn = event?.target as HTMLButtonElement | undefined;
+	
+	// Double-click confirmation pattern
+	if (btn?.dataset.confirmState === 'pending') {
+		// Second click - execute delete
+		delete btn.dataset.confirmState;
+		btn.textContent = 'deleting...';
+		btn.disabled = true;
+		
+		try {
+			const response = await fetch(`/api/invites/${inviteId}`, {
+				method: 'DELETE',
+				headers: {
+					'Authorization': `Bearer ${token}`,
+				},
+			});
 
-	try {
-		const response = await fetch(`/api/invites/${inviteId}`, {
-			method: 'DELETE',
-			headers: {
-				'Authorization': `Bearer ${token}`,
-			},
-		});
+			if (!response.ok) {
+				throw new Error('Failed to delete invite');
+			}
 
-		if (!response.ok) {
-			throw new Error('Failed to delete invite');
+			await loadInvites();
+		} catch (error) {
+			console.error('Failed to delete invite:', error);
+			alert('Failed to delete invite');
+			btn.textContent = 'delete';
+			btn.disabled = false;
+		}
+	} else {
+		// First click - set pending state
+		if (btn) {
+			const originalText = btn.textContent;
+			btn.dataset.confirmState = 'pending';
+			btn.textContent = 'you sure?';
+			
+			// Reset after 3 seconds if not confirmed
+			setTimeout(() => {
+				if (btn.dataset.confirmState === 'pending') {
+					delete btn.dataset.confirmState;
+					btn.textContent = originalText;
+				}
+			}, 3000);
 		}
-
-		await loadInvites();
-	} catch (error) {
-		console.error('Failed to delete invite:', error);
-		alert('Failed to delete invite');
 	}
 };

src/client/admin.ts

···
 				: initials;
 			
 			return `
-				<div class="user-card" data-user-id="${user.id}">
+				<div class="user-card ${user.status === 'suspended' ? 'user-suspended' : ''}" data-user-id="${user.id}">
 					<div class="user-avatar">${avatarContent}</div>
 					<div class="user-info">
 						<div class="user-name">${user.username}</div>
···
 						<span class="user-badge badge-role">${user.role}</span>
 					</div>
 					<div class="user-actions">
-						${user.status !== 'suspended' ? `<button class="btn btn-disable" data-action="disable" data-user-id="${user.id}">disable</button>` : ''}
-						<button class="btn btn-delete" data-action="delete" data-user-id="${user.id}">delete</button>
+						${user.status === 'suspended' 
+							? `<button class="btn-edit" data-action="enable" data-user-id="${user.id}">enable</button>` 
+							: `<button class="btn-disable" data-action="disable" data-user-id="${user.id}">disable</button>`
+						}
+						<button class="btn-delete" data-action="delete" data-user-id="${user.id}">delete</button>
 					</div>
 				</div>
 			`;
 		}).join('');
 
 		// Add event listeners for action buttons
-		document.querySelectorAll('.btn[data-action]').forEach(btn => {
+		document.querySelectorAll('button[data-action]').forEach(btn => {
 			btn.addEventListener('click', handleUserAction);
 		});
 	} catch (error) {
···
 	
 	if (!userId || !action) return;
 
-	const confirmMessage = action === 'delete' 
-		? 'Are you sure you want to delete this user? This cannot be undone.'
-		: 'Are you sure you want to disable this user? They will be logged out and unable to sign in.';
+	// Check if already in confirmation state
+	if (btn.dataset.confirmState === 'pending') {
+		// Second click - perform action
+		btn.dataset.confirmState = '';
+		btn.disabled = true;
+		
+		try {
+			let endpoint = '';
+			let method = 'POST';
+			
+			if (action === 'delete') {
+				endpoint = `/api/admin/users/${userId}/delete`;
+				method = 'DELETE';
+			} else if (action === 'disable') {
+				endpoint = `/api/admin/users/${userId}/disable`;
+			} else if (action === 'enable') {
+				endpoint = `/api/admin/users/${userId}/enable`;
+			}
 
-	if (!confirm(confirmMessage)) return;
+			const response = await fetch(endpoint, {
+				method,
+				headers: {
+					'Authorization': `Bearer ${token}`,
+				},
+			});
 
-	try {
-		const endpoint = action === 'delete' 
-			? `/api/admin/users/${userId}/delete`
-			: `/api/admin/users/${userId}/disable`;
-		
-		const method = action === 'delete' ? 'DELETE' : 'POST';
+			if (!response.ok) {
+				const error = await response.json();
+				throw new Error(error.error || 'Failed to perform action');
+			}
 
-		const response = await fetch(endpoint, {
-			method,
-			headers: {
-				'Authorization': `Bearer ${token}`,
-			},
-		});
-
-		if (!response.ok) {
-			const error = await response.json();
-			throw new Error(error.error || 'Failed to perform action');
+			// Reload users list
+			loadUsers();
+		} catch (error) {
+			console.error(`Failed to ${action} user:`, error);
+			alert(`Failed to ${action} user: ${error instanceof Error ? error.message : 'Unknown error'}`);
+			btn.disabled = false;
 		}
-
-		// Reload users list
-		loadUsers();
-	} catch (error) {
-		console.error(`Failed to ${action} user:`, error);
-		alert(`Failed to ${action} user: ${error instanceof Error ? error.message : 'Unknown error'}`);
+	} else {
+		// First click - set confirmation state
+		const originalText = btn.textContent;
+		btn.dataset.confirmState = 'pending';
+		btn.dataset.originalText = originalText || '';
+		btn.textContent = 'you sure?';
+		
+		// Reset after 3 seconds if not clicked again
+		setTimeout(() => {
+			if (btn.dataset.confirmState === 'pending') {
+				btn.dataset.confirmState = '';
+				btn.textContent = btn.dataset.originalText || originalText;
+			}
+		}, 3000);
 	}
 }
 

src/client/apps.ts

···
 						<div class="app-name">${app.name}</div>
 						<div class="app-meta">Granted ${grantedDate} • Last used ${lastUsedDate}</div>
 					</div>
-					<button class="revoke-btn" onclick="revokeApp('${app.clientId}')">revoke</button>
+					<button class="revoke-btn" onclick="revokeApp('${app.clientId}', event)">revoke</button>
 				</div>
 				<div class="scopes">
 					<div class="scope-title">permissions</div>
···
 	}).join('');
 }
 
-(window as any).revokeApp = async function(clientId: string) {
-	if (!confirm('Are you sure you want to revoke access for this app? You will need to authorize it again next time.')) {
-		return;
-	}
-
-	const card = document.querySelector(`[data-client-id="${clientId}"]`);
-	const btn = card?.querySelector('.revoke-btn') as HTMLButtonElement;
+(window as any).revokeApp = async function(clientId: string, event?: Event) {
+	const btn = event?.target as HTMLButtonElement | undefined;
 	
-	if (btn) {
+	// Double-click confirmation pattern
+	if (btn?.dataset.confirmState === 'pending') {
+		// Second click - execute revoke
+		delete btn.dataset.confirmState;
 		btn.disabled = true;
 		btn.textContent = 'revoking...';
-	}
+		
+		const card = document.querySelector(`[data-client-id="${clientId}"]`);
 
-	try {
-		const response = await fetch(`/api/apps/${encodeURIComponent(clientId)}`, {
-			method: 'DELETE',
-			headers: {
-				'Authorization': `Bearer ${token}`,
-			},
-		});
+		try {
+			const response = await fetch(`/api/apps/${encodeURIComponent(clientId)}`, {
+				method: 'DELETE',
+				headers: {
+					'Authorization': `Bearer ${token}`,
+				},
+			});
 
-		if (!response.ok) {
-			throw new Error('Failed to revoke app');
-		}
+			if (!response.ok) {
+				throw new Error('Failed to revoke app');
+			}
 
-		// Remove from UI
-		card?.remove();
+			// Remove from UI
+			card?.remove();
 
-		// Check if list is now empty
-		const remaining = document.querySelectorAll('.app-card');
-		if (remaining.length === 0) {
-			appsList.innerHTML = '<div class="empty">No authorized apps yet. Apps will appear here after you grant them access.</div>';
+			// Check if list is now empty
+			const remaining = document.querySelectorAll('.app-card');
+			if (remaining.length === 0) {
+				appsList.innerHTML = '<div class="empty">No authorized apps yet. Apps will appear here after you grant them access.</div>';
+			}
+		} catch (error) {
+			console.error('Failed to revoke app:', error);
+			alert('Failed to revoke app access. Please try again.');
+			if (btn) {
+				btn.disabled = false;
+				btn.textContent = 'revoke';
+			}
 		}
-	} catch (error) {
-		console.error('Failed to revoke app:', error);
-		alert('Failed to revoke app access. Please try again.');
+	} else {
+		// First click - set pending state
 		if (btn) {
-			btn.disabled = false;
-			btn.textContent = 'revoke';
+			const originalText = btn.textContent;
+			btn.dataset.confirmState = 'pending';
+			btn.textContent = 'you sure?';
+			
+			// Reset after 3 seconds if not confirmed
+			setTimeout(() => {
+				if (btn.dataset.confirmState === 'pending') {
+					delete btn.dataset.confirmState;
+					btn.textContent = originalText;
+				}
+			}, 3000);
 		}
 	}
 };

src/html/admin-invites.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2.5rem 1.25rem;
-    }
-
+    /* Admin Invites-specific styles */
     header {
-      width: 100%;
-      max-width: 56.25rem;
       align-self: flex-start;
       margin-left: auto;
       margin-right: auto;
-      margin-bottom: 2rem;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
     }
 
-    .header-nav {
-      display: flex;
-      gap: 1rem;
-      margin-top: 0.5rem;
-    }
-
-    .header-nav a {
-      color: var(--old-rose);
-      text-decoration: none;
-      font-size: 0.875rem;
-      font-weight: 500;
-      padding: 0.5rem 1rem;
-      border: 1px solid var(--old-rose);
-      transition: all 0.2s;
-    }
-
-    .header-nav a:hover {
-      background: rgba(188, 141, 160, 0.1);
-      color: var(--berry-crush);
-      border-color: var(--berry-crush);
-    }
-
-    .header-nav a.active {
-      background: var(--berry-crush);
-      color: var(--lavender);
-      border-color: var(--berry-crush);
-    }
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
-    }
-
     main {
-      flex: 1;
-      width: 100%;
-      max-width: 56.25rem;
       padding: 2rem 1.25rem;
     }
 
-    footer {
-      width: 100%;
-      max-width: 56.25rem;
-      padding: 1rem;
-      text-align: center;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 300;
-      letter-spacing: 0.05rem;
-    }
-
-    footer a {
-      color: var(--berry-crush);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-
-    footer a:hover {
-      color: var(--rosewood);
-      text-decoration: underline;
-    }
-
-    .back-link {
-      margin-top: 0.5rem;
-      font-size: 0.875rem;
-      color: var(--old-rose);
-    }
-
-    .users-section {
-      width: 100%;
-    }
-
-    .users-section h2 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      color: var(--lavender);
-      margin-bottom: 1.5rem;
-      letter-spacing: -0.05rem;
-    }
-
-    .users-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .user-card {
-      background: rgba(188, 141, 160, 0.05);
-      border: 1px solid var(--old-rose);
-      padding: 1.5rem;
-      display: flex;
-      gap: 1.5rem;
-      align-items: center;
-      transition: background 0.2s;
-    }
-
-    .user-card:hover {
-      background: rgba(188, 141, 160, 0.1);
-    }
-
-    .user-avatar {
-      width: 4rem;
-      height: 4rem;
-      border-radius: 50%;
-      background: var(--berry-crush);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--lavender);
-      flex-shrink: 0;
-      text-transform: uppercase;
-    }
-
-    .user-avatar img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      flex: 1;
-    }
-
-    .user-name {
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: var(--lavender);
-    }
-
-    .user-meta {
-      font-size: 0.875rem;
-      color: var(--old-rose);
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1rem;
-    }
-
-    .user-meta-item {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-    }
-
-    .user-badges {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-    }
-
-    .user-badge {
-      display: inline-block;
-      padding: 0.25rem 0.75rem;
-      font-size: 0.75rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.05rem;
-    }
-
-    .badge-admin {
-      background: var(--berry-crush);
-      color: var(--lavender);
-    }
-
-    .badge-role {
-      background: rgba(188, 141, 160, 0.2);
-      color: var(--lavender);
-      border: 1px solid var(--old-rose);
-    }
-
-    .badge-status {
-      border: 1px solid var(--old-rose);
-    }
-
-    .badge-status.active {
-      background: rgba(139, 195, 74, 0.2);
-      color: #a5d6a7;
-      border-color: #81c784;
-    }
-
-    .badge-status.suspended {
-      background: rgba(244, 67, 54, 0.2);
-      color: #ef9a9a;
-      border-color: #e57373;
-    }
-
-    .badge-status.inactive {
-      background: rgba(158, 158, 158, 0.2);
-      color: #bdbdbd;
-      border-color: #9e9e9e;
-    }
-
-    .loading {
-      text-align: center;
-      padding: 2rem;
-      color: var(--old-rose);
-      font-size: 1rem;
-    }
-
-    .error {
-      text-align: center;
-      padding: 2rem;
-      color: var(--rosewood);
-      font-size: 1rem;
-    }
-
     .invites-section {
       width: 100%;
-    }
-
-    .invites-section h2 {
-      font-size: 1.5rem;
-      color: var(--lavender);
-      margin-bottom: 1rem;
     }
 
     .invite-actions {
···
       min-width: 8rem;
     }
 
-    .copy-btn, .delete-btn, .edit-btn {
-      padding: 0.5rem 1rem;
-      background: rgba(188, 141, 160, 0.2);
-      color: var(--lavender);
-      border: 1px solid var(--old-rose);
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.875rem;
-      transition: background 0.2s;
-      white-space: nowrap;
-    }
-
-    .copy-btn:hover {
-      background: rgba(188, 141, 160, 0.3);
-    }
-
-    .edit-btn {
-      background: rgba(171, 73, 103, 0.2);
-      border-color: var(--berry-crush);
-    }
-
-    .edit-btn:hover {
-      background: rgba(171, 73, 103, 0.3);
-    }
-
-    .delete-btn {
-      background: rgba(160, 70, 104, 0.2);
-      border-color: var(--rosewood);
-    }
-
-    .delete-btn:hover {
-      background: rgba(160, 70, 104, 0.3);
-    }
-
     .invite-url {
       background: rgba(12, 23, 19, 0.8);
       border: 1px solid var(--rosewood);
···
       margin-top: 0.5rem;
     }
 
-    /* Modal styles */
-    .modal {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
-
-    .modal-content {
-      background: var(--mahogany);
-      border: 2px solid var(--old-rose);
-      padding: 2rem;
-      max-width: 40rem;
-      width: 90%;
-      max-height: 90vh;
-      overflow-y: auto;
-    }
-
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-    }
-
-    .modal-header h3 {
-      font-size: 1.5rem;
-      color: var(--lavender);
-      margin: 0;
-    }
-
-    .modal-close {
-      background: none;
-      border: none;
-      color: var(--old-rose);
-      font-size: 1.5rem;
-      cursor: pointer;
-      padding: 0;
-      line-height: 1;
-    }
-
-    .modal-close:hover {
-      color: var(--berry-crush);
-    }
-
-    .form-group {
-      margin-bottom: 1.5rem;
-    }
-
     .form-group label {
-      display: block;
       color: var(--lavender);
-      margin-bottom: 0.5rem;
-      font-size: 0.875rem;
     }
 
     .form-group input,
     .form-group textarea {
-      width: 100%;
       background: rgba(0, 0, 0, 0.3);
       border: 1px solid var(--old-rose);
-      color: var(--lavender);
-      padding: 0.75rem;
-      font-family: inherit;
-      font-size: 1rem;
-    }
-
-    .form-group textarea {
-      resize: vertical;
-      min-height: 4rem;
     }
 
     .form-group input:focus,
     .form-group textarea:focus {
       outline: none;
       border-color: var(--berry-crush);
-    }
-
-    .form-help {
-      font-size: 0.75rem;
-      color: var(--old-rose);
-      margin-top: 0.25rem;
     }
 
     .app-role-item {
···
     .app-role-item select.role-select:focus {
       outline: none;
       border-color: var(--berry-crush);
-    }
-
-    .modal-actions {
-      display: flex;
-      gap: 1rem;
-      justify-content: flex-end;
-      margin-top: 2rem;
     }
 
     .modal-btn {

src/html/admin.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2.5rem 1.25rem;
-    }
-
+    /* Admin-specific styles */
     header {
-      width: 100%;
-      max-width: 56.25rem;
       align-self: flex-start;
       margin-left: auto;
       margin-right: auto;
-      margin-bottom: 2rem;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
     }
 
-    .header-nav {
-      display: flex;
-      gap: 1rem;
-      margin-top: 0.5rem;
-    }
-
-    .header-nav a {
-      color: var(--old-rose);
-      text-decoration: none;
-      font-size: 0.875rem;
-      font-weight: 500;
-      padding: 0.5rem 1rem;
-      border: 1px solid var(--old-rose);
-      transition: all 0.2s;
-    }
-
-    .header-nav a:hover {
-      background: rgba(188, 141, 160, 0.1);
-      color: var(--berry-crush);
-      border-color: var(--berry-crush);
-    }
-
-    .header-nav a.active {
-      background: var(--berry-crush);
-      color: var(--lavender);
-      border-color: var(--berry-crush);
-    }
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
-    }
-
     main {
-      flex: 1;
-      width: 100%;
-      max-width: 56.25rem;
       padding: 2rem 1.25rem;
     }
 
-    footer {
-      width: 100%;
-      max-width: 56.25rem;
-      padding: 1rem;
-      text-align: center;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 300;
-      letter-spacing: 0.05rem;
-    }
-
-    footer a {
-      color: var(--berry-crush);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-
-    footer a:hover {
-      color: var(--rosewood);
-      text-decoration: underline;
-    }
-
-    .back-link {
-      margin-top: 0.5rem;
-      font-size: 0.875rem;
-      color: var(--old-rose);
-    }
-
     .users-section {
       width: 100%;
-    }
-
-    .users-section h2 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      color: var(--lavender);
-      margin-bottom: 1.5rem;
-      letter-spacing: -0.05rem;
     }
 
     .users-list {
···
       background: rgba(188, 141, 160, 0.1);
     }
 
-    .user-avatar {
-      width: 4rem;
-      height: 4rem;
-      border-radius: 50%;
-      background: var(--berry-crush);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--lavender);
-      flex-shrink: 0;
-      text-transform: uppercase;
-    }
-
-    .user-avatar img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
     .user-info {
       display: flex;
       flex-direction: column;
···
       flex-wrap: wrap;
     }
 
-    .user-badge {
-      display: inline-block;
-      padding: 0.25rem 0.75rem;
-      font-size: 0.75rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.05rem;
-    }
-
-    .badge-admin {
-      background: var(--berry-crush);
-      color: var(--lavender);
-    }
-
-    .badge-role {
-      background: rgba(188, 141, 160, 0.2);
-      color: var(--lavender);
-      border: 1px solid var(--old-rose);
-    }
-
-    .badge-status {
-      border: 1px solid var(--old-rose);
-    }
-
-    .badge-status.active {
-      background: rgba(139, 195, 74, 0.2);
-      color: #a5d6a7;
-      border-color: #81c784;
-    }
-
-    .badge-status.suspended {
-      background: rgba(244, 67, 54, 0.2);
-      color: #ef9a9a;
-      border-color: #e57373;
-    }
-
-    .badge-status.inactive {
-      background: rgba(158, 158, 158, 0.2);
-      color: #bdbdbd;
-      border-color: #9e9e9e;
-    }
-
     .user-actions {
       display: flex;
       gap: 0.5rem;
       flex-wrap: wrap;
     }
 
-    .btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.75rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.05rem;
-      border: 1px solid;
-      background: transparent;
-      cursor: pointer;
-      transition: all 0.2s;
-      font-family: "Space Grotesk", sans-serif;
-    }
-
-    .btn-disable {
-      color: var(--lavender);
-      border-color: #e57373;
-    }
-
-    .btn-disable:hover {
-      background: rgba(244, 67, 54, 0.2);
-    }
-
-    .btn-delete {
-      color: var(--lavender);
-      border-color: var(--rosewood);
-    }
-
-    .btn-delete:hover {
-      background: rgba(160, 70, 104, 0.2);
+    .user-suspended {
+      opacity: 0.5;
     }
-
-    .loading {
-      text-align: center;
-      padding: 2rem;
-      color: var(--old-rose);
-      font-size: 1rem;
-    }
-
-    .error {
-      text-align: center;
-      padding: 2rem;
-      color: var(--rosewood);
-      font-size: 1rem;
-    }
-
   </style>
 </head>
 

src/html/apps.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2.5rem 1.25rem;
-    }
-
-    header {
-      width: 100%;
-      max-width: 56.25rem;
-      margin-bottom: 2rem;
-    }
-
+    /* Apps-specific styles */
     h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
       margin-bottom: 0.5rem;
     }
 
-    .subtitle {
-      color: var(--old-rose);
-      font-size: 1rem;
-      font-weight: 300;
-    }
-
-    main {
-      flex: 1;
-      width: 100%;
-      max-width: 56.25rem;
-    }
-
     .apps-list {
       display: flex;
       flex-direction: column;
···
       letter-spacing: 0.05rem;
       cursor: pointer;
       transition: all 0.2s;
+      box-shadow: none;
+    }
+
+    .revoke-btn::before {
+      display: none;
     }
 
     .revoke-btn:hover:not(:disabled) {
       background: var(--rosewood);
       color: var(--lavender);
+      transform: none;
     }
 
     .revoke-btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-    }
-
-    .loading, .error, .empty {
-      text-align: center;
-      padding: 2rem;
-      color: var(--old-rose);
-    }
-
-    .error {
-      color: var(--rosewood);
-    }
-
-    .back-link {
-      text-align: center;
-      margin-top: 2rem;
-      font-size: 0.875rem;
-    }
-
-    .back-link a {
-      color: var(--berry-crush);
-      text-decoration: none;
-    }
-
-    .back-link a:hover {
-      text-decoration: underline;
     }
   </style>
 </head>

src/html/index.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2.5rem 1.25rem;
-    }
-
-    header {
-      width: 100%;
-      max-width: 56.25rem;
-      margin-bottom: 2rem;
-    }
-
+    /* Dashboard-specific styles */
     .profile-preview {
       display: flex;
       align-items: center;
···
     .profile-avatar {
       width: 80px;
       height: 80px;
-      border-radius: 50%;
-      background: var(--berry-crush);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--lavender);
-      text-transform: uppercase;
-      flex-shrink: 0;
       border: 3px solid var(--berry-crush);
-    }
-
-    .profile-avatar img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      object-fit: cover;
     }
 
     .profile-info {
···
     }
 
     h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
       margin-bottom: 0.5rem;
     }
 
-    .subtitle {
-      color: var(--old-rose);
-      font-size: 1rem;
-      font-weight: 300;
-    }
-
-    main {
-      flex: 1;
-      width: 100%;
-      max-width: 56.25rem;
-    }
-
     .dashboard-grid {
       display: grid;
       grid-template-columns: 1fr;
···
       }
     }
 
-    .card {
-      background: rgba(188, 141, 160, 0.05);
-      border: 1px solid var(--old-rose);
-      padding: 1.5rem;
-    }
-
-    .card-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: var(--lavender);
-      margin-bottom: 1rem;
-    }
-
-    .form-group {
-      margin-bottom: 1rem;
-    }
-
-    label {
-      display: block;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 500;
-      margin-bottom: 0.5rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05rem;
-    }
-
     input[type="text"],
     input[type="email"],
     input[type="url"] {
-      width: 100%;
       padding: 0.75rem;
-      background: rgba(12, 23, 19, 0.6);
-      border: 2px solid var(--rosewood);
-      color: var(--lavender);
-      font-size: 1rem;
-      font-family: "Space Grotesk", sans-serif;
-      transition: border-color 0.2s;
-    }
-
-    input:focus {
-      outline: none;
-      border-color: var(--berry-crush);
-      background: rgba(12, 23, 19, 0.8);
     }
 
     .save-btn {
···
       letter-spacing: 0.05rem;
       cursor: pointer;
       transition: all 0.2s;
+      box-shadow: none;
+    }
+
+    .save-btn::before {
+      display: none;
     }
 
     .save-btn:hover:not(:disabled) {
       background: var(--rosewood);
+      transform: none;
     }
 
     .save-btn:disabled {
···
       padding: 0.75rem;
       margin-top: 1rem;
       font-size: 0.875rem;
-      display: none;
-    }
-
-    .message.show {
-      display: block;
-    }
-
-    .message.success {
-      background: rgba(139, 195, 74, 0.2);
-      border: 1px solid #81c784;
-      color: #a5d6a7;
-    }
-
-    .message.error {
-      background: rgba(244, 67, 54, 0.2);
-      border: 1px solid #e57373;
-      color: #ef9a9a;
     }
 
     .apps-preview {
···
       color: var(--old-rose);
     }
 
-    .loading, .empty {
-      text-align: center;
-      padding: 1rem;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-    }
-
     .view-all {
       display: block;
       text-align: center;
···
     }
 
     .view-all:hover {
-      text-decoration: underline;
-    }
-
-    footer {
-      width: 100%;
-      max-width: 56.25rem;
-      padding: 1rem;
-      text-align: center;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 300;
-      letter-spacing: 0.05rem;
-    }
-
-    footer a {
-      color: var(--berry-crush);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-
-    footer a:hover {
-      color: var(--rosewood);
       text-decoration: underline;
     }
   </style>

src/html/login.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
+    /* Login-specific styles */
     body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      padding: 2.5rem 1.25rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       justify-content: center;
     }
 
···
     h1 {
       font-size: 3rem;
       margin-bottom: 0.5rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
     }
 
     .subtitle {
-      color: var(--old-rose);
       margin-bottom: 2rem;
-      font-size: 1rem;
-      font-weight: 300;
-      letter-spacing: 0.05rem;
     }
 
     .auth-box {
       background: rgba(188, 141, 160, 0.05);
       border: 1px solid var(--old-rose);
-      border-radius: 0;
       padding: 2rem;
       margin-bottom: 1rem;
     }
 
     input[type="text"] {
-      width: 100%;
-      padding: 0.875rem 1rem;
-      background: rgba(12, 23, 19, 0.6);
-      border: 2px solid var(--rosewood);
-      border-radius: 0;
-      color: var(--lavender);
-      font-size: 1rem;
-      font-family: "Space Grotesk", sans-serif;
       margin-bottom: 1rem;
-      transition: border-color 0.2s;
-      letter-spacing: 0.025rem;
-    }
-
-    input[type="text"]:focus {
-      outline: none;
-      border-color: var(--berry-crush);
-      background: rgba(12, 23, 19, 0.8);
-    }
-
-    input::placeholder {
-      color: rgba(217, 208, 222, 0.4);
     }
 
     button {
-      position: relative;
       width: 100%;
       padding: 1.25rem 2rem;
-      background: var(--berry-crush);
-      color: var(--lavender);
-      border: 4px solid var(--mahogany);
-      border-radius: 0;
       font-size: 1.125rem;
-      font-weight: 700;
-      cursor: pointer;
-      font-family: "Space Grotesk", sans-serif;
-      transition: all 0.15s ease;
-      text-transform: uppercase;
-      letter-spacing: 0.1rem;
       margin-bottom: 0.75rem;
-      box-shadow: 6px 6px 0 var(--mahogany);
-    }
-
-    button::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: -4px;
-      right: -4px;
-      bottom: -4px;
-      background: transparent;
-      border: 4px solid var(--rosewood);
-      pointer-events: none;
-      transition: all 0.15s ease;
-    }
-
-    button:hover:not(:disabled) {
-      transform: translate(3px, 3px);
-      box-shadow: 3px 3px 0 var(--mahogany);
-    }
-
-    button:hover:not(:disabled)::before {
-      top: -7px;
-      left: -7px;
-      right: -7px;
-      bottom: -7px;
-    }
-
-    button:active:not(:disabled) {
-      transform: translate(6px, 6px);
-      box-shadow: 0 0 0 var(--mahogany);
-    }
-
-    button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .secondary-btn {
-      background: transparent;
-      color: var(--old-rose);
-      box-shadow: 4px 4px 0 var(--mahogany);
-    }
-
-    .secondary-btn::before {
-      border-color: var(--old-rose);
-    }
-
-    .secondary-btn:hover:not(:disabled) {
-      background: rgba(188, 141, 160, 0.1);
-    }
-
-    .message {
-      margin-bottom: 1rem;
-      padding: 0.875rem;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-      letter-spacing: 0.025rem;
-      display: none;
-    }
-
-    .message.show {
-      display: block;
-    }
-
-    .message.error {
-      background: rgba(160, 70, 104, 0.2);
-      border: 2px solid var(--rosewood);
-      color: var(--lavender);
-    }
-
-    .message.success {
-      background: rgba(188, 141, 160, 0.2);
-      border: 2px solid var(--old-rose);
-      color: var(--lavender);
-    }
-
-    .divider {
-      display: flex;
-      align-items: center;
-      text-align: center;
-      margin: 1.5rem 0;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 300;
-    }
-
-    .divider::before,
-    .divider::after {
-      content: '';
-      flex: 1;
-      border-bottom: 1px solid rgba(188, 141, 160, 0.3);
-    }
-
-    .divider span {
-      padding: 0 1rem;
     }
 
     .info {
···
 
     .info strong {
       color: var(--lavender);
-    }
-
-    a {
-      color: var(--berry-crush);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-
-    a:hover {
-      color: var(--rosewood);
-      text-decoration: underline;
     }
   </style>
 </head>

src/html/profile.html

···
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles.css">
   <style>
-    :root {
-      --mahogany: #26242b;
-      --lavender: #d9d0de;
-      --old-rose: #bc8da0;
-      --rosewood: #a04668;
-      --berry-crush: #ab4967;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: "Space Grotesk", sans-serif;
-      background: var(--mahogany);
-      color: var(--lavender);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2.5rem 1.25rem;
-    }
-
+    /* Profile-specific styles */
     header {
-      width: 100%;
-      max-width: 56.25rem;
       align-self: flex-start;
       margin-left: auto;
       margin-right: auto;
-      margin-bottom: 2rem;
-    }
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.125rem;
     }
 
     main {
-      flex: 1;
       display: flex;
       justify-content: center;
-      width: 100%;
     }
 
     .profile-container {
···
     .avatar-preview {
       width: 6rem;
       height: 6rem;
-      border-radius: 50%;
-      background: var(--berry-crush);
-      display: flex;
-      align-items: center;
-      justify-content: center;
       font-size: 2rem;
-      font-weight: 700;
-      color: var(--lavender);
-      text-transform: uppercase;
-      overflow: hidden;
-    }
-
-    .avatar-preview img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
     }
 
     .avatar-controls {
···
       gap: 0.5rem;
     }
 
-    label {
-      display: block;
-      color: var(--old-rose);
-      font-size: 0.875rem;
-      font-weight: 500;
-      margin-bottom: 0.5rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05rem;
-    }
-
     input[type="text"],
     input[type="email"],
     input[type="url"] {
-      width: 100%;
-      padding: 0.875rem 1rem;
-      background: rgba(12, 23, 19, 0.6);
-      border: 2px solid var(--rosewood);
-      border-radius: 0;
-      color: var(--lavender);
-      font-size: 1rem;
-      font-family: "Space Grotesk", sans-serif;
       margin-bottom: 1.5rem;
-      transition: border-color 0.2s;
-    }
-
-    input:focus {
-      outline: none;
-      border-color: var(--berry-crush);
-      background: rgba(12, 23, 19, 0.8);
-    }
-
-    input::placeholder {
-      color: rgba(217, 208, 222, 0.4);
-    }
-
-    input:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    button {
-      position: relative;
-      padding: 1rem 2rem;
-      background: var(--berry-crush);
-      color: var(--lavender);
-      border: 4px solid var(--mahogany);
-      border-radius: 0;
-      font-size: 1rem;
-      font-weight: 700;
-      cursor: pointer;
-      font-family: "Space Grotesk", sans-serif;
-      transition: all 0.15s ease;
-      text-transform: uppercase;
-      letter-spacing: 0.1rem;
-      box-shadow: 6px 6px 0 var(--mahogany);
-    }
-
-    button::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: -4px;
-      right: -4px;
-      bottom: -4px;
-      background: transparent;
-      border: 4px solid var(--rosewood);
-      pointer-events: none;
-      transition: all 0.15s ease;
-    }
-
-    button:hover:not(:disabled) {
-      transform: translate(3px, 3px);
-      box-shadow: 3px 3px 0 var(--mahogany);
-    }
-
-    button:hover:not(:disabled)::before {
-      top: -7px;
-      left: -7px;
-      right: -7px;
-      bottom: -7px;
-    }
-
-    button:active:not(:disabled) {
-      transform: translate(6px, 6px);
-      box-shadow: 0 0 0 var(--mahogany);
-    }
-
-    button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .button-secondary {
-      background: transparent;
-      color: var(--old-rose);
-      box-shadow: 4px 4px 0 var(--mahogany);
-    }
-
-    .button-secondary::before {
-      border-color: var(--old-rose);
-    }
-
-    .button-secondary:hover:not(:disabled) {
-      background: rgba(188, 141, 160, 0.1);
-    }
-
-    .button-group {
-      display: flex;
-      gap: 1rem;
-      margin-top: 2rem;
-    }
-
-    .message {
-      padding: 1rem;
-      margin-bottom: 1.5rem;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-      display: none;
-    }
-
-    .message.show {
-      display: block;
-    }
-
-    .message.error {
-      background: rgba(160, 70, 104, 0.2);
-      border: 2px solid var(--rosewood);
-      color: var(--lavender);
-    }
-
-    .message.success {
-      background: rgba(188, 141, 160, 0.2);
-      border: 2px solid var(--old-rose);
-      color: var(--lavender);
     }
 
     footer {
-      width: 100%;
-      max-width: 56.25rem;
-      padding: 1rem;
-      text-align: center;
-      color: var(--old-rose);
-      font-size: 0.875rem;
       margin-top: 2rem;
-    }
-
-    footer a {
-      color: var(--berry-crush);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-
-    footer a:hover {
-      color: var(--rosewood);
-      text-decoration: underline;
     }
   </style>
 </head>

src/index.ts

···
 	getAppDetails,
 	revokeAppForUser,
 	disableUser,
+	enableUser,
 	deleteUser,
 } from "./routes/api";
 import {
···
 			}
 			return new Response("Method not allowed", { status: 405 });
 		},
+	"/api/admin/users/:id/enable": (req: Request) => {
+		if (req.method === "POST") {
+			const url = new URL(req.url);
+			const userId = url.pathname.split("/")[4];
+			return enableUser(req, userId);
+		}
+		return new Response("Method not allowed", { status: 405 });
+	},
 		"/api/admin/users/:id/delete": (req: Request) => {
 			if (req.method === "DELETE") {
 				const url = new URL(req.url);

src/routes/api.ts

···
 	return Response.json({ success: true });
 }
 
+export function enableUser(req: Request, userId: string): Response {
+	const user = getSessionUser(req);
+	if (user instanceof Response) {
+		return user;
+	}
+
+	if (!user.is_admin) {
+		return Response.json({ error: "Admin access required" }, { status: 403 });
+	}
+
+	const targetUserId = Number.parseInt(userId, 10);
+	if (Number.isNaN(targetUserId)) {
+		return Response.json({ error: "Invalid user ID" }, { status: 400 });
+	}
+
+	const targetUser = db
+		.query("SELECT id, username FROM users WHERE id = ?")
+		.get(targetUserId) as { id: number; username: string } | undefined;
+
+	if (!targetUser) {
+		return Response.json({ error: "User not found" }, { status: 404 });
+	}
+
+	db.query("UPDATE users SET status = 'active' WHERE id = ?").run(targetUserId);
+
+	return Response.json({ success: true });
+}
+
 export function deleteUser(req: Request, userId: string): Response {
 	const user = getSessionUser(req);
 	if (user instanceof Response) {

src/styles.css

···
+/* Indiko - Consolidated Styles */
+
+/* CSS Variables */
+:root {
+	--mahogany: #26242b;
+	--lavender: #d9d0de;
+	--old-rose: #bc8da0;
+	--rosewood: #a04668;
+	--berry-crush: #ab4967;
+}
+
+/* Reset */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+/* Base */
+body {
+	font-family: "Space Grotesk", sans-serif;
+	background: var(--mahogany);
+	color: var(--lavender);
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 2.5rem 1.25rem;
+}
+
+/* Typography */
+h1 {
+	font-size: 2rem;
+	font-weight: 700;
+	background: linear-gradient(135deg, var(--old-rose), var(--berry-crush), var(--rosewood));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	letter-spacing: -0.125rem;
+}
+
+h2 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	color: var(--lavender);
+	margin-bottom: 1.5rem;
+	letter-spacing: -0.05rem;
+}
+
+.subtitle {
+	color: var(--old-rose);
+	font-size: 1rem;
+	font-weight: 300;
+	letter-spacing: 0.05rem;
+}
+
+/* Links */
+a {
+	color: var(--berry-crush);
+	text-decoration: none;
+	transition: color 0.2s;
+}
+
+a:hover {
+	color: var(--rosewood);
+	text-decoration: underline;
+}
+
+/* Forms */
+label {
+	display: block;
+	color: var(--old-rose);
+	font-size: 0.875rem;
+	font-weight: 500;
+	margin-bottom: 0.5rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05rem;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="number"],
+input[type="datetime-local"],
+textarea {
+	width: 100%;
+	padding: 0.875rem 1rem;
+	background: rgba(12, 23, 19, 0.6);
+	border: 2px solid var(--rosewood);
+	border-radius: 0;
+	color: var(--lavender);
+	font-size: 1rem;
+	font-family: "Space Grotesk", sans-serif;
+	transition: border-color 0.2s;
+	letter-spacing: 0.025rem;
+}
+
+input:focus,
+textarea:focus {
+	outline: none;
+	border-color: var(--berry-crush);
+	background: rgba(12, 23, 19, 0.8);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: rgba(217, 208, 222, 0.4);
+}
+
+input:disabled,
+textarea:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+textarea {
+	resize: vertical;
+	min-height: 4rem;
+}
+
+.form-group {
+	margin-bottom: 1.5rem;
+}
+
+.form-help {
+	font-size: 0.75rem;
+	color: var(--old-rose);
+	margin-top: 0.25rem;
+}
+
+/* Buttons */
+button {
+	position: relative;
+	padding: 1rem 2rem;
+	background: var(--berry-crush);
+	color: var(--lavender);
+	border: 4px solid var(--mahogany);
+	border-radius: 0;
+	font-size: 1rem;
+	font-weight: 700;
+	cursor: pointer;
+	font-family: "Space Grotesk", sans-serif;
+	transition: all 0.15s ease;
+	text-transform: uppercase;
+	letter-spacing: 0.1rem;
+	box-shadow: 6px 6px 0 var(--mahogany);
+}
+
+button::before {
+	content: '';
+	position: absolute;
+	top: -4px;
+	left: -4px;
+	right: -4px;
+	bottom: -4px;
+	background: transparent;
+	border: 4px solid var(--rosewood);
+	pointer-events: none;
+	transition: all 0.15s ease;
+}
+
+button:hover:not(:disabled) {
+	transform: translate(3px, 3px);
+	box-shadow: 3px 3px 0 var(--mahogany);
+}
+
+button:hover:not(:disabled)::before {
+	top: -7px;
+	left: -7px;
+	right: -7px;
+	bottom: -7px;
+}
+
+button:active:not(:disabled) {
+	transform: translate(6px, 6px);
+	box-shadow: 0 0 0 var(--mahogany);
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.secondary-btn,
+.button-secondary {
+	background: transparent;
+	color: var(--old-rose);
+	box-shadow: 4px 4px 0 var(--mahogany);
+}
+
+.secondary-btn::before,
+.button-secondary::before {
+	border-color: var(--old-rose);
+}
+
+.secondary-btn:hover:not(:disabled),
+.button-secondary:hover:not(:disabled) {
+	background: rgba(188, 141, 160, 0.1);
+}
+
+/* Small action buttons - clean style with subtle backgrounds */
+.btn-edit,
+.btn-delete,
+.btn-copy,
+.btn-disable,
+.revoke-btn {
+	padding: 0.5rem 1rem;
+	font-family: "Space Grotesk", sans-serif;
+	font-size: 0.875rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+	text-transform: none;
+	letter-spacing: normal;
+	box-shadow: none;
+	position: static;
+	border: 2px solid transparent;
+}
+
+.btn-edit::before,
+.btn-delete::before,
+.btn-copy::before,
+.btn-disable::before,
+.revoke-btn::before {
+	display: none;
+}
+
+.btn-edit:hover:not(:disabled),
+.btn-delete:hover:not(:disabled),
+.btn-copy:hover:not(:disabled),
+.btn-disable:hover:not(:disabled),
+.revoke-btn:hover:not(:disabled) {
+	transform: none;
+}
+
+.btn-edit {
+	background: rgba(188, 141, 160, 0.2);
+	color: var(--lavender);
+	border: 2px solid var(--old-rose);
+}
+
+.btn-edit:hover:not(:disabled) {
+	background: rgba(188, 141, 160, 0.3);
+}
+
+.btn-delete,
+.revoke-btn {
+	background: rgba(160, 70, 104, 0.2);
+	color: var(--lavender);
+	border: 2px solid var(--rosewood);
+}
+
+.btn-delete:hover:not(:disabled),
+.revoke-btn:hover:not(:disabled) {
+	background: rgba(160, 70, 104, 0.3);
+}
+
+.btn-disable {
+	background: rgba(229, 115, 115, 0.2);
+	color: var(--lavender);
+	border: 2px solid #e57373;
+}
+
+.btn-disable:hover:not(:disabled) {
+	background: rgba(229, 115, 115, 0.3);
+}
+
+.btn-copy {
+	background: rgba(188, 141, 160, 0.2);
+	color: var(--lavender);
+	border: 2px solid var(--old-rose);
+}
+
+.btn-copy:hover:not(:disabled) {
+	background: rgba(188, 141, 160, 0.3);
+}
+
+.btn-edit:disabled,
+.btn-delete:disabled,
+.btn-copy:disabled,
+.btn-disable:disabled,
+.revoke-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Messages */
+.message {
+	padding: 0.875rem;
+	margin-bottom: 1rem;
+	border-radius: 0.5rem;
+	font-size: 0.875rem;
+	letter-spacing: 0.025rem;
+	display: none;
+}
+
+.message.show {
+	display: block;
+}
+
+.message.error {
+	background: rgba(160, 70, 104, 0.2);
+	border: 2px solid var(--rosewood);
+	color: var(--lavender);
+}
+
+.message.success {
+	background: rgba(188, 141, 160, 0.2);
+	border: 2px solid var(--old-rose);
+	color: var(--lavender);
+}
+
+/* Cards */
+.card {
+	background: rgba(188, 141, 160, 0.05);
+	border: 1px solid var(--old-rose);
+	padding: 1.5rem;
+}
+
+.card-title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	color: var(--lavender);
+	margin-bottom: 1rem;
+}
+
+/* Avatars */
+.avatar,
+.profile-avatar,
+.user-avatar {
+	width: 4rem;
+	height: 4rem;
+	border-radius: 50%;
+	background: var(--berry-crush);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: var(--lavender);
+	text-transform: uppercase;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.avatar img,
+.profile-avatar img,
+.user-avatar img {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+/* Badges */
+.badge,
+.user-badge,
+.scope-badge {
+	display: inline-block;
+	padding: 0.25rem 0.75rem;
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05rem;
+}
+
+.badge-admin {
+	background: var(--berry-crush);
+	color: var(--lavender);
+}
+
+.badge-role {
+	background: rgba(188, 141, 160, 0.2);
+	color: var(--lavender);
+	border: 1px solid var(--old-rose);
+}
+
+.badge-status {
+	border: 1px solid var(--old-rose);
+}
+
+.badge-status.active {
+	background: rgba(139, 195, 74, 0.2);
+	color: #a5d6a7;
+	border-color: #81c784;
+}
+
+.badge-status.suspended {
+	background: rgba(244, 67, 54, 0.2);
+	color: #ef9a9a;
+	border-color: #e57373;
+}
+
+.badge-status.inactive {
+	background: rgba(158, 158, 158, 0.2);
+	color: #bdbdbd;
+	border-color: #9e9e9e;
+}
+
+/* Header */
+header {
+	width: 100%;
+	max-width: 56.25rem;
+	margin-bottom: 2rem;
+}
+
+.header-nav {
+	display: flex;
+	gap: 1rem;
+	margin-top: 0.5rem;
+}
+
+.header-nav a {
+	color: var(--old-rose);
+	text-decoration: none;
+	font-size: 0.875rem;
+	font-weight: 500;
+	padding: 0.5rem 1rem;
+	border: 1px solid var(--old-rose);
+	transition: all 0.2s;
+}
+
+.header-nav a:hover {
+	background: rgba(188, 141, 160, 0.1);
+	color: var(--berry-crush);
+	border-color: var(--berry-crush);
+}
+
+.header-nav a.active {
+	background: var(--berry-crush);
+	color: var(--lavender);
+	border-color: var(--berry-crush);
+}
+
+/* Main */
+main {
+	flex: 1;
+	width: 100%;
+	max-width: 56.25rem;
+}
+
+/* Footer */
+footer {
+	width: 100%;
+	max-width: 56.25rem;
+	padding: 1rem;
+	text-align: center;
+	color: var(--old-rose);
+	font-size: 0.875rem;
+	font-weight: 300;
+	letter-spacing: 0.05rem;
+}
+
+footer a {
+	color: var(--berry-crush);
+	text-decoration: none;
+	transition: color 0.2s;
+}
+
+footer a:hover {
+	color: var(--rosewood);
+	text-decoration: underline;
+}
+
+/* Utility Classes */
+.loading,
+.error,
+.empty {
+	text-align: center;
+	padding: 2rem;
+	color: var(--old-rose);
+	font-size: 1rem;
+}
+
+.error {
+	color: var(--rosewood);
+}
+
+.back-link {
+	text-align: center;
+	margin-top: 2rem;
+	font-size: 0.875rem;
+}
+
+.back-link a {
+	color: var(--berry-crush);
+	text-decoration: none;
+}
+
+.back-link a:hover {
+	text-decoration: underline;
+}
+
+/* Divider */
+.divider {
+	display: flex;
+	align-items: center;
+	text-align: center;
+	margin: 1.5rem 0;
+	color: var(--old-rose);
+	font-size: 0.875rem;
+	font-weight: 300;
+}
+
+.divider::before,
+.divider::after {
+	content: '';
+	flex: 1;
+	border-bottom: 1px solid rgba(188, 141, 160, 0.3);
+}
+
+.divider span {
+	padding: 0 1rem;
+}
+
+/* Modals */
+.modal {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.8);
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+}
+
+.modal-content {
+	background: var(--mahogany);
+	border: 2px solid var(--old-rose);
+	padding: 2rem;
+	max-width: 40rem;
+	width: 90%;
+	max-height: 90vh;
+	overflow-y: auto;
+}
+
+.modal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem;
+}
+
+.modal-header h3 {
+	font-size: 1.5rem;
+	color: var(--lavender);
+	margin: 0;
+}
+
+.modal-close {
+	background: none;
+	border: none;
+	color: var(--old-rose);
+	font-size: 1.5rem;
+	cursor: pointer;
+	padding: 0;
+	line-height: 1;
+}
+
+.modal-close:hover {
+	color: var(--berry-crush);
+}
+
+.modal-actions {
+	display: flex;
+	gap: 1rem;
+	justify-content: flex-end;
+	margin-top: 2rem;
+}
+
+/* Button Groups */
+.button-group {
+	display: flex;
+	gap: 1rem;
+	margin-top: 2rem;
+}