@commonpub/layer 0.8.2 → 0.8.4

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

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import type { Serialized, ContestEntryItem } from '@commonpub/server';
+
 const route = useRoute();
 const slug = route.params.slug as string;
+const toast = useToast();
+const { isAuthenticated, isAdmin, user } = useAuth();
 
 const { data: contest } = useLazyFetch(`/api/contests/${slug}`);
+const { data: apiEntriesData, refresh: refreshEntries } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
 
 useSeoMeta({
   title: () => `${contest.value?.title || 'Contest'} — ${useSiteName()}`,
@@ -10,75 +15,16 @@ useSeoMeta({
   ogImage: '/og-default.png',
 });
 
-// Fetch entries from API
-const { data: apiEntriesData } = useLazyFetch<{ items: any[]; total: number }>(`/api/contests/${slug}/entries`);
-
 const c = computed(() => contest.value);
-
-// Countdown timer
-const countdown = ref({ days: '00', hours: '00', mins: '00', secs: '00' });
-let countdownInterval: ReturnType<typeof setInterval> | null = null;
-
-function pad(n: number): string { return String(n).padStart(2, '0'); }
-
-function updateCountdown(): void {
-  const target = c.value?.endDate ? new Date(c.value.endDate) : new Date();
-  const now = new Date();
-  let diff = Math.max(0, Math.floor((target.getTime() - now.getTime()) / 1000));
-  const days = Math.floor(diff / 86400); diff %= 86400;
-  const hours = Math.floor(diff / 3600); diff %= 3600;
-  const mins = Math.floor(diff / 60);
-  const secs = diff % 60;
-  countdown.value = { days: pad(days), hours: pad(hours), mins: pad(mins), secs: pad(secs) };
-}
-
-onMounted(() => {
-  updateCountdown();
-  countdownInterval = setInterval(updateCountdown, 1000);
-});
-
-onUnmounted(() => {
-  if (countdownInterval) clearInterval(countdownInterval);
-});
-
-// FAQ accordion
-const openFaq = ref<number>(0);
-function toggleFaq(i: number): void {
-  openFaq.value = openFaq.value === i ? -1 : i;
-}
-
-// Vote state
-const toast = useToast();
-const votedEntries = ref<Set<string>>(new Set());
-async function toggleVote(entryId: string): Promise<void> {
-  if (!isAuthenticated.value) {
-    toast.error('Log in to vote');
-    return;
-  }
-  try {
-    await $fetch('/api/social/like', {
-      method: 'POST',
-      body: { targetId: entryId, targetType: 'contestEntry' },
-    });
-    if (votedEntries.value.has(entryId)) votedEntries.value.delete(entryId);
-    else votedEntries.value.add(entryId);
-  } catch {
-    toast.error('Failed to vote');
-  }
-}
-
-const entries = computed(() => {
-  return apiEntriesData.value?.items ?? [];
-});
-
-const entryFilter = ref('all');
-const filters = ['all', 'newest'];
+const entries = computed(() => apiEntriesData.value?.items ?? []);
+const isOwner = computed(() => isAdmin.value || !!(user.value?.id && c.value?.createdById === user.value.id));
+const isJudge = computed(() => !!(user.value?.id && ((c.value?.judges ?? []) as string[]).includes(user.value.id)));
 
 // Admin contest management
-const { isAuthenticated, isAdmin } = useAuth();
 const transitioning = ref(false);
 
 async function transitionStatus(newStatus: string): Promise<void> {
+  if (newStatus === 'cancelled' && !confirm('Cancel this contest? This cannot be undone.')) return;
   transitioning.value = true;
   try {
     await $fetch(`/api/contests/${slug}/transition`, {
@@ -106,6 +52,7 @@ const { data: userContent } = useFetch('/api/content', {
 function copyLink(): void {
   if (typeof window !== 'undefined' && window.navigator?.clipboard) {
     window.navigator.clipboard.writeText(window.location.href);
+    toast.success('Link copied');
   }
 }
 
@@ -127,102 +74,39 @@ async function submitEntry(): Promise<void> {
     submitting.value = false;
   }
 }
+
+async function withdrawEntry(entryId: string): Promise<void> {
+  try {
+    await $fetch(`/api/contests/${slug}/entries/${entryId}`, { method: 'DELETE' });
+    toast.success('Entry withdrawn');
+    refreshNuxtData();
+  } catch {
+    toast.error('Failed to withdraw entry');
+  }
+}
 </script>
 
 <template>
   <div class="cpub-contest">
-
-    <!-- HERO -->
-    <div class="cpub-hero">
-      <div class="cpub-hero-pattern">
-        <div class="cpub-hero-dots"></div>
-        <div class="cpub-hero-lines"></div>
-      </div>
-
-      <div class="cpub-hero-inner">
-        <div class="cpub-hero-eyebrow">
-          <span class="cpub-contest-badge"><i class="fa fa-trophy" style="margin-right:5px;font-size:8px;"></i>Contest</span>
-          <span class="cpub-hero-host">
-            Hosted by
-            <span class="cpub-av cpub-av-sm" style="background:var(--accent-bg);border-color:var(--accent);color:var(--accent);">CP</span>
-            <strong style="color:var(--hero-text);">CommonPub</strong>
-          </span>
-        </div>
-
-        <div class="cpub-hero-title">{{ c?.title || 'Contest' }}</div>
-        <div class="cpub-hero-tagline">
-          {{ c?.description || 'No description available.' }}
-        </div>
-
-        <div class="cpub-hero-meta">
-          <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-item"><i class="fa fa-calendar"></i> {{ c?.startDate ? new Date(c.startDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '' }}{{ c?.startDate && c?.endDate ? ' — ' : '' }}{{ c?.endDate ? new Date(c.endDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '' }}</span>
-          <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-sep">|</span>
-          <span class="cpub-hero-meta-item"><i class="fa fa-folder-open"></i> {{ c?.entryCount ?? 0 }} entries</span>
-        </div>
-
-        <!-- COUNTDOWN -->
-        <div class="cpub-countdown-section">
-          <div class="cpub-countdown-label"><i class="fa fa-clock" style="margin-right:4px;color:var(--accent);"></i>{{ c?.status === 'judging' ? 'Judging ends in' : c?.status === 'completed' ? 'Contest ended' : 'Submissions close in' }}</div>
-          <div class="cpub-countdown-row">
-            <div class="cpub-countdown-block">
-              <div class="cpub-countdown-val">{{ countdown.days }}</div>
-              <div class="cpub-countdown-unit">Days</div>
-            </div>
-            <div class="cpub-countdown-sep">:</div>
-            <div class="cpub-countdown-block">
-              <div class="cpub-countdown-val">{{ countdown.hours }}</div>
-              <div class="cpub-countdown-unit">Hours</div>
-            </div>
-            <div class="cpub-countdown-sep">:</div>
-            <div class="cpub-countdown-block">
-              <div class="cpub-countdown-val">{{ countdown.mins }}</div>
-              <div class="cpub-countdown-unit">Minutes</div>
-            </div>
-            <div class="cpub-countdown-sep">:</div>
-            <div class="cpub-countdown-block">
-              <div class="cpub-countdown-val">{{ countdown.secs }}</div>
-              <div class="cpub-countdown-unit">Seconds</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="cpub-hero-cta">
-          <button v-if="isAuthenticated && c?.status === 'active'" class="cpub-btn cpub-btn-primary cpub-btn-lg" @click="showSubmitDialog = true"><i class="fa fa-upload"></i> Submit Entry</button>
-          <button class="cpub-btn cpub-btn-lg cpub-btn-dark"><i class="fa fa-file-lines"></i> View Rules</button>
-          <button class="cpub-btn cpub-btn-sm cpub-btn-dark" style="margin-left:4px;"><i class="fa fa-bell"></i> Notify Me</button>
-        </div>
-
-        <!-- Admin controls -->
-        <div v-if="isAdmin && c" class="cpub-admin-controls">
-          <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Admin</span>
-          <button v-if="c.status === 'upcoming'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="transitionStatus('active')"><i class="fa-solid fa-play"></i> Activate</button>
-          <button v-if="c.status === 'active'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="transitionStatus('judging')"><i class="fa-solid fa-gavel"></i> Start Judging</button>
-          <button v-if="c.status === 'judging'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="transitionStatus('completed')"><i class="fa-solid fa-check"></i> Complete</button>
-          <span class="cpub-admin-status">Status: <strong>{{ c.status }}</strong></span>
-        </div>
-
-        <div class="cpub-hero-stats">
-          <div class="cpub-hero-stat">
-            <div class="cpub-hero-stat-val">{{ c?.entryCount ?? 0 }}</div>
-            <div class="cpub-hero-stat-label">Entries</div>
-          </div>
-          <div class="cpub-hero-stat">
-            <div class="cpub-hero-stat-val">{{ c?.status ?? 'draft' }}</div>
-            <div class="cpub-hero-stat-label">Status</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ContestHero
+      :contest="c"
+      :is-admin="isAdmin"
+      :is-authenticated="isAuthenticated"
+      :transitioning="transitioning"
+      @submit-entry="showSubmitDialog = true"
+      @transition="transitionStatus"
+      @copy-link="copyLink"
+    />
 
     <!-- SUBMIT ENTRY DIALOG -->
     <div v-if="showSubmitDialog" class="cpub-submit-overlay" @click.self="showSubmitDialog = false">
       <div class="cpub-submit-dialog" role="dialog" aria-label="Submit entry">
         <div class="cpub-submit-header">
-          <h2 style="font-size: 14px; font-weight: 700;">Submit Entry</h2>
-          <button style="background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
+          <h2>Submit Entry</h2>
+          <button class="cpub-submit-close" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
         </div>
         <div class="cpub-submit-body">
-          <p style="font-size: 12px; color: var(--text-dim); margin-bottom: 12px;">Select one of your published projects to submit as an entry.</p>
+          <p class="cpub-submit-hint">Select one of your published projects to submit as an entry.</p>
           <select v-model="submitContentId" class="cpub-submit-select">
             <option value="">Select a project...</option>
             <option v-for="item in (userContent?.items ?? [])" :key="item.id" :value="item.id">
@@ -242,345 +126,65 @@ async function submitEntry(): Promise<void> {
     <!-- MAIN CONTENT -->
     <div class="cpub-contest-main">
       <div class="cpub-contest-layout">
-
-        <!-- MAIN COLUMN -->
         <div>
-
           <!-- ABOUT -->
-          <div style="margin-bottom:20px;">
+          <div class="cpub-about-section">
             <div class="cpub-sec-head">
-              <h2><i class="fa fa-circle-info" style="color:var(--accent);margin-right:6px;"></i>About This Contest</h2>
+              <h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2>
             </div>
             <div class="cpub-about-card">
-              <div class="cpub-about-body">
-                <p>{{ c?.description || 'No description available for this contest.' }}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- RULES -->
-          <div v-if="c?.rules" style="margin-bottom:20px;">
-            <div class="cpub-sec-head">
-              <h2><i class="fa fa-file-lines" style="color:var(--purple);margin-right:6px;"></i>Rules</h2>
-            </div>
-            <div class="cpub-rules-card">
-              <div class="cpub-about-body" style="white-space: pre-line;">{{ c.rules }}</div>
-            </div>
-          </div>
-
-          <!-- ENTRIES -->
-          <div style="margin-bottom:20px;">
-            <div class="cpub-sec-head">
-              <h2><i class="fa fa-box-open" style="color:var(--teal);margin-right:6px;"></i>Submitted Entries</h2>
-              <span class="cpub-sec-sub">{{ c?.entryCount ?? entries.length }} entries</span>
-            </div>
-            <div v-if="entries.length" class="cpub-entry-grid">
-              <div
-                v-for="(entry, i) in entries"
-                :key="entry.id"
-                class="cpub-entry-card"
-              >
-                <div class="cpub-entry-thumb" :class="i % 2 === 0 ? 'cpub-entry-bg-light' : 'cpub-entry-bg-dark'">
-                  <img v-if="entry.contentCoverImageUrl" :src="entry.contentCoverImageUrl" :alt="entry.contentTitle" class="cpub-entry-cover-img" />
-                  <template v-else>
-                    <div class="cpub-entry-grid-pat"></div>
-                    <div class="cpub-entry-icon" style="color: var(--accent)"><i class="fa-solid fa-microchip"></i></div>
-                  </template>
-                  <span v-if="entry.rank" class="cpub-entry-rank" :class="`cpub-rank-${entry.rank}`">#{{ entry.rank }}</span>
-                </div>
-                <div class="cpub-entry-body">
-                  <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-entry-title">{{ entry.contentTitle || `Entry #${i + 1}` }}</NuxtLink>
-                  <div class="cpub-entry-author">
-                    <div class="cpub-entry-av">
-                      <img v-if="entry.authorAvatarUrl" :src="entry.authorAvatarUrl" :alt="entry.authorName || entry.authorUsername" class="cpub-entry-av-img" />
-                      <span v-else>{{ (entry.authorName || entry.authorUsername || '?').charAt(0).toUpperCase() }}</span>
-                    </div>
-                    <NuxtLink v-if="entry.authorUsername" :to="`/u/${entry.authorUsername}`" style="color: var(--text-dim); text-decoration: none;">{{ entry.authorName }}</NuxtLink>
-                    <span class="cpub-entry-meta">{{ new Date(entry.submittedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}</span>
-                  </div>
-                  <div class="cpub-entry-footer">
-                    <button
-                      class="cpub-vote-btn"
-                      :class="{ 'cpub-voted': votedEntries.has(entry.id) }"
-                      @click.prevent="toggleVote(entry.id)"
-                    ><i class="fa fa-arrow-up"></i> Vote</button>
-                    <span v-if="entry.score != null" class="cpub-entry-views">Score: {{ entry.score }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else class="cpub-empty-state" style="padding: 32px 0;">
-              <div class="cpub-empty-state-icon"><i class="fa-solid fa-box-open"></i></div>
-              <p class="cpub-empty-state-title">No entries yet</p>
-              <p class="cpub-empty-state-desc">Be the first to submit an entry!</p>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- SIDEBAR -->
-        <div>
-
-          <!-- STATUS -->
-          <div class="cpub-sb-card">
-            <div class="cpub-sb-title"><i class="fa-solid fa-circle-info" style="margin-right:5px;"></i>Status</div>
-            <div style="font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 8px;">
-              <div><strong>Status:</strong> {{ c?.status ?? 'unknown' }}</div>
-              <div v-if="c?.startDate"><strong>Starts:</strong> {{ new Date(c.startDate).toLocaleDateString() }}</div>
-              <div v-if="c?.endDate"><strong>Ends:</strong> {{ new Date(c.endDate).toLocaleDateString() }}</div>
-              <div><strong>Entries:</strong> {{ c?.entryCount ?? 0 }}</div>
+              <p>{{ c?.description || 'No description available for this contest.' }}</p>
             </div>
           </div>
 
-          <!-- SHARE -->
-          <div class="cpub-sb-card">
-            <div class="cpub-sb-title"><i class="fa-solid fa-share-nodes" style="margin-right:5px;"></i>Share This Contest</div>
-            <div style="display:flex;gap:6px;flex-wrap:wrap;">
-              <button class="cpub-btn cpub-btn-sm" style="flex:1;justify-content:center;" @click="copyLink()"><i class="fa fa-link"></i> Copy Link</button>
-            </div>
-          </div>
-
-          <NuxtLink to="/contests" class="cpub-btn" style="width: 100%; text-align: center; display: block; margin-top: 12px;"><i class="fa fa-arrow-left"></i> All Contests</NuxtLink>
+          <ContestRules v-if="c?.rules" :rules="c.rules" />
+          <ContestPrizes v-if="c?.prizes?.length" :prizes="c.prizes" />
+          <ContestJudges v-if="c?.judges?.length" :judge-ids="c.judges" />
+          <ContestEntries
+            :entries="entries"
+            :contest-status="c?.status"
+            :current-user-id="user?.id"
+            @withdraw="withdrawEntry"
+          />
         </div>
 
+        <ContestSidebar :contest="c" :is-owner="isOwner" :is-judge="isJudge" @copy-link="copyLink" />
       </div>
     </div>
-
   </div>
 </template>
 
 <style scoped>
-/* Hero uses a dark context — local custom properties for dark-bg values */
-.cpub-hero {
-  --hero-bg: var(--text);
-  --hero-text: var(--color-text-inverse);
-  --hero-text-dim: var(--text-faint);
-  --hero-border: rgba(255, 255, 255, 0.15);
-  --hero-surface: rgba(255, 255, 255, 0.06);
-}
-
-/* Metallic prize colors — no token equivalents */
-.cpub-contest {
-  --silver: var(--text-faint);
-  --bronze: #a0724a;
-}
-
 /* SUBMIT DIALOG */
 .cpub-submit-overlay { position: fixed; inset: 0; z-index: 200; background: var(--color-surface-overlay-light); display: flex; align-items: center; justify-content: center; }
 .cpub-submit-dialog { background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-xl); width: 420px; max-width: 90vw; }
 .cpub-submit-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-submit-header h2 { font-size: 14px; font-weight: 700; }
+.cpub-submit-close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; }
 .cpub-submit-body { padding: 16px; }
+.cpub-submit-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
 .cpub-submit-select { width: 100%; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; }
 .cpub-submit-select:focus { border-color: var(--accent); outline: none; }
 .cpub-submit-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: var(--border-width-default) solid var(--border); }
 
-/* HERO */
-.cpub-hero { position: relative; overflow: hidden; background: var(--hero-bg); padding: 56px 0 48px; }
-.cpub-hero-pattern { position: absolute; inset: 0; }
-.cpub-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--accent-border) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: .3; }
-.cpub-hero-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-bg) 1px, transparent 1px), linear-gradient(90deg, var(--accent-bg) 1px, transparent 1px); background-size: 56px 56px; }
-.cpub-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
-.cpub-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
-.cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); }
-.cpub-hero-host { font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
-.cpub-hero-title { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; color: var(--hero-text); }
-.cpub-hero-highlight { color: var(--accent); }
-.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; }
-.cpub-hero-meta { display: flex; align-items: center; gap: 20px; font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); margin-bottom: 28px; }
-.cpub-hero-meta-item { display: flex; align-items: center; gap: 5px; }
-.cpub-hero-meta-sep { color: var(--hero-border); }
-
-/* COUNTDOWN */
-.cpub-countdown-section { margin-bottom: 28px; }
-.cpub-countdown-label { font-size: 10px; font-family: var(--font-mono); color: var(--hero-text-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
-.cpub-countdown-row { display: flex; align-items: center; gap: 8px; }
-.cpub-countdown-block { display: flex; flex-direction: column; align-items: center; background: var(--hero-surface); border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); padding: 10px 16px; min-width: 60px; box-shadow: 4px 4px 0 var(--hero-surface); }
-.cpub-countdown-val { font-size: 26px; font-weight: 700; font-family: var(--font-mono); color: var(--hero-text); line-height: 1; margin-bottom: 4px; }
-.cpub-countdown-unit { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--hero-text-dim); font-family: var(--font-mono); }
-.cpub-countdown-sep { font-size: 20px; font-weight: 700; color: var(--hero-border); margin-top: -8px; font-family: var(--font-mono); }
-
-/* HERO CTA & STATS */
-.cpub-hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.cpub-total-prize { font-size: 12px; color: var(--hero-text-dim); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: var(--border-width-default) solid var(--hero-border); }
-.cpub-total-prize strong { color: var(--yellow); font-size: 15px; }
-.cpub-hero-stats { display: flex; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: var(--border-width-default) solid var(--hero-border); }
-.cpub-hero-stat { display: flex; flex-direction: column; }
-.cpub-hero-stat-val { font-size: 20px; font-weight: 700; font-family: var(--font-mono); color: var(--hero-text); }
-.cpub-hero-stat-label { font-size: 10px; color: var(--hero-text-dim); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
-
-/* BUTTONS (page-specific) */
-.cpub-btn-lg { padding: 10px 22px; font-size: 13px; }
-.cpub-btn-dark { background: var(--hero-surface); color: var(--hero-text); border-color: var(--hero-border); }
-.cpub-btn-dark:hover { background: var(--hero-surface); }
-
-/* AVATARS */
-.cpub-av { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; font-family: var(--font-mono); flex-shrink: 0; background: var(--surface3); border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
-.cpub-av-sm { width: 24px; height: 24px; font-size: 9px; }
-
 /* LAYOUT */
 .cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
 .cpub-contest-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
 
-/* SECTION HEADERS (page-specific) */
-.cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+/* SECTION HEADERS */
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
 
 /* ABOUT */
-.cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); }
-.cpub-about-body { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
-.cpub-about-body p { margin-bottom: 10px; }
-.cpub-about-body p:last-child { margin-bottom: 0; }
-.cpub-highlight-box { background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: 11px; color: var(--text-dim); }
-.cpub-highlight-box strong { color: var(--accent); }
+.cpub-about-section { margin-bottom: 20px; }
+.cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); font-size: 12px; color: var(--text-dim); line-height: 1.7; }
+.cpub-about-card p { margin: 0; }
 
-/* PRIZES */
-.cpub-prize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
-.cpub-prize-card { border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; text-align: center; background: var(--surface); border: var(--border-width-default) solid var(--border); }
-.cpub-prize-gold { box-shadow: var(--shadow-accent); }
-.cpub-prize-silver { box-shadow: var(--shadow-md); }
-.cpub-prize-bronze { box-shadow: var(--shadow-md); }
-.cpub-prize-rank { font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; margin-bottom: 8px; position: relative; z-index: 1; }
-.cpub-prize-rank-gold { color: var(--yellow); }
-.cpub-prize-rank-silver { color: var(--silver); }
-.cpub-prize-rank-bronze { color: var(--bronze); }
-.cpub-prize-icon { font-size: 28px; margin-bottom: 8px; position: relative; z-index: 1; }
-.cpub-prize-icon-gold { color: var(--yellow); }
-.cpub-prize-icon-silver { color: var(--silver); }
-.cpub-prize-icon-bronze { color: var(--bronze); }
-.cpub-prize-amount { font-size: 24px; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; position: relative; z-index: 1; }
-.cpub-prize-amount-gold { color: var(--yellow); }
-.cpub-prize-amount-silver { color: var(--silver); }
-.cpub-prize-amount-bronze { color: var(--bronze); }
-.cpub-prize-label { font-size: 10px; color: var(--text-faint); margin-bottom: 10px; font-family: var(--font-mono); position: relative; z-index: 1; }
-.cpub-prize-perks { text-align: left; position: relative; z-index: 1; }
-.cpub-prize-perk { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-family: var(--font-mono); }
-.cpub-prize-perk i { font-size: 8px; color: var(--green); }
-.cpub-prize-additional { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
-.cpub-prize-extra { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; box-shadow: var(--shadow-md); }
-.cpub-prize-extra-title { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
-.cpub-prize-extra-val { font-size: 14px; font-weight: 700; font-family: var(--font-mono); color: var(--teal); }
-.cpub-prize-extra-label { font-size: 9px; color: var(--text-faint); font-family: var(--font-mono); }
-
-/* RULES */
-.cpub-rules-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); }
-.cpub-rule-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.55; }
-.cpub-rule-item:last-child { margin-bottom: 0; }
-.cpub-rule-icon { font-size: 11px; color: var(--accent); margin-top: 2px; flex-shrink: 0; width: 14px; }
-
-/* ENTRIES */
-.cpub-entries-filter { display: flex; gap: 6px; margin-bottom: 14px; }
-.cpub-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
-.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-md); }
-.cpub-entry-card:hover { box-shadow: var(--shadow-accent); }
-.cpub-entry-thumb { height: 110px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
-.cpub-entry-bg-light { background: var(--surface2); }
-.cpub-entry-bg-dark { background: var(--surface3); }
-.cpub-entry-grid-pat { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 20px 20px; opacity: .3; }
-.cpub-entry-icon { position: relative; z-index: 1; font-size: 22px; opacity: .65; }
-.cpub-entry-rank { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-family: var(--font-mono); font-weight: 700; padding: 2px 7px; border-radius: var(--radius); }
-.cpub-rank-1 { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow); }
-.cpub-rank-2 { background: var(--surface2); color: var(--silver); border: var(--border-width-default) solid var(--silver); }
-.cpub-rank-3 { background: var(--surface2); color: var(--bronze); border: var(--border-width-default) solid var(--bronze); }
-.cpub-entry-body { padding: 10px 12px; }
-.cpub-entry-title { font-size: 12px; font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
-.cpub-entry-cover-img { width: 100%; height: 100%; object-fit: cover; }
-.cpub-entry-av { width: 18px; height: 18px; border-radius: 50%; background: var(--surface3); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 7px; font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; overflow: hidden; }
-.cpub-entry-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
-.cpub-entry-author { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
-.cpub-entry-footer { display: flex; align-items: center; gap: 6px; }
-.cpub-vote-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
-.cpub-vote-btn:hover { background: var(--surface2); }
-.cpub-vote-btn i { font-size: 9px; }
-.cpub-voted { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
-.cpub-entry-views { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); margin-left: auto; display: flex; align-items: center; gap: 3px; }
-
-/* JUDGES */
-.cpub-judges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
-.cpub-judge-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow-md); }
-.cpub-judge-av { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); }
-.cpub-judge-name { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
-.cpub-judge-title { font-size: 10px; color: var(--text-dim); line-height: 1.35; font-family: var(--font-mono); }
-.cpub-judge-org { font-size: 10px; color: var(--accent); font-family: var(--font-mono); margin-top: 2px; }
-
-/* TIMELINE */
-.cpub-tl-item { display: flex; gap: 12px; margin-bottom: 14px; position: relative; }
-.cpub-tl-item:not(.cpub-tl-last)::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: -14px; width: 2px; background: var(--border); }
-.cpub-tl-last { margin-bottom: 0; }
-.cpub-tl-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; margin-top: 1px; }
-.cpub-tl-done { background: var(--green-bg); border: var(--border-width-default) solid var(--green); color: var(--green); }
-.cpub-tl-active { background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); color: var(--accent); }
-.cpub-tl-upcoming { background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-faint); }
-.cpub-tl-info { flex: 1; padding-top: 1px; }
-.cpub-tl-name { font-size: 11px; font-weight: 600; margin-bottom: 1px; }
-.cpub-tl-name-done { color: var(--green); }
-.cpub-tl-name-active { color: var(--text); }
-.cpub-tl-name-upcoming { color: var(--text-faint); }
-.cpub-tl-date { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
-.cpub-tl-status { font-size: 9px; font-family: var(--font-mono); padding: 1px 5px; border-radius: var(--radius); }
-.cpub-status-done { color: var(--green); background: var(--green-bg); border: var(--border-width-default) solid var(--green); }
-.cpub-status-active { color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); }
-
-/* SPONSORS */
-.cpub-sponsor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.cpub-sponsor-card { background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
-.cpub-sponsor-icon { font-size: 16px; margin-bottom: 2px; color: var(--text-dim); }
-.cpub-sponsor-name { font-size: 10px; font-weight: 600; font-family: var(--font-mono); color: var(--text); }
-.cpub-sponsor-tier { font-size: 8px; font-family: var(--font-mono); color: var(--text-faint); }
-.cpub-sponsor-link { font-size: 11px; color: var(--accent); text-decoration: none; font-family: var(--font-mono); }
-.cpub-sponsor-link:hover { text-decoration: underline; }
-
-/* FAQ */
-.cpub-faq-wrap { box-shadow: none; padding: 0; border: none; background: transparent; }
-.cpub-faq-item { border: var(--border-width-default) solid var(--border); margin-bottom: -2px; overflow: hidden; }
-.cpub-faq-item:first-of-type { border-top: var(--border-width-default) solid var(--border); }
-.cpub-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; font-size: 11px; font-weight: 500; gap: 8px; background: var(--surface); }
-.cpub-faq-q:hover { background: var(--surface2); color: var(--accent); }
-.cpub-faq-q i { font-size: 10px; color: var(--text-faint); flex-shrink: 0; transition: transform .15s; }
-.cpub-faq-open .cpub-faq-q i { transform: rotate(180deg); }
-.cpub-faq-open .cpub-faq-q { background: var(--surface2); border-bottom: var(--border-width-default) solid var(--border2); }
-.cpub-faq-a { font-size: 11px; color: var(--text-dim); line-height: 1.55; padding: 10px 12px; display: none; background: var(--surface); }
-.cpub-faq-open .cpub-faq-a { display: block; }
-
-/* Admin controls */
-.cpub-admin-controls {
-  display: flex; align-items: center; gap: 8px; margin-top: 16px;
-  padding: 10px 14px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border);
-}
-.cpub-admin-controls-label {
-  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
-  color: var(--accent); margin-right: 4px; font-family: var(--font-mono);
-}
-.cpub-admin-status {
-  font-size: 11px; color: var(--text-dim); margin-left: auto; font-family: var(--font-mono);
-}
-.cpub-admin-status strong { color: var(--accent); text-transform: capitalize; }
-
-/* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  .cpub-hero { padding: 32px 0 28px; }
-  .cpub-hero-inner { padding: 0 16px; }
-  .cpub-hero-title { font-size: 24px; }
-  .cpub-hero-tagline { font-size: 13px; }
-  .cpub-hero-meta { flex-wrap: wrap; gap: 10px; }
   .cpub-contest-main { padding: 20px 16px; }
   .cpub-contest-layout { grid-template-columns: 1fr; }
-  .cpub-prize-grid { grid-template-columns: 1fr; }
-  .cpub-judges-grid { grid-template-columns: 1fr 1fr; }
-  .cpub-entry-grid { grid-template-columns: 1fr; }
-  .cpub-countdown-block { padding: 8px 12px; min-width: 48px; }
-  .cpub-countdown-val { font-size: 20px; }
 }
-
 @media (max-width: 480px) {
-  .cpub-hero-title { font-size: 20px; }
-  .cpub-hero-tagline { font-size: 12px; margin-bottom: 16px; }
-  .cpub-hero-stats { flex-wrap: wrap; gap: 16px; }
-  .cpub-hero-stat-val { font-size: 16px; }
   .cpub-contest-main { padding: 16px 12px; }
-  .cpub-judges-grid { grid-template-columns: 1fr; }
-  .cpub-prize-additional { grid-template-columns: 1fr; }
-  .cpub-sponsor-grid { grid-template-columns: 1fr; }
-  .cpub-countdown-row { flex-wrap: wrap; justify-content: center; }
-  .cpub-hero-cta { flex-direction: column; align-items: stretch; }
-  .cpub-total-prize { border-left: none; padding-left: 0; justify-content: center; }
 }
 </style>