@commonpub/layer 0.1.0

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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+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`);
+
+useSeoMeta({ title: () => `Judge: ${contest.value?.title || 'Contest'} — ${useSiteName()}` });
+
+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,
+    score: entry.score ?? null,
+    rank: entry.rank ?? null,
+  }));
+});
+
+const scoring = ref<Record<string, number>>({});
+const submitting = ref<string | null>(null);
+const error = ref('');
+const success = ref('');
+
+async function submitScore(entryId: string): Promise<void> {
+  const score = scoring.value[entryId];
+  if (score === undefined || score < 1 || score > 100) {
+    error.value = 'Score must be between 1 and 100.';
+    return;
+  }
+
+  error.value = '';
+  success.value = '';
+  submitting.value = entryId;
+
+  try {
+    await $fetch(`/api/contests/${slug}/judge`, {
+      method: 'POST',
+      body: { entryId, score },
+    });
+    success.value = `Score submitted for entry.`;
+    await refreshEntries();
+  } catch (err: unknown) {
+    error.value = (err as { data?: { message?: string } })?.data?.message || 'Failed to submit score.';
+  } finally {
+    submitting.value = null;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-judge-page">
+    <header class="cpub-judge-header">
+      <NuxtLink :to="`/contests/${slug}`" class="cpub-judge-back">
+        <i class="fa-solid fa-arrow-left"></i> Back to contest
+      </NuxtLink>
+      <h1 class="cpub-judge-title">
+        <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>
+    </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>
+
+    <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>
+    </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="`/${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-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 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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-judge-page { max-width: 800px; margin: 0 auto; padding: 32px 24px; }
+.cpub-judge-header { margin-bottom: 24px; }
+.cpub-judge-back { font-size: 12px; color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
+.cpub-judge-back:hover { color: var(--accent); }
+.cpub-judge-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
+.cpub-judge-icon { color: var(--accent); font-size: 18px; }
+.cpub-judge-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
+
+.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-entries { display: flex; flex-direction: column; gap: 8px; }
+.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);
+  box-shadow: var(--shadow-md);
+}
+.cpub-judge-entry-info { flex: 1; min-width: 0; }
+.cpub-judge-entry-title { font-size: 14px; font-weight: 600; color: var(--text); }
+.cpub-judge-entry-author { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
+.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-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-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);
+  color: var(--text); font-size: 13px; font-family: var(--font-mono); text-align: center; outline: none;
+}
+.cpub-judge-score-input:focus { border-color: var(--accent); }
+.cpub-judge-score-btn {
+  padding: 6px 12px; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--accent);
+  font-size: 11px; font-weight: 600; cursor: pointer; border-left: none;
+}
+.cpub-judge-score-btn:hover { opacity: 0.9; }
+.cpub-judge-score-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+</style>

package/pages/contests/create.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+useSeoMeta({ title: `Create Contest — ${useSiteName()}` });
+
+const toast = useToast();
+const { extract: extractError } = useApiError();
+const saving = ref(false);
+
+const title = ref('');
+const description = ref('');
+const rules = ref('');
+const startDate = ref('');
+const endDate = ref('');
+const judgingEndDate = ref('');
+
+// Prizes
+interface Prize {
+  place: number;
+  title: string;
+  description: string;
+  value: string;
+}
+
+const prizes = ref<Prize[]>([
+  { place: 1, title: '1st Place', description: '', value: '' },
+  { place: 2, title: '2nd Place', description: '', value: '' },
+  { place: 3, title: '3rd Place', description: '', value: '' },
+]);
+
+function addPrize(): void {
+  prizes.value.push({
+    place: prizes.value.length + 1,
+    title: `${prizes.value.length + 1}th Place`,
+    description: '',
+    value: '',
+  });
+}
+
+function removePrize(index: number): void {
+  prizes.value.splice(index, 1);
+  // Renumber
+  prizes.value.forEach((p, i) => { p.place = i + 1; });
+}
+
+async function handleCreate(): Promise<void> {
+  if (!title.value.trim() || !startDate.value || !endDate.value) return;
+  saving.value = true;
+  try {
+    const result = await $fetch<{ slug: string }>('/api/contests', {
+      method: 'POST',
+      body: {
+        title: title.value,
+        description: description.value || undefined,
+        rules: rules.value || undefined,
+        startDate: new Date(startDate.value).toISOString(),
+        endDate: new Date(endDate.value).toISOString(),
+        judgingEndDate: judgingEndDate.value ? new Date(judgingEndDate.value).toISOString() : undefined,
+        prizes: prizes.value.filter(p => p.title.trim()),
+      },
+    });
+    toast.success('Contest created!');
+    await navigateTo(`/contests/${result.slug}`);
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    saving.value = false;
+  }
+}
+
+const placeLabels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
+const placeColors = ['var(--yellow)', 'var(--text-faint)', '#a0724a', 'var(--accent)', 'var(--accent)', 'var(--accent)'];
+</script>
+
+<template>
+  <div class="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>
+
+    <form class="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" />
+        </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>
+        <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>
+      </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 />
+          </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>
+          <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>
+        </div>
+      </section>
+
+      <!-- Prizes -->
+      <section class="form-section">
+        <div class="form-section-header">
+          <h2 class="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)' }">
+              <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>
+            <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>
+          </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>
+        </div>
+      </section>
+
+      <button type="submit" class="cpub-btn cpub-btn-primary cpub-btn-lg" :disabled="saving || !title.trim() || !startDate || !endDate">
+        <i class="fa-solid fa-trophy"></i> {{ saving ? 'Creating...' : 'Create Contest' }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.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; }
+
+.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; }
+
+.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; }
+
+.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; }
+
+@media (max-width: 768px) {
+  .contest-create { padding: 16px; }
+  .page-title { font-size: 20px; }
+  .form-section { padding: 14px; }
+  .form-row { grid-template-columns: 1fr; }
+}
+</style>

package/pages/contests/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+useSeoMeta({ title: `Contests — ${useSiteName()}` });
+
+const { data: contests } = await useFetch('/api/contests');
+const { isAuthenticated, isAdmin, user } = useAuth();
+
+const config = useRuntimeConfig();
+const contestCreation = config.public.contestCreation as string || 'admin';
+const canCreateContest = computed(() => {
+  if (!isAuthenticated.value) return false;
+  if (contestCreation === 'open') return true;
+  if (contestCreation === 'staff') return user.value?.role === 'admin' || user.value?.role === 'staff';
+  return isAdmin.value; // 'admin' default
+});
+</script>
+
+<template>
+  <div class="cpub-contests-page">
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
+      <SectionHeader title="Contests" large />
+      <NuxtLink v-if="canCreateContest" to="/contests/create" class="cpub-btn cpub-btn-primary" style="font-size: 12px; padding: 6px 14px; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--border); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;">
+        <i class="fa-solid fa-plus"></i> Create Contest
+      </NuxtLink>
+    </div>
+    <div v-if="contests?.items?.length" class="cpub-grid-3">
+      <div v-for="contest in contests.items" :key="contest.id" class="cpub-card">
+        <div class="cpub-card-body">
+          <span class="cpub-badge" :class="{
+            'cpub-badge-green': contest.status === 'active',
+            'cpub-badge-yellow': contest.status === 'upcoming',
+            'cpub-badge-red': contest.status === 'completed',
+          }">{{ contest.status }}</span>
+          <h3 style="font-size: 15px; font-weight: 600; margin: 8px 0">
+            <NuxtLink :to="`/contests/${contest.slug}`" style="color: var(--text); text-decoration: none">
+              {{ contest.title }}
+            </NuxtLink>
+          </h3>
+          <p v-if="contest.description" style="font-size: 12px; color: var(--text-dim); margin-bottom: 12px">
+            {{ contest.description }}
+          </p>
+          <div v-if="contest.endDate" style="margin-top: 8px">
+            <CountdownTimer :target-date="contest.endDate" />
+          </div>
+          <div style="display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono)">
+            <span><i class="fa-solid fa-users"></i> {{ contest.entryCount }} entries</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i class="fa-solid fa-trophy"></i></div>
+      <p class="cpub-empty-state-title">No contests yet</p>
+      <p class="cpub-empty-state-desc">Check back soon for upcoming contests.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-contests-page { max-width: 960px; margin: 0 auto; padding: 32px; }
+.cpub-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.cpub-card { border: var(--border-width-default) solid var(--border); background: var(--surface); overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; box-shadow: var(--shadow-md); }
+.cpub-card:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
+.cpub-card-body { padding: 16px; }
+
+@media (max-width: 768px) {
+  .cpub-contests-page { padding: 16px; }
+  .cpub-grid-3 { grid-template-columns: 1fr; gap: 14px; }
+}
+</style>

package/pages/create.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import type { ContentType } from '@commonpub/server';
+
+useSeoMeta({ title: `Create — ${useSiteName()}` });
+definePageMeta({ middleware: 'auth' });
+
+const { isTypeEnabled } = useContentTypes();
+const route = useRoute();
+const hubParam = computed(() => (route.query.hub as string) || '');
+
+const allTypes = [
+  {
+    type: 'project',
+    icon: 'fa-solid fa-microchip',
+    color: 'var(--accent)',
+    bg: 'var(--accent-bg)',
+    border: 'var(--accent-border)',
+    name: 'Project',
+    desc: 'Document a hardware or software build with step-by-step instructions, parts list, and build photos.',
+    badge: 'Popular',
+  },
+  {
+    type: 'article',
+    icon: 'fa-solid fa-file-lines',
+    color: 'var(--teal)',
+    bg: 'var(--teal-bg)',
+    border: 'var(--teal-border)',
+    name: 'Article',
+    desc: 'Write a long-form technical article with code examples, diagrams, and rich formatting.',
+  },
+  {
+    type: 'explainer',
+    icon: 'fa-solid fa-lightbulb',
+    color: 'var(--yellow)',
+    bg: 'var(--yellow-bg)',
+    border: 'var(--yellow-border)',
+    name: 'Explainer',
+    desc: 'Create an interactive explorable explanation with sliders, quizzes, and section-by-section progression.',
+  },
+  {
+    type: 'blog',
+    icon: 'fa-solid fa-pen-nib',
+    color: 'var(--pink)',
+    bg: 'var(--pink-bg)',
+    border: 'var(--pink-border)',
+    name: 'Blog Post',
+    desc: 'Share thoughts, tutorials, or updates with a clean writing experience and inline media.',
+  },
+];
+
+const types = computed(() => allTypes.filter(t => isTypeEnabled(t.type as ContentType)));
+</script>
+
+<template>
+  <div class="cpub-create-page">
+    <div class="cpub-create-header">
+      <div class="cpub-create-eyebrow"><i class="fa-solid fa-plus"></i> New Content</div>
+      <h1 class="cpub-create-title">What would you like to create?</h1>
+      <p class="cpub-create-subtitle">Choose a content type to get started. You can change the format later.</p>
+    </div>
+
+    <div class="cpub-create-grid">
+      <NuxtLink
+        v-for="t in types"
+        :key="t.type"
+        :to="`/${t.type}/new/edit${hubParam ? `?hub=${hubParam}` : ''}`"
+        class="cpub-create-card"
+      >
+        <div class="cpub-create-card-icon" :style="{ color: t.color, background: t.bg, borderColor: t.border }">
+          <i :class="t.icon"></i>
+          <span v-if="t.badge" class="cpub-create-badge">{{ t.badge }}</span>
+        </div>
+        <div class="cpub-create-card-body">
+          <h3 class="cpub-create-card-name">{{ t.name }}</h3>
+          <p class="cpub-create-card-desc">{{ t.desc }}</p>
+        </div>
+        <div class="cpub-create-card-arrow">
+          <i class="fa-solid fa-arrow-right"></i>
+        </div>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-create-page {
+  max-width: 800px;
+  padding: var(--space-8) var(--space-6);
+}
+
+.cpub-create-header {
+  margin-bottom: var(--space-8);
+}
+
+.cpub-create-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cpub-create-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: var(--space-2);
+  letter-spacing: -0.02em;
+}
+
+.cpub-create-subtitle {
+  font-size: 14px;
+  color: var(--text-dim);
+  line-height: 1.6;
+}
+
+.cpub-create-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cpub-create-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px 24px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.cpub-create-card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translate(-1px, -1px);
+}
+
+.cpub-create-card-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  flex-shrink: 0;
+  border: var(--border-width-default) solid;
+  position: relative;
+}
+
+.cpub-create-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-create-card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-create-card-name {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.cpub-create-card-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.55;
+}
+
+.cpub-create-card-arrow {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text-faint);
+  font-size: 12px;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.cpub-create-card:hover .cpub-create-card-arrow {
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  border-color: var(--border);
+}
+
+@media (max-width: 640px) {
+  .cpub-create-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .cpub-create-card-arrow {
+    align-self: flex-end;
+  }
+}
+</style>