feat: 统一 Admin 主列表分页 (#64)

admin/static/css/app.css

@@ -1,9 +1,9 @@
 /* Admin 样式表。手写 CSS，不引入框架、不引入构建流程。
    见 admin/AGENTS.md 前端约束。
 
-   五个模块共用同一套三段式布局的样式：
+   六个主列表共用同一套三段式布局的样式：
    .toolbar（顶部工具条）/ .table-wrap（中间表格）/ .statusbar（底部状态条）。
-   改这里会同时影响五个页面，这是有意的——不要为某个页面复制一份。 */
+   改这里会同时影响六个主列表，这是有意的——不要为某个页面复制一份。 */
 
 * { box-sizing: border-box; }
 
@@ -185,6 +185,11 @@ tr.empty small { color: #aaa; }
   color: #c8cdd4;
   padding: 10px 16px;
   font-size: 13px;
+  gap: 12px;
+}
+.statusbar > span:first-child {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 /* 链接和标题这类长内容截断显示，鼠标悬停看全文（title 属性）。
@@ -381,13 +386,14 @@ select {
 
 /* ── 分页控件 ─────────────────────────── */
 /* 见 docs/admin/05-ui-specification.md §3.2。全项目第一个分页页面
-   （蝦皮数据页，工单 #43）定的样式，其余四个页面照抄。
+   （蝦皮数据页，工单 #43）定的样式，其余主列表复用。
    控件本身是 <a href>，不是按钮/JS，样式借用 button 的观感即可。 */
 .pagination {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-left: 12px;
+  margin-left: auto;
+  flex: 0 0 auto;
 }
 .pagination a,
 .pagination span.disabled {
@@ -397,6 +403,15 @@ select {
   text-decoration: none;
   font-size: 13px;
 }
+
+/* 窄窗口把状态和分页分成两行，并让底栏回到文档流。
+   这样无论状态文字换几行，都不会遮住表格最后一行。 */
+@media (max-width: 760px) {
+  body { padding-bottom: 0; }
+  .statusbar { position: static; flex-wrap: wrap; gap: 6px 12px; }
+  .statusbar > span:first-child { flex-basis: 100%; }
+  .pagination { width: 100%; justify-content: flex-end; margin-left: 0; }
+}
 .pagination a { color: #1f6feb; background: #fff; }
 .pagination a:hover { background: #f0f2f4; }
 /* 首页/末页时对应按钮禁用：用 <span> 而不是不可点的 <a>（语义上不再是链接），