From 1e441411a55d37ae24386dfdf7280387c9033d81 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 10 Oct 2026 12:43:12 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=89=8D=E5=8F=B0):=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E6=94=BE=E5=A4=A7=E4=B8=80=E6=A1=A3=EF=BC=8C?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8D=E5=86=8D=E6=8C=A4=E6=88=90=E4=B8=80?=
 =?UTF-8?q?=E5=9B=A2=EF=BC=9B=E5=AE=BD=E5=B1=8F=E4=B8=8A=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=EF=BC=8C=E4=B8=8D=E5=86=8D=E9=93=BA=E6=BB=A1?=
 =?UTF-8?q?=E5=88=B0=E4=B8=A4=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/index.css                        |  31 ++++
 .../components/AchievementCard.vue            |   9 +-
 apps/web/src/oj/achievement/index.vue         |  29 ++--
 apps/web/src/oj/ai/analysis.vue               |  11 +-
 .../announcement/components/TitleWithTag.vue  |   4 +-
 apps/web/src/oj/announcement/list.vue         | 142 +++++++++++++-----
 apps/web/src/oj/class/components/PkDuel.vue   |  44 +++---
 apps/web/src/oj/class/components/PkGrid.vue   |  64 ++++----
 apps/web/src/oj/class/components/PkRace.vue   |   3 +-
 apps/web/src/oj/class/pk.vue                  |  54 +++----
 apps/web/src/oj/classroom/board.vue           |  33 ++--
 .../src/oj/contest/components/RankMini.vue    |  11 +-
 apps/web/src/oj/contest/detail.vue            |  26 ++--
 apps/web/src/oj/contest/list.vue              |  62 +++++---
 apps/web/src/oj/contest/pages/class.vue       |  97 ++++++------
 apps/web/src/oj/contest/pages/problems.vue    |  60 ++++----
 apps/web/src/oj/contest/pages/rank.vue        |  75 ++++-----
 apps/web/src/oj/home/dashboard.vue            |  66 ++++----
 apps/web/src/oj/problem/components/TagNav.vue |  16 +-
 apps/web/src/oj/problem/list.vue              |  77 ++++++----
 .../oj/problemset/components/ClassView.vue    |  34 ++---
 apps/web/src/oj/problemset/detail.vue         | 111 ++++++++------
 apps/web/src/oj/problemset/list.vue           |  60 ++++----
 .../src/oj/rank/components/ChampionList.vue   |  14 +-
 .../src/oj/rank/components/ClassBattle.vue    |  38 ++---
 apps/web/src/oj/rank/components/RankMe.vue    |  52 +++----
 .../web/src/oj/rank/components/RankPodium.vue |  30 ++--
 apps/web/src/oj/rank/components/RankTrack.vue |  42 +++---
 apps/web/src/oj/rank/components/WeekTop.vue   |  14 +-
 apps/web/src/oj/rank/list.vue                 |  84 ++++++-----
 .../oj/statistics/components/CodeStats.vue    |  50 +++---
 .../oj/statistics/components/FlowStats.vue    |  24 +--
 .../src/oj/statistics/components/Lessons.vue  |  36 ++---
 .../src/oj/statistics/components/StatItem.vue |   4 +-
 .../statistics/components/StatisticsView.vue  |  24 +--
 .../submission/components/FlowchartPane.vue   |   8 +-
 .../submission/components/SubmissionPane.vue  |   8 +-
 apps/web/src/oj/submission/detail.vue         |   2 +-
 apps/web/src/oj/submission/list.vue           |  88 ++++++-----
 .../src/oj/user/components/KnowledgeMap.vue   |   8 +-
 apps/web/src/oj/user/index.vue                |  31 ++--
 apps/web/src/oj/user/message.vue              |  81 ++++++----
 apps/web/src/oj/user/setting.vue              |  11 +-
 43 files changed, 1016 insertions(+), 752 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index fcb8334..6ff9eff 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2,6 +2,37 @@ body {
   height: 100vh;
 }
 
+/* 前台页面的尺寸表。2026-10 整体放大了一档（原来行高 38～40、正文 14、页标题 20、
+   列表铺满 2000px 宽，用户嫌「太紧凑、不够大气」）。各页的 scoped 样式引用这里，
+   别再各写各的 px —— 上一轮就是二十几个页面各自定数，才会整体偏小还不一致。
+
+   机房屏 1366×768 的可用高度只有 640 左右，行高 48 是和用户商量过的：题目列表在
+   这个高度还能看到 8 行。题目详情页（编辑器）不吃这张表，它按 640 高逐像素排过。 */
+:root {
+  --oj-page-width: 1200px; /* 阅读型页面（比赛、题单、公告……）的限宽，居中 */
+  --oj-fs-title: 24px; /* 页标题 */
+  --oj-fs-h2: 17px; /* 区块标题 */
+  --oj-fs-body: 15px; /* 列表主文字：题目名、比赛名 */
+  --oj-fs-sec: 14px; /* 次要列：日期、知识点、人数 */
+  --oj-fs-meta: 13px; /* 表头、角注 */
+  --oj-row-h: 48px; /* 天天用的长列表：题目、提交 */
+  --oj-row-h-roomy: 56px; /* 条数少的列表：比赛、公告 */
+  --oj-head-h: 40px; /* 表头 */
+  --oj-ctrl-h: 34px; /* 筛选条里的自制按钮，和 Naive 的 medium 输入框等高 */
+  --oj-pad-x: 24px; /* 列表单元格左右留白 */
+  --oj-gap: 20px; /* 区块之间 */
+  --oj-radius: 10px;
+}
+
+/* 阅读型页面的外壳：限宽居中，上面多留一点 */
+.oj-page {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--oj-page-width);
+  margin: 0 auto;
+  padding-top: 8px;
+}
+
 .md-editor-dark {
   --md-bk-color: var(--n-body-color) !important;
 }
diff --git a/apps/web/src/oj/achievement/components/AchievementCard.vue b/apps/web/src/oj/achievement/components/AchievementCard.vue
index 2082130..c023b89 100644
--- a/apps/web/src/oj/achievement/components/AchievementCard.vue
+++ b/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;
 }
diff --git a/apps/web/src/oj/achievement/index.vue b/apps/web/src/oj/achievement/index.vue
index 7864135..27e993b 100644
--- a/apps/web/src/oj/achievement/index.vue
+++ b/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;
diff --git a/apps/web/src/oj/ai/analysis.vue b/apps/web/src/oj/ai/analysis.vue
index fc5961b..abc8d59 100644
--- a/apps/web/src/oj/ai/analysis.vue
+++ b/apps/web/src/oj/ai/analysis.vue
@@ -1,8 +1,8 @@
 <template>
-  <n-spin :show="aiStore.loading.fetching" :delay="50">
-    <n-flex vertical size="large">
+  <n-spin class="oj-page" :show="aiStore.loading.fetching" :delay="50">
+    <n-flex vertical :size="20">
       <n-flex align="center" justify="space-between">
-        <n-h3 style="margin: 0">请选择时间范围，智能分析学习情况</n-h3>
+        <h2 class="title">请选择时间范围，智能分析学习情况</h2>
         <n-flex align="center">
           <n-input
             v-if="userStore.isTeacherOrAbove"
@@ -96,6 +96,11 @@ watch(
 )
 </script>
 <style scoped>
+.title {
+  margin: 0;
+  font-size: var(--oj-fs-title);
+}
+
 .pair > :deep(.n-card) {
   flex: 1 1 320px;
 }
diff --git a/apps/web/src/oj/announcement/components/TitleWithTag.vue b/apps/web/src/oj/announcement/components/TitleWithTag.vue
index dbb7ec0..0a8a845 100644
--- a/apps/web/src/oj/announcement/components/TitleWithTag.vue
+++ b/apps/web/src/oj/announcement/components/TitleWithTag.vue
@@ -1,6 +1,6 @@
 <template>
-  <n-flex align="center">
-    <n-tag type="error" v-if="top">置顶</n-tag>
+  <n-flex align="center" :size="8" :wrap="false">
+    <n-tag type="error" size="small" v-if="top">置顶</n-tag>
     <span>{{ title }}</span>
   </n-flex>
 </template>
diff --git a/apps/web/src/oj/announcement/list.vue b/apps/web/src/oj/announcement/list.vue
index 48696ce..90456ff 100644
--- a/apps/web/src/oj/announcement/list.vue
+++ b/apps/web/src/oj/announcement/list.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { NTag } from "naive-ui"
+import { useThemeVars } from "naive-ui"
 import { getAnnouncement, getAnnouncementList } from "oj/api"
 import Pagination from "shared/components/Pagination.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
@@ -13,43 +13,12 @@ const title = ref("")
 const [show, toggleShow] = useToggle(false)
 
 const { isDesktop } = useBreakpoints()
+const theme = useThemeVars()
 
 const query = reactive({
   limit: 10,
   page: 1,
 })
-const columns: DataTableColumn<AnnouncementListItem>[] = [
-  {
-    key: "title",
-    title: "公告标题",
-    render: (row) => h(TitleWithTag, { title: row.title, top: row.top }),
-    minWidth: 300,
-  },
-  {
-    key: "tag",
-    title: "标签",
-    width: 100,
-    render: (row) => h(NTag, () => row.tag || "公告"),
-  },
-  {
-    key: "createTime",
-    title: "发布时间",
-    render: (row) => parseTime(row.createTime),
-    width: 180,
-  },
-  {
-    key: "username",
-    title: "发布人",
-    render: (row) => row.createdBy.username,
-    width: 120,
-  },
-]
-function rowProps(row: AnnouncementListItem) {
-  return {
-    style: "cursor: pointer",
-    onclick: () => showContent(row),
-  }
-}
 
 async function showContent(announcement: AnnouncementListItem) {
   const res = await getAnnouncement(announcement.id)
@@ -58,20 +27,49 @@ async function showContent(announcement: AnnouncementListItem) {
   content.value = res.content
 }
 const announcements = ref<AnnouncementListItem[]>([])
+const loaded = ref(false)
 
 async function listAnnouncements() {
   const offset = (query.page - 1) * query.limit
   const res = await getAnnouncementList(offset, query.limit)
   total.value = res.total
   announcements.value = res.results
+  loaded.value = true
 }
 
 onMounted(listAnnouncements)
 watch(query, listAnnouncements, { deep: true })
 </script>
 <template>
-  <n-data-table :bordered="false" :data="announcements" :columns="columns" :row-props="rowProps" />
-  <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
+  <div class="page oj-page">
+    <h2>公告</h2>
+    <div class="table">
+      <div class="tr th">
+        <span>公告标题</span>
+        <span>标签</span>
+        <span>发布时间</span>
+        <span>发布人</span>
+      </div>
+      <div
+        v-for="row in announcements"
+        :key="row.id"
+        class="tr"
+        role="link"
+        tabindex="0"
+        @click="showContent(row)"
+        @keyup.enter="showContent(row)"
+      >
+        <TitleWithTag :title="row.title" :top="row.top" />
+        <span
+          ><n-tag size="small">{{ row.tag || "公告" }}</n-tag></span
+        >
+        <span class="muted num">{{ parseTime(row.createTime) }}</span>
+        <span class="muted">{{ row.createdBy.username }}</span>
+      </div>
+      <div v-if="loaded && !announcements.length" class="empty muted">还没有公告</div>
+    </div>
+    <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
+  </div>
   <n-modal
     v-model:show="show"
     preset="card"
@@ -82,3 +80,77 @@ watch(query, listAnnouncements, { deep: true })
     <div v-html="content"></div>
   </n-modal>
 </template>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oj-gap);
+}
+
+h2 {
+  margin: 0;
+  font-size: var(--oj-fs-title);
+}
+
+.muted {
+  color: v-bind("theme.textColor3");
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.table {
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  overflow: hidden;
+}
+
+.tr {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) 80px 170px 120px;
+  align-items: center;
+  gap: 14px;
+  min-height: var(--oj-row-h-roomy);
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-body);
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  cursor: pointer;
+}
+
+.tr > .muted {
+  font-size: var(--oj-fs-sec);
+}
+
+.tr:last-child {
+  border-bottom: 0;
+}
+
+.tr:not(.th):hover {
+  background: v-bind("theme.hoverColor");
+}
+
+.th {
+  min-height: var(--oj-head-h);
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+  background: v-bind("theme.actionColor");
+  cursor: default;
+}
+
+.empty {
+  padding: 32px var(--oj-pad-x);
+}
+
+@media (max-width: 760px) {
+  .tr {
+    grid-template-columns: 1fr auto;
+  }
+
+  .tr > :nth-child(2),
+  .tr > :nth-child(4) {
+    display: none;
+  }
+}
+</style>
diff --git a/apps/web/src/oj/class/components/PkDuel.vue b/apps/web/src/oj/class/components/PkDuel.vue
index ddec7e3..ef826d8 100644
--- a/apps/web/src/oj/class/components/PkDuel.vue
+++ b/apps/web/src/oj/class/components/PkDuel.vue
@@ -331,13 +331,13 @@ const tab = ref<"weekly" | "dist">("weekly")
 .duel {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--oj-gap);
 }
 
 .score {
-  padding: 18px 28px;
+  padding: 24px 32px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -418,21 +418,21 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 400;
   color: v-bind("theme.textColor3");
 }
 
 .card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
-  padding: 12px 16px 4px;
+  padding: 16px var(--oj-pad-x) 6px;
   min-width: 0;
 }
 
 .card.pad {
-  padding: 12px 16px;
+  padding: 16px var(--oj-pad-x);
 }
 
 .card-head {
@@ -440,7 +440,7 @@ const tab = ref<"weekly" | "dist">("weekly")
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px 8px;
-  padding-bottom: 6px;
+  padding-bottom: 10px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
@@ -456,7 +456,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .row {
-  min-height: 44px;
+  min-height: 52px;
   display: grid;
   grid-template-columns: 168px minmax(0, 1fr) 210px minmax(0, 1fr) 168px;
   align-items: center;
@@ -481,7 +481,7 @@ const tab = ref<"weekly" | "dist">("weekly")
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: v-bind("theme.textColor3");
@@ -492,7 +492,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .sub {
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
 }
@@ -534,7 +534,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 .title a,
 .m-title a {
   max-width: 100%;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -555,21 +555,21 @@ const tab = ref<"weekly" | "dist">("weekly")
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .tags .muted {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .most {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   color: #b54708;
 }
 
 .tie {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   color: v-bind("theme.textColor3");
@@ -584,7 +584,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 
 .bottom {
   display: flex;
-  gap: 16px;
+  gap: var(--oj-gap);
 }
 
 .bottom > .card {
@@ -607,7 +607,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .pair {
-  height: 130px;
+  height: 140px;
   display: flex;
   align-items: flex-end;
   gap: 4px;
@@ -621,7 +621,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .v {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
@@ -632,7 +632,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .axis {
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
   white-space: nowrap;
 }
@@ -650,7 +650,7 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .dist-name {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
 }
 
@@ -752,7 +752,7 @@ const tab = ref<"weekly" | "dist">("weekly")
   border: 0;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
   cursor: pointer;
 }
diff --git a/apps/web/src/oj/class/components/PkGrid.vue b/apps/web/src/oj/class/components/PkGrid.vue
index 96a48f3..6d504db 100644
--- a/apps/web/src/oj/class/components/PkGrid.vue
+++ b/apps/web/src/oj/class/components/PkGrid.vue
@@ -159,7 +159,9 @@ const medal = (index: number) => palette.value.medal[index]
                 <path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z" />
               </svg>
               <b>{{ cell.percent }}{{ compact ? "" : "%" }}</b>
-              <span v-if="!compact" class="first">一次 {{ cell.firstPercent }}%</span>
+              <span v-if="!compact && pk.classes.length < 5" class="first"
+                >一次 {{ cell.firstPercent }}%</span
+              >
             </span>
           </template>
         </div>
@@ -226,7 +228,7 @@ const medal = (index: number) => palette.value.medal[index]
 <style scoped>
 .grid-pk {
   display: flex;
-  gap: 16px;
+  gap: var(--oj-gap);
   align-items: flex-start;
 }
 
@@ -238,21 +240,21 @@ const medal = (index: number) => palette.value.medal[index]
 
 .card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   min-width: 0;
 }
 
 .table {
   flex: 1.75;
-  padding: 12px 16px;
+  padding: 16px 20px;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
 .pad {
-  padding: 12px 16px;
+  padding: 16px 20px;
 }
 
 .card-title {
@@ -263,7 +265,7 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 400;
   color: v-bind("theme.textColor3");
 }
@@ -272,7 +274,7 @@ const medal = (index: number) => palette.value.medal[index]
   display: flex;
   align-items: center;
   gap: 6px;
-  min-height: 40px;
+  min-height: 46px;
 }
 
 .line.heads {
@@ -280,7 +282,7 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .name {
-  width: 290px;
+  width: 250px;
   flex-shrink: 0;
   display: flex;
   align-items: baseline;
@@ -294,7 +296,7 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .name a {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -307,7 +309,7 @@ const medal = (index: number) => palette.value.medal[index]
 
 .id {
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .ell {
@@ -346,7 +348,7 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .per {
-  font-size: 11px;
+  font-size: 12px;
   white-space: nowrap;
 }
 
@@ -356,12 +358,12 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .mine-tag {
-  font-size: 11px;
+  font-size: 12px;
   background: rgba(24, 160, 88, 0.12);
   color: #18a058;
   border-radius: 3px;
-  padding: 0 5px;
-  height: 16px;
+  padding: 0 6px;
+  height: 18px;
   display: inline-flex;
   align-items: center;
   font-weight: 600;
@@ -382,11 +384,13 @@ const medal = (index: number) => palette.value.medal[index]
 
 .cell {
   min-width: 0;
-  height: 34px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 4px;
+  padding: 0 4px;
+  overflow: hidden;
   border-radius: 4px;
   color: v-bind("theme.textColor1");
   font-variant-numeric: tabular-nums;
@@ -401,16 +405,22 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .cell b {
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
+/* 五个班起整个不显示（1280 宽只剩「一次 8…」，截了等于没写，鼠标悬停的提示里有）；
+   四个班在 1280 下刚好放得下，这里的截断只是兜底，别折行、别溢出格子 */
 .first {
-  font-size: 11px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
   opacity: 0.85;
 }
 
 .cell.none {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColorDisabled");
   background: repeating-linear-gradient(
     135deg,
@@ -436,7 +446,7 @@ const medal = (index: number) => palette.value.medal[index]
 
 .tie {
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   color: v-bind("theme.textColor3");
@@ -458,11 +468,11 @@ const medal = (index: number) => palette.value.medal[index]
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--oj-gap);
 }
 
 .lead-row {
-  height: 34px;
+  height: 40px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -483,7 +493,7 @@ const medal = (index: number) => palette.value.medal[index]
   align-items: center;
   justify-content: center;
   font-weight: 700;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   flex-shrink: 0;
   color: v-bind("theme.textColor2");
 }
@@ -502,10 +512,10 @@ const medal = (index: number) => palette.value.medal[index]
 }
 
 .insight {
-  margin-top: 8px;
-  font-size: 13px;
+  margin-top: 10px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
-  padding: 8px 10px;
+  padding: 10px 12px;
   background: v-bind("theme.actionColor");
   border-radius: 6px;
 }
@@ -523,7 +533,7 @@ const medal = (index: number) => palette.value.medal[index]
   border: 0;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
   cursor: pointer;
 }
diff --git a/apps/web/src/oj/class/components/PkRace.vue b/apps/web/src/oj/class/components/PkRace.vue
index 8a9f2e2..acbc676 100644
--- a/apps/web/src/oj/class/components/PkRace.vue
+++ b/apps/web/src/oj/class/components/PkRace.vue
@@ -15,7 +15,8 @@ const props = withDefaults(defineProps<{ pk: ClassPk; width?: number; height?: n
 
 const theme = useThemeVars()
 
-const PAD = { left: 34, right: 92, top: 10, bottom: 26 }
+// 右边留给线尾的「26计算机0班 19.3」：12px 粗体量下来 105 左右，原来的 92 会把小数截掉
+const PAD = { left: 34, right: 112, top: 10, bottom: 26 }
 
 const series = computed(() =>
   props.pk.classes.map((item) => {
diff --git a/apps/web/src/oj/class/pk.vue b/apps/web/src/oj/class/pk.vue
index 21903f0..f1e0cf0 100644
--- a/apps/web/src/oj/class/pk.vue
+++ b/apps/web/src/oj/class/pk.vue
@@ -156,7 +156,7 @@ async function analyze() {
 </script>
 
 <template>
-  <div class="pk-page" :class="{ compact: !isDesktop }">
+  <div class="pk-page oj-page" :class="{ compact: !isDesktop }">
     <div class="toolbar">
       <div class="title-line">
         <router-link to="/rank" class="back">‹ 排名</router-link>
@@ -317,16 +317,18 @@ async function analyze() {
 </template>
 
 <style scoped>
+/* 比别的阅读型页面宽：三个班以上是一张「题 × 班」的对照格，班多了格子会挤 */
 .pk-page {
+  max-width: 1440px;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--oj-gap);
 }
 
 .toolbar {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 14px;
 }
 
 .title-line {
@@ -338,11 +340,11 @@ async function analyze() {
 
 .title-line h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--oj-fs-title);
 }
 
 .back {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
   text-decoration: none;
 }
@@ -352,26 +354,26 @@ async function analyze() {
 }
 
 .muted {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
 }
 
 .seg {
   display: inline-flex;
-  height: 30px;
+  height: var(--oj-ctrl-h);
   border: 1px solid v-bind("theme.borderColor");
   border-radius: 4px;
   overflow: hidden;
 }
 
 .seg button {
-  padding: 0 12px;
+  padding: 0 14px;
   border: 0;
   border-left: 1px solid v-bind("theme.borderColor");
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor2");
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -398,15 +400,15 @@ async function analyze() {
 }
 
 .chip {
-  height: 28px;
+  height: var(--oj-ctrl-h);
   box-sizing: border-box;
-  padding: 0 8px 0 10px;
+  padding: 0 10px 0 12px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 14px;
+  border-radius: 17px;
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor1");
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
@@ -422,7 +424,7 @@ async function analyze() {
 }
 
 .chip.add {
-  padding: 0 10px;
+  padding: 0 14px;
   border-style: dashed;
   font-weight: 400;
   color: v-bind("theme.textColor2");
@@ -463,18 +465,18 @@ button.chip {
 
 .vs {
   font-weight: 800;
-  font-size: 15px;
+  font-size: 16px;
   font-style: italic;
   color: v-bind("theme.textColor3");
 }
 
 .mine-tag {
-  font-size: 11px;
+  font-size: 12px;
   background: rgba(24, 160, 88, 0.12);
   color: #18a058;
   border-radius: 3px;
-  padding: 0 5px;
-  height: 16px;
+  padding: 0 6px;
+  height: 18px;
   display: inline-flex;
   align-items: center;
   font-weight: 600;
@@ -482,13 +484,13 @@ button.chip {
 
 .card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
 }
 
 .empty {
-  min-height: 160px;
-  padding: 24px;
+  min-height: 200px;
+  padding: 32px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -503,9 +505,9 @@ button.chip {
 }
 
 .ai {
-  margin-top: 14px;
-  padding: 12px 16px;
-  border-radius: 8px;
+  margin-top: 16px;
+  padding: 16px 20px;
+  border-radius: var(--oj-radius);
   border: 1px solid rgba(47, 111, 208, 0.3);
   background: rgba(47, 111, 208, 0.05);
   display: flex;
@@ -526,7 +528,7 @@ button.chip {
 }
 
 .ai-head .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .report {
@@ -538,6 +540,6 @@ button.chip {
 }
 
 .compact .chip {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 </style>
diff --git a/apps/web/src/oj/classroom/board.vue b/apps/web/src/oj/classroom/board.vue
index 9267b47..8a94636 100644
--- a/apps/web/src/oj/classroom/board.vue
+++ b/apps/web/src/oj/classroom/board.vue
@@ -368,7 +368,7 @@ function submissionsHref(
 
     <template v-else-if="board">
       <!-- 布置题目：投影时收起来 -->
-      <n-card v-if="!projector" size="small" class="section">
+      <n-card v-if="!projector" class="section">
         <n-flex align="center" :wrap="false">
           <n-text strong style="flex-shrink: 0">这节课的题</n-text>
           <n-select
@@ -429,7 +429,7 @@ function submissionsHref(
               status="success"
               :percentage="problem.total ? Math.round((problem.done / problem.total) * 100) : 0"
               :show-indicator="false"
-              :height="projector ? 28 : 10"
+              :height="projector ? 28 : 12"
             />
             <div class="summary-count">{{ problem.done }} / {{ problem.total }} 人做完</div>
           </div>
@@ -654,40 +654,42 @@ function submissionsHref(
 }
 
 .toolbar {
-  margin-bottom: 16px;
+  margin: 8px 0 var(--oj-gap);
 }
 
 .title {
-  margin: 0;
-  font-size: 20px;
+  margin: 0 4px 0 0;
+  font-size: var(--oj-fs-title);
 }
 
 .section {
-  margin-bottom: 16px;
+  margin-bottom: var(--oj-gap);
 }
 
 .meta {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .summary {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 12px 24px;
-  margin-bottom: 16px;
+  gap: 20px 32px;
+  margin-bottom: 24px;
 }
 
 .summary-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
+  font-size: var(--oj-fs-body);
+  font-weight: 600;
 }
 
 .summary-count {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   opacity: 0.75;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
 .projector .summary {
@@ -702,24 +704,25 @@ function submissionsHref(
 
 .table-wrap {
   overflow-x: auto;
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 .grid {
   border-collapse: collapse;
   width: 100%;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .grid th,
 .grid td {
-  padding: 6px 10px;
+  padding: 10px 12px;
   border-bottom: 1px solid rgba(128, 128, 128, 0.15);
   text-align: center;
   white-space: nowrap;
 }
 
 .grid th {
+  font-size: var(--oj-fs-sec);
   font-weight: 500;
   opacity: 0.8;
 }
diff --git a/apps/web/src/oj/contest/components/RankMini.vue b/apps/web/src/oj/contest/components/RankMini.vue
index 63855bd..3c1e80a 100644
--- a/apps/web/src/oj/contest/components/RankMini.vue
+++ b/apps/web/src/oj/contest/components/RankMini.vue
@@ -58,13 +58,14 @@ function move(row: ContestScoreRow) {
 }
 
 .line {
-  height: 30px;
+  height: 36px;
   box-sizing: border-box;
-  padding: 0 12px;
+  padding: 0 14px;
   display: flex;
   align-items: center;
   gap: 8px;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-size: var(--oj-fs-sec);
   background: v-bind("theme.cardColor");
 }
 
@@ -86,7 +87,7 @@ function move(row: ContestScoreRow) {
 
 .move {
   width: 28px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .up {
@@ -112,7 +113,7 @@ function move(row: ContestScoreRow) {
 .time {
   width: 62px;
   text-align: right;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
 }
diff --git a/apps/web/src/oj/contest/detail.vue b/apps/web/src/oj/contest/detail.vue
index db990ca..6a1d2dc 100644
--- a/apps/web/src/oj/contest/detail.vue
+++ b/apps/web/src/oj/contest/detail.vue
@@ -165,7 +165,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
       </span>
       <span v-if="untilStart" class="gate-count">{{ untilStart }}</span>
     </div>
-    <router-view v-else></router-view>
+    <div v-else class="body"><router-view></router-view></div>
   </div>
 </template>
 
@@ -176,10 +176,18 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
   margin: -16px -16px 0;
 }
 
+.body {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* 1920 的屏上铺满的话，领奖台在最左、「你的成绩」在最右，榜单只占左半边。
+   内容限宽 1400 居中；顶栏的分隔线照旧通栏，所以限宽用内边距做而不是 max-width */
 .bar {
-  min-height: 60px;
+  min-height: 68px;
   box-sizing: border-box;
-  padding: 10px 20px;
+  padding: 12px max(var(--oj-pad-x), calc((100% - 1400px) / 2 + var(--oj-pad-x)));
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -189,7 +197,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
 
 .title {
   margin: 0;
-  font-size: 18px;
+  font-size: 22px;
   font-weight: 700;
   min-width: 0;
 }
@@ -206,7 +214,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
 }
 
 .countdown-label {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .countdown-num {
@@ -220,7 +228,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
 }
 
 .range {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
 }
 
@@ -239,11 +247,11 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
 }
 
 .tab {
-  height: 32px;
-  padding: 0 14px;
+  height: var(--oj-ctrl-h);
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   text-decoration: none;
 }
diff --git a/apps/web/src/oj/contest/list.vue b/apps/web/src/oj/contest/list.vue
index 7e3a69b..8ecfe14 100644
--- a/apps/web/src/oj/contest/list.vue
+++ b/apps/web/src/oj/contest/list.vue
@@ -130,7 +130,7 @@ const warning = computed(() => tone("warning"))
 </script>
 
 <template>
-  <div class="page">
+  <div class="page oj-page">
     <div class="top">
       <h2>比赛</h2>
       <div class="spacer"></div>
@@ -263,15 +263,15 @@ const warning = computed(() => tone("warning"))
         {{ query.scope === "joined" ? "你还没参加过比赛" : "没有符合的比赛" }}
       </div>
     </div>
+    <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
   </div>
-  <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
 </template>
 
 <style scoped>
 .page {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--oj-gap);
 }
 
 .top {
@@ -283,7 +283,7 @@ const warning = computed(() => tone("warning"))
 
 .top h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--oj-fs-title);
 }
 
 .spacer {
@@ -304,7 +304,7 @@ const warning = computed(() => tone("warning"))
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .num {
@@ -320,13 +320,13 @@ const warning = computed(() => tone("warning"))
 }
 
 .chip {
-  height: 28px;
-  padding: 0 12px;
-  border-radius: 14px;
+  height: var(--oj-ctrl-h);
+  padding: 0 16px;
+  border-radius: 17px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
 }
@@ -339,12 +339,12 @@ const warning = computed(() => tone("warning"))
 }
 
 .running {
-  padding: 16px 20px;
+  padding: 20px var(--oj-pad-x);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px 20px;
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   border: 1px solid v-bind("theme.successColor");
   background: v-bind("success.background");
   cursor: pointer;
@@ -361,7 +361,7 @@ const warning = computed(() => tone("warning"))
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 700;
 }
 
@@ -382,34 +382,35 @@ const warning = computed(() => tone("warning"))
 }
 
 .upcoming {
-  padding: 12px 20px;
+  padding: 16px var(--oj-pad-x);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px 16px;
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   border: 1px solid v-bind("theme.borderColor");
   cursor: pointer;
 }
 
 .upcoming-title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
 }
 
 .table {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   overflow: hidden;
 }
 
 .tr {
   display: grid;
-  grid-template-columns: minmax(200px, 1fr) 70px 110px 130px minmax(160px, 260px);
+  grid-template-columns: minmax(200px, 1fr) 70px 110px 130px minmax(160px, 240px);
   align-items: center;
   gap: 14px;
-  min-height: 38px;
-  padding: 0 20px;
+  min-height: var(--oj-row-h-roomy);
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-body);
   border-bottom: 1px solid v-bind("theme.dividerColor");
   cursor: pointer;
 }
@@ -423,8 +424,8 @@ const warning = computed(() => tone("warning"))
 }
 
 .th {
-  min-height: 32px;
-  font-size: 12px;
+  min-height: var(--oj-head-h);
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
   cursor: default;
@@ -453,16 +454,31 @@ const warning = computed(() => tone("warning"))
 }
 
 .empty {
-  padding: 24px 20px;
+  padding: 32px var(--oj-pad-x);
 }
 
+/* 手机：只剩比赛名、类型、「我」三列。「我」放到比赛名下面一行当副标题，
+   不然它会按网格掉到下一行的第一格，看着像一行没对齐的新数据 */
 @media (max-width: 760px) {
   .tr {
     grid-template-columns: 1fr auto;
+    row-gap: 2px;
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
 
   .tr > span:nth-child(3),
-  .tr > span:nth-child(4) {
+  .tr > span:nth-child(4),
+  .th > span:nth-child(5) {
+    display: none;
+  }
+
+  .tr > .mine {
+    grid-column: 1 / -1;
+    font-size: var(--oj-fs-meta);
+  }
+
+  .tr > .mine:empty {
     display: none;
   }
 }
diff --git a/apps/web/src/oj/contest/pages/class.vue b/apps/web/src/oj/contest/pages/class.vue
index 0f5b13e..23947e9 100644
--- a/apps/web/src/oj/contest/pages/class.vue
+++ b/apps/web/src/oj/contest/pages/class.vue
@@ -320,9 +320,9 @@ const success = computed(() => tone("success"))
 const danger = computed(() => tone("error"))
 const warning = computed(() => tone("warning"))
 const liveColumns = computed(
-  () => `116px 44px repeat(${problems.value.length}, minmax(64px, 92px)) 82px 1fr`,
+  () => `130px 48px repeat(${problems.value.length}, minmax(70px, 96px)) 90px 1fr`,
 )
-const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.value.length}, 46px)`)
+const gradeColumns = computed(() => `24px 124px 40px 36px repeat(${problems.value.length}, 50px)`)
 </script>
 
 <template>
@@ -622,11 +622,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .tiny {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .spacer {
@@ -645,9 +645,9 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .summary {
-  min-height: 70px;
+  min-height: 80px;
   box-sizing: border-box;
-  padding: 10px 20px;
+  padding: 12px var(--oj-pad-x);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -662,13 +662,13 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .stat b {
-  font-size: 22px;
+  font-size: 26px;
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
 }
 
 .stat span {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -693,15 +693,16 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
   align-items: center;
   column-gap: 6px;
   min-width: max-content;
-  min-height: 38px;
-  padding: 0 20px;
+  min-height: 46px;
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-body);
   box-sizing: border-box;
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
 .th {
-  min-height: 46px;
-  font-size: 12px;
+  min-height: 50px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
 }
@@ -722,7 +723,7 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .ph span {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .solved {
@@ -736,18 +737,18 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 
 .cell {
   width: 100%;
-  height: 24px;
-  border-radius: 3px;
+  height: 30px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-variant-numeric: tabular-nums;
 }
 
 .cell small {
-  font-size: 10px;
+  font-size: 11px;
   opacity: 0.8;
 }
 
@@ -775,11 +776,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .group {
-  height: 26px;
-  padding: 0 20px;
+  height: 32px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
@@ -797,10 +798,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .flag {
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -829,9 +830,9 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 /* ---------- 成绩 ---------- */
 
 .grade-bar {
-  min-height: 64px;
+  min-height: 72px;
   box-sizing: border-box;
-  padding: 10px 20px;
+  padding: 12px var(--oj-pad-x);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -858,7 +859,7 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
   display: flex;
   flex-wrap: wrap;
   gap: 4px 14px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor2");
 }
 
@@ -886,8 +887,8 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .sort {
-  height: 40px;
-  padding: 0 20px;
+  height: 48px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -895,13 +896,13 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .chip {
-  height: 24px;
-  padding: 0 10px;
-  border-radius: 12px;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 15px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
 }
@@ -914,20 +915,20 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .sheet-scroll {
-  max-height: calc(100vh - 260px);
+  max-height: calc(100vh - 284px);
   overflow: auto;
 }
 
 .sheet .tr {
-  min-height: 34px;
-  padding: 0 16px 0 20px;
+  min-height: 40px;
+  padding: 0 16px 0 var(--oj-pad-x);
 }
 
 .sheet .th {
   position: sticky;
   top: 0;
   z-index: 1;
-  min-height: 40px;
+  min-height: 46px;
 }
 
 .tr.picked {
@@ -936,12 +937,12 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 
 .gc {
   position: relative;
-  height: 24px;
+  height: 28px;
   border: 0;
-  border-radius: 3px;
+  border-radius: 4px;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   cursor: pointer;
 }
@@ -974,10 +975,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
   flex: 1 1 480px;
   min-width: 0;
   box-sizing: border-box;
-  padding: 14px 20px 12px;
+  padding: 16px var(--oj-pad-x) 14px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   background: v-bind("theme.actionColor");
 }
 
@@ -989,10 +990,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 }
 
 .pill {
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
@@ -1011,11 +1012,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
 .code-box {
   flex-grow: 1;
   min-height: 300px;
-  max-height: calc(100vh - 340px);
+  max-height: calc(100vh - 360px);
   overflow: auto;
   padding: 10px 12px;
   border: 1px solid v-bind("theme.dividerColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   font-size: 15px;
 }
diff --git a/apps/web/src/oj/contest/pages/problems.vue b/apps/web/src/oj/contest/pages/problems.vue
index c1fe02d..a007882 100644
--- a/apps/web/src/oj/contest/pages/problems.vue
+++ b/apps/web/src/oj/contest/pages/problems.vue
@@ -266,7 +266,7 @@ const warning = computed(() => tone("warning"))
 .layout {
   display: flex;
   flex-wrap: wrap;
-  min-height: calc(100vh - 140px);
+  min-height: calc(100vh - 148px);
 }
 
 .problems {
@@ -279,10 +279,10 @@ const warning = computed(() => tone("warning"))
   flex: 1 1 400px;
   max-width: 100%;
   box-sizing: border-box;
-  padding: 16px 20px;
+  padding: 20px var(--oj-pad-x);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
   background: v-bind("theme.actionColor");
 }
 
@@ -293,9 +293,10 @@ const warning = computed(() => tone("warning"))
 }
 
 .head {
-  height: 40px;
+  height: var(--oj-head-h);
   box-sizing: border-box;
-  padding: 0 16px;
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-sec);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -316,16 +317,17 @@ const warning = computed(() => tone("warning"))
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-meta);
 }
 
 .row {
-  min-height: 34px;
+  min-height: var(--oj-row-h);
   box-sizing: border-box;
-  padding: 4px 16px;
+  padding: 4px var(--oj-pad-x);
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
+  font-size: var(--oj-fs-body);
   border-bottom: 1px solid v-bind("theme.dividerColor");
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -336,8 +338,8 @@ const warning = computed(() => tone("warning"))
 }
 
 .dot {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   flex-shrink: 0;
   box-sizing: border-box;
   border-radius: 50%;
@@ -365,7 +367,7 @@ const warning = computed(() => tone("warning"))
   width: 22px;
   text-align: right;
   flex-shrink: 0;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
 }
@@ -380,7 +382,7 @@ const warning = computed(() => tone("warning"))
 
 .mine {
   flex-shrink: 0;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -389,7 +391,7 @@ const warning = computed(() => tone("warning"))
 }
 
 .count {
-  width: 150px;
+  width: 160px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -411,15 +413,15 @@ const warning = computed(() => tone("warning"))
 }
 
 .count-num {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   font-variant-numeric: tabular-nums;
 }
 
 .first {
-  width: 180px;
+  width: 190px;
   flex-shrink: 0;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   overflow: hidden;
@@ -427,12 +429,12 @@ const warning = computed(() => tone("warning"))
 }
 
 .card {
-  padding: 14px 16px;
+  padding: 18px 20px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
 }
 
@@ -452,10 +454,10 @@ const warning = computed(() => tone("warning"))
 
 .move {
   align-self: center;
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 11px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
@@ -472,9 +474,9 @@ const warning = computed(() => tone("warning"))
 }
 
 .nudge {
-  padding: 8px 10px;
-  border-radius: 4px;
-  font-size: 13px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  font-size: var(--oj-fs-sec);
   background: v-bind("warning.background");
   color: v-bind("warning.color");
 }
@@ -522,7 +524,7 @@ const warning = computed(() => tone("warning"))
 }
 
 .link {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
   text-decoration: none;
 }
@@ -533,7 +535,7 @@ const warning = computed(() => tone("warning"))
 
 .rule {
   line-height: 1.6;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 /* 手机：题目名要留得下，人数和「最先」只在右边的排名里看 */
diff --git a/apps/web/src/oj/contest/pages/rank.vue b/apps/web/src/oj/contest/pages/rank.vue
index 37df8a3..6475fc9 100644
--- a/apps/web/src/oj/contest/pages/rank.vue
+++ b/apps/web/src/oj/contest/pages/rank.vue
@@ -99,7 +99,7 @@ const meBackground = computed(
 const danger = computed(() => tone("error"))
 const columns = computed(
   () =>
-    `34px ${running.value ? "34px " : ""}150px 40px 70px repeat(${problems.value.length}, 58px)`,
+    `40px ${running.value ? "36px " : ""}170px 48px 80px repeat(${problems.value.length}, 64px)`,
 )
 </script>
 
@@ -272,7 +272,7 @@ const columns = computed(
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .spacer {
@@ -280,11 +280,11 @@ const columns = computed(
 }
 
 .podium-row {
-  padding: 12px 20px 0;
+  padding: 20px var(--oj-pad-x) 0;
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 24px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
@@ -303,12 +303,12 @@ const columns = computed(
 }
 
 .podium-name {
-  font-size: 15px;
+  font-size: 16px;
   max-width: 200px;
 }
 
 .p1 .podium-name {
-  font-size: 17px;
+  font-size: 18px;
 }
 
 .block {
@@ -352,14 +352,14 @@ const columns = computed(
 }
 
 .mine {
-  width: 330px;
-  margin-bottom: 16px;
-  padding: 14px 16px;
+  width: 340px;
+  margin-bottom: 20px;
+  padding: 18px 20px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  border-radius: 6px;
+  gap: 8px;
+  border-radius: var(--oj-radius);
   background: v-bind("success.background");
 }
 
@@ -370,31 +370,31 @@ const columns = computed(
 }
 
 .mine-big {
-  font-size: 28px;
+  font-size: 30px;
   font-weight: 800;
   line-height: 1;
   color: v-bind("success.color");
 }
 
 .tools {
-  min-height: 48px;
+  min-height: 56px;
   box-sizing: border-box;
-  padding: 8px 20px;
+  padding: 10px var(--oj-pad-x);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
 .chip {
-  height: 26px;
-  padding: 0 10px;
-  border-radius: 13px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 16px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
   white-space: nowrap;
@@ -408,7 +408,7 @@ const columns = computed(
 }
 
 .table {
-  max-height: calc(100vh - 230px);
+  max-height: calc(100vh - 246px);
   overflow: auto;
 }
 
@@ -417,8 +417,9 @@ const columns = computed(
   align-items: center;
   column-gap: 6px;
   min-width: max-content;
-  height: 32px;
-  padding: 0 20px;
+  height: 42px;
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-body);
   border-bottom: 1px solid v-bind("theme.dividerColor");
   background: v-bind("theme.cardColor");
 }
@@ -427,8 +428,8 @@ const columns = computed(
   position: sticky;
   top: 0;
   z-index: 2;
-  height: 44px;
-  font-size: 12px;
+  height: 48px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
 }
@@ -436,7 +437,7 @@ const columns = computed(
 .tr.me {
   position: sticky;
   bottom: 0;
-  top: 44px;
+  top: 48px;
   z-index: 1;
   /* 浅绿是半透明的，钉住时底下的行会透上来，垫一层卡片底色 */
   background: v-bind("meBackground");
@@ -462,13 +463,13 @@ const columns = computed(
 }
 
 .time {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   padding-right: 8px;
 }
 
 .move {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .up {
@@ -493,12 +494,12 @@ const columns = computed(
 }
 
 .ph b {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
 }
 
 .ph span {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .cell-wrap {
@@ -507,18 +508,18 @@ const columns = computed(
 
 .cell {
   width: 100%;
-  height: 26px;
-  border-radius: 3px;
+  height: 30px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-variant-numeric: tabular-nums;
 }
 
 .cell small {
-  font-size: 10px;
+  font-size: 11px;
   opacity: 0.8;
 }
 
@@ -539,18 +540,18 @@ const columns = computed(
 }
 
 .empty {
-  padding: 24px 20px;
+  padding: 32px var(--oj-pad-x);
 }
 
 .legend {
-  min-height: 34px;
-  padding: 6px 20px;
+  min-height: 42px;
+  padding: 8px var(--oj-pad-x);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   border-top: 1px solid v-bind("theme.dividerColor");
 }
diff --git a/apps/web/src/oj/home/dashboard.vue b/apps/web/src/oj/home/dashboard.vue
index 08fed85..b514055 100644
--- a/apps/web/src/oj/home/dashboard.vue
+++ b/apps/web/src/oj/home/dashboard.vue
@@ -352,7 +352,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
       <div class="column">
         <!-- 「上次来」：上次登录到这次登录之间交过题才有。班里今天在做的时候让位给班里卡，
              只在那张卡底下留一句没做对的 -->
-        <n-card v-if="visit && !classToday" size="small" :bordered="false" class="card">
+        <n-card v-if="visit && !classToday" :bordered="false" class="card">
           <template #header>上次来 · {{ visitText(lastVisit!.previousLogin!) }}</template>
           <template #header-extra>
             <n-text depth="3" class="row-meta">
@@ -392,7 +392,6 @@ async function openAnnouncement(item: AnnouncementListItem) {
         <n-card
           v-if="classActivity?.problems.length && !visitCoversClass"
           :title="classActivityTitle"
-          size="small"
           :bordered="false"
           class="card"
         >
@@ -427,7 +426,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
           </div>
         </n-card>
 
-        <n-card title="继续学习" size="small" :bordered="false" class="card">
+        <n-card title="继续学习" :bordered="false" class="card">
           <n-flex vertical :size="12">
             <router-link
               v-for="track in tracks"
@@ -462,7 +461,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
           </n-flex>
         </n-card>
 
-        <n-card title="最近提交" size="small" :bordered="false" class="card">
+        <n-card title="最近提交" :bordered="false" class="card">
           <template #header-extra>
             <router-link to="/submission?myself=1" class="more">全部</router-link>
           </template>
@@ -485,7 +484,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
       </div>
 
       <div class="column">
-        <n-card title="比赛" size="small" :bordered="false" class="card">
+        <n-card title="比赛" :bordered="false" class="card">
           <template #header-extra>
             <router-link to="/contest" class="more">全部</router-link>
           </template>
@@ -508,7 +507,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
           </n-text>
         </n-card>
 
-        <n-card title="公告" size="small" :bordered="false" class="card">
+        <n-card title="公告" :bordered="false" class="card">
           <template #header-extra>
             <router-link to="/announcement" class="more">全部</router-link>
           </template>
@@ -524,7 +523,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
           </div>
         </n-card>
 
-        <n-card size="small" :bordered="false" class="card">
+        <n-card :bordered="false" class="card">
           <n-flex :size="8" class="shortcuts">
             <n-button secondary @click="router.push('/problem')">
               <template #icon><Icon icon="fluent-emoji:memo" /></template>
@@ -561,7 +560,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
 
 <style scoped>
 .home {
-  max-width: 1200px;
+  max-width: var(--oj-page-width);
   margin: 0 auto;
 }
 
@@ -571,13 +570,13 @@ async function openAnnouncement(item: AnnouncementListItem) {
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
-  margin: 8px 0 20px;
+  margin: 16px 0 28px;
 }
 
 .hello {
-  font-size: 24px;
+  font-size: 28px;
   font-weight: 600;
-  margin: 0 0 6px;
+  margin: 0 0 8px;
 }
 
 .knowledge-line {
@@ -596,14 +595,14 @@ async function openAnnouncement(item: AnnouncementListItem) {
 }
 
 .search {
-  width: 320px;
+  width: 340px;
   max-width: 100%;
 }
 
 .grid {
   display: grid;
   grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-  gap: 16px;
+  gap: var(--oj-gap);
 }
 
 @media (max-width: 900px) {
@@ -615,21 +614,29 @@ async function openAnnouncement(item: AnnouncementListItem) {
 .column {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--oj-gap);
   min-width: 0;
 }
 
 .card {
-  border-radius: 8px;
+  border-radius: var(--oj-radius);
   background-color: var(--n-color-embedded, rgba(128, 128, 128, 0.06));
 }
 
+/* 卡片用回 Naive 默认的 medium（左右 24），手机上太费地方，收回 16 */
+@media (max-width: 600px) {
+  .card {
+    --n-padding-left: 16px !important;
+    --n-padding-right: 16px !important;
+  }
+}
+
 .track {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 12px;
-  border-radius: 6px;
+  gap: 20px;
+  padding: 16px 18px;
+  border-radius: 8px;
   color: inherit;
   text-decoration: none;
   background-color: rgba(128, 128, 128, 0.06);
@@ -645,17 +652,17 @@ async function openAnnouncement(item: AnnouncementListItem) {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .track-label,
 .track-meta,
 .row-meta {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .track-title {
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -665,8 +672,11 @@ async function openAnnouncement(item: AnnouncementListItem) {
 .row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 4px;
+  gap: 10px;
+  min-height: 46px;
+  box-sizing: border-box;
+  padding: 8px 6px;
+  font-size: var(--oj-fs-body);
   border-radius: 4px;
   color: inherit;
   text-decoration: none;
@@ -709,9 +719,9 @@ a.row:hover {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 12px;
-  margin-bottom: 8px;
-  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 10px;
+  border-radius: 8px;
   border: 1px solid rgba(128, 128, 128, 0.18);
   background-color: var(--n-color, #fff);
   color: inherit;
@@ -737,7 +747,7 @@ a.row:hover {
   margin-top: 4px;
   padding: 10px 4px 2px;
   border-top: 1px solid rgba(128, 128, 128, 0.12);
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   opacity: 0.75;
 }
 
@@ -767,7 +777,7 @@ a.row:hover {
 }
 
 .more {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   opacity: 0.7;
 }
 
diff --git a/apps/web/src/oj/problem/components/TagNav.vue b/apps/web/src/oj/problem/components/TagNav.vue
index 25d5158..faf1bdf 100644
--- a/apps/web/src/oj/problem/components/TagNav.vue
+++ b/apps/web/src/oj/problem/components/TagNav.vue
@@ -115,17 +115,17 @@ function percent(tag: Tag) {
 
 .switch {
   flex: none;
-  padding: 14px 14px 8px;
+  padding: 16px 14px 10px;
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
 
 .switch button {
-  height: 28px;
+  height: 32px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
   white-space: nowrap;
@@ -161,12 +161,12 @@ function percent(tag: Tag) {
   flex: none;
   box-sizing: border-box;
   width: 100%;
-  padding: 6px 10px 7px;
+  padding: 9px 10px 9px;
   border: 0;
   border-radius: 6px;
   background: transparent;
   font: inherit;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
   text-align: left;
   color: v-bind("theme.textColor2");
   display: flex;
@@ -176,7 +176,7 @@ function percent(tag: Tag) {
 }
 
 .item.flat {
-  padding: 7px 10px;
+  padding: 10px 10px;
   flex-direction: row;
   justify-content: space-between;
   gap: 8px;
@@ -217,7 +217,7 @@ function percent(tag: Tag) {
 
 .count {
   flex: none;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
 }
@@ -232,7 +232,7 @@ function percent(tag: Tag) {
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   color: v-bind("tone('success').color");
 }
diff --git a/apps/web/src/oj/problem/list.vue b/apps/web/src/oj/problem/list.vue
index 745d982..d2a379b 100644
--- a/apps/web/src/oj/problem/list.vue
+++ b/apps/web/src/oj/problem/list.vue
@@ -391,8 +391,8 @@ watch(
 
 const gridColumns = computed(() =>
   showStatus.value
-    ? "40px 64px minmax(0, 1fr) 190px 64px 128px"
-    : "64px minmax(0, 1fr) 190px 64px 128px",
+    ? "40px 72px minmax(0, 1fr) 190px 72px 136px"
+    : "72px minmax(0, 1fr) 190px 72px 136px",
 )
 </script>
 
@@ -436,7 +436,6 @@ const gridColumns = computed(() =>
           <n-input
             v-model:value="query.keyword"
             class="w-search"
-            size="small"
             clearable
             placeholder="题号或标题"
           >
@@ -503,7 +502,6 @@ const gridColumns = computed(() =>
           <n-select
             :value="query.author || null"
             class="w-author"
-            size="small"
             placeholder="出题者"
             clearable
             filterable
@@ -515,7 +513,6 @@ const gridColumns = computed(() =>
           <n-select
             v-model:value="query.sort"
             class="w-sort"
-            size="small"
             :consistent-menu-width="false"
             :options="sortOptions"
           />
@@ -730,9 +727,13 @@ const gridColumns = computed(() =>
   height: auto;
 }
 
+/* 1920 的屏上不限宽的话，题目名在最左、人数在最右，中间一大片空 */
 .split {
   flex: 1;
   min-height: 0;
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
   display: flex;
 }
 
@@ -783,10 +784,10 @@ const gridColumns = computed(() =>
 /* 1280 宽（机房 1280×1024）也要一行放下：左栏 224 之后只剩 1008，控件宽度是按它掐的，
    加东西之前先在 1280 下看一眼「只看没做完」还在不在 */
 .titlebar {
-  height: 56px;
+  height: 68px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 24px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -794,13 +795,13 @@ const gridColumns = computed(() =>
 }
 
 .titlebar h1 {
-  margin: 0;
-  font-size: 18px;
+  margin: 0 2px 0 0;
+  font-size: 22px;
   font-weight: 700;
 }
 
 .count {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
 }
 
@@ -814,16 +815,16 @@ const gridColumns = computed(() =>
 }
 
 .random {
-  height: 28px;
+  height: var(--oj-ctrl-h);
   flex: none;
   box-sizing: border-box;
   margin-left: 4px;
-  padding: 0 9px 0 7px;
+  padding: 0 12px 0 10px;
   border: 1px solid v-bind("theme.primaryColorSuppl");
-  border-radius: 14px;
+  border-radius: 17px;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("tone('success').color");
   display: inline-flex;
   align-items: center;
@@ -861,13 +862,13 @@ const gridColumns = computed(() =>
 }
 
 .segmented button {
-  height: 28px;
+  height: var(--oj-ctrl-h);
   padding: 0 10px;
   margin-left: -1px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
   white-space: nowrap;
@@ -890,8 +891,8 @@ const gridColumns = computed(() =>
 }
 
 .select {
-  width: 96px;
-  height: 28px;
+  width: 100px;
+  height: var(--oj-ctrl-h);
   flex: none;
   box-sizing: border-box;
   padding: 0 8px 0 10px;
@@ -899,7 +900,7 @@ const gridColumns = computed(() =>
   border-radius: 3px;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor1");
   display: flex;
   align-items: center;
@@ -1014,7 +1015,7 @@ const gridColumns = computed(() =>
   align-items: center;
   gap: 6px;
   flex: none;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
   white-space: nowrap;
@@ -1035,16 +1036,16 @@ const gridColumns = computed(() =>
 .thead,
 .row {
   box-sizing: border-box;
-  padding: 0 24px;
+  padding: 0 var(--oj-pad-x);
   display: grid;
   column-gap: 16px;
   align-items: center;
 }
 
 .thead {
-  height: 36px;
+  height: var(--oj-head-h);
   flex: none;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   color: v-bind("theme.textColor3");
   background: v-bind("theme.tableHeaderColor");
@@ -1058,7 +1059,8 @@ const gridColumns = computed(() =>
 }
 
 .row {
-  height: 40px;
+  height: var(--oj-row-h);
+  font-size: var(--oj-fs-body);
   border-bottom: 1px solid v-bind("theme.dividerColor");
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -1106,7 +1108,7 @@ const gridColumns = computed(() =>
 }
 
 .knowledge {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   overflow: hidden;
@@ -1114,16 +1116,16 @@ const gridColumns = computed(() =>
 }
 
 .difficulty {
-  height: 22px;
-  padding: 0 7px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   display: inline-flex;
   align-items: center;
 }
 
 .people {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -1181,6 +1183,21 @@ const gridColumns = computed(() =>
   margin-top: 6px;
 }
 
+/* 1280 宽：控件放大一档以后一行差几十像素，筛选条这几样退回 13px 的字 */
+@media (max-width: 1365px) {
+  .count,
+  .random,
+  .segmented button,
+  .select,
+  .undone {
+    font-size: 13px;
+  }
+
+  .select {
+    width: 92px;
+  }
+}
+
 /* ---------- 手机 ---------- */
 .m-progress {
   padding: 12px 16px 0;
diff --git a/apps/web/src/oj/problemset/components/ClassView.vue b/apps/web/src/oj/problemset/components/ClassView.vue
index 990e0f8..8443700 100644
--- a/apps/web/src/oj/problemset/components/ClassView.vue
+++ b/apps/web/src/oj/problemset/components/ClassView.vue
@@ -166,7 +166,7 @@ const error = computed(() => tone("error"))
 <style scoped>
 .card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   overflow: hidden;
 }
@@ -177,14 +177,14 @@ const error = computed(() => tone("error"))
 }
 
 .summary {
-  min-height: 52px;
+  min-height: 60px;
   box-sizing: border-box;
-  padding: 8px 16px;
+  padding: 10px 20px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px 20px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
@@ -193,7 +193,7 @@ const error = computed(() => tone("error"))
 }
 
 .big {
-  font-size: 18px;
+  font-size: 20px;
 }
 
 .absent {
@@ -219,17 +219,17 @@ const error = computed(() => tone("error"))
 .grid {
   display: grid;
   column-gap: 6px;
-  padding: 0 16px 8px;
+  padding: 0 20px 10px;
 }
 
 .head {
   position: sticky;
   top: 0;
-  height: 44px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.cardColor");
   border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -255,10 +255,10 @@ const error = computed(() => tone("error"))
 }
 
 .cell {
-  height: 32px;
+  height: 38px;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
   min-width: 0;
 }
 
@@ -268,14 +268,14 @@ const error = computed(() => tone("error"))
 
 .box {
   position: relative;
-  height: 26px;
-  margin: 3px 0;
-  border-radius: 3px;
+  height: 30px;
+  margin: 4px 0;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   text-decoration: none;
   background: v-bind("theme.actionColor");
   color: v-bind("theme.textColor3");
@@ -306,14 +306,14 @@ const error = computed(() => tone("error"))
 }
 
 .foot {
-  min-height: 30px;
+  min-height: 36px;
   box-sizing: border-box;
-  padding: 6px 16px;
+  padding: 8px 20px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px 16px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   border-top: 1px solid v-bind("theme.dividerColor");
 }
 
diff --git a/apps/web/src/oj/problemset/detail.vue b/apps/web/src/oj/problemset/detail.vue
index e0f9aa7..a7f7e13 100644
--- a/apps/web/src/oj/problemset/detail.vue
+++ b/apps/web/src/oj/problemset/detail.vue
@@ -144,7 +144,7 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
     </template>
   </n-result>
 
-  <div v-else-if="set" class="page">
+  <div v-else-if="set" class="page oj-page">
     <section class="band" :class="{ done: progress?.isCompleted }">
       <span v-if="progress?.isCompleted" class="done-mark" aria-hidden="true">✓</span>
       <div class="head">
@@ -251,7 +251,11 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
             <span class="muted num idx">{{ indexOf(item) }}</span>
             <span class="ell ptitle">{{ item.problem.title }}</span>
             <span v-if="!item.isRequired" class="opt">选做</span>
-            <span v-if="item.oldCodeHidden" class="old" :style="purple"
+            <span
+              v-if="item.oldCodeHidden"
+              class="old"
+              :style="purple"
+              title="以前做对过，旧代码在布置期内先藏着"
               ><svg
                 class="lock"
                 width="12"
@@ -266,7 +270,8 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
               >
                 <rect x="5" y="11" width="14" height="9" rx="2" />
                 <path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg
-              >以前做对过 · 旧代码先藏着</span
+              ><span class="old-long">以前做对过 · 旧代码先藏着</span
+              ><span class="old-short">做对过</span></span
             >
             <div class="spacer"></div>
             <span v-if="item.isCompleted && item.solvedTime" class="muted num tiny"
@@ -289,18 +294,18 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 .page {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--oj-gap);
 }
 
 .band {
   box-sizing: border-box;
-  padding: 14px 20px 12px;
+  padding: 22px 24px 20px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 16px 24px;
+  gap: 16px 20px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
 }
 
@@ -324,22 +329,22 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 }
 
 .done-text {
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
   color: v-bind("success.color");
 }
 
 .head {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  width: 380px;
+  gap: 8px;
+  width: 360px;
   max-width: 100%;
   min-width: 0;
 }
 
 .head h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--oj-fs-title);
 }
 
 .desc {
@@ -360,12 +365,12 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 
 .back {
   flex-shrink: 0;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   text-decoration: none;
 }
 
 .count {
-  font-size: 24px;
+  font-size: 28px;
   font-weight: 700;
 }
 
@@ -415,11 +420,16 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
   margin-right: 3px;
 }
 
+/* 手机上长文案会把题目名挤得只剩一两个字，换成短的；锁的图标还在，全文在悬停提示里 */
+.old-short {
+  display: none;
+}
+
 .notice {
   box-sizing: border-box;
-  padding: 10px 14px;
-  border-radius: 6px;
-  font-size: 13px;
+  padding: 12px 18px;
+  border-radius: var(--oj-radius);
+  font-size: var(--oj-fs-sec);
 }
 
 .tabs {
@@ -428,12 +438,12 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 }
 
 .seg {
-  height: 30px;
-  padding: 0 14px;
+  height: var(--oj-ctrl-h);
+  padding: 0 16px;
   border: 1px solid v-bind("theme.borderColor");
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
 }
@@ -456,13 +466,13 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 .cols {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
-  gap: 12px;
+  gap: 16px;
   align-items: start;
 }
 
 .card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   overflow: hidden;
 }
@@ -473,10 +483,10 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 }
 
 .prow {
-  height: 40px;
+  height: var(--oj-row-h);
   flex-shrink: 0;
   box-sizing: border-box;
-  padding: 0 16px;
+  padding: 0 20px;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -498,8 +508,8 @@ a.prow:hover {
 }
 
 .dot {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   flex-shrink: 0;
   box-sizing: border-box;
@@ -527,19 +537,19 @@ a.prow:hover {
 .idx {
   width: 20px;
   text-align: right;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   flex-shrink: 0;
 }
 
 .ptitle {
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .opt {
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   border: 1px solid v-bind("theme.borderColor");
   color: v-bind("theme.textColor3");
   display: inline-flex;
@@ -548,10 +558,10 @@ a.prow:hover {
 }
 
 .old {
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -563,7 +573,7 @@ a.prow:hover {
 }
 
 .go {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
   flex-shrink: 0;
 }
@@ -573,10 +583,10 @@ a.prow:hover {
 }
 
 .pill {
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -601,11 +611,11 @@ a.prow:hover {
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .tiny {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .num {
@@ -624,6 +634,15 @@ a.prow:hover {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .band {
+    padding: 16px;
+  }
+
+  .prow {
+    padding: 0 12px;
+    gap: 10px;
+  }
+
   .head {
     width: 100%;
   }
@@ -636,5 +655,13 @@ a.prow:hover {
     align-items: stretch;
     width: 100%;
   }
+
+  .old-long {
+    display: none;
+  }
+
+  .old-short {
+    display: inline;
+  }
 }
 </style>
diff --git a/apps/web/src/oj/problemset/list.vue b/apps/web/src/oj/problemset/list.vue
index 6e8e602..4293a62 100644
--- a/apps/web/src/oj/problemset/list.vue
+++ b/apps/web/src/oj/problemset/list.vue
@@ -84,7 +84,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 </script>
 
 <template>
-  <div class="page">
+  <div class="page oj-page">
     <div class="top">
       <h2>题单</h2>
       <div class="spacer"></div>
@@ -195,7 +195,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 .page {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--oj-gap);
 }
 
 .top {
@@ -206,7 +206,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 
 .top h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--oj-fs-title);
 }
 
 .search {
@@ -221,12 +221,14 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  margin-bottom: -6px;
+  font-size: var(--oj-fs-h2);
   font-weight: 700;
-  color: v-bind("theme.textColor2");
+  color: v-bind("theme.textColor1");
 }
 
 .sect .muted {
+  font-size: var(--oj-fs-sec);
   font-weight: 400;
 }
 
@@ -239,11 +241,13 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
+  white-space: nowrap;
 }
 
 .tiny {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
+  white-space: nowrap;
 }
 
 .num {
@@ -268,23 +272,25 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
   align-items: baseline;
 }
 
+/* 1200 限宽下布置中是一行三张、其他题单一行四张；原来一行四张的大卡只有 280 宽，
+   「还没加入 · 9 道」和「另有 1 道选做」都被挤成两行 */
 .big-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
 }
 
 .small-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  gap: 14px;
 }
 
 .card {
   box-sizing: border-box;
   min-width: 0;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -303,32 +309,32 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 }
 
 .big {
-  padding: 14px 16px;
+  padding: 20px 22px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .title {
   flex-grow: 1;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .desc {
-  height: 17px;
-  font-size: 12px;
+  height: 20px;
+  font-size: var(--oj-fs-meta);
 }
 
 .count {
-  font-size: 22px;
+  font-size: 26px;
   font-weight: 700;
 }
 
 .pill {
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+  font-size: var(--oj-fs-meta);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -359,8 +365,8 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 }
 
 .hint {
-  height: 20px;
-  font-size: 12px;
+  height: 22px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor2");
 }
 
@@ -391,14 +397,14 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
 }
 
 .small-card {
-  height: 74px;
-  padding: 10px 14px;
+  height: 88px;
+  padding: 14px 18px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .small-card b {
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 </style>
diff --git a/apps/web/src/oj/rank/components/ChampionList.vue b/apps/web/src/oj/rank/components/ChampionList.vue
index 5ee2c91..1b4be8c 100644
--- a/apps/web/src/oj/rank/components/ChampionList.vue
+++ b/apps/web/src/oj/rank/components/ChampionList.vue
@@ -73,20 +73,20 @@ function weekLabel(start: string) {
 }
 
 .row {
-  height: 26px;
+  height: 32px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
 .week {
-  width: 78px;
+  width: 86px;
   flex-shrink: 0;
 }
 
@@ -113,13 +113,13 @@ function weekLabel(start: string) {
 }
 
 .hot-tag {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   color: #ffffff;
   background: #c76a12;
   border-radius: 3px;
-  padding: 0 5px;
-  line-height: 16px;
+  padding: 0 6px;
+  line-height: 18px;
   white-space: nowrap;
 }
 </style>
diff --git a/apps/web/src/oj/rank/components/ClassBattle.vue b/apps/web/src/oj/rank/components/ClassBattle.vue
index c877733..f893fd7 100644
--- a/apps/web/src/oj/rank/components/ClassBattle.vue
+++ b/apps/web/src/oj/rank/components/ClassBattle.vue
@@ -92,12 +92,12 @@ function shortLabel(className: string) {
 
 <style scoped>
 .battle {
-  padding: 12px 16px;
+  padding: 18px 20px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
 }
 
@@ -111,20 +111,24 @@ function shortLabel(className: string) {
   display: flex;
   align-items: baseline;
   gap: 8px;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.title b {
+  font-size: var(--oj-fs-h2);
 }
 
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
 .row {
-  height: 22px;
+  height: 30px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .row.mine {
@@ -135,14 +139,14 @@ function shortLabel(className: string) {
 }
 
 .rank {
-  width: 14px;
-  font-size: 12px;
+  width: 16px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
 }
 
 .name {
-  width: 86px;
+  width: 96px;
   padding: 0;
   border: 0;
   background: none;
@@ -160,7 +164,7 @@ function shortLabel(className: string) {
 
 .pk {
   margin-left: auto;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.primaryColor");
   text-decoration: none;
   white-space: nowrap;
@@ -173,7 +177,7 @@ function shortLabel(className: string) {
 
 .bar-box {
   flex-grow: 1;
-  height: 10px;
+  height: 12px;
   position: relative;
 }
 
@@ -186,22 +190,22 @@ function shortLabel(className: string) {
 }
 
 .value {
-  width: 32px;
+  width: 36px;
   text-align: right;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
 
 .gain {
-  width: 34px;
-  font-size: 11px;
+  width: 36px;
+  font-size: 12px;
   color: #18a058;
   font-variant-numeric: tabular-nums;
 }
 
 .summary {
-  margin-top: 6px;
-  font-size: 12px;
+  margin-top: 8px;
+  font-size: var(--oj-fs-meta);
   color: #18a058;
 }
 </style>
diff --git a/apps/web/src/oj/rank/components/RankMe.vue b/apps/web/src/oj/rank/components/RankMe.vue
index 9a7267f..354b874 100644
--- a/apps/web/src/oj/rank/components/RankMe.vue
+++ b/apps/web/src/oj/rank/components/RankMe.vue
@@ -260,12 +260,12 @@ function threatNote(me: RankRow, behind: RankRow) {
 
 <style scoped>
 .me-card {
-  padding: 14px 16px;
+  padding: 18px 20px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   border: 1px solid rgba(24, 160, 88, 0.45);
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: rgba(24, 160, 88, 0.07);
 }
 
@@ -281,7 +281,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .label {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor2");
 }
 
@@ -305,7 +305,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .total {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   margin-left: 2px;
 }
@@ -325,19 +325,19 @@ function threatNote(me: RankRow, behind: RankRow) {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 10px 12px;
   border-radius: 6px;
   border: 1px dashed rgba(24, 160, 88, 0.6);
   background: v-bind("theme.cardColor");
   color: #18a058;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .rival {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   min-width: 0;
 }
 
@@ -371,7 +371,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .rival-mood {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   overflow: hidden;
@@ -383,13 +383,13 @@ function threatNote(me: RankRow, behind: RankRow) {
   align-items: flex-start;
   gap: 6px;
   width: 100%;
-  padding: 8px 10px;
+  padding: 10px 12px;
   border: 1px solid rgba(24, 160, 88, 0.3);
   border-radius: 6px;
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor1");
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   line-height: 1.45;
   text-align: left;
   cursor: pointer;
@@ -423,7 +423,7 @@ function threatNote(me: RankRow, behind: RankRow) {
   align-items: center;
   gap: 3px;
   padding-top: 1px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: #18a058;
   white-space: nowrap;
 }
@@ -435,12 +435,12 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .mood-label {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
 }
 
 .mood-hint {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -456,7 +456,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .note {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   overflow: hidden;
@@ -464,11 +464,11 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .tag {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   border-radius: 3px;
-  padding: 0 5px;
-  line-height: 16px;
+  padding: 0 6px;
+  line-height: 18px;
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -487,9 +487,9 @@ function threatNote(me: RankRow, behind: RankRow) {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding-top: 8px;
+  padding-top: 10px;
   border-top: 1px solid rgba(24, 160, 88, 0.3);
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: #2f6fd0;
   text-decoration: none;
 }
@@ -509,10 +509,10 @@ function threatNote(me: RankRow, behind: RankRow) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1px;
-  padding: 6px 10px;
+  gap: 2px;
+  padding: 8px 12px;
   border: 0;
-  border-radius: 4px;
+  border-radius: 6px;
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor1");
   font: inherit;
@@ -524,18 +524,18 @@ function threatNote(me: RankRow, behind: RankRow) {
 }
 
 .mini-label {
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
   white-space: nowrap;
 }
 
 .mini b {
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
   font-variant-numeric: tabular-nums;
 }
 
 .mini small {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 400;
   color: v-bind("theme.textColor3");
 }
diff --git a/apps/web/src/oj/rank/components/RankPodium.vue b/apps/web/src/oj/rank/components/RankPodium.vue
index c4c8a70..1c74a4b 100644
--- a/apps/web/src/oj/rank/components/RankPodium.vue
+++ b/apps/web/src/oj/rank/components/RankPodium.vue
@@ -33,7 +33,7 @@ const steps = computed(() =>
     .filter((step): step is { place: number; row: RankRow } => !!step.row),
 )
 
-const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
+const HEIGHTS: Record<number, number> = { 1: 56, 2: 44, 3: 34 }
 </script>
 
 <template>
@@ -121,8 +121,8 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  gap: 6px;
-  margin: 0 16px;
+  gap: 8px;
+  margin: 4px 24px 0;
   border-bottom: 2px solid v-bind("theme.dividerColor");
   min-height: 60px;
 }
@@ -174,12 +174,12 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
 
 .bubble {
   position: relative;
-  padding: 3px 9px;
+  padding: 4px 10px;
   border: 1px solid v-bind("theme.dividerColor");
   border-radius: 8px;
   background: v-bind("theme.actionColor");
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--oj-fs-meta);
+  line-height: 18px;
   color: v-bind("theme.textColor2");
   word-break: break-all;
 }
@@ -271,11 +271,11 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
 }
 
 .tag {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   border-radius: 3px;
-  padding: 0 5px;
-  line-height: 16px;
+  padding: 0 6px;
+  line-height: 18px;
   white-space: nowrap;
 }
 
@@ -300,7 +300,7 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
   border: 0;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   cursor: pointer;
   display: flex;
   min-width: 0;
@@ -318,7 +318,7 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
 }
 
 .place {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 800;
   line-height: 1;
 }
@@ -328,18 +328,18 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
 }
 
 .solved b {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .solved small {
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
   margin-left: 1px;
 }
 
 .empty {
-  padding: 18px 0;
+  padding: 24px 0;
   color: v-bind("theme.textColor3");
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 </style>
diff --git a/apps/web/src/oj/rank/components/RankTrack.vue b/apps/web/src/oj/rank/components/RankTrack.vue
index ac7ac8a..2936c26 100644
--- a/apps/web/src/oj/rank/components/RankTrack.vue
+++ b/apps/web/src/oj/rank/components/RankTrack.vue
@@ -291,8 +291,8 @@ function onMenu(key: string, row: RankRow) {
 .track {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0 36px;
-  padding: 10px 24px 14px;
+  gap: 0 40px;
+  padding: 12px 24px 20px;
 }
 
 .track.single {
@@ -308,11 +308,11 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .lane {
-  height: 28px;
+  height: 34px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .single .column {
@@ -321,14 +321,14 @@ function onMenu(key: string, row: RankRow) {
 
 .prow {
   position: relative;
-  height: 32px;
+  height: 38px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 8px 0 4px;
   border-radius: 6px;
   overflow: hidden;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .prow > :not(.fill) {
@@ -360,7 +360,7 @@ function onMenu(key: string, row: RankRow) {
 .mood {
   flex: 1;
   min-width: 0;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   overflow: hidden;
@@ -376,11 +376,11 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .single .gap {
-  height: 34px;
+  height: 38px;
   margin: 2px 0 0;
   border: 1px dashed v-bind("theme.borderColor");
   border-radius: 6px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: #0c7a43;
 }
 
@@ -398,7 +398,7 @@ function onMenu(key: string, row: RankRow) {
 .rank {
   width: 28px;
   text-align: right;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
@@ -410,7 +410,7 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .who {
-  width: 116px;
+  width: 126px;
   flex-shrink: 0;
   padding: 0;
   border: 0;
@@ -431,7 +431,7 @@ function onMenu(key: string, row: RankRow) {
 
 .bar-box {
   flex-grow: 1;
-  height: 14px;
+  height: 16px;
   position: relative;
   min-width: 40px;
 }
@@ -445,7 +445,7 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .solved {
-  width: 30px;
+  width: 34px;
   text-align: right;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -453,8 +453,8 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .change {
-  width: 34px;
-  font-size: 12px;
+  width: 36px;
+  font-size: var(--oj-fs-meta);
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
@@ -479,11 +479,11 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .tag {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   border-radius: 3px;
-  padding: 0 5px;
-  line-height: 16px;
+  padding: 0 6px;
+  line-height: 18px;
   white-space: nowrap;
 }
 
@@ -513,14 +513,14 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .gap {
-  height: 30px;
-  margin: 4px 0;
+  height: 36px;
+  margin: 6px 0;
   border: 0;
   border-top: 1px dashed v-bind("theme.borderColor");
   border-bottom: 1px dashed v-bind("theme.borderColor");
   background: none;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   cursor: pointer;
 }
diff --git a/apps/web/src/oj/rank/components/WeekTop.vue b/apps/web/src/oj/rank/components/WeekTop.vue
index 0386847..a9cf660 100644
--- a/apps/web/src/oj/rank/components/WeekTop.vue
+++ b/apps/web/src/oj/rank/components/WeekTop.vue
@@ -64,11 +64,11 @@ const scale = computed(() => top.value[0]?.solved || 1)
 }
 
 .row {
-  height: 26px;
+  height: 32px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .row.me {
@@ -79,8 +79,8 @@ const scale = computed(() => top.value[0]?.solved || 1)
 }
 
 .medal {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 11px;
   display: inline-flex;
   align-items: center;
@@ -92,7 +92,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
 }
 
 .who {
-  width: 110px;
+  width: 120px;
   flex-shrink: 0;
   padding: 0;
   border: 0;
@@ -105,7 +105,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
 
 .bar-box {
   flex-grow: 1;
-  height: 9px;
+  height: 10px;
   position: relative;
 }
 
@@ -122,7 +122,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
 }
 
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 </style>
diff --git a/apps/web/src/oj/rank/list.vue b/apps/web/src/oj/rank/list.vue
index d2f0ff5..b7881aa 100644
--- a/apps/web/src/oj/rank/list.vue
+++ b/apps/web/src/oj/rank/list.vue
@@ -387,7 +387,7 @@ async function restore(userId: number) {
 </script>
 
 <template>
-  <div class="rank-page">
+  <div class="rank-page oj-page">
     <div class="toolbar" :class="{ single: !isDesktop }">
       <div class="title">
         <h2>排名</h2>
@@ -419,7 +419,6 @@ async function restore(userId: number) {
         v-if="teacher"
         v-model:value="pickedClass"
         class="class-select"
-        size="small"
         filterable
         placeholder="选班"
         :options="teacherClassOptions"
@@ -513,17 +512,10 @@ async function restore(userId: number) {
               </div>
             </div>
             <div class="actions">
-              <n-button
-                v-if="classContext"
-                size="small"
-                secondary
-                type="info"
-                @click="openDetail(classContext)"
-              >
+              <n-button v-if="classContext" secondary type="info" @click="openDetail(classContext)">
                 班级详情 · AI 分析
               </n-button>
               <n-button
-                size="small"
                 secondary
                 @click="
                   router.push({
@@ -539,7 +531,7 @@ async function restore(userId: number) {
               <template v-if="board.scope === 'class'">
                 <div v-for="user in board.hiddenUsers" :key="user.id" class="hidden-row">
                   <UserName :username="user.username" />
-                  <n-button size="tiny" secondary @click="restore(user.id)">恢复</n-button>
+                  <n-button size="small" secondary @click="restore(user.id)">恢复</n-button>
                 </div>
                 <span v-if="!board.hiddenUsers.length" class="muted">
                   还没有。怀疑抄代码的，在名单上点「⋯」拿掉。
@@ -644,10 +636,12 @@ async function restore(userId: number) {
 </template>
 
 <style scoped>
+/* 比别的阅读型页面宽一点：右栏 400 固定，左边赛道要排两列名字 */
 .rank-page {
+  max-width: 1280px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--oj-gap);
 }
 
 .toolbar {
@@ -659,25 +653,25 @@ async function restore(userId: number) {
 
 .toolbar h2 {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--oj-fs-title);
 }
 
 .seg {
   display: inline-flex;
-  height: 30px;
+  height: var(--oj-ctrl-h);
   border: 1px solid v-bind("theme.borderColor");
   border-radius: 4px;
   overflow: hidden;
 }
 
 .seg button {
-  padding: 0 12px;
+  padding: 0 14px;
   border: 0;
   border-left: 1px solid v-bind("theme.borderColor");
   background: v-bind("theme.cardColor");
   color: v-bind("theme.textColor2");
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -707,14 +701,14 @@ async function restore(userId: number) {
 
 .rule,
 .muted {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
 .main {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 400px;
-  gap: 16px;
+  gap: var(--oj-gap);
   align-items: start;
 }
 
@@ -731,7 +725,7 @@ async function restore(userId: number) {
 .card,
 .note-card {
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 6px;
+  border-radius: var(--oj-radius);
   background: v-bind("theme.cardColor");
   min-width: 0;
 }
@@ -741,25 +735,25 @@ async function restore(userId: number) {
 }
 
 .card-head {
-  min-height: 36px;
+  min-height: 52px;
   box-sizing: border-box;
-  padding: 6px 16px;
+  padding: 10px 24px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px 10px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .card-head b {
-  font-size: 14px;
+  font-size: var(--oj-fs-h2);
 }
 
 .legend {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor2");
 }
 
@@ -784,15 +778,20 @@ async function restore(userId: number) {
 .side {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--oj-gap);
   min-width: 0;
 }
 
 .note-card {
-  padding: 14px 16px;
+  padding: 18px 20px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
+  font-size: var(--oj-fs-sec);
+}
+
+.note-card > b {
+  font-size: var(--oj-fs-h2);
 }
 
 .stats {
@@ -811,12 +810,12 @@ async function restore(userId: number) {
 }
 
 .stats span {
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
 }
 
 .stats b {
-  font-size: 18px;
+  font-size: 20px;
   font-variant-numeric: tabular-nums;
 }
 
@@ -834,7 +833,7 @@ async function restore(userId: number) {
 }
 
 .hidden-title {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
 }
 
@@ -843,28 +842,33 @@ async function restore(userId: number) {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .below {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  gap: var(--oj-gap);
   align-items: start;
 }
 
 .card {
-  padding: 12px 16px;
+  padding: 18px 20px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .card-title {
   display: flex;
   align-items: baseline;
-  gap: 8px;
-  margin-bottom: 2px;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  margin-bottom: 4px;
+}
+
+.card-title b {
+  font-size: var(--oj-fs-h2);
 }
 
 .tabs-card {
@@ -880,12 +884,12 @@ async function restore(userId: number) {
 
 .tabs button {
   flex: 1;
-  height: 38px;
+  height: 44px;
   border: 0;
   border-bottom: 2px solid transparent;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
 }
@@ -897,7 +901,7 @@ async function restore(userId: number) {
 }
 
 .tab-body {
-  padding: 10px 12px 12px;
+  padding: 12px 14px 14px;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -918,7 +922,7 @@ async function restore(userId: number) {
 
 .toolbar.single .seg {
   display: flex;
-  height: 34px;
+  height: 36px;
 }
 
 .toolbar.single .seg button {
diff --git a/apps/web/src/oj/statistics/components/CodeStats.vue b/apps/web/src/oj/statistics/components/CodeStats.vue
index aee8a43..a559ed2 100644
--- a/apps/web/src/oj/statistics/components/CodeStats.vue
+++ b/apps/web/src/oj/statistics/components/CodeStats.vue
@@ -467,7 +467,7 @@ function pct(done: number, total: number) {
 }
 
 .problems {
-  width: 380px;
+  width: 404px; /* 380 + 放大一档后多出的留白和字宽，「求两门课程成绩总分(1)」在 1280 下要放得下 */
   flex: none;
   display: flex;
   flex-direction: column;
@@ -476,13 +476,13 @@ function pct(done: number, total: number) {
 }
 
 .col-head {
-  height: 36px;
+  height: 40px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 16px 0 20px;
+  padding: 0 16px 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
   border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -496,9 +496,9 @@ function pct(done: number, total: number) {
 
 .problem {
   width: 100%;
-  height: 50px;
+  height: 56px;
   box-sizing: border-box;
-  padding: 0 16px 0 20px;
+  padding: 0 16px 0 var(--oj-pad-x);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -550,7 +550,7 @@ function pct(done: number, total: number) {
 
 .muted {
   color: v-bind("theme.textColor3");
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .spacer {
@@ -566,10 +566,10 @@ function pct(done: number, total: number) {
 }
 
 .s-head {
-  height: 44px;
+  height: 52px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -578,17 +578,17 @@ function pct(done: number, total: number) {
 }
 
 .s-title {
-  font-size: 15px;
+  font-size: var(--oj-fs-h2);
 }
 
 .chip {
-  height: 28px;
-  padding: 0 12px;
+  height: 32px;
+  padding: 0 14px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 14px;
+  border-radius: 16px;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   cursor: pointer;
 }
@@ -606,14 +606,14 @@ function pct(done: number, total: number) {
 }
 
 .cols {
-  height: 32px;
+  height: 40px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
   border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -626,9 +626,9 @@ function pct(done: number, total: number) {
 }
 
 .row {
-  min-height: 38px;
+  min-height: 46px;
   box-sizing: border-box;
-  padding: 6px 20px;
+  padding: 8px var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -695,7 +695,7 @@ function pct(done: number, total: number) {
 }
 
 .none {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .cells {
@@ -707,9 +707,9 @@ function pct(done: number, total: number) {
 
 .cell {
   width: 30px;
-  height: 18px;
+  height: 20px;
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -739,7 +739,7 @@ function pct(done: number, total: number) {
 .d-state {
   width: 100px;
   flex: none;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .empty {
@@ -749,8 +749,8 @@ function pct(done: number, total: number) {
 }
 
 .truncated {
-  padding: 8px 20px;
-  font-size: 12px;
+  padding: 10px var(--oj-pad-x);
+  font-size: var(--oj-fs-meta);
   color: v-bind("tone('warning').color");
   border-top: 1px solid v-bind("theme.dividerColor");
 }
diff --git a/apps/web/src/oj/statistics/components/FlowStats.vue b/apps/web/src/oj/statistics/components/FlowStats.vue
index fea19cb..8c6464a 100644
--- a/apps/web/src/oj/statistics/components/FlowStats.vue
+++ b/apps/web/src/oj/statistics/components/FlowStats.vue
@@ -311,13 +311,13 @@ function gradeStyle(grade: string | null) {
 }
 
 .summary {
-  height: 72px;
+  height: 84px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
-  gap: 36px;
+  gap: 40px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
   background: v-bind("theme.actionColor");
 }
@@ -333,7 +333,7 @@ function gradeStyle(grade: string | null) {
 }
 
 .ring-label {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   line-height: 1.5;
   color: v-bind("theme.textColor3");
 }
@@ -343,7 +343,7 @@ function gradeStyle(grade: string | null) {
   min-height: 0;
   overflow-y: auto;
   box-sizing: border-box;
-  padding: 16px 20px;
+  padding: 20px var(--oj-pad-x);
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -365,7 +365,7 @@ function gradeStyle(grade: string | null) {
   border: 1px solid v-bind("theme.dividerColor");
   border-radius: 8px;
   background: v-bind("theme.cardColor");
-  padding: 12px 14px;
+  padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -392,7 +392,7 @@ function gradeStyle(grade: string | null) {
 }
 
 .card-title {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   font-weight: 600;
   color: v-bind("theme.textColor2");
 }
@@ -411,12 +411,12 @@ function gradeStyle(grade: string | null) {
 }
 
 .person {
-  height: 34px;
+  height: 40px;
   display: flex;
   align-items: center;
   gap: 12px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .p-name {
@@ -427,9 +427,9 @@ function gradeStyle(grade: string | null) {
 .grade-pill {
   width: 100px;
   flex: none;
-  height: 22px;
+  height: 24px;
   border-radius: 11px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
@@ -438,7 +438,7 @@ function gradeStyle(grade: string | null) {
 
 .muted {
   color: v-bind("theme.textColor3");
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 
 .empty {
diff --git a/apps/web/src/oj/statistics/components/Lessons.vue b/apps/web/src/oj/statistics/components/Lessons.vue
index b0f268a..6112b17 100644
--- a/apps/web/src/oj/statistics/components/Lessons.vue
+++ b/apps/web/src/oj/statistics/components/Lessons.vue
@@ -292,7 +292,7 @@ function percent(value: number, total: number) {
   min-height: 0;
   overflow: auto;
   padding-bottom: 20px;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 .live {
@@ -323,8 +323,8 @@ function percent(value: number, total: number) {
 }
 
 .note {
-  padding: 16px 20px 4px;
-  font-size: 13px;
+  padding: 20px var(--oj-pad-x) 6px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
 }
 
@@ -332,11 +332,11 @@ function percent(value: number, total: number) {
   position: sticky;
   top: 0;
   z-index: 1;
-  height: 28px;
+  height: 36px;
   display: flex;
   align-items: center;
-  padding: 0 20px;
-  font-size: 12px;
+  padding: 0 var(--oj-pad-x);
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
@@ -344,10 +344,10 @@ function percent(value: number, total: number) {
 }
 
 .row {
-  height: 44px;
+  height: 52px;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   border-bottom: 1px solid v-bind("theme.dividerColor");
   color: v-bind("theme.textColor1");
   text-decoration: none;
@@ -396,7 +396,7 @@ function percent(value: number, total: number) {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .pid {
@@ -409,7 +409,7 @@ function percent(value: number, total: number) {
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.primaryColor");
 }
 
@@ -439,7 +439,7 @@ function percent(value: number, total: number) {
 
 .axis-row {
   display: flex;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   height: 20px;
 }
 
@@ -452,7 +452,7 @@ function percent(value: number, total: number) {
   top: 3px;
   transform: translateX(-50%);
   white-space: nowrap;
-  font-size: 11px;
+  font-size: 12px;
   color: v-bind("theme.textColor3");
 }
 
@@ -464,8 +464,8 @@ function percent(value: number, total: number) {
 }
 
 .scattered {
-  padding: 7px 20px;
-  font-size: 12px;
+  padding: 8px var(--oj-pad-x);
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
@@ -481,25 +481,25 @@ function percent(value: number, total: number) {
 }
 
 .more {
-  padding: 12px 20px 0;
+  padding: 14px var(--oj-pad-x) 0;
 }
 
 .section-title {
   display: flex;
   align-items: baseline;
   gap: 10px;
-  padding: 18px 20px 6px;
+  padding: 22px var(--oj-pad-x) 8px;
 }
 
 .small {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .hard {
   width: calc(100% - 40px);
   margin: 0 20px;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .hard th {
diff --git a/apps/web/src/oj/statistics/components/StatItem.vue b/apps/web/src/oj/statistics/components/StatItem.vue
index 1460847..218c37e 100644
--- a/apps/web/src/oj/statistics/components/StatItem.vue
+++ b/apps/web/src/oj/statistics/components/StatItem.vue
@@ -37,7 +37,7 @@ const color = computed(() => (props.tone ? toneOf(props.tone).color : theme.valu
 
 .label,
 .unit {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -48,7 +48,7 @@ const color = computed(() => (props.tone ? toneOf(props.tone).color : theme.valu
 }
 
 .value {
-  font-size: 22px;
+  font-size: 26px;
   font-variant-numeric: tabular-nums;
 }
 </style>
diff --git a/apps/web/src/oj/statistics/components/StatisticsView.vue b/apps/web/src/oj/statistics/components/StatisticsView.vue
index b6c51e8..817f1a5 100644
--- a/apps/web/src/oj/statistics/components/StatisticsView.vue
+++ b/apps/web/src/oj/statistics/components/StatisticsView.vue
@@ -524,10 +524,10 @@ function resultWidth(value: number) {
 }
 
 .filters {
-  height: 52px;
+  height: 60px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -536,18 +536,18 @@ function resultWidth(value: number) {
 }
 
 .title {
-  font-size: 17px;
+  font-size: 20px;
   font-weight: 700;
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
 .back {
-  height: 28px;
+  height: 32px;
   padding: 0 10px 0 6px;
   border: 0;
   border-radius: 4px;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   display: inline-flex;
   align-items: center;
   gap: 2px;
@@ -578,7 +578,7 @@ function resultWidth(value: number) {
 .result-legend {
   display: flex;
   gap: 10px;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   white-space: nowrap;
   color: v-bind("theme.textColor2");
 }
@@ -622,7 +622,7 @@ function resultWidth(value: number) {
 }
 
 .range {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -649,13 +649,13 @@ function resultWidth(value: number) {
 }
 
 .summary {
-  height: 72px;
+  height: 84px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
-  gap: 36px;
+  gap: 40px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
   background: v-bind("theme.actionColor");
 }
@@ -667,7 +667,7 @@ function resultWidth(value: number) {
 }
 
 .ring-label {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   line-height: 1.5;
   color: v-bind("theme.textColor3");
 }
diff --git a/apps/web/src/oj/submission/components/FlowchartPane.vue b/apps/web/src/oj/submission/components/FlowchartPane.vue
index fc17224..d1e0969 100644
--- a/apps/web/src/oj/submission/components/FlowchartPane.vue
+++ b/apps/web/src/oj/submission/components/FlowchartPane.vue
@@ -278,10 +278,10 @@ const canRetry = computed(
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
-  padding: 14px 20px 12px;
+  padding: 18px var(--oj-pad-x) 14px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   background: v-bind("theme.bodyColor");
 }
 
@@ -290,7 +290,7 @@ const canRetry = computed(
   align-items: center;
   gap: 8px;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: 16px;
   min-width: 0;
 }
 
@@ -398,7 +398,7 @@ const canRetry = computed(
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
 }
 
diff --git a/apps/web/src/oj/submission/components/SubmissionPane.vue b/apps/web/src/oj/submission/components/SubmissionPane.vue
index 73adc56..a0ad0b5 100644
--- a/apps/web/src/oj/submission/components/SubmissionPane.vue
+++ b/apps/web/src/oj/submission/components/SubmissionPane.vue
@@ -451,10 +451,10 @@ function openStandalone() {
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
-  padding: 14px 20px 12px;
+  padding: 18px var(--oj-pad-x) 14px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   background: v-bind("theme.bodyColor");
 }
 
@@ -463,7 +463,7 @@ function openStandalone() {
   align-items: center;
   gap: 8px;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: 16px;
   min-width: 0;
 }
 
@@ -588,7 +588,7 @@ function openStandalone() {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
   flex-wrap: wrap;
diff --git a/apps/web/src/oj/submission/detail.vue b/apps/web/src/oj/submission/detail.vue
index 38e0af0..bf9cfa1 100644
--- a/apps/web/src/oj/submission/detail.vue
+++ b/apps/web/src/oj/submission/detail.vue
@@ -77,7 +77,7 @@ onMounted(init)
 </script>
 
 <template>
-  <n-flex vertical v-if="submission" :size="24">
+  <n-flex vertical v-if="submission" class="oj-page" :size="24">
     <n-flex :vertical="isMobile" justify="space-between">
       <n-alert
         style="flex: 1"
diff --git a/apps/web/src/oj/submission/list.vue b/apps/web/src/oj/submission/list.vue
index 5ab6f58..93af8a6 100644
--- a/apps/web/src/oj/submission/list.vue
+++ b/apps/web/src/oj/submission/list.vue
@@ -697,13 +697,13 @@ function dayBreak(index: number) {
     <div v-if="isDesktop" class="filters">
       <!-- 流程图列表要登录才能看（GET /flowcharts 是 requireAuth），没登录就不给这个切换 -->
       <template v-if="!inContest && userStore.isAuthed">
-        <n-radio-group v-model:value="mode" size="small">
+        <n-radio-group v-model:value="mode">
           <n-radio-button value="code">代码</n-radio-button>
           <n-radio-button value="flow">流程图</n-radio-button>
         </n-radio-group>
       </template>
       <!-- 老师也有：从个人菜单「我的提交」进来的，原来只能靠「清空」退出去 -->
-      <n-radio-group v-if="userStore.isAuthed" v-model:value="scope" size="small">
+      <n-radio-group v-if="userStore.isAuthed" v-model:value="scope">
         <n-radio-button value="all">全部</n-radio-button>
         <n-radio-button value="mine">我的</n-radio-button>
       </n-radio-group>
@@ -741,7 +741,6 @@ function dayBreak(index: number) {
           v-if="!lessonActive"
           :value="query.className || null"
           class="w-class"
-          size="small"
           :options="classOptions"
           placeholder="全部班级"
           clearable
@@ -766,7 +765,6 @@ function dayBreak(index: number) {
         v-else-if="!mine"
         v-model:value="query.username"
         class="w-user"
-        size="small"
         clearable
         :placeholder="teacher ? '学生' : '用户'"
       >
@@ -776,14 +774,12 @@ function dayBreak(index: number) {
         v-if="inContest"
         v-model:value="query.problem"
         class="w-problem-select"
-        size="small"
         :options="contestProblemOptions"
       />
       <n-input
         v-else-if="!lessonActive"
         v-model:value="query.problem"
         class="w-problem"
-        size="small"
         clearable
         placeholder="题号"
         :status="unknownProblems.length ? 'warning' : undefined"
@@ -793,14 +789,12 @@ function dayBreak(index: number) {
       <n-select
         v-model:value="query.result"
         class="w-result"
-        size="small"
         :options="flowMode ? gradeOptions : resultOptions"
       />
       <n-select
         v-if="!inContest && !flowMode"
         v-model:value="query.language"
         class="w-lang"
-        size="small"
         :options="languageOptions"
       />
       <button
@@ -811,13 +805,12 @@ function dayBreak(index: number) {
       >
         <Icon v-if="today" icon="ph:check-bold" :width="12" />今天
       </button>
-      <n-button size="small" quaternary @click="clear">清空</n-button>
+      <n-button quaternary @click="clear">清空</n-button>
 
       <div class="spacer"></div>
       <!-- 老师只有「统计」（今日统计并进去了）；学生看不到统计，仍是「今日统计」 -->
       <n-button
         v-if="teacher && route.name === 'submissions'"
-        size="small"
         quaternary
         title="统计：这节课、今天，或者回头看以前的课"
         @click="openStatistics()"
@@ -827,7 +820,6 @@ function dayBreak(index: number) {
       </n-button>
       <n-button
         v-else-if="route.name === 'submissions' && !flowMode"
-        size="small"
         quaternary
         :title="`今日统计：今天全站 ${todayCount} 条`"
         @click="toggleTodayPanel(true)"
@@ -1171,10 +1163,10 @@ function dayBreak(index: number) {
 }
 
 .filters {
-  height: 52px;
+  height: 60px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1221,14 +1213,22 @@ function dayBreak(index: number) {
   width: 104px;
 }
 
-/* 机房 1280 的屏上老师那排只剩几像素：学生、语言两个框各收一点，别让班级框被挤扁 */
+/* 机房 1280 的屏上老师那排只剩几像素：学生、语言两个框各收一点，别让班级框被挤扁；
+   控件放大到 34 高以后再把两头留白和标签的字收回一点 */
 @media (max-width: 1365px) {
+  .filters {
+    padding: 0 16px;
+  }
   .w-user {
     width: 108px;
   }
   .w-lang {
     width: 96px;
   }
+  .chip,
+  .lesson {
+    font-size: 13px;
+  }
 }
 
 .spacer {
@@ -1242,13 +1242,13 @@ function dayBreak(index: number) {
 
 .chip,
 .lesson {
-  height: 28px;
-  padding: 0 12px;
+  height: var(--oj-ctrl-h);
+  padding: 0 14px;
   border: 1px solid v-bind("theme.borderColor");
-  border-radius: 14px;
+  border-radius: 17px;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor2");
   display: inline-flex;
   align-items: center;
@@ -1274,7 +1274,7 @@ function dayBreak(index: number) {
 }
 
 .chip.person .person-name {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .lesson b {
@@ -1292,6 +1292,14 @@ function dayBreak(index: number) {
   display: flex;
 }
 
+/* 1920 的屏上和题目列表一样限宽 1600 居中，代码区不至于拉到两千像素宽 */
+.page:not(.contest):not(.mobile) > .filters,
+.page:not(.contest):not(.mobile) > .split {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
 /* 列表比代码区窄一点（46 : 54，用户看过定的）：原来列表固定 560、代码占满，右边空一大片；
    改成 56% 又嫌列表太宽。46% 在 1280 的屏上题目列约 215px，九成题目名放得下，长的看 title。
    大屏上列表最宽 900 */
@@ -1313,13 +1321,13 @@ function dayBreak(index: number) {
 }
 
 .new-bar {
-  height: 32px;
+  height: 36px;
   flex: none;
   border: 0;
   border-bottom: 1px solid v-bind("theme.dividerColor");
   background: v-bind("tone('success').background");
   font: inherit;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("tone('success').color");
   display: flex;
   align-items: center;
@@ -1329,14 +1337,14 @@ function dayBreak(index: number) {
 }
 
 .unknown-bar {
-  height: 32px;
+  height: 36px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("tone('warning').color");
   background: v-bind("tone('warning').background");
   border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -1360,20 +1368,20 @@ function dayBreak(index: number) {
 }
 
 .row {
-  height: 40px;
+  height: var(--oj-row-h);
   box-sizing: border-box;
-  padding: 0 16px 0 20px;
+  padding: 0 16px 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 10px;
   border-bottom: 1px solid v-bind("theme.dividerColor");
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--oj-fs-body);
 }
 
 /* 往上翻时选中那一行别被吸顶的日期行挡住 */
 .row {
-  scroll-margin-top: 28px;
+  scroll-margin-top: 34px;
 }
 
 .row:hover {
@@ -1401,7 +1409,7 @@ function dayBreak(index: number) {
 }
 
 .m-line.sub {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   color: v-bind("theme.textColor3");
 }
 
@@ -1413,9 +1421,9 @@ function dayBreak(index: number) {
 
 /* 「23:59:59」8 个等宽数字 */
 .c-time {
-  width: 60px;
+  width: 64px;
   flex: none;
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -1426,12 +1434,12 @@ function dayBreak(index: number) {
   position: sticky;
   top: 0;
   z-index: 1;
-  height: 26px;
+  height: 32px;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   font-weight: 600;
   color: v-bind("theme.textColor3");
   background: v-bind("theme.actionColor");
@@ -1477,10 +1485,10 @@ function dayBreak(index: number) {
 }
 
 .c-lang {
-  width: 48px;
+  width: 50px;
   flex: none;
   text-align: right;
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
   white-space: nowrap;
   color: v-bind("theme.textColor3");
 }
@@ -1514,16 +1522,16 @@ function dayBreak(index: number) {
 }
 
 .empty-title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   color: v-bind("theme.textColor2");
 }
 
 .list-foot {
-  height: 44px;
+  height: 52px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 16px 0 20px;
+  padding: 0 16px 0 var(--oj-pad-x);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1531,7 +1539,7 @@ function dayBreak(index: number) {
 }
 
 .total {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: v-bind("theme.textColor3");
   white-space: nowrap;
 }
diff --git a/apps/web/src/oj/user/components/KnowledgeMap.vue b/apps/web/src/oj/user/components/KnowledgeMap.vue
index e58618f..28717a6 100644
--- a/apps/web/src/oj/user/components/KnowledgeMap.vue
+++ b/apps/web/src/oj/user/components/KnowledgeMap.vue
@@ -85,8 +85,8 @@ function hint(tag: KnowledgeLevel) {
 
 <style scoped>
 .knowledge {
-  max-width: 610px;
-  margin: 16px auto 0;
+  max-width: 760px;
+  margin: var(--oj-gap) auto 0;
 }
 
 .row {
@@ -125,11 +125,11 @@ function hint(tag: KnowledgeLevel) {
 }
 
 .level {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
   color: #18a058;
 }
 
 .meta {
-  font-size: 12px;
+  font-size: var(--oj-fs-meta);
 }
 </style>
diff --git a/apps/web/src/oj/user/index.vue b/apps/web/src/oj/user/index.vue
index 63bc7fb..b3a4e73 100644
--- a/apps/web/src/oj/user/index.vue
+++ b/apps/web/src/oj/user/index.vue
@@ -151,8 +151,8 @@ onMounted(() => {
 <template>
   <n-flex class="wrapper" vertical justify="center" align="center" v-if="!loading && profile">
     <n-image
-      :width="96"
-      :height="96"
+      :width="112"
+      :height="112"
       :src="profile.avatar"
       :preview-disabled="isDefaultAvatar"
       object-fit="cover"
@@ -257,14 +257,14 @@ onMounted(() => {
 </template>
 <style scoped>
 .wrapper {
-  max-width: 610px;
-  margin: 16px auto 0;
+  max-width: 760px;
+  margin: var(--oj-gap) auto 0;
 }
 
 .stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  gap: 16px;
 }
 
 @media (max-width: 600px) {
@@ -277,43 +277,46 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  padding: 14px 8px;
-  border-radius: 8px;
+  gap: 6px;
+  padding: 20px 12px;
+  border-radius: var(--oj-radius);
   border: 1px solid rgba(128, 128, 128, 0.2);
 }
 
 .stat-value {
-  font-size: 22px;
+  font-size: 26px;
   font-weight: 700;
   line-height: 1.2;
 }
 
 .stat-label {
-  font-size: 13px;
+  font-size: var(--oj-fs-sec);
 }
 
 .stat-value.date {
-  font-size: 16px;
+  font-size: 18px;
   padding: 3px 0;
   white-space: nowrap;
 }
 
 h2 {
-  margin: 0;
-  font-weight: normal;
+  margin: 4px 0 0;
+  font-weight: 600;
+  font-size: var(--oj-fs-title);
 }
 
 .desc {
   margin: 0 auto;
   word-wrap: break-word;
   max-width: 100%;
+  font-size: var(--oj-fs-body);
 }
 .achievement-title {
   font-weight: 600;
+  font-size: var(--oj-fs-h2);
 }
 .achievement-recent {
-  margin-top: 10px;
+  margin-top: 14px;
 }
 .achievement-icon {
   display: inline-flex;
diff --git a/apps/web/src/oj/user/message.vue b/apps/web/src/oj/user/message.vue
index 00210c1..c1d7e4b 100644
--- a/apps/web/src/oj/user/message.vue
+++ b/apps/web/src/oj/user/message.vue
@@ -1,38 +1,41 @@
 <template>
-  <n-list v-if="messages.length">
-    <n-list-item :style="{ overflow: 'auto' }" v-for="(item, index) in messages" :key="index">
-      <n-flex size="large" vertical>
-        <n-flex align="center">
-          <div>发送时间</div>
-          <div>{{ parseTime(item.createTime, "YYYY年M月D日 HH:mm:ss") }}</div>
-          <div>发送者</div>
-          <div>{{ item.sender.username }}</div>
+  <div class="oj-page message-page">
+    <h2>消息</h2>
+    <n-list v-if="messages.length">
+      <n-list-item :style="{ overflow: 'auto' }" v-for="(item, index) in messages" :key="index">
+        <n-flex size="large" vertical>
+          <n-flex align="center">
+            <div>发送时间</div>
+            <div>{{ parseTime(item.createTime, "YYYY年M月D日 HH:mm:ss") }}</div>
+            <div>发送者</div>
+            <div>{{ item.sender.username }}</div>
+          </n-flex>
+          <n-flex align="center">
+            <div>题目序号</div>
+            <n-button
+              text
+              type="info"
+              @click="router.push('/problem/' + item.submission.problemDisplayId)"
+            >
+              {{ item.submission.problemDisplayId }}
+            </n-button>
+            <n-text :type="JUDGE_STATUS[item.submission.result]['type']">
+              {{ JUDGE_STATUS[item.submission.result]["name"] }}
+            </n-text>
+            <Copy :value="item.submission.code" />
+          </n-flex>
+          <n-code
+            :language="LANGUAGE_FORMAT_VALUE[item.submission.language]"
+            :code="item.submission.code"
+            show-line-numbers
+          />
+          <div v-html="item.message"></div>
         </n-flex>
-        <n-flex align="center">
-          <div>题目序号</div>
-          <n-button
-            text
-            type="info"
-            @click="router.push('/problem/' + item.submission.problemDisplayId)"
-          >
-            {{ item.submission.problemDisplayId }}
-          </n-button>
-          <n-text :type="JUDGE_STATUS[item.submission.result]['type']">
-            {{ JUDGE_STATUS[item.submission.result]["name"] }}
-          </n-text>
-          <Copy :value="item.submission.code" />
-        </n-flex>
-        <n-code
-          :language="LANGUAGE_FORMAT_VALUE[item.submission.language]"
-          :code="item.submission.code"
-          show-line-numbers
-        />
-        <div v-html="item.message"></div>
-      </n-flex>
-    </n-list-item>
-  </n-list>
-  <n-empty v-else description="没有消息"></n-empty>
-  <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
+      </n-list-item>
+    </n-list>
+    <n-empty v-else description="没有消息" style="margin: 48px 0"></n-empty>
+    <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
+  </div>
 </template>
 <script lang="ts" setup>
 import { getMessageList } from "oj/api"
@@ -61,3 +64,15 @@ async function listMessages() {
 onMounted(listMessages)
 watch(query, listMessages, { deep: true })
 </script>
+
+<style scoped>
+.message-page h2 {
+  margin: 0 0 8px;
+  font-size: var(--oj-fs-title);
+}
+
+.message-page :deep(.n-list-item) {
+  padding: 20px 0;
+  font-size: var(--oj-fs-sec);
+}
+</style>
diff --git a/apps/web/src/oj/user/setting.vue b/apps/web/src/oj/user/setting.vue
index f0fcdeb..a05a97b 100644
--- a/apps/web/src/oj/user/setting.vue
+++ b/apps/web/src/oj/user/setting.vue
@@ -45,7 +45,7 @@ async function saveProfile() {
 </script>
 <template>
   <n-flex class="container" vertical v-if="userStore.profile">
-    <h3>个人信息设置</h3>
+    <h2>个人信息设置</h2>
     <n-form>
       <n-avatar round :size="120" :src="userStore.profile.avatar" alt="头像" />
       <n-form-item label="">
@@ -75,11 +75,14 @@ async function saveProfile() {
 </template>
 <style scoped>
 .container {
-  max-width: 600px;
+  max-width: 640px;
   margin: 0 auto;
+  padding-top: 8px;
+  gap: var(--oj-gap);
 }
 
-h3 {
-  font-weight: normal;
+h2 {
+  margin: 0;
+  font-size: var(--oj-fs-title);
 }
 </style>