Refactor backend architecture and update documentation

- Add CSRF protection middleware implementation
- Update API client with improved configuration
- Enhance documentation for backend development
- Add architecture documentation updates
- Reorganize and clean up task documentation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Docs/Web-Development.md

@@ -114,6 +114,19 @@ fetchBans(24, ctrl.signal)  // Pass the signal to enable cancellation on unmount
   .catch(err => { /* ... */ });
 ```
 
+### CSRF Protection Header
+
+All state-mutating requests (POST, PUT, DELETE, PATCH) automatically include the custom header `X-BanGUI-Request: 1` via the central API client. This protects against Cross-Site Request Forgery (CSRF) attacks by requiring a custom header that cross-site JavaScript cannot set without CORS preflight.
+
+**How it works:**
+- The `request()` function in `api/client.ts` includes `"X-BanGUI-Request": "1"` in the default headers.
+- GET, HEAD, and OPTIONS requests are unaffected.
+- Bearer token authentication bypasses the check (tokens are not CSRF-vulnerable).
+- The backend `CsrfMiddleware` validates this header for cookie-authenticated state-mutating requests.
+- Requests missing the header receive a `403 Forbidden` response.
+
+**No Action Required:** As a developer, you do not need to manually add this header — the centralized API client handles it automatically. All `api.post()`, `api.put()`, `api.del()` calls will include it.
+
 ### Request Deduplication & Shared Caching
 
 When multiple components mount simultaneously and need the same data, **implement shared hooks with request deduplication** to avoid duplicate API calls. Use a module-level cache to ensure all consumers share a single in-flight request: