/* ============================================================
   关于系统屏视觉重构 · about.css（批一四五，李叔 10-07「重构关于系统页面」）
   ------------------------------------------------------------
   铁律（同批一三〇 / 一四〇 / 一四四）：功能 / 文案 / 交互 / DOM 锚点零改动，
     JS 只加了「概览四格 + 按月分组 + 默认折叠 + 端上搜索」四个节点
     （.ab-kpi / .ab-tl-m / .ab-more / .ab-tools），rel-* 旧锚点全留，
     本文件纯 CSS 覆盖，回退 = 删本文件 + 删 index.html 一行 link。
   作用域 .pg-admin 由 host.js route() 打在 body（#/about 与 cost/logs/review
     同作用域；弹层在 body 级 #layer，body 打标才罩得住）。
     全部选择器再以 .ab-* 收口，不会碰到同作用域的其他三屏。
   为什么独立成文件：app.css 是并行会话高频战区（批一四三刚写过用户管理段，
     批一四四已改用独立 gallery.css 避让），本项目独立 CSS 惯例从之；
     必须排在 app.css 之后加载才能覆盖旧的 .ab-* 段。
   ------------------------------------------------------------
   这一屏要回答三个问题（原来一个都答不好）：
     ① 这工具现在是什么版本、有没有落后？（概览四格 + hero 右上版本胶囊）
     ② 它一直在长吗？（累计迭代 / 最近更新「昨天」/ 更新条目，不扔 102 条流水）
     ③ 具体改了什么？（更新记录按月分组，默认只摊最近 12 个版本，可搜可展开）
   ============================================================ */

/* ---- 局部令牌：版本号/价值观标题的「品牌绿」在深浅两底上不是一个值 ----
   light 用海报松绿（白底 5.6:1 读得清），dark 换青绿（深底才亮得起来）。
   不写字面色值：本项目 CSS 一律走令牌，裸 hex 会被守闸拦下。 */
.pg-admin { --ab-green: var(--poster-pine); }
[data-theme="dark"] .pg-admin { --ab-green: var(--fx-mint); }

/* ================= 一、版本概览四格 =================
   旧版 hero 下面直接接「我们是谁」，版本号只在 hero 右上角露一次，
   102 个版本平铺在页尾——人看不到「这工具一直在长」。四格把它抬到第一屏。 */
.pg-admin .ab-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px;
}
.pg-admin .ab-kcell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 20px; box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur), transform var(--dur);
}
.pg-admin .ab-kcell:hover { box-shadow: var(--shadow-hover); transform: var(--lift-1); }
.pg-admin .ab-kcell b {
  display: block; font-size: 24px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: var(--num); letter-spacing: .5px; color: var(--text);
}
.pg-admin .ab-kcell span { display: block; margin-top: 4px; font-size: var(--t-weak); color: var(--text-3); }

/* ================= 二、Hero 品牌卡（微调，深绿底不动） ================= */
.pg-admin .ab-hero { border-radius: 16px; padding: 30px 32px 26px; }
.pg-admin .ab-lg { border-radius: 12px; height: 60px; }
.pg-admin .ab-slogan { margin-top: 22px; padding-top: 18px; }
.pg-admin .ab-slogan .cn { font-size: 20px; letter-spacing: 2px; }
.pg-admin .ab-slogan .en { letter-spacing: 4px; }

/* ================= 三、卡片统一语言 =================
   与批一三二~一三五定的全站语言拉齐：14 圆角 / 1px 描边 / 微阴影。
   旧 .ab-card 是 12 圆角无描边，跟同屏其他卡片不像一家人。 */
.pg-admin .ab-card {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 26px;
  margin-top: 14px; box-shadow: var(--shadow-1);
}
.pg-admin .ab-sec-t { font-size: var(--t-card); letter-spacing: .2px; margin-bottom: 14px; }
.pg-admin .ab-who { font-size: var(--t-body); line-height: 2; }

/* ---- 三大优势：顶边品牌绿 + 悬浮微抬（旧版 border-top 是海报松绿，无阴影） ---- */
.pg-admin .ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.pg-admin .ab-pl {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--r-card); padding: 20px 20px 18px; box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur), transform var(--dur);
}
.pg-admin .ab-pl:hover { box-shadow: var(--shadow-hover); transform: var(--lift-2); }
.pg-admin .ab-pl .no { font-size: var(--t-weak); letter-spacing: 2px; font-weight: 700; color: var(--text-3); }
.pg-admin .ab-pl h4 { font-size: var(--t-card); margin: 8px 0 8px; }
.pg-admin .ab-pl p { font-size: var(--t-aux); line-height: 1.85; color: var(--text-2); }

/* ---- 我们相信：三列竖线分栏（窄屏转横排） ---- */
.pg-admin .ab-val { display: grid; grid-template-columns: repeat(3, 1fr); }
.pg-admin .ab-vl { padding: 4px 18px 4px 0; }
.pg-admin .ab-vl + .ab-vl { border-left: 1px solid var(--line); padding-left: 20px; }
.pg-admin .ab-vl h5 { font-size: var(--t-body); font-weight: 700; color: var(--ab-green); margin-bottom: 6px; }
.pg-admin .ab-vl p { font-size: var(--t-aux); line-height: 1.85; color: var(--text-2); }

/* ================= 四、更新记录：工具行 + 月份时间轴 ================= */
.pg-admin .ab-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
/* 输入框与全站统一：44px 高 + 聚焦绿晕 */
.pg-admin .ab-q { flex: 1; min-width: 200px; max-width: 340px; height: var(--h-ctl); border-radius: var(--r-btn); }
.pg-admin .ab-q:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.pg-admin .ab-rel-n { font-size: var(--t-weak); color: var(--text-3); font-variant-numeric: var(--num); }

/* 月份组头：跟时间轴左轨对齐（rail 14px + gap 14px = 28px），断开上一组的连线 */
.pg-admin .ab-tl-m {
  display: flex; align-items: center; gap: 10px; padding: 18px 0 8px 28px;
}
.pg-admin .ab-tl-m .m-n { font-size: var(--t-aux); font-weight: 700; color: var(--text); letter-spacing: .5px; }
.pg-admin .ab-tl-m .m-c {
  font-size: var(--t-weak); color: var(--text-3); font-variant-numeric: var(--num);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 11px; padding: 2px 9px;
}
.pg-admin .ab-tl-m:first-child { padding-top: 4px; }

/* 版本条目：hover 有落点；日期后跟「昨天」由 JS 拼在 .rel-d 里 */
.pg-admin .rel-item { padding: 14px 0; transition: background var(--dur-fast); border-radius: 8px; }
.pg-admin .rel-item:hover { background: var(--hover); }
.pg-admin .rel-v {
  color: var(--ab-green);
  font-size: var(--t-body); font-variant-numeric: var(--num);
}

.pg-admin .rel-item.old .rel-v { color: var(--text); font-weight: 600; }
.pg-admin .rel-d { font-size: var(--t-weak); color: var(--text-3); font-variant-numeric: var(--num); }
.pg-admin .rel-tag {
  font-size: var(--t-weak); font-weight: 700; color: var(--poster-pine);
  background: var(--brand-soft); border: 0; border-radius: 11px; padding: 2px 9px;
}

.pg-admin .rel-list { font-size: var(--t-aux); line-height: 1.85; }
.pg-admin .rel-list li { margin-left: 16px; }

/* 展开 / 收起：全宽浅底，不抢「最新」那条的风头 */
.pg-admin .ab-more {
  display: block; width: 100%; margin-top: 14px; padding: 12px 0;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--t-aux); font-weight: 600; color: var(--ab-green); cursor: pointer;
  font-family: inherit; transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.pg-admin .ab-more:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }


/* 空态：跟全站空态一个语气 */
.pg-admin .ab-empty { padding: var(--pad-empty) 0; text-align: center; font-size: var(--t-aux); color: var(--text-3); line-height: 1.8; }

/* ================= 五、响应式：760 / 460 逐级降列 ================= */
@media (max-width: 900px) {
  .pg-admin .ab-kpi { grid-template-columns: repeat(2, 1fr); }
  .pg-admin .ab-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pg-admin .ab-hero { padding: 22px 20px 20px; }
  .pg-admin .ab-hero-top { flex-wrap: wrap; gap: 14px; }
  .pg-admin .ab-card { padding: 16px; }
  .pg-admin .ab-val { grid-template-columns: 1fr; }
  .pg-admin .ab-vl + .ab-vl { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
  .pg-admin .ab-kcell b { font-size: 21px; }
  .pg-admin .ab-tl-m { padding-left: 24px; }
}
@media (max-width: 460px) {
  .pg-admin .ab-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pg-admin .ab-kcell { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-admin .ab-kcell, .pg-admin .ab-pl, .pg-admin .ab-more, .pg-admin .rel-item { transition: none; }
  .pg-admin .ab-kcell:hover, .pg-admin .ab-pl:hover { transform: none; }
}