/* ==========================================================================
   sell.huihe.co 公共页（关于我们 / 产品列表 / 登录族）—— Apple 外壳补丁
   ==========================================================================
   2026-09-15：sell 公共页按 **huihe.co 的 Apple 设计系统**重做；同日第二轮
   按用户「整个页面重写，拼凑出来的效果不好」把**首页正文的骨架**重排了一遍
   （逐段换一种排法，见下面各段抬头；文案、栏目数、链接、banner 的渐变与 3D
   动效仍然一个没动）。

   主皮是 /static/simple/css/apple-ds.css（跟 huihe.co 那 21 个视图同一张表，
   `--ap-*` token 挂在 `.ap-page` 上，外壳的 body 就是 `.ap-page`）。
   这个文件装 Apple 那套里**没有对应零件**的几样：

     ① banner 的 3D 动效层 —— 原 about.html 页内 `<style>` 里的
        `.hero-3d-scene` 一整段，**一字节没改**（见下面那段注释）
     ② 热门回收率跑马灯 —— 原来是 Tailwind 的 `animate-marquee` + 一份
        重复的列表（动画走 -50% 无缝循环），Tailwind CDN 撤了就搬到这儿
     ③ 小零件：「开放平台」标签、页脚四列网格、页脚联系栏里不是链接的三行
     ④ 编号步骤栏（`.sp-steps`）—— Apple 的 `.ap-cols` 是三栏，这里要四栏
     ⑥ 白底瓷砖上那六张卡自己补的一圈发丝线（`.sp-cards--white`）
     ⑦ 窄窗口下顶栏不许塌（PC-only 站，没有汉堡那套）
     ⑧ **空段**（原「商户中心搜索区字阶 13px」六条，2026-09-15 晚已整体
        挪进主皮 ⑰ 的 `.ap-filter` 一段 —— 会员中心七页也吃同一个规格，
        写两处会漂；09-16 晚那一族又回到主皮的 caption 令牌（14px）。
        详见文末 ⑧ 段的说明。留个坑位免得编号错位。

   ⚠️ 本文件**不许出现彩色字面量**：颜色一律走 apple-ds.css 的 `--ap-*`。
      唯一的例外是 ①，那是搬过来的既有动效、用户点名要保留的。
   ⚠️ `public/static/` 整目录 gitignore，本文件和 apple-ds.css 都没有版本控制
      兜底 —— 改版前的两份模板逐字节存在
      docs/ds-backups/sell-20260915/public/sell/{index/about.html,layout/home.html}
      （md5 dfbb24107e97eb089756b2d54a6b2677 / d66253c0f67a97cb9c5f6a2dba42e3a9）。
   ========================================================================== */

/* ==========================================================================
   ① banner 的 3D 动效层
   ==========================================================================
   用户要求「banner 的背景都保留」——所以这一段是**原样搬过来的**，
   连那几处 rgba(48,115,229,…) 的老蓝都没换算成 Action Blue：它是压在
   深色渐变上的半透明线框（0.03–0.25 的透明度），换成 #0066cc 肉眼分不出来，
   动它只是徒增风险。类名也照旧（hero- / geo- 前缀在 sell 的 index.css 里
   零命中，不会撞）。
   ⚠️ 只有一处改动：外面那层从 `.hero-3d-scene` 改名成 `.sp-hero__bg`，
      并把定位留给它自己（原来靠 Tailwind 的 absolute/inset-0 顶）。
   ========================================================================== */
.sp-hero { position: relative; overflow: hidden; }
.sp-hero__bg {
    position: absolute; inset: 0;
    perspective: 800px;
    perspective-origin: center;
    overflow: hidden;
    pointer-events: none;
}
/* banner 里那行高亮（「聚合API接口专业服务商」）：深色面上走 Sky Link Blue，
   跟 apple-ds.css 的 --ap-primary-on-dark 是同一支 —— Action Blue 在深色面上
   会糊掉，规范里专门给了这档。 */
.sp-hero__hl { color: var(--ap-primary-on-dark); }

/* ---- 点阵网格背景 ---- */
.hero-dot-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(48,115,229,.18) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: dotScroll 20s linear infinite;
    opacity: .6;
}
@keyframes dotScroll {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* ===== 通用几何体容器 ===== */
.hero-geo {
    position: absolute;
    transform-style: preserve-3d;
}

/* ===== 3D 立方体 ===== */
.hero-geo-cube {
    width: 60px; height: 60px;
}
.hero-geo-cube .geo-face {
    position: absolute;
    width: 60px; height: 60px;
    border: 1px solid rgba(48,115,229,.25);
    background: rgba(48,115,229,.06);
    backdrop-filter: blur(1px);
}
.hero-geo-cube .geo-front  { transform: translateZ( 30px); }
.hero-geo-cube .geo-back   { transform: translateZ(-30px) rotateY(180deg); }
.hero-geo-cube .geo-right  { transform: translateX( 30px) rotateY( 90deg); }
.hero-geo-cube .geo-left   { transform: translateX(-30px) rotateY(-90deg); }
.hero-geo-cube .geo-top    { transform: translateY(-30px) rotateX( 90deg); }
.hero-geo-cube .geo-bottom { transform: translateY( 30px) rotateX(-90deg); }

/* ===== 3D 环 ===== */
.hero-geo-ring {
    width: 80px; height: 80px;
}
.geo-ring-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(48,115,229,.2);
    background: radial-gradient(circle, transparent 55%, rgba(48,115,229,.08) 70%, transparent 85%);
    transform: rotateX(60deg);
    animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
    0%,100% { border-color: rgba(48,115,229,.2); box-shadow: 0 0 0 rgba(48,115,229,0); }
    50%     { border-color: rgba(48,115,229,.45); box-shadow: 0 0 20px rgba(48,115,229,.15); }
}

/* ===== 3D 金字塔 ===== */
.hero-geo-pyramid {
    width: 50px; height: 50px;
}
.geo-pyramid-wrap {
    position: relative;
    width: 0; height: 0;
    transform-style: preserve-3d;
}
.geo-pyramid-face {
    position: absolute;
    border-bottom: 50px solid rgba(48,115,229,.12);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    transform-origin: top center;
}
.geo-pyramid-front  { transform: rotateX(30deg); }
.geo-pyramid-right  { transform: rotateX(30deg) rotateY(90deg); }
.geo-pyramid-left   { transform: rotateX(30deg) rotateY(-90deg); }
.geo-pyramid-bottom { transform: rotateX(90deg); border-bottom: 50px solid rgba(48,115,229,.18); }

/* ---- 几何体位置 & 动画 ---- */
.hero-geo-1 { /* 左上立方体 */
    top: 18%; left: 12%;
    animation: floatCube1 8s ease-in-out infinite;
}
@keyframes floatCube1 {
    0%,100% { transform: translate(0,0) rotateX(15deg) rotateY(25deg) rotateZ(0deg); }
    25%     { transform: translate(12px,-18px) rotateX(25deg) rotateY(35deg) rotateZ(5deg); }
    50%     { transform: translate(6px,-8px) rotateX(10deg) rotateY(45deg) rotateZ(3deg); }
    75%     { transform: translate(-6px,-22px) rotateX(30deg) rotateY(20deg) rotateZ(-3deg); }
}

.hero-geo-2 { /* 右上环 */
    top: 25%; right: 10%;
    animation: floatRing2 10s ease-in-out infinite;
}
@keyframes floatRing2 {
    0%,100% { transform: translate(0,0) rotateX(0deg) rotateY(0deg); }
    33%     { transform: translate(-16px,12px) rotateX(10deg) rotateY(20deg); }
    66%     { transform: translate(8px,-14px) rotateX(-8deg) rotateY(-15deg); }
}

.hero-geo-3 { /* 左下金字塔 */
    bottom: 28%; left: 18%;
    animation: floatPyramid 12s ease-in-out infinite;
}
@keyframes floatPyramid {
    0%,100% { transform: translate(0,0) rotateY(0deg) rotateX(0deg); }
    25%     { transform: translate(20px,8px) rotateY(90deg) rotateX(15deg); }
    50%     { transform: translate(10px,-12px) rotateY(180deg) rotateX(5deg); }
    75%     { transform: translate(-8px,4px) rotateY(270deg) rotateX(20deg); }
}

.hero-geo-4 { /* 右下立方体 */
    bottom: 20%; right: 16%;
    animation: floatCube4 9s ease-in-out infinite;
}
.hero-geo-4 .geo-face {
    border-color: rgba(48,115,229,.1);
    background: rgba(48,115,229,.03);
}
@keyframes floatCube4 {
    0%,100% { transform: translate(0,0) rotateX(20deg) rotateY(-20deg) rotateZ(2deg); }
    25%     { transform: translate(-14px,-10px) rotateX(35deg) rotateY(-30deg) rotateZ(-5deg); }
    50%     { transform: translate(-8px,-20px) rotateX(8deg) rotateY(-40deg) rotateZ(1deg); }
    75%     { transform: translate(10px,-8px) rotateX(28deg) rotateY(-15deg) rotateZ(4deg); }
}

.hero-geo-5 { /* 中下环 */
    bottom: 10%; left: 45%;
    animation: floatRing5 11s ease-in-out infinite;
}
.geo-ring-inner {
    border-color: rgba(48,115,229,.12);
    background: radial-gradient(circle, transparent 55%, rgba(48,115,229,.04) 70%, transparent 85%);
}
@keyframes floatRing5 {
    0%,100% { transform: translate(0,0) rotateX(0deg) rotateY(0deg); }
    50%     { transform: translate(-10px,10px) rotateX(15deg) rotateY(-20deg); }
}

/* ---- 光晕 ---- */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .06;
    pointer-events: none;
}
.hero-glow-1 {
    width: 300px; height: 300px;
    background: #3073e5;
    top: -10%; left: -5%;
    animation: glowDrift1 14s ease-in-out infinite;
}
.hero-glow-2 {
    width: 250px; height: 250px;
    background: #4a8eff;
    bottom: -15%; right: -8%;
    animation: glowDrift2 16s ease-in-out infinite;
}
@keyframes glowDrift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,30px) scale(1.2); }
    66%     { transform: translate(-20px,-20px) scale(.85); }
}
@keyframes glowDrift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(-30px,-40px) scale(1.3); }
    66%     { transform: translate(20px,15px) scale(.9); }
}

/* 手机端：几何体收进画面里，最小的那个环（5 号）直接撤掉 */
@media (max-width: 768px) {
    .hero-geo-1 { top: 10%; left: 5%; }
    .hero-geo-2 { top: 15%; right: 5%; }
    .hero-geo-3 { bottom: 35%; left: 8%; }
    .hero-geo-4 { bottom: 25%; right: 8%; }
    .hero-geo-5 { display: none; }
    .hero-glow-1 { width: 180px; height: 180px; }
    .hero-glow-2 { width: 150px; height: 150px; }
}

/* ==========================================================================
   ② 热门回收率跑马灯
   ==========================================================================
   原来这一段是 Tailwind 的 `bg-gray-100 border-y py-4` + `animate-marquee`
   + `hover:[animation-play-state:paused]`，页内 `<style>` 里只有那两条
   keyframes/`.animate-marquee`。Tailwind CDN 撤掉后整段落到这里：
   底色换成羊皮纸、上下两条发丝线（跟 Apple 的分隔口径一致 —— 浅色块之间
   靠**底色变化 + 发丝线**分界，不用投影不用圆角）。

   ⚠️ 两份列表**必须逐字相同**、并且 track 必须在 `width: max-content` 下
      跑 -50% —— 这是无缝循环的全部秘密（第一份走完正好接上第二份）。
      少一份、或者给 track 写死宽度，都会在接缝处跳一下。
   ⚠️ 悬停暂停是原来的功能（`hover:[animation-play-state:paused]`），
      保留。
   ⚠️ **时长 90s 不是随手写的**（2026-09-15 用户报「banner 下方的数据滚动太快了」）：
      位移速度 = 半条轨道的宽度 ÷ 时长，而 `-50%` 是按元素**自身**宽度算的 ——
      旧版没写 `width: max-content`，track 的宽度就是**父块（视口）宽**，所以它
      30s 只挪了视口的一半（≈1280/2=640px，约 21px/s），是「挪一段再往回跳」
      的假循环；这里换成 max-content 之后，半条轨道 ≈ 20 张卡 × ~190px ≈
      3900px，同样 30s 就是 ~130px/s —— 快了六倍，用户一眼就看出来了。
      90s 把速度压回 ~43px/s：比旧版（假循环）略快、比换皮第一版慢三分之二，
      滚起来是一屏慢慢过一格的感觉。要再调就调这个数（时长翻倍＝速度减半）。 */
.sp-marquee {
    background: var(--ap-parchment);
    border-top: 1px solid var(--ap-hairline);
    border-bottom: 1px solid var(--ap-hairline);
    padding-block: 14px;
    overflow: hidden;
}
.sp-marquee__track {
    display: flex; width: max-content;
    animation: spMarquee 90s linear infinite;
}
.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }
@keyframes spMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.sp-marquee__group {
    display: flex; align-items: center;
    gap: var(--ap-xxl);
    padding-inline: var(--ap-lg);
}
.sp-marquee__i {
    display: inline-flex; align-items: baseline; gap: var(--ap-xs);
    white-space: nowrap;
}
.sp-marquee__i span {
    font: var(--ap-f-caption-str); letter-spacing: var(--ap-track-caption);
    color: var(--ap-ink);
}
/* 费率是「钱」，走全站唯一的绿色档（--ap-money）；tabular-nums 让一串
   数字在小数点上对齐 —— 跑马灯里十几个数并排滚动时看得最清楚。 */
.sp-marquee__i b {
    font: var(--ap-f-caption-str); letter-spacing: var(--ap-track-caption);
    color: var(--ap-money); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ③ 小零件
   ========================================================================== */

/* 「开放平台」小标签：跟 logo 并排。原来是 #1e1e1e 底白字 12px/4px 圆角，
   这里只把颜色换成 token（--ap-ink 就是那支近黑），形状照旧 —— 顶栏是浅磨砂
   条，别处用不到这种小胶标。 */
.sp-tag {
    background: var(--ap-ink); color: var(--ap-on-dark);
    font: var(--ap-f-fine); font-weight: 600; letter-spacing: var(--ap-track-fine);
    line-height: 1; padding: 4px 8px;
    border-radius: var(--ap-r-xs);
    white-space: nowrap;
}
/* 胶标跟 logo 之间那 8px：`.ap-snav__logo` 是给 huihe.co 的单图 logo 定的，
   没有 gap —— 那边的 logo 自带留白。sell 这枚是「图 + 胶标」并排，得自己补。 */
.ap-snav__logo .sp-tag { margin-left: 8px; }

/* 顶栏右端那串客服电话：`.ap-snav__end a` 管的是链接，这里是纯文本。
   2026-09-15 用户要求「sell 顶部菜单也 15px」：菜单项本身（`.ap-snav__links a`）
   吃的是 apple-ds.css 那条，sell 同一个文件，早就跟着变了；**这一条是全条里
   唯一还停在 14px 的**（`--ap-f-btn-util`），所以在这里补到 15 让整条齐平；
   同日用户看过菜单觉得 15 偏大、点名 14.5，这里**跟着主皮一起落到 14.5**
   （`.ap-snav__links a` 在 apple-ds.css，两边必须是同一个值，否则整条又不齐）。
   同样只覆盖 font-size，不动那个跟按钮共用的 token。 */
.sp-snav__tel {
    display: inline-flex; align-items: center; gap: 6px;
    font: var(--ap-f-btn-util); letter-spacing: var(--ap-track-caption);
    font-size: 14.5px;
    color: var(--ap-ink-80);
}
.sp-snav__tel .material-symbols-outlined { font-size: 16px; }

/* 页脚四列：品牌 + 三栏。Apple 原版是 `1.6fr 1fr 1fr 1fr auto`（五列，
   最后一列是二维码），sell 这页没有二维码那一栏，是四列 —— 单独派一支，
   别去改 apple-ds.css 里那条（huihe.co 六个页脚都吃它）。
   2026-09-15「页脚优化一下」把 `1.6fr 1fr 1fr 1.4fr` 改成三等宽：右端那栏
   （联系我们）原来比左边两栏还宽 40%，而里面只有电话/邮箱/服务时间三行短字，
   宽出来的一截全是空气；三等宽之后栏与栏的间距看着才是一致的。
   品牌那栏保持宽一档（1.5fr ≈ 416px）—— logo 加一行简介比右边几栏的短链接
   占地方。 */
.sp-fcols { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 1068px) { .sp-fcols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 834px)  { .sp-fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .sp-fcols { grid-template-columns: minmax(0, 1fr); } }

/* 页脚底部内距：`.ap-footer` 本体是 `padding-block: 64px`（上下对称）。
   2026-09-15 用户「icp信息文字的下方边距小点」→ **只收下边**到 --ap-xl(32)，
   上边那 64 一个字没动（那是「三栏 ↔ 备案行」之间的呼吸，不是这条）。
   ⚠️ 只挂 sell 这个壳（`<footer class="ap-footer sp-footer">`）：主站那 21 个视图
      的页脚吃 `.ap-footer` 本体，别把这条写进 apple-ds.css。跟 `.sp-fcols` 同一个
      套路 —— 主体不动，sell 这一版另派一支。 */
.sp-footer { padding-block: 64px var(--ap-xl); }

/* 「联系我们」那一栏里不是链接的行（现在就剩电话一行）。
   字号行高跟紧挨着的 `.ap-footer__links a` 对齐（14px / 2.41）——
   同一栏里两种字号会看出主次颠倒。 */
.sp-meta li {
    /* 2026-09-15 用户「页脚也统一 15px」：跟主皮 `.ap-footer__links a` 同步
       14 → 15；同日主皮那一档再落到 14.5，这里**跟着一起 14.5**（同一档
       密集链栏，两边不同号就会看出车）。行高 2.41 照旧。 */
    font: 400 14.5px/2.41 var(--ap-ui);
    letter-spacing: var(--ap-track-body);
    color: var(--ap-ink-80);
}

/* 「联系我们」栏里的企业微信二维码（2026-09-15 用户要求，替换掉原来的邮箱和
   服务时间两行）。**直接用主皮本体的 `.ap-footer__qr`** —— 96×96、
   `object-fit:contain`、题注 caption/ink-48 居中，跟 huihe.co 页脚那两枚
   公众号/小程序码同一规格（`.ap-footer__qr` 是那条 flex 行 + 单枚 figure，
   在这栏里 flex 只放一枚 = 左对齐）。这里只补一行上边距：上面那串 li 的
   line-height 2.41 末尾留的那点空不够，不补二维码会贴住电话那行。 */
.sp-fqr { margin-top: var(--ap-xs); }

/* ==========================================================================
   ④ 流程那四栏（`API对接流程`）：编号步骤栏
   ==========================================================================
   四栏，**每栏顶上一条发丝线、线上一个序号**（01–04），线下面才是标题和说明。
   Apple 的 `.ap-cols` 是三栏、序号是 `.ap-col__n` 那一支（首页「三步极速回收」），
   这里是四栏 + 同样的序号口径，所以自己排一套，别去改 `.ap-cols`。
   ⚠️ 为什么用序号而不是图标：流程本身就是有序的，序号是它自带的信息；而且
      第一版那四颗图标盘跟下面两节的六项图标是同一副面孔，三段连着一模一样的
      「图标 + 标题 + 一句话」，整页就拼凑起来了（用户 2026-09-15「整个页面重写，
      拼凑出来的效果不好」）。原版那四颗是 person_add / description / api /
      rocket_launch（大蓝 `text-primary`，换皮时改成了 `.ap-cico` 图标盘）——
      要还原就把序号那一行换成图标盘，`.ap-cico` 的写法跟 ⑤ 那六张卡一样。
   ⚠️ 序号走 `--ap-f-caption` + tabular-nums：`.ap-col__n` 就是这一档。 */
.sp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ap-xxl) var(--ap-lg);
}
.sp-steps > div { border-top: 1px solid var(--ap-hairline); padding-top: var(--ap-lg); }
.sp-steps__n {
    display: block;
    font: var(--ap-f-caption); letter-spacing: var(--ap-track-caption);
    color: var(--ap-ink-48); font-variant-numeric: tabular-nums;
}
.sp-steps h3 { margin-top: var(--ap-sm); font: var(--ap-f-tagline); letter-spacing: var(--ap-track-tagline); }
.sp-steps p {
    margin-top: var(--ap-xs);
    font: var(--ap-f-body); letter-spacing: var(--ap-track-body);
    color: var(--ap-ink-48);
}
@media (max-width: 834px) { .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--ap-xl); } }

/* ==========================================================================
   ④b「我们的服务」那六项：**本段已撤，只留记录**
   ==========================================================================
   2026-09-15 用户点名「我们的服务改成和我们的优势一样的样式」→ 这一节从「两栏
   清单」换成**和 ⑤ 逐件同款的卡片网格**（`.ap-coop sp-cards--white` + 六张
   `.ap-card`），样式全部来自主皮本体，本文件**一条规则都不需要**，所以原来的
   `.sp-svc` 整段删了（连 `.sp-svc .ap-card` 那条旧覆盖一起）。
   当初做成清单的理由是「六项说明都只有一行，包成卡片就是六个空盒子」，怕跟
   ⑤ 撞成两堵一样的墙 —— 用户看过成品后要的就是那堵墙（随后连底色也点名改成
   白的），所以现在 ④⑤ **同型同底**，隔开它们只剩块标题和内容。
   ⚠️ 要退回清单：`.sp-svc` 那套规则在 docs/ds-backups 的那份 public-apple.css
      里没有（它是后来加的），git 里也没有（public/static/ 整个目录 gitignore）
      —— 真正的写法见本文件 2026-09-15 那一版的历史：grid 两栏、`li` 里
      `grid-template-columns: auto minmax(0,1fr)`、图标盘 `grid-row: 1 / span 2`、
      行上一条 `border-top` 发丝线。或者直接从 about.html 的回退版（
      docs/ds-backups/sell-20260915/public/sell/index/about.html）里没有它 ——
      那份是换皮前的旧结构（Tailwind），也没有。**结论：要退回清单得重写一遍**，
      所以这里把关键取值记在上面这一句里。

/* ==========================================================================
   ④c （已撤）数据带 —— 现在直接用主皮的零件，本文件不再插手
   ==========================================================================
   2026-09-15 用户两轮点名这节：「页脚上方一个卡片的 4 个数据居中横着排」
   （撤掉 `.ap-split` 左右并置 + `.sp-stats--2` 那个 2×2 左对齐变体，改回
   `.ap-stats` 本体 —— `repeat(4, minmax(0,1fr))` + `.ap-stat{text-align:center}`，
   要的就是这个），再「白色背景」（`--ap-tile--dark2` → `--ap-tile--light`）。
   白底上说明字走 `--ap-ink-48` 是正常一档，那条给深色面提亮的
   `.sp-stats--dark .ap-stat span` 也随之删掉 —— 这段现在**一条规则都不剩**。
   ⚠️ 留在文件里是为了记住那个坑：深色面上 `.ap-tile--dark2 .ap-stat span`
      给的是 `--ap-ink-48`（#7a7a7a 压 #2a2a2c 只有 ~2.2:1，等于看不见），
      要用 `--ap-muted-dark` 覆盖；覆盖选择器 (0,2,1) 跟 apple-ds.css 那条
      **打平**，只能靠源码顺序（本文件在后）。哪节再改回深色，把这条加回来。 */

/* ==========================================================================
   ⑤ banner 里那颗胶囊 / 收口深色条
   ==========================================================================
   Apple 的 `.ap-btn--pill` 就是 Action Blue 实心胶囊，深色瓷砖上也用它
   （首页「企业级 API」那段的「查看接口文档」就是同一颗）—— 所以这里不另造。
   只补两件事：banner 内容层要压在 3D 动效层**上面**；按钮里那颗箭头图标的
   间距（`.ap-btn` 是 justify-content:center 的 inline-flex，没有 gap）。 */
.sp-hero .ap-container { position: relative; z-index: 1; }
.sp-hero .ap-btn .material-symbols-outlined { font-size: 18px; margin-left: 4px; }

/* ==========================================================================
   ⑥ 白底瓷砖上的卡要那圈发丝线
   ==========================================================================
   apple-ds.css 卡片皮那段的判断口径：**卡下面是羊皮纸底就不画线**（白卡自身
   就是一块），**白底瓷砖上的卡没有线就没有边界**。`.ap-card` 本体已经不画线
   （2026-09-15 用户点名「全站卡片都去掉框线」），而「我们的优势」那一节是
   白瓷砖 —— 所以那六张卡自己补一条，跟 `.ap-ucard`（首页更多卡种）同一个
   规格。⚠️ 只作用于本页的两个网格容器，别把它的射程放到 `.ap-card` 上。
   2026-09-15 起「我们的服务」（④）也挂了这个类名 —— 它同日先从清单换成卡片
   网格、再被点名「改成白色背景」，**现在④⑤ 都是白瓷砖上的六张卡**，这一圈发丝线
   对两节都是必需的（白卡压白底，没线就没边界）。 */
/* ④ 原来挂过羊皮纸底（`ap-tile--parchment`），那圈 #e0e0e0 压 #f5f5f7 上几乎
   看不见 —— 现在底改白了，线才真正起作用。 */
.sp-cards--white .ap-card { border: 1px solid var(--ap-hairline); }

/* ==========================================================================
   ⑦ 顶栏在窄窗口下不许塌
   ==========================================================================
   Apple 那套在 ≤834px 把 `.ap-snav__links` 和 `.ap-snav__end` 一起 `display:none`
   收进汉堡抽屉（`.ap-burger` + `.ap-sheet`，两件都写在 apple-ds.css 里）。
   sell 公共站是 **PC-only**：index.css 里 `body{min-width:1280px;overflow-x:auto}`
   （所以桌面端本来就是横向滚动，没有移动版），而 sell 这个壳里**既没有汉堡
   也没有抽屉** —— 照抄 Apple 的断点，窗口一拉到 834 以下菜单和账号钮就整块
   消失、顶栏只剩一个 logo，那是坏掉而不是「响应式」。
   所以这里反向覆盖回 `display:flex`。
   ⚠️ 靠**源码顺序**取胜：两条都是 (0,1,0)，public-apple.css 在 apple-ds.css
      之后加载，本段又在文件末尾 —— 别把它挪到 apple-ds.css 之前去。 */
@media (max-width: 834px) {
    .ap-snav__links, .ap-snav__end { display: flex; }
    .ap-snav__inner { gap: var(--ap-sm); }
}

/* ==========================================================================
   ⑧ 商户中心搜索区字阶 —— **2026-09-15 晚已整体挪走，规则现在在主皮 ⑰**
   ==========================================================================
   这里原先有六条 `font: 400 13px/1.43` 的覆盖（`.ap-filter__k` /
   `.ap-daterange input` / `.ap-daterange span` / `.ap-sbox input, select` /
   `.ap-filter .ap-sel__trig` / `.ap-filter__acts .ap-btn--sm`），来历是
   用户先点名的「结算记录、订单列表、产品列表、财务明细 4 个搜索区字体
   大一号」→ 最终定 13px。

   随即用户又一句「huihe.co 个人中心有搜索区的页面也改成13px」—— 会员中心那
   七页（`cash/cashrecords`、`member/api_card`、`member/api_moneylog`、
   `member/api_order_list`、`sellcard/order`、`sellcard/selldetailinfo`、
   `sellcard/statistics`）**不吃这张表**（它们只挂 apple-ds.css，没有自己的
   补丁表），同一个规格写两处就是两份要同步维护的副本，所以**规则整体上提到
   主皮 ⑰ 的 `.ap-filter` 那一段里，本段清空**。**2026-09-16 晚用户又一句
   「表头13px 正文14px 搜索区文字14px，改全站」→ 主皮那七条从 13px 字面量
   回到 `--ap-f-caption`（14px）；此后这一族**整族吃令牌，没有字面量**，
   改令牌即改全族（但写 font 的地方仍是七处，动的时候七处一起看）。
   会员中心七页 + 商户中心五页同时生效。

   ⚠️ **再改搜索区字号，去改 apple-ds.css ⑰，不要再往这里加回来。**
   ⚠️ 三个坑跟着规则一起搬进主皮注释了：`font:` 简写会重置
      `font-variant-numeric`（tabular-nums 必须写在简写之后）、日期中间那个
      破折号原来在默默继承 `.ap-page` 的 17px、动作键会从 28px 长到约 34.6px
      （**别压 padding 按回 28**）。
   ⚠️ `.ap-cat`（快捷日期胶囊「今天 / 昨天 / 近7天 / 近30天」）**始终是主皮原档
      14px**（09-15/09-16 两版都跟用户交代过）—— 09-16 晚搜索区回到 14px 之后
      两者同档，本来就该齐平，别再去动它。
   ⚠️ 本段清空**没有单独回退的必要**：把主皮那七条改回 `--ap-f-fine` 就等于
      两边一起退回原样。 */

/* （本段已无规则 —— 见上面说明。） */