/* ==========================================================================
   内容工作台 · Apple 设计令牌层  (portal + daren-review 共用)
   来源规范:~/Downloads/apple/DESIGN.md
   计划:  ~/AI区/内容工作台_前端Apple化_优化计划_20260725.md
   --------------------------------------------------------------------------
   P0(2026-07-25):**只声明令牌,不含任何生效选择器 → 肉眼零变化**。
                  本阶段唯一目的是验证「CSS 脱离 JS 字符串 + 外链管道」通。
   P1 起在本文件追加组件规则。改样式 = 换本文件 + 刷新,门户无需 rebuild。
   --------------------------------------------------------------------------
   刘啸 2026-07-25 拍板的三条口径:
   ① 「只有蓝」限定在交互元素;状态语义色保留,收敛为 Apple 系统色
   ② 主色由墨绿 #0f6e56 换为 Apple 蓝 #0071e3,两站统一
   ③ 分区施策:门面区吃全套留白,作业区(表格/表单)走紧凑口径
   ========================================================================== */

:root {

  /* ---------- 1. 交互色 · 唯一的彩色预算(口径①) ---------- */
  --ap-blue:            #0071e3;   /* 主 CTA 底色、焦点环 */
  --ap-blue-hover:      #0077ed;
  --ap-blue-active:     #006edb;
  --ap-link:            #0066cc;   /* 浅底正文链接 */
  --ap-link-dark:       #2997ff;   /* 深底正文链接 */
  --ap-focus:           #0071e3;   /* 焦点环专用别名 */

  /* ---------- 2. 中性色 ---------- */
  --ap-black:           #000000;
  --ap-text:            #1d1d1f;             /* 浅底主文本 */
  --ap-text-2:          rgba(0,0,0,.8);      /* 次级文本 */
  --ap-text-3:          rgba(0,0,0,.48);     /* 三级/禁用 */
  --ap-bg:              #f5f5f7;             /* 页面底 */
  --ap-surface:         #ffffff;             /* 卡片面 */
  --ap-surface-2:       #fafafc;             /* 搜索/筛选控件底 */
  --ap-border:          #d2d2d7;
  --ap-border-soft:     rgba(0,0,0,.04);
  --ap-white:           #ffffff;

  /* 深色面(DESIGN.md §2 Surface & Dark Variants) */
  --ap-dark-bg:         #000000;
  --ap-dark-1:          #272729;
  --ap-dark-2:          #262628;
  --ap-dark-3:          #28282a;
  --ap-dark-4:          #2a2a2d;
  --ap-dark-5:          #242426;
  --ap-on-dark:         #ffffff;
  --ap-on-dark-2:       rgba(255,255,255,.72);

  /* ---------- 3. 状态语义色(口径①:与交互蓝正交,不视为强调色) ----------
     -fill = 徽章/圆点底色(Apple 系统色本色)
     -text = 白底上的可读文字色(本色在小字上对比度不足,须用深阶) */
  --ap-green:           #34c759;
  --ap-green-text:      #248a3d;
  --ap-green-tint:      #e8f8ed;
  --ap-red:             #ff3b30;
  --ap-red-text:        #d70015;
  --ap-red-tint:        #ffecea;
  --ap-orange:          #ff9500;
  --ap-orange-text:     #b25000;
  --ap-orange-tint:     #fff3e2;
  --ap-neutral-tint:    #f1f3f5;
  --ap-neutral-text:    rgba(0,0,0,.56);

  /* ---------- 4. 字体栈 ----------
     不外链 Apple 字体文件(授权)。SF Pro 仅在 macOS/iOS 命中,
     其余平台走系统 UI 字体;中文一律 PingFang SC / 微软雅黑。 */
  --ap-font-display: -apple-system, "SF Pro Display", BlinkMacSystemFont,
                     "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ap-font-text:    -apple-system, "SF Pro Text", BlinkMacSystemFont,
                     "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ap-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- 5. 字号阶梯(DESIGN.md §3) ---------- */
  --ap-fs-hero:         56px;   /* 门面区 hero,仅首页/登录页 */
  --ap-fs-section:      40px;
  --ap-fs-tile:         28px;
  --ap-fs-card:         21px;
  --ap-fs-body-lg:      19px;
  --ap-fs-body:         17px;
  --ap-fs-ui:           15px;   /* 作业区默认(口径③,低于规范 17px) */
  --ap-fs-sm:           14px;
  --ap-fs-xs:           13px;   /* 表格正文(口径③) */
  --ap-fs-micro:        12px;
  --ap-fs-nano:         10px;

  /* ---------- 6. 行高 ---------- */
  --ap-lh-hero:         1.07;
  --ap-lh-section:      1.10;
  --ap-lh-tile:         1.14;
  --ap-lh-card:         1.19;
  --ap-lh-body:         1.47;   /* 门面区/正文 */
  --ap-lh-compact:      1.35;   /* 作业区表格(口径③) */
  --ap-lh-tight:        1.24;

  /* ---------- 7. 字距 ----------
     ⚠ 负字距只可用于数字/拉丁文/标题。中文正文加负字距会糊,
       禁止挂到 body;P1 起通过 .ap-num / 标题类单独施加。 */
  --ap-ls-hero:         -0.28px;
  --ap-ls-body:         -0.374px;
  --ap-ls-sm:           -0.224px;
  --ap-ls-micro:        -0.12px;
  --ap-ls-nano:         -0.08px;
  --ap-ls-cjk:          normal;  /* 中文一律 normal */

  /* ---------- 8. 圆角(收敛现有 6/7/8/9/10/12/14/20px 八套) ---------- */
  --ap-r-1:             5px;     /* 小容器、标签 */
  --ap-r-2:             8px;     /* 按钮、卡片、图片容器 —— 默认 */
  --ap-r-3:             11px;    /* 搜索框、筛选控件 */
  --ap-r-4:             12px;    /* 面板、大卡片(上限) */
  --ap-r-pill:          980px;   /* 胶囊 CTA,仅门面区 */
  --ap-r-circle:        50%;     /* 媒体控件 */

  /* ---------- 9. 阴影(规范:一层柔阴影,或干脆没有) ---------- */
  --ap-shadow-1:        rgba(0,0,0,.22) 3px 5px 30px 0px;
  --ap-shadow-none:     none;

  /* ---------- 10. 间距(8px 基,小档密集) ---------- */
  --ap-sp-1:            2px;
  --ap-sp-2:            4px;
  --ap-sp-3:            6px;
  --ap-sp-4:            8px;
  --ap-sp-5:            10px;
  --ap-sp-6:            14px;
  --ap-sp-7:            17px;
  --ap-sp-8:            20px;
  --ap-sp-9:            24px;
  --ap-sp-10:           32px;
  --ap-sp-11:           48px;

  /* ---------- 11. 玻璃导航(规范称其不可妥协) ---------- */
  --ap-nav-h:           48px;
  --ap-nav-bg:          rgba(0,0,0,.8);
  --ap-nav-blur:        saturate(180%) blur(20px);

  /* ---------- 12. 布局 ---------- */
  --ap-maxw:            980px;    /* 门面区内容宽 */
  --ap-maxw-work:       1340px;   /* 作业区表格宽(口径③) */

  /* ---------- 13. 管道自检标记 ----------
     P0 验证用:浏览器控制台执行
     getComputedStyle(document.documentElement).getPropertyValue('--ap-loaded')
     返回 " p0-20260725" 即证明外链 CSS 已生效。 */
  --ap-loaded:          "p0-20260725";
}

/* ==========================================================================
   P1 组件层 · 全站(2026-07-25 第二批)
   --------------------------------------------------------------------------
   作用域 body.ap = 门户 17 个页面 + 审核台主页。登录页另有 .ap-login 覆盖在后。
   ⚠ 本层原则:**只改配色 / 圆角 / 字体 / 焦点环,不动任何几何尺寸**
     (高度、宽度、padding、flex 一律不碰)→ 20 个页面的布局不可能塌。
   ⚠ 外链 CSS 在内联 <style> 之前,所以每条规则都靠**更高的选择器特异性**取胜,
     不能靠书写顺序。body.ap 前缀恰好保证了这一点。
   ========================================================================== */

/* ---- 1. 旧变量重映射:一处改动带走全站配色 --------------------------------
   门户旧 CSS 有 73 处 var(--accent) / var(--border) 之类的引用。
   自定义属性在**使用它的元素上**解析,所以在 body 上重定义即可全站生效。 */
body.ap{
  --bg:#f5f5f7;
  --card:#ffffff;
  --text:#1d1d1f;
  --muted:rgba(0,0,0,.56);
  --border:#d2d2d7;
  --accent:#0071e3;      /* 墨绿 #0f6e56 → Apple 蓝 */
  --accent2:#0066cc;     /* 旧蓝 #125e8a → 规范的正文链接蓝 */
  font-family:var(--ap-font-text);
  color:var(--ap-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 顶栏玻璃底用 50vw 铺满视口,而 vw **含滚动条宽度** → 会横向溢出把整页压缩。
     这里裁掉。必须用 clip 不能用 hidden:hidden 会让 .top 的 position:sticky 失效。 */
  overflow-x:clip;
}

/* ---- 2. 玻璃导航(规范称其为 Apple 网页身份里不可妥协的一条) ----
   背景铺满视口,内容仍对齐 1120 容器 —— 用 padding 做,不改 HTML。 */
/* ⚠ 必须排除审核台:它也有 .top,但那是「标题行+筛选+分页+批量」一整条工具栏,
   整条压深会让 BD 全天盯的筛选控件不可读。审核台只把 header 那一行做成玻璃。 */
body.ap:not(.ap-review) .top{
  --muted:rgba(255,255,255,.72);      /* 顶栏里的 inline var(--muted) 要转成浅色 */
  position:sticky; top:0; z-index:100;
  border-bottom:none;
  color:var(--ap-on-dark);
}
/* 玻璃底铺满视口,但**不动 .top 自身的宽度与居中** —— 顶栏内容因此自动跟随
   各页自己的容器宽度(达人管理页把 .wrap,.top 加宽到 1560,写死 1120 会错位)。 */
body.ap:not(.ap-review) .top::before{
  content:'';
  position:absolute;
  inset:0 calc(50% - 50vw);           /* 左右各撑到视口边缘,与容器宽度无关 */
  z-index:-1;
  background:var(--ap-nav-bg);
  -webkit-backdrop-filter:var(--ap-nav-blur);
  backdrop-filter:var(--ap-nav-blur);
}
body.ap:not(.ap-review) .top .brand{ color:var(--ap-on-dark); font-weight:600; }
/* 旧 CSS 里 .sp 一名两用:顶栏弹簧 + 话术块(白底带边框)。
   以前顶栏是白的看不出来,换成深色玻璃就露出一条白杠 —— 这里清掉。 */
body.ap:not(.ap-review) .top .sp{ background:none; border:none; padding:0; margin:0; }
body.ap:not(.ap-review) .top a{ color:var(--ap-on-dark); opacity:.86; text-decoration:none; }
body.ap:not(.ap-review) .top a:hover{ opacity:1; text-decoration:underline; }

/* ---- 3. 卡片:规范说不用边框,靠白卡与灰底的色差托起 ---- */
body.ap .card{
  background:var(--ap-surface);
  border:none;
  border-radius:var(--ap-r-4);
}

/* ---- 4. 按钮:底色已随 --accent 自动变蓝,这里只收圆角与字重 ---- */
body.ap .btn{
  border-radius:var(--ap-r-2);
  font-family:inherit;
  font-weight:400;                     /* 规范:CTA 用常规字重,不加粗 */
}
body.ap .btn:hover{ background:var(--ap-blue-hover); }
/* 次操作:主色换蓝之后 accent 与 accent2 几乎同色,层级会丢。
   按规范改成"浅色次级按钮"(灰底 + 蓝字),与主 CTA 拉开层级。 */
body.ap .btn.sec{ background:#e8e8ed; color:var(--ap-blue); }
body.ap .btn.sec:hover{ background:#dededf; }
body.ap .btn.gray{ background:var(--ap-text); }   /* 规范的 Primary Dark #1d1d1f */
body.ap .btn.gray:hover{ background:#000; }

/* ---- 5. 表单控件 ---- */
body.ap input,
body.ap select,
body.ap textarea{
  border-radius:var(--ap-r-2);
  font-family:inherit;
  color:var(--ap-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.ap input::placeholder,
body.ap textarea::placeholder{ color:var(--ap-text-3); }
body.ap input:focus,
body.ap select:focus,
body.ap textarea:focus{
  outline:none;
  border-color:var(--ap-blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.22);
}

/* ---- 6. 焦点环:规范要求所有可交互元素统一 2px #0071e3 ---- */
body.ap a:focus-visible,
body.ap button:focus-visible,
body.ap [role="button"]:focus-visible,
body.ap input:focus-visible,
body.ap select:focus-visible,
body.ap textarea:focus-visible{
  outline:2px solid var(--ap-focus);
  outline-offset:2px;
}

/* ---- 7. 状态标签:口径① —— 保留语义,收敛为 Apple 系统色 ---- */
body.ap .tag.ok,   body.ap .ctag.pure{ background:var(--ap-green-tint);  color:var(--ap-green-text); }
body.ap .tag.no{                       background:var(--ap-red-tint);    color:var(--ap-red-text); }
body.ap .tag.wait{                     background:var(--ap-orange-tint); color:var(--ap-orange-text); }
body.ap .tag,  body.ap .ctag{ font-weight:600; letter-spacing:var(--ap-ls-cjk); }

/* ---- 8. 数据小方块:原来是绿调,换成中性底 + 蓝数值 ---- */
body.ap .res .box{
  background:var(--ap-bg);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--ap-r-2);
}
body.ap .res .v{ color:var(--ap-blue); font-variant-numeric:tabular-nums; }
body.ap .res .k{ color:var(--ap-text-3); }

/* ---- 9. 分段按钮 / 小按钮(底色已随 --accent 自动变蓝) ---- */
body.ap .sb{ border-radius:var(--ap-r-2); font-weight:400; }
body.ap .sb.on{ font-weight:600; }
body.ap .sb.on.cc{ background:var(--ap-red-text); border-color:var(--ap-red-text); }
body.ap .mini2,
body.ap .cpbtn,
body.ap .stpill{ border-radius:var(--ap-r-1); }

/* ---- 10. 首页模块卡(完整 hero 留到 P3,这里先统一形状) ---- */
body.ap .mod{
  border:none;
  border-radius:var(--ap-r-4);
  background:var(--ap-surface);
  transition:transform .15s ease;
}
body.ap .mod:hover{ transform:translateY(-1px); }
body.ap .mod .nm{ letter-spacing:var(--ap-ls-cjk); }

/* ---- 11. 表格:口径③ 作业区走紧凑值,不吃门面区的 1.47 行高 ---- */
body.ap table{ font-size:var(--ap-fs-xs); line-height:var(--ap-lh-compact); }
body.ap th{
  background:var(--ap-bg);
  color:var(--ap-text-2);
  font-weight:600;
  border-color:rgba(0,0,0,.08);
}
body.ap td{ border-color:rgba(0,0,0,.06); }
body.ap td.num, body.ap th.ctr{ font-variant-numeric:tabular-nums; }

/* ---- 12. 其它 ---- */
body.ap .sp{ background:var(--ap-bg); border:none; border-radius:var(--ap-r-2); }
body.ap .pastez{ border-radius:var(--ap-r-4); border-color:var(--ap-border); }
body.ap .pastez:focus{ border-color:var(--ap-blue); }
body.ap .badge{ background:rgba(0,113,227,.1); color:var(--ap-blue); border-radius:var(--ap-r-1); }
body.ap h1, body.ap h2, body.ap h3{
  font-family:var(--ap-font-display);
  letter-spacing:var(--ap-ls-cjk);
}

/* ==========================================================================
   P1 组件层 · 门面区:门户登录页(2026-07-25)
   --------------------------------------------------------------------------
   全部规则挂在 body.ap-login 作用域下 → 只有登录页受影响,其余 20 个页面不动。
   口径③:登录页属「门面区」,吃 DESIGN.md 全套(大留白 / 大标题 / 柔阴影)。
   口径②:CTA 用 Apple 蓝 #0071e3。口径①:错误提示走状态红,不算强调色。
   ⚠ 标题是中文,letter-spacing 一律 normal(负字距会把中文挤糊)。
   ========================================================================== */

body.ap-login{
  margin:0;
  background:var(--ap-bg);
  color:var(--ap-text);
  font-family:var(--ap-font-text);
  font-size:var(--ap-fs-body);
  line-height:var(--ap-lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.ap-login .wrap{
  max-width:380px;
  margin:0 auto;
  padding:96px 20px 80px;
}

/* ---- 品牌区 ---- */
body.ap-login .ap-brand{ text-align:center; margin-bottom:var(--ap-sp-9); }
body.ap-login .ap-brand img{
  height:80px; width:80px;
  border-radius:var(--ap-r-circle);
  object-fit:cover;
  /* 不加阴影:规范那层阴影带 3px/5px 偏移,落在正圆上会读成"歪的";
     且 logo 是标识不是浮起的物件 */
}
body.ap-login .ap-brand h1{
  font-family:var(--ap-font-display);
  font-size:var(--ap-fs-section);          /* 40px */
  font-weight:600;
  line-height:var(--ap-lh-section);        /* 1.10 —— 规范的紧行高 */
  letter-spacing:var(--ap-ls-cjk);         /* 中文:normal */
  color:var(--ap-text);
  margin:var(--ap-sp-6) 0 0;
}

/* ---- 卡片:规范说卡片不用边框,靠柔阴影托起 ---- */
body.ap-login .card{
  background:var(--ap-surface);
  border:none;
  border-radius:var(--ap-r-4);             /* 12px,规范里矩形元素的上限 */
  box-shadow:var(--ap-shadow-1);           /* 唯一那层柔阴影 */
  padding:var(--ap-sp-9) var(--ap-sp-8) var(--ap-sp-6);
  margin:0;
}

/* ---- 表单 ---- */
body.ap-login .row{ gap:var(--ap-sp-3); }
body.ap-login .row label{
  font-size:var(--ap-fs-micro);            /* 12px */
  font-weight:600;
  color:var(--ap-text-2);
  letter-spacing:var(--ap-ls-cjk);
}
body.ap-login input{
  width:100%;
  padding:11px 13px;
  font-family:inherit;
  font-size:var(--ap-fs-body);             /* 17px:iOS Safari 下不触发自动放大 */
  color:var(--ap-text);
  background:var(--ap-surface);
  border:1px solid var(--ap-border);
  border-radius:var(--ap-r-3);             /* 11px,规范给输入框的档 */
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.ap-login input::placeholder{ color:var(--ap-text-3); }
body.ap-login input:focus{
  outline:none;
  border-color:var(--ap-blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.25);
}

/* ---- 主 CTA:规范 §4 Primary Blue —— 8px 圆角,不是胶囊 ---- */
body.ap-login .btn{
  width:100%;
  height:auto;
  margin-top:var(--ap-sp-6);
  padding:12px 15px;
  font-family:inherit;
  font-size:var(--ap-fs-body);
  font-weight:400;
  color:var(--ap-white);
  background:var(--ap-blue);
  border:1px solid transparent;
  border-radius:var(--ap-r-2);
  cursor:pointer;
  transition:background-color .15s ease;
}
body.ap-login .btn:hover{ background:var(--ap-blue-hover); }
body.ap-login .btn:active{ background:var(--ap-blue-active); }

/* ---- 焦点环:规范要求所有可交互元素统一 2px #0071e3 ---- */
body.ap-login .btn:focus-visible,
body.ap-login input:focus-visible{
  outline:2px solid var(--ap-focus);
  outline-offset:2px;
}

/* ---- 错误提示(状态色,非强调色) ---- */
body.ap-login .hint{
  margin:var(--ap-sp-5) 0 0;
  min-height:1em;      /* 占位给报错文案,别把卡片底部撑空 */
  font-size:var(--ap-fs-sm);
  line-height:var(--ap-lh-tight);
  color:var(--ap-red-text);
  text-align:center;
}

@media (max-width:400px){
  body.ap-login .wrap{ padding-top:64px; }
  body.ap-login .ap-brand h1{ font-size:var(--ap-fs-tile); }  /* 40px → 28px */
}

/* ==========================================================================
   P1 组件层 · 审核台(body.ap.ap-review)
   --------------------------------------------------------------------------
   审核台自己那套 CSS 几乎不用变量(全站只有 1 处 var()),主色硬编码 #2563eb,
   所以只能逐条覆盖。同样只改配色/圆角/焦点,不动任何几何尺寸。
   玻璃导航只加在 header 那一行;下面的筛选/分页/批量条保持浅色 —— BD 全天
   盯着这些控件,压深会伤可读性(口径③:作业区不吃门面区那套)。
   ========================================================================== */

body.ap-review{ background:var(--ap-bg); color:var(--ap-text); }
body.ap-review .wrap{ box-shadow:0 0 0 1px rgba(0,0,0,.06); }

/* ---- 顶部标题行:玻璃导航,与门户顶栏观感统一 ---- */
body.ap-review header{
  background:var(--ap-nav-bg);
  -webkit-backdrop-filter:var(--ap-nav-blur);
  backdrop-filter:var(--ap-nav-blur);
  border-bottom:none;
  color:var(--ap-on-dark);
}
body.ap-review header h1{ color:var(--ap-on-dark); font-family:var(--ap-font-display); }
body.ap-review header .pill{ background:rgba(255,255,255,.16); color:var(--ap-on-dark); }
body.ap-review header .lo{ color:var(--ap-on-dark); opacity:.86; }
body.ap-review header .lo:hover{ opacity:1; }
/* .pill 的三个语义态(黄/绿/红)本身就是浅底深字,压在深色条上仍然清晰,保留不动 */

/* ---- 筛选 / 分页 / 批量:保持浅色,只换主色与圆角 ---- */
body.ap-review .filters,
body.ap-review .pager,
body.ap-review .batch{ background:var(--ap-surface); }
body.ap-review .filters input,
body.ap-review .filters select,
body.ap-review .pager button,
body.ap-review .pager select,
body.ap-review .filters button{
  border-radius:var(--ap-r-2);
  border-color:var(--ap-border);
  font-family:inherit;
}
body.ap-review .filters input:focus,
body.ap-review .filters select:focus{
  border-color:var(--ap-blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.22);
}
body.ap-review .filters button.apply{
  background:var(--ap-blue);
  border-color:var(--ap-blue);
  font-weight:400;
}
body.ap-review .filters button.apply:hover{ background:var(--ap-blue-hover); border-color:var(--ap-blue-hover); }
body.ap-review .batch button{ border-radius:var(--ap-r-2); font-weight:400; }
body.ap-review .bpass{ background:var(--ap-green-text); }   /* 状态语义色:通过 */
body.ap-review .brej{ background:var(--ap-red-text); }      /* 状态语义色:拒绝 */

/* ---- 表格 ---- */
body.ap-review th{ background:var(--ap-bg); color:var(--ap-text-2); }
body.ap-review th,
body.ap-review td{ border-bottom-color:rgba(0,0,0,.06); }
body.ap-review tbody tr:nth-child(even){ background:#fbfbfd; }
body.ap-review tbody tr:hover{ background:rgba(0,113,227,.06); }
body.ap-review td.cr a{ color:var(--ap-link); }
body.ap-review th.sortable:hover{ color:var(--ap-blue); }
body.ap-review th.sorted-asc i::after,
body.ap-review th.sorted-desc i::after{ color:var(--ap-blue); }
body.ap-review td.shop,
body.ap-review td.act{ border-left-color:rgba(0,0,0,.06); }

/* ---- 行内小徽章:收敛到 Apple 系统色(口径①) ---- */
body.ap-review .xb{ border-radius:var(--ap-r-1); }
body.ap-review .xn,
body.ap-review .xd-green{ background:var(--ap-green-tint);  color:var(--ap-green-text);  border-color:rgba(36,138,61,.22); }
body.ap-review .xd-yellow,
body.ap-review .xc{      background:var(--ap-orange-tint); color:var(--ap-orange-text); border-color:rgba(178,80,0,.22); }
body.ap-review .xd-red{  background:var(--ap-red-tint);    color:var(--ap-red-text);    border-color:rgba(215,0,21,.22); }
body.ap-review .xf{      background:rgba(0,113,227,.1);    color:var(--ap-blue);        border-color:rgba(0,113,227,.22); }
body.ap-review .xh{      background:var(--ap-neutral-tint);color:var(--ap-neutral-text);border-color:rgba(0,0,0,.08); }

/* ---- 逐行标记按钮 ---- */
body.ap-review .mk{ border-radius:var(--ap-r-1); border-color:var(--ap-border); }
body.ap-review .mk1.on{ background:var(--ap-green-text); border-color:var(--ap-green-text); }
body.ap-review .mk2.on{ background:var(--ap-blue);       border-color:var(--ap-blue); }
body.ap-review .mk3.on{ background:var(--ap-red-text);   border-color:var(--ap-red-text); }

/* ---- 焦点环 ---- */
body.ap-review button:focus-visible,
body.ap-review a:focus-visible,
body.ap-review input:focus-visible,
body.ap-review select:focus-visible{
  outline:2px solid var(--ap-focus);
  outline-offset:2px;
}

/* ==========================================================================
   P3 门面区 · 门户首页(body.ap 内的 .ap-home 容器)
   --------------------------------------------------------------------------
   判断:**不做规范里 56px 全屏 hero**。首页有 20 个模块卡,「每屏一个产品」
   那套会白白吃掉一屏,伤的是每天要点进去干活的人。
   取规范的字号阶梯 + 留白节奏,不取它的全屏分幕。
   ========================================================================== */

body.ap .ap-home{ padding-top:var(--ap-sp-9); }

body.ap .ap-home h1{
  font-family:var(--ap-font-display);
  font-size:var(--ap-fs-section);        /* 40px */
  font-weight:600;
  line-height:var(--ap-lh-section);      /* 1.10 */
  letter-spacing:var(--ap-ls-cjk);       /* 中文 normal */
  color:var(--ap-text);
  margin:0 0 var(--ap-sp-10);
}

/* 分组小标题:原来是 12px/700/+0.5px 字距,规范要求收紧不放开 */
body.ap .ap-home .sech{
  margin:var(--ap-sp-10) 0 var(--ap-sp-5);
  font-size:var(--ap-fs-micro);
  font-weight:600;
  letter-spacing:var(--ap-ls-cjk);
  color:var(--ap-text-3);
}
body.ap .ap-home .sech:first-of-type{ margin-top:0; }

/* 模块卡:门面区给足呼吸 */
body.ap .ap-home .mods{ gap:var(--ap-sp-5); }
body.ap .ap-home .mod{ padding:var(--ap-sp-6) var(--ap-sp-7); }
body.ap .ap-home .mod .nm{ font-size:var(--ap-fs-sm); }
body.ap .ap-home .mod .ds{ color:var(--ap-text-3); line-height:var(--ap-lh-tight); }

@media (max-width:640px){
  body.ap .ap-home h1{ font-size:var(--ap-fs-tile); }   /* 40px → 28px */
}

/* ==========================================================================
   P4 响应式(2026-07-25)
   --------------------------------------------------------------------------
   断点取 DESIGN.md §8 里对本项目有意义的三档:640(手机) / 834(平板) / 1024。
   ⚠ 这里**允许改几何**——窄屏改布局正是响应式的本职;但全部关在 @media 内,
     宽屏行为一字不变,P1 "全局层不动几何" 的约束仍然成立。
   ⚠ 不做深色模式:门户尚有 371 处 inline style 按浅色写死(白底/深字直接写在
     属性里),挂 prefers-color-scheme 只会得到半黑半白的破页面。要做得先清 inline。
   ========================================================================== */

/* ---- 平板:四联数据方块先降到两列(规范:3列→2列→单列) ---- */
@media (max-width:834px){
  body.ap .res{ grid-template-columns:repeat(2,1fr); }
}

/* ---- 手机 ---- */
@media (max-width:640px){
  body.ap .wrap{ padding-left:14px; padding-right:14px; }

  /* 表单双列 → 单列 */
  body.ap .grid,
  body.ap .dz{ grid-template-columns:1fr; }

  /* 按钮:文字宁可换行排布,也不要在按钮内部被挤断
     (375px 下实测"主操作"会断成"主操/作") */
  body.ap .btn,
  body.ap .sb,
  body.ap .mini2,
  body.ap .stpill,
  body.ap .cpbtn{ white-space:nowrap; }
  body.ap .sbrow{ flex-wrap:wrap; }

  /* 顶栏:名字长时允许折行,别把链接挤出去 */
  body.ap:not(.ap-review) .top{ flex-wrap:wrap; row-gap:4px; }

  /* 首页标题已在 P3 的 640 断点降到 28px,这里只收留白 */
  body.ap .ap-home{ padding-top:var(--ap-sp-6); }
  body.ap .ap-home h1{ margin-bottom:var(--ap-sp-8); }
  body.ap .ap-home .sech{ margin-top:var(--ap-sp-9); }
}

/* ---- 密集表格:窄屏改为容器内横向滚动,而不是把列挤成一团 ----
   用 :has() 精确命中"装着表格的卡片"。
   ⚠ 必须用 @supports 护住:body.ap 有 overflow-x:clip,若 :has 不被支持而
     min-width 生效,超出的列会被**裁掉**(比挤在一起更糟)。没有 :has 就退回原样。 */
@supports selector(:has(*)){
  @media (max-width:834px){
    body.ap .card:has(> table),
    body.ap .card:has(> div > table){
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    body.ap .card:has(> table) > table,
    body.ap .card:has(> div > table) table{ min-width:560px; }
  }
}