@commonpub/layer 0.8.2 → 0.8.4

package/pages/contests/[slug]/judge.vue

@@ -3,34 +3,65 @@ definePageMeta({ middleware: 'auth' });
 
 const route = useRoute();
 const slug = route.params.slug as string;
+const { user } = useAuth();
 
 import type { Serialized, ContestDetail, ContestEntryItem } from '@commonpub/server';
 
 const { data: contest } = useLazyFetch<Serialized<ContestDetail>>(`/api/contests/${slug}`);
-const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
+const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Serialized<ContestEntryItem> & { judgeScores?: Array<{ judgeId: string; score: number; feedback?: string }> })[]; total: number }>(
+  `/api/contests/${slug}/entries`,
+  { query: { includeJudgeScores: true } },
+);
 
 useSeoMeta({ title: () => `Judge: ${contest.value?.title || 'Contest'} — ${useSiteName()}` });
 
+const isJudge = computed(() => {
+  if (!contest.value || !user.value) return false;
+  return ((contest.value.judges ?? []) as string[]).includes(user.value.id);
+});
+
 const entryList = computed(() => {
   const items = entriesData.value?.items ?? [];
-  return items.map((entry) => ({
-    id: entry.id,
-    contentId: entry.contentId,
-    contentSlug: entry.contentSlug,
-    contentType: entry.contentType,
-    contentTitle: entry.contentTitle,
-    authorName: entry.authorName,
-    authorUsername: entry.authorUsername,
-    score: entry.score ?? null,
-    rank: entry.rank ?? null,
-  }));
+  return items.map((entry) => {
+    const myScore = entry.judgeScores?.find((s) => s.judgeId === user.value?.id);
+    return {
+      id: entry.id,
+      contentId: entry.contentId,
+      contentSlug: entry.contentSlug,
+      contentType: entry.contentType,
+      contentTitle: entry.contentTitle,
+      authorName: entry.authorName,
+      authorUsername: entry.authorUsername,
+      score: entry.score ?? null,
+      rank: entry.rank ?? null,
+      myScore: myScore?.score ?? null,
+      myFeedback: myScore?.feedback ?? '',
+    };
+  });
 });
 
+const scoredCount = computed(() => entryList.value.filter((e) => e.myScore !== null).length);
+const totalCount = computed(() => entryList.value.length);
+const progressPct = computed(() => totalCount.value > 0 ? Math.round((scoredCount.value / totalCount.value) * 100) : 0);
+
 const scoring = ref<Record<string, number>>({});
+const feedback = ref<Record<string, string>>({});
 const submitting = ref<string | null>(null);
 const error = ref('');
 const success = ref('');
 
+// Pre-fill from existing scores
+watch(entryList, (list) => {
+  for (const entry of list) {
+    if (entry.myScore !== null && scoring.value[entry.id] === undefined) {
+      scoring.value[entry.id] = entry.myScore;
+    }
+    if (entry.myFeedback && feedback.value[entry.id] === undefined) {
+      feedback.value[entry.id] = entry.myFeedback;
+    }
+  }
+}, { immediate: true });
+
 async function submitScore(entryId: string): Promise<void> {
   const score = scoring.value[entryId];
   if (score === undefined || score < 1 || score > 100) {
@@ -45,9 +76,13 @@ async function submitScore(entryId: string): Promise<void> {
   try {
     await $fetch(`/api/contests/${slug}/judge`, {
       method: 'POST',
-      body: { entryId, score },
+      body: {
+        entryId,
+        score,
+        feedback: feedback.value[entryId] || undefined,
+      },
     });
-    success.value = `Score submitted for entry.`;
+    success.value = 'Score submitted for entry.';
     await refreshEntries();
   } catch (err: unknown) {
     error.value = (err as { data?: { message?: string } })?.data?.message || 'Failed to submit score.';
@@ -67,51 +102,84 @@ async function submitScore(entryId: string): Promise<void> {
         <i class="fa-solid fa-gavel cpub-judge-icon"></i>
         Judge: {{ contest?.title || 'Contest' }}
       </h1>
-      <p class="cpub-judge-desc">Score each entry from 1 to 100. Scores are saved immediately.</p>
+      <p class="cpub-judge-desc">Score each entry from 1 to 100. Add optional feedback. Scores are saved immediately.</p>
     </header>
 
-    <div v-if="error" class="cpub-judge-alert cpub-judge-alert--error" role="alert">{{ error }}</div>
-    <div v-if="success" class="cpub-judge-alert cpub-judge-alert--success">{{ success }}</div>
+    <!-- Loading -->
+    <div v-if="!contest" class="cpub-judge-empty">
+      <p>Loading...</p>
+    </div>
 
-    <div v-if="entryList.length === 0" class="cpub-judge-empty">
-      <i class="fa-solid fa-inbox" style="font-size: 24px; color: var(--text-faint);"></i>
-      <p>No entries to judge yet.</p>
+    <!-- Auth guard -->
+    <div v-else-if="!isJudge" class="cpub-judge-unauthorized">
+      <i class="fa-solid fa-lock"></i>
+      <p>You are not a judge for this contest.</p>
+      <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
     </div>
 
-    <div v-else class="cpub-judge-entries">
-      <div v-for="entry in entryList" :key="entry.id" class="cpub-judge-entry">
-        <div class="cpub-judge-entry-info">
-          <div class="cpub-judge-entry-title">{{ entry.contentTitle }}</div>
-          <div class="cpub-judge-entry-author">by {{ entry.authorName }}</div>
-          <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-judge-entry-link" target="_blank">
-            <i class="fa-solid fa-arrow-up-right-from-square"></i> View entry
-          </NuxtLink>
+    <template v-else>
+      <!-- Progress bar -->
+      <div v-if="totalCount > 0" class="cpub-judge-progress">
+        <div class="cpub-judge-progress-label">
+          Scored <strong>{{ scoredCount }}</strong> / <strong>{{ totalCount }}</strong> entries
+        </div>
+        <div class="cpub-judge-progress-bar">
+          <div class="cpub-judge-progress-fill" :style="{ width: `${progressPct}%` }"></div>
         </div>
-        <div class="cpub-judge-entry-scoring">
-          <div v-if="entry.score !== null" class="cpub-judge-current-score">
-            <span class="cpub-judge-score-label">Current</span>
-            <span class="cpub-judge-score-value">{{ entry.score }}</span>
+      </div>
+
+      <div v-if="error" class="cpub-judge-alert cpub-judge-alert--error" role="alert">{{ error }}</div>
+      <div v-if="success" class="cpub-judge-alert cpub-judge-alert--success">{{ success }}</div>
+
+      <div v-if="entryList.length === 0" class="cpub-judge-empty">
+        <i class="fa-solid fa-inbox"></i>
+        <p>No entries to judge yet.</p>
+      </div>
+
+      <div v-else class="cpub-judge-entries">
+        <div v-for="entry in entryList" :key="entry.id" class="cpub-judge-entry">
+          <div class="cpub-judge-entry-info">
+            <div class="cpub-judge-entry-title">{{ entry.contentTitle }}</div>
+            <div class="cpub-judge-entry-author">by {{ entry.authorName }}</div>
+            <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-judge-entry-link" target="_blank">
+              <i class="fa-solid fa-arrow-up-right-from-square"></i> View entry
+            </NuxtLink>
           </div>
-          <div class="cpub-judge-score-input-wrap">
-            <input
-              v-model.number="scoring[entry.id]"
-              type="number"
-              class="cpub-judge-score-input"
-              min="1"
-              max="100"
-              placeholder="1-100"
-            />
-            <button
-              class="cpub-judge-score-btn"
-              :disabled="submitting === entry.id"
-              @click="submitScore(entry.id)"
-            >
-              {{ submitting === entry.id ? '...' : 'Score' }}
-            </button>
+          <div class="cpub-judge-entry-scoring">
+            <div v-if="entry.myScore !== null" class="cpub-judge-current-score">
+              <span class="cpub-judge-score-label">Your Score</span>
+              <span class="cpub-judge-score-value">{{ entry.myScore }}</span>
+            </div>
+            <div class="cpub-judge-score-controls">
+              <div class="cpub-judge-score-input-wrap">
+                <input
+                  v-model.number="scoring[entry.id]"
+                  type="number"
+                  class="cpub-judge-score-input"
+                  min="1"
+                  max="100"
+                  placeholder="1-100"
+                />
+                <button
+                  class="cpub-judge-score-btn"
+                  :disabled="submitting === entry.id"
+                  @click="submitScore(entry.id)"
+                >
+                  {{ submitting === entry.id ? '...' : entry.myScore !== null ? 'Update' : 'Score' }}
+                </button>
+              </div>
+              <textarea
+                v-model="feedback[entry.id]"
+                class="cpub-judge-feedback"
+                placeholder="Optional feedback (max 2000 chars)"
+                maxlength="2000"
+                rows="2"
+              ></textarea>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -124,16 +192,25 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-icon { color: var(--accent); font-size: 18px; }
 .cpub-judge-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
 
+.cpub-judge-unauthorized { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.cpub-judge-unauthorized i { font-size: 24px; }
+
+.cpub-judge-progress { margin-bottom: 20px; }
+.cpub-judge-progress-label { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 6px; }
+.cpub-judge-progress-bar { height: 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.cpub-judge-progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
+
 .cpub-judge-alert { padding: 10px 14px; font-size: 12px; border: var(--border-width-default) solid; margin-bottom: 16px; }
 .cpub-judge-alert--error { background: var(--red-bg); color: var(--red); border-color: var(--red); }
 .cpub-judge-alert--success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
 
 .cpub-judge-empty { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.cpub-judge-empty i { font-size: 24px; }
 
-.cpub-judge-entries { display: flex; flex-direction: column; gap: 8px; }
+.cpub-judge-entries { display: flex; flex-direction: column; gap: 12px; }
 .cpub-judge-entry {
-  display: flex; align-items: center; justify-content: space-between; gap: 16px;
-  padding: 14px 16px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  padding: 16px; background: var(--surface); border: var(--border-width-default) solid var(--border);
   box-shadow: var(--shadow-md);
 }
 .cpub-judge-entry-info { flex: 1; min-width: 0; }
@@ -142,10 +219,11 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-entry-link { font-size: 10px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
 .cpub-judge-entry-link:hover { text-decoration: underline; }
 
-.cpub-judge-entry-scoring { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+.cpub-judge-entry-scoring { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 220px; }
 .cpub-judge-current-score { text-align: center; }
 .cpub-judge-score-label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
 .cpub-judge-score-value { font-size: 20px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
+.cpub-judge-score-controls { display: flex; flex-direction: column; gap: 6px; }
 .cpub-judge-score-input-wrap { display: flex; gap: 0; }
 .cpub-judge-score-input {
   width: 70px; padding: 6px 8px; border: var(--border-width-default) solid var(--border); background: var(--surface);
@@ -158,4 +236,14 @@ async function submitScore(entryId: string): Promise<void> {
 }
 .cpub-judge-score-btn:hover { opacity: 0.9; }
 .cpub-judge-score-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.cpub-judge-feedback {
+  width: 100%; padding: 6px 8px; border: var(--border-width-default) solid var(--border); background: var(--surface);
+  color: var(--text); font-size: 11px; font-family: inherit; resize: vertical; outline: none;
+}
+.cpub-judge-feedback:focus { border-color: var(--accent); }
+
+@media (max-width: 768px) {
+  .cpub-judge-entry { flex-direction: column; }
+  .cpub-judge-entry-scoring { min-width: 100%; }
+}
 </style>

package/pages/contests/[slug]/results.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Serialized, ContestDetail, ContestEntryItem } from '@commonpub/server';
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const { data: contest } = useLazyFetch<Serialized<ContestDetail>>(`/api/contests/${slug}`);
+const { data: entriesData } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
+
+useSeoMeta({
+  title: () => `Results: ${contest.value?.title || 'Contest'} — ${useSiteName()}`,
+});
+
+const rankedEntries = computed(() => {
+  const items = [...(entriesData.value?.items ?? [])];
+  items.sort((a, b) => (a.rank ?? 999) - (b.rank ?? 999));
+  return items;
+});
+
+const podium = computed(() => rankedEntries.value.filter((e) => e.rank && e.rank <= 3));
+const leaderboard = computed(() => rankedEntries.value);
+
+const prizes = computed(() => contest.value?.prizes ?? []);
+
+function prizeForRank(rank: number): { title: string; value?: string } | null {
+  const prize = prizes.value.find((p: { place: number; title: string; value?: string }) => p.place === rank);
+  return prize ?? null;
+}
+
+function medalIcon(rank: number): string {
+  if (rank === 1) return 'fa-trophy';
+  if (rank === 2) return 'fa-medal';
+  if (rank === 3) return 'fa-award';
+  return '';
+}
+
+function medalColor(rank: number): string {
+  if (rank === 1) return 'var(--gold)';
+  if (rank === 2) return 'var(--silver)';
+  if (rank === 3) return 'var(--bronze)';
+  return 'var(--text-dim)';
+}
+</script>
+
+<template>
+  <div class="cpub-results-page">
+    <header class="cpub-results-header">
+      <NuxtLink :to="`/contests/${slug}`" class="cpub-results-back">
+        <i class="fa-solid fa-arrow-left"></i> Back to contest
+      </NuxtLink>
+      <h1 class="cpub-results-title">
+        <i class="fa-solid fa-ranking-star" style="color: var(--yellow);"></i>
+        {{ contest?.title || 'Contest' }} — Results
+      </h1>
+    </header>
+
+    <!-- Not completed -->
+    <div v-if="contest && contest.status !== 'completed'" class="cpub-results-pending">
+      <i class="fa-solid fa-hourglass-half"></i>
+      <p>Results are not available yet. The contest is still <strong>{{ contest.status }}</strong>.</p>
+      <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
+    </div>
+
+    <template v-else-if="contest">
+      <!-- PODIUM -->
+      <div v-if="podium.length > 0" class="cpub-podium">
+        <div
+          v-for="entry in podium"
+          :key="entry.id"
+          class="cpub-podium-card"
+          :class="`cpub-podium-${entry.rank ?? 0}`"
+        >
+          <div class="cpub-podium-medal" :style="{ color: medalColor(entry.rank ?? 0) }">
+            <i class="fa-solid" :class="medalIcon(entry.rank ?? 0)"></i>
+          </div>
+          <div class="cpub-podium-rank">#{{ entry.rank }}</div>
+          <div class="cpub-podium-thumb">
+            <img v-if="entry.contentCoverImageUrl" :src="entry.contentCoverImageUrl" :alt="entry.contentTitle" />
+            <div v-else class="cpub-podium-placeholder"><i class="fa-solid fa-microchip"></i></div>
+          </div>
+          <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-podium-title">{{ entry.contentTitle }}</NuxtLink>
+          <NuxtLink :to="`/u/${entry.authorUsername}`" class="cpub-podium-author">{{ entry.authorName }}</NuxtLink>
+          <div class="cpub-podium-score">Score: {{ entry.score ?? '—' }}</div>
+          <template v-if="entry.rank && prizeForRank(entry.rank)">
+            <div class="cpub-podium-prize">
+              <i class="fa-solid fa-gift"></i> {{ prizeForRank(entry.rank)?.title }}
+              <span v-if="prizeForRank(entry.rank)?.value" class="cpub-podium-prize-val">{{ prizeForRank(entry.rank)?.value }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- LEADERBOARD -->
+      <div v-if="leaderboard.length > 0" class="cpub-leaderboard">
+        <h2 class="cpub-leaderboard-title">Full Leaderboard</h2>
+        <table class="cpub-leaderboard-table">
+          <thead>
+            <tr>
+              <th>Rank</th>
+              <th>Entry</th>
+              <th>Author</th>
+              <th>Score</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="entry in leaderboard" :key="entry.id" :class="{ 'cpub-lb-top3': entry.rank && entry.rank <= 3 }">
+              <td class="cpub-lb-rank">
+                <span v-if="entry.rank && entry.rank <= 3" :style="{ color: medalColor(entry.rank) }">
+                  <i class="fa-solid" :class="medalIcon(entry.rank)"></i>
+                </span>
+                {{ entry.rank ?? '—' }}
+              </td>
+              <td>
+                <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-lb-entry-link">{{ entry.contentTitle }}</NuxtLink>
+              </td>
+              <td>
+                <NuxtLink :to="`/u/${entry.authorUsername}`" class="cpub-lb-author-link">{{ entry.authorName }}</NuxtLink>
+              </td>
+              <td class="cpub-lb-score">{{ entry.score ?? '—' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-else class="cpub-results-empty">
+        <i class="fa-solid fa-inbox"></i>
+        <p>No entries were submitted to this contest.</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-results-page { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
+.cpub-results-header { margin-bottom: 32px; }
+.cpub-results-back { font-size: 12px; color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
+.cpub-results-back:hover { color: var(--accent); }
+.cpub-results-title { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
+
+.cpub-results-pending { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.cpub-results-pending i { font-size: 24px; }
+
+/* PODIUM */
+.cpub-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
+.cpub-podium-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow-md); }
+.cpub-podium-1 { box-shadow: var(--shadow-accent); border-color: var(--yellow-border); }
+.cpub-podium-medal { font-size: 28px; margin-bottom: 6px; }
+.cpub-podium-rank { font-size: 11px; font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; margin-bottom: 12px; color: var(--text-dim); }
+.cpub-podium-thumb { width: 100%; height: 100px; overflow: hidden; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface2); display: flex; align-items: center; justify-content: center; }
+.cpub-podium-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-podium-placeholder { font-size: 24px; color: var(--text-faint); opacity: .5; }
+.cpub-podium-title { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; color: var(--text); text-decoration: none; }
+.cpub-podium-title:hover { color: var(--accent); }
+.cpub-podium-author { font-size: 11px; color: var(--text-dim); text-decoration: none; display: block; margin-bottom: 6px; }
+.cpub-podium-author:hover { color: var(--accent); }
+.cpub-podium-score { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); margin-bottom: 6px; }
+.cpub-podium-prize { font-size: 11px; font-family: var(--font-mono); color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 4px; }
+.cpub-podium-prize-val { font-weight: 700; color: var(--yellow); }
+
+/* LEADERBOARD */
+.cpub-leaderboard { margin-bottom: 32px; }
+.cpub-leaderboard-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
+.cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.cpub-leaderboard-table th { text-align: left; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-leaderboard-table td { padding: 10px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-lb-top3 { background: var(--surface2); }
+.cpub-lb-rank { font-family: var(--font-mono); font-weight: 700; display: flex; align-items: center; gap: 6px; }
+.cpub-lb-score { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
+.cpub-lb-entry-link { color: var(--text); text-decoration: none; font-weight: 500; }
+.cpub-lb-entry-link:hover { color: var(--accent); }
+.cpub-lb-author-link { color: var(--text-dim); text-decoration: none; }
+.cpub-lb-author-link:hover { color: var(--accent); }
+
+.cpub-results-empty { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.cpub-results-empty i { font-size: 24px; }
+
+@media (max-width: 768px) {
+  .cpub-podium { grid-template-columns: 1fr; }
+  .cpub-leaderboard-table { font-size: 11px; }
+  .cpub-leaderboard-table th, .cpub-leaderboard-table td { padding: 8px; }
+}
+</style>

package/pages/contests/create.vue

@@ -69,82 +69,82 @@ async function handleCreate(): Promise<void> {
 }
 
 const placeLabels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
-const placeColors = ['var(--yellow)', 'var(--text-faint)', '#a0724a', 'var(--accent)', 'var(--accent)', 'var(--accent)'];
+const placeColors = ['var(--gold)', 'var(--silver)', 'var(--bronze)', 'var(--accent)', 'var(--accent)', 'var(--accent)'];
 </script>
 
 <template>
-  <div class="contest-create">
+  <div class="cpub-contest-create">
     <NuxtLink to="/contests" class="cpub-back-link"><i class="fa-solid fa-arrow-left"></i> Contests</NuxtLink>
-    <h1 class="page-title">Create Contest</h1>
+    <h1 class="cpub-page-title">Create Contest</h1>
 
-    <form class="contest-form" @submit.prevent="handleCreate" aria-label="Create contest">
+    <form class="cpub-contest-form" @submit.prevent="handleCreate" aria-label="Create contest">
       <!-- Basic Info -->
-      <section class="form-section">
-        <h2 class="form-section-title">Contest Details</h2>
-        <div class="form-field">
-          <label for="contest-title" class="form-label">Title</label>
-          <input id="contest-title" v-model="title" type="text" class="form-input" required placeholder="Maker Challenge 2026" />
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Contest Details</h2>
+        <div class="cpub-form-field">
+          <label for="contest-title" class="cpub-form-label">Title</label>
+          <input id="contest-title" v-model="title" type="text" class="cpub-form-input" required placeholder="Maker Challenge 2026" />
         </div>
-        <div class="form-field">
-          <label for="contest-desc" class="form-label">Description</label>
-          <textarea id="contest-desc" v-model="description" class="form-textarea" rows="3" placeholder="Describe your contest..." />
+        <div class="cpub-form-field">
+          <label for="contest-desc" class="cpub-form-label">Description</label>
+          <textarea id="contest-desc" v-model="description" class="cpub-form-textarea" rows="3" placeholder="Describe your contest..." />
         </div>
-        <div class="form-field">
-          <label for="contest-rules" class="form-label">Rules</label>
-          <textarea id="contest-rules" v-model="rules" class="form-textarea" rows="4" placeholder="Contest rules and requirements..." />
+        <div class="cpub-form-field">
+          <label for="contest-rules" class="cpub-form-label">Rules</label>
+          <textarea id="contest-rules" v-model="rules" class="cpub-form-textarea" rows="4" placeholder="Contest rules and requirements..." />
         </div>
       </section>
 
       <!-- Dates -->
-      <section class="form-section">
-        <h2 class="form-section-title">Schedule</h2>
-        <div class="form-row">
-          <div class="form-field">
-            <label for="start-date" class="form-label">Start Date</label>
-            <input id="start-date" v-model="startDate" type="datetime-local" class="form-input" required />
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Schedule</h2>
+        <div class="cpub-form-row">
+          <div class="cpub-form-field">
+            <label for="start-date" class="cpub-form-label">Start Date</label>
+            <input id="start-date" v-model="startDate" type="datetime-local" class="cpub-form-input" required />
           </div>
-          <div class="form-field">
-            <label for="end-date" class="form-label">End Date</label>
-            <input id="end-date" v-model="endDate" type="datetime-local" class="form-input" required />
+          <div class="cpub-form-field">
+            <label for="end-date" class="cpub-form-label">End Date</label>
+            <input id="end-date" v-model="endDate" type="datetime-local" class="cpub-form-input" required />
           </div>
-          <div class="form-field">
-            <label for="judging-date" class="form-label">Judging Ends</label>
-            <input id="judging-date" v-model="judgingEndDate" type="datetime-local" class="form-input" />
+          <div class="cpub-form-field">
+            <label for="judging-date" class="cpub-form-label">Judging Ends</label>
+            <input id="judging-date" v-model="judgingEndDate" type="datetime-local" class="cpub-form-input" />
           </div>
         </div>
       </section>
 
       <!-- Prizes -->
-      <section class="form-section">
-        <div class="form-section-header">
-          <h2 class="form-section-title">Prizes</h2>
+      <section class="cpub-form-section">
+        <div class="cpub-form-section-header">
+          <h2 class="cpub-form-section-title">Prizes</h2>
           <button type="button" class="cpub-btn cpub-btn-sm" @click="addPrize">
             <i class="fa-solid fa-plus"></i> Add Prize
           </button>
         </div>
 
-        <div v-for="(prize, idx) in prizes" :key="idx" class="prize-card">
-          <div class="prize-header">
-            <span class="prize-place" :style="{ color: placeColors[idx] || 'var(--accent)' }">
+        <div v-for="(prize, idx) in prizes" :key="idx" class="cpub-prize-card">
+          <div class="cpub-prize-header">
+            <span class="cpub-prize-place" :style="{ color: placeColors[idx] || 'var(--accent)' }">
               <i class="fa-solid fa-trophy"></i> {{ placeLabels[idx] || `${idx + 1}th` }} Place
             </span>
             <button v-if="prizes.length > 1" type="button" class="cpub-delete-btn" @click="removePrize(idx)">
               <i class="fa-solid fa-xmark"></i>
             </button>
           </div>
-          <div class="form-row">
-            <div class="form-field" style="flex: 2">
-              <label class="form-label">Title</label>
-              <input v-model="prize.title" type="text" class="form-input" placeholder="Prize title" />
+          <div class="cpub-form-row">
+            <div class="cpub-form-field" style="flex: 2">
+              <label class="cpub-form-label">Title</label>
+              <input v-model="prize.title" type="text" class="cpub-form-input" placeholder="Prize title" />
             </div>
-            <div class="form-field" style="flex: 1">
-              <label class="form-label">Value</label>
-              <input v-model="prize.value" type="text" class="form-input" placeholder="$500" />
+            <div class="cpub-form-field" style="flex: 1">
+              <label class="cpub-form-label">Value</label>
+              <input v-model="prize.value" type="text" class="cpub-form-input" placeholder="$500" />
             </div>
           </div>
-          <div class="form-field">
-            <label class="form-label">Description</label>
-            <input v-model="prize.description" type="text" class="form-input" placeholder="What the winner receives..." />
+          <div class="cpub-form-field">
+            <label class="cpub-form-label">Description</label>
+            <input v-model="prize.description" type="text" class="cpub-form-input" placeholder="What the winner receives..." />
           </div>
         </div>
       </section>
@@ -157,36 +157,36 @@ const placeColors = ['var(--yellow)', 'var(--text-faint)', '#a0724a', 'var(--acc
 </template>
 
 <style scoped>
-.contest-create { max-width: 720px; margin: 0 auto; padding: 32px; }
+.cpub-contest-create { max-width: 720px; margin: 0 auto; padding: 32px; }
 
 .cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
 .cpub-back-link:hover { color: var(--accent); }
 
-.page-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.02em; }
+.cpub-page-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.02em; }
 
-.contest-form { display: flex; flex-direction: column; gap: 20px; }
+.cpub-contest-form { display: flex; flex-direction: column; gap: 20px; }
 
-.form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
-.form-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
-.form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
-.form-section-header .form-section-title { margin-bottom: 0; }
+.cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
+.cpub-form-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+.cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
+.cpub-form-section-header .cpub-form-section-title { margin-bottom: 0; }
 
-.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-.form-field:last-child { margin-bottom: 0; }
-.form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.form-input, .form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.form-input:focus, .form-textarea:focus { border-color: var(--accent); outline: none; }
-.form-textarea { resize: vertical; }
-.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+.cpub-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
+.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
 
-.prize-card { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
-.prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-.prize-place { font-size: 12px; font-weight: 700; font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
+.cpub-prize-card { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
+.cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.cpub-prize-place { font-size: 12px; font-weight: 700; font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
 
 @media (max-width: 768px) {
-  .contest-create { padding: 16px; }
-  .page-title { font-size: 20px; }
-  .form-section { padding: 14px; }
-  .form-row { grid-template-columns: 1fr; }
+  .cpub-contest-create { padding: 16px; }
+  .cpub-page-title { font-size: 20px; }
+  .cpub-form-section { padding: 14px; }
+  .cpub-form-row { grid-template-columns: 1fr; }
 }
 </style>