style(前台): 页面整体放大一档，列表不再挤成一团；宽屏上内容居中，不再铺满到两边

- index.css 加一张 --oj-* 尺寸表和 .oj-page 外壳，二十几个前台页面改成引用它：
  正文 14→15、页标题 20→24、题目/提交列表行高 40→48、比赛/公告 56、筛选控件 28→34
- 阅读型页面限宽 1200 居中；题目/提交列表 1600、比赛详情 1400、排名 1280、班级 PK 1440
- 1280 宽的筛选条放大后放不下，题目/提交列表在 1366 以下退回 13px 的字
- 班级 PK 五个班起格子里不写「一次 x%」（只剩「一次 8…」）；赛跑图线尾的数字不再被截掉
- 手机上比赛列表的「没参加」挪到比赛名下面；题单里「以前做对过 · 旧代码先藏着」缩成「做对过」
- 题目详情页（编辑器）和后台不在这一轮

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/achievement/components/AchievementCard.vue

@@ -53,13 +53,13 @@ const unlockDate = computed(() => {
 
 <template>
   <n-card
-    size="small"
+    class="card"
     :class="{ locked: !achievement.unlocked, rare: isRare }"
     :style="{ borderColor: RARITY_COLOR[achievement.rarity] }"
   >
     <n-thing>
       <template #avatar>
-        <AchievementIcon :icon="achievement.icon" :size="32" />
+        <AchievementIcon :icon="achievement.icon" :size="40" />
       </template>
 
       <template #header>
@@ -114,6 +114,11 @@ const unlockDate = computed(() => {
 </template>
 
 <style scoped>
+.card {
+  height: 100%;
+  border-radius: var(--oj-radius);
+}
+
 .nowrap {
   white-space: nowrap;
 }

apps/web/src/oj/achievement/index.vue

@@ -58,10 +58,11 @@ watch(name, load)
 </script>
 
 <template>
-  <div class="hall">
+  <div class="hall oj-page">
+    <h2 class="title">成就</h2>
     <!-- delay 50ms：缓存命中时数据几乎立刻回来，不闪一下转圈 -->
     <n-spin :show="loading" :delay="50" style="min-height: 240px">
-      <n-card v-if="summary">
+      <n-card v-if="summary" class="summary">
         <n-flex align="center" :wrap="false" :size="isDesktop ? 32 : 16">
           <n-flex vertical align="center" :size="6">
             <n-progress type="circle" :percentage="summary.percent" :stroke-width="8">
@@ -103,7 +104,7 @@ watch(name, load)
       </n-tabs>
 
       <template v-if="tab !== 'badges'">
-        <n-grid v-if="filtered.length" responsive="screen" cols="1 s:2 l:3" :x-gap="12" :y-gap="12">
+        <n-grid v-if="filtered.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
           <n-gi v-for="a in filtered" :key="a.id">
             <AchievementCard :achievement="a" />
           </n-gi>
@@ -113,9 +114,9 @@ watch(name, load)
       </template>
 
       <template v-else>
-        <n-grid v-if="badges.length" responsive="screen" cols="1 s:2 l:3" :x-gap="12" :y-gap="12">
+        <n-grid v-if="badges.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
           <n-gi v-for="b in badges" :key="b.id">
-            <n-card size="small">
+            <n-card class="badge-card">
               <n-thing :title="b.badge?.name" :description="b.badge?.description">
                 <template #avatar v-if="b.badge?.icon">
                   <n-avatar
@@ -147,10 +148,18 @@ watch(name, load)
 </template>
 
 <style scoped>
-.hall {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 16px;
+.title {
+  margin: 0 0 var(--oj-gap);
+  font-size: var(--oj-fs-title);
+}
+
+.summary,
+.badge-card {
+  border-radius: var(--oj-radius);
+}
+
+.badge-card {
+  height: 100%;
 }
 .rarity {
   flex: 1;
@@ -160,7 +169,7 @@ watch(name, load)
   white-space: nowrap;
 }
 .tabs {
-  margin: 16px 0;
+  margin: var(--oj-gap) 0;
 }
 .source {
   display: block;