feat: role-based ACL + admin management UI

Backend:
- Add acl.ts with requireAuth/requireRole/requireOwnerOrAdmin helpers
- Gate premium videos from unauthenticated users in videos query/resolver
- Fix updateVideoPlay to verify ownership before updating
- Add admin mutations: adminListUsers, adminUpdateUser, adminDeleteUser
- Add admin mutations: createVideo, updateVideo, deleteVideo, setVideoModels, adminListVideos
- Add admin mutations: createArticle, updateArticle, deleteArticle, adminListArticles
- Add deleteComment mutation (owner or admin only)
- Add AdminUserListType to GraphQL types
- Fix featured filter on articles query

Frontend:
- Install marked for markdown rendering
- Add /admin/* section with sidebar layout and admin-only guard
- Admin users page: paginated table with search, role filter, inline role change, delete
- Admin videos pages: list, create form, edit form with file upload and model assignment
- Admin articles pages: list, create form, edit form with split-pane markdown editor
- Add admin nav link in header (desktop + mobile) for admin users
- Render article content through marked in magazine detail page
- Add all admin GraphQL service functions to services.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/admin/videos/+page.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { deleteVideo } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import type { Video } from "$lib/types";
+
+  const { data } = $props();
+
+  let deleteTarget: Video | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+
+  function confirmDelete(video: Video) {
+    deleteTarget = video;
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteVideo(deleteTarget.id);
+      toast.success("Video deleted");
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error("Failed to delete video");
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">Videos</h1>
+    <Button href="/admin/videos/new">
+      <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New video
+    </Button>
+  </div>
+
+  <div class="rounded-lg border border-border/40 overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-muted/30">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Badges</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Plays</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Likes</th>
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.videos as video (video.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-3">
+                {#if video.image}
+                  <img
+                    src={getAssetUrl(video.image, "mini")}
+                    alt=""
+                    class="h-10 w-16 rounded object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
+                  >
+                    <span class="icon-[ri--film-line] h-5 w-5"></span>
+                  </div>
+                {/if}
+                <div>
+                  <p class="font-medium">{video.title}</p>
+                  <p class="text-xs text-muted-foreground">{video.slug}</p>
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex gap-1">
+                {#if video.premium}
+                  <span
+                    class="px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-500/10 text-yellow-600"
+                    >Premium</span
+                  >
+                {/if}
+                {#if video.featured}
+                  <span
+                    class="px-1.5 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary"
+                    >Featured</span
+                  >
+                {/if}
+              </div>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground">{video.plays_count ?? 0}</td>
+            <td class="px-4 py-3 text-muted-foreground">{video.likes_count ?? 0}</td>
+            <td class="px-4 py-3 text-right">
+              <div class="flex items-center justify-end gap-1">
+                <Button size="sm" variant="ghost" href="/admin/videos/{video.id}">
+                  <span class="icon-[ri--edit-line] h-4 w-4"></span>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onclick={() => confirmDelete(video)}
+                >
+                  <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                </Button>
+              </div>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.videos.length === 0}
+          <tr>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No videos yet</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Delete video</Dialog.Title>
+      <Dialog.Description>
+        Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
+        {deleting ? "Deleting…" : "Delete"}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>