/* ============================================================
   CASE · 4 款移动端 App（apps.html 专属，叠在 case-v4.css 之上）
   结构：hero → 章节导航 → 4 个「章节」(.ch)，每章一套皮肤（CSS 变量）+ 同一骨架：
   章首 (.ch__hero) → 核心页面 (.key) → 任务流 (.flow-s) → 全部界面 (.wall)
   ============================================================ */

/* ---------- 手机框：本人提供的正面样机 frame.webp（1422×2910，屏幕区透明、灵动岛已画在机身上），750×1624 截图通用 ----------
   屏幕在机身里的位置由 scripts 量过：left 4.712% top 1.959% width 90.717% height 96.082%，圆角 ≈ 屏宽 12.97%。
   1x 原尺：屏幕 375px ⇒ 机身 --w ≈ 413px */
.ph{position:relative;width:var(--w,220px);max-width:100%;aspect-ratio:1422/2910;filter:drop-shadow(0 26px 40px rgba(8,10,20,.28))}
.ph::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url("assets/work/apps/frame.webp") center/100% 100% no-repeat}
.ph__scr{position:absolute;left:4.712%;top:1.959%;width:90.717%;height:96.082%;border-radius:12.97%/5.98%;overflow:hidden;background:#fff}
.ph__scr img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- 章节容器 + 皮肤 ---------- */
.ch{position:relative;background:var(--bg);color:var(--fg);overflow:hidden}
.ch.sheet{border-radius:0;margin:0;padding:0}
/* 本页没有页脚：底色改成最后一章的浅灰，hero 自带蓝底 */
html,body,.frame{background:#F4F6FB}
.top{margin-bottom:calc(var(--nav-h) * -1)}
/* 本页没有首屏总述，顶栏直接压在 01 章首上，章首顶部补出顶栏高度 */
.ch:first-of-type .ch__hero{padding-top:calc(var(--nav-h) + clamp(40px,5vw,80px))}
#app-pwd.sheet{border-radius:var(--r-frame) var(--r-frame) 0 0}
.ch--pwd{--c1:#2F7CF6;--c2:#7AB1FF;--bg:#EEF3FC;--card:#FFFFFF;--fg:#0A0A0C;--soft:rgba(10,10,12,.62);--line:rgba(47,124,246,.16)}
.ch--sou{--c1:#FFC53D;--c2:#9BE1FF;--bg:linear-gradient(160deg,#2B5BFF 0%,#4F6BFF 55%,#7A4DFF 100%);--card:rgba(255,255,255,.12);--fg:#FFFFFF;--soft:rgba(255,255,255,.74);--line:rgba(255,255,255,.22)}
/* 块对搜题：大面积蓝紫渐变太平，叠天蓝 / 紫两色柔光（交错落在章内）+ 一层很淡的颗粒 */
.ch--sou::before,.ch--sou::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat}
.ch--sou::before{background-image:
  radial-gradient(circle closest-side,rgba(155,225,255,.5),rgba(155,225,255,.22) 32%,rgba(155,225,255,.07) 64%,transparent),
  radial-gradient(circle closest-side,rgba(155,225,255,.42),rgba(155,225,255,.18) 32%,rgba(155,225,255,.06) 64%,transparent),
  radial-gradient(circle closest-side,rgba(155,225,255,.46),rgba(155,225,255,.2) 32%,rgba(155,225,255,.06) 64%,transparent),
  radial-gradient(circle closest-side,rgba(122,77,255,.6),rgba(122,77,255,.28) 32%,rgba(122,77,255,.09) 64%,transparent),
  radial-gradient(circle closest-side,rgba(122,77,255,.55),rgba(122,77,255,.26) 32%,rgba(122,77,255,.08) 64%,transparent),
  radial-gradient(circle closest-side,rgba(122,77,255,.55),rgba(122,77,255,.26) 32%,rgba(122,77,255,.08) 64%,transparent);
  background-size:1400px 1400px,1300px 1300px,1300px 1300px,1500px 1500px,1400px 1400px,1400px 1400px;
  background-position:-70% 4%,165% 36%,-65% 70%,170% 8%,-75% 40%,165% 76%}
/* 网格纹理：72px 细线格，白 5%，不分主次线，克制 */
.ch--sou::after{background-image:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;background-repeat:repeat;background-position:0 0}
.ch--sou>.wrap{z-index:1}
.ch--nba{--c1:#E0233B;--c2:#2A52C9;
  --bg:#0B1230;--card:rgba(255,255,255,.07);--fg:#FFFFFF;--soft:rgba(255,255,255,.7);--line:rgba(255,255,255,.14)}
/* 红蓝光晕：参考 25 作品集 NBA 封面。圆形径向光斑，按章节高度百分比分布、蓝左红右交错，完整落在章内不被裁 */
.ch--nba::before,.ch--nba::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat}
.ch--nba::before{background-image:
  radial-gradient(circle closest-side,rgba(42,110,230,.55),rgba(42,90,210,.28) 30%,rgba(42,82,201,.1) 62%,transparent),
  radial-gradient(circle closest-side,rgba(42,110,230,.48),rgba(42,90,210,.24) 30%,rgba(42,82,201,.08) 62%,transparent),
  radial-gradient(circle closest-side,rgba(42,110,230,.52),rgba(42,90,210,.26) 30%,rgba(42,82,201,.09) 62%,transparent),
  radial-gradient(circle closest-side,rgba(42,110,230,.48),rgba(42,90,210,.24) 30%,rgba(42,82,201,.08) 62%,transparent);
  background-size:1500px 1500px,1300px 1300px,1400px 1400px,1300px 1300px;
  background-position:-80% 0%,170% 27%,-75% 53%,165% 82%}
.ch--nba::after{background-image:
  radial-gradient(circle closest-side,rgba(224,35,59,.55),rgba(224,35,59,.26) 30%,rgba(224,35,59,.09) 62%,transparent),
  radial-gradient(circle closest-side,rgba(224,35,59,.48),rgba(224,35,59,.22) 30%,rgba(224,35,59,.08) 62%,transparent),
  radial-gradient(circle closest-side,rgba(224,35,59,.52),rgba(224,35,59,.24) 30%,rgba(224,35,59,.08) 62%,transparent),
  radial-gradient(circle closest-side,rgba(224,35,59,.48),rgba(224,35,59,.22) 30%,rgba(224,35,59,.08) 62%,transparent);
  background-size:1500px 1500px,1300px 1300px,1400px 1400px,1300px 1300px;
  background-position:175% 13%,-70% 41%,170% 68%,-65% 97%}
.ch--nba>.wrap{z-index:1}
.ch--clean{--c1:#2E6BFF;--c2:#22C36B;--o:#FF6A2B;--r:#F4512C;--bg:#F4F6FB;--card:#FFFFFF;--fg:#0A0A0C;--soft:rgba(10,10,12,.62);--line:rgba(10,10,12,.08)}
.ch .wrap{position:relative}

/* 章首 */
.ch__hero{position:relative;padding:clamp(72px,9vw,140px) 0 clamp(40px,6vw,90px)}
/* 章首英文底纹：一章一个词（data-word），超大、贴右下出血、几乎看不见；只在章首，不铺整章 */
.ch__hero::before{content:attr(data-word);position:absolute;right:-6%;bottom:0;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(160px,22vw,360px);line-height:1;letter-spacing:-.03em;
  color:var(--word,rgba(10,10,12,.022))}
.ch--sou{--word:rgba(255,255,255,.035)}.ch--nba{--word:rgba(255,255,255,.025)}
.ch__hero>*{position:relative;z-index:1}
.ch__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:960px){.ch__grid{grid-template-columns:1fr}}
.ch__idx{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(64px,9vw,132px);line-height:.85;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px var(--soft);opacity:.5}
/* 入场结束后维持半透明：case-v4.css 的 [data-reveal].in{opacity:1} 优先级更高，这里显式压回 */
.ch__idx[data-reveal].in{opacity:.5}
.ch__cat{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ch__cat i{width:10px;height:10px;border-radius:50%;background:var(--c1)}
.ch__name{display:flex;align-items:center;gap:clamp(14px,2vw,24px);margin-top:14px}
.ch__name img{width:clamp(56px,6vw,84px);height:auto;border-radius:24%;box-shadow:0 14px 30px rgba(8,10,20,.18)}
.ch__name h2{font-size:clamp(34px,4.6vw,72px);line-height:.95;white-space:nowrap}
.ch__lead{margin-top:clamp(16px,2vw,24px);font-size:clamp(14px,1.3vw,18px);color:var(--soft);max-width:48ch}
.ch__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ch__tags span{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;background:var(--card)}

/* 章首：手机编排（每章不同） */
.stage{position:relative;min-height:clamp(380px,46vw,640px);display:grid;place-items:center;pointer-events:none}
/* 章首合成图：本人提供的透视样机 + 截图按屏幕四角透视变形（scripts/compose-app-hero.py 生成 <app>/hero.webp） */
.stage__img{position:relative;z-index:1;display:block;width:auto;max-width:100%;height:auto;max-height:clamp(400px,50vw,700px);filter:drop-shadow(0 30px 50px rgba(8,10,20,.28))}
.stage [data-reveal]{transition-delay:calc(var(--i,0)*120ms)}
@media (max-width:960px){.stage{min-height:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding-top:14px}.stage .ph{position:static!important;transform:none!important;--w:clamp(120px,38vw,180px)!important}.stage .stk{display:none!important}.stage__img{max-height:420px}
  .chero__art--real .float{margin-inline:auto}}

/* 01 工具类：双机侧立 */
/* 02 教育类：双机交错 */
/* 03 运动类：斜切红蓝 + 单机斜放 */
.stage--nba::before{content:"";position:absolute;inset:6% -10% 6% 10%;background:linear-gradient(112deg,var(--c2) 0 46%,var(--c1) 46% 100%);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);opacity:.9}

/* 04 安全类：四色状态柱，各立一台 */
.stage--clean{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;place-items:end center;min-height:0;padding:0}
.stage--clean .col{position:relative;width:100%;height:clamp(300px,36vw,520px);border-radius:28px 28px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;color:#fff}
.stage--clean .col small{position:absolute;left:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.stage--clean .col b{position:absolute;right:14px;top:12px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:22px;line-height:1}
.stage--clean .ph{position:relative;--w:78%;top:20%;transform:none}
.stage--clean .col--b{background:var(--c1)}.stage--clean .col--o{background:var(--o)}.stage--clean .col--r{background:var(--r)}.stage--clean .col--g{background:var(--c2)}
@media (max-width:960px){.stage--clean{display:grid;grid-template-columns:repeat(2,1fr)}.stage--clean .ph:nth-child(n+3){display:block}.stage--clean .ph{--w:72%!important;position:relative!important}.stage--clean .col{height:280px}}

/* ---------- 章内小节 ---------- */
.ch__sec{padding:clamp(40px,6vw,96px) 0}
.ch__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3.4vw,44px)}
.ch__hd .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--soft)}
.ch__hd .eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--c1)}
.ch__hd h3{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(28px,3.6vw,52px);line-height:1;text-transform:uppercase}
.ch__hd p{max-width:46ch;color:var(--soft);font-size:14px}

/* 设计规范：情绪板 / 字体 / 颜色 三栏（与参考稿 DESIGN CODE 同构，每章一份） */
.ch__sec--sys{padding-bottom:0}
/* 三块竖排：左列标题 + 说明，右列内容；块间留大段空白，节奏与参考稿 DESIGN CODE 一致 */
.sys{display:grid;gap:clamp(64px,8vw,128px);margin-top:clamp(8px,1vw,16px)}
.sys>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:0 clamp(24px,5vw,88px);align-items:start}
.sys>div>*{grid-column:1}
.sys>div>.sys__tiles,.sys>div>.sys__scale,.sys>div>.sw{grid-column:2;grid-row:1 / span 6;align-self:start}
.sys h4{display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(26px,2.6vw,36px);line-height:1;margin:0 0 clamp(24px,3vw,44px)}
.sys h4 small{font-family:var(--body);font-stretch:100%;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--soft)}
.sys__kw{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(22px,2vw,28px);line-height:1;margin:0 0 22px}
.sys__kw i{font-style:normal;margin:0 .3em;color:var(--c1)}
.sys__pts{list-style:none;margin:0;padding:0;display:grid;gap:18px;font-size:14px;color:var(--soft);line-height:1.6;max-width:34ch}
.sys__pts b{display:block;margin-bottom:4px;color:var(--fg);font-size:14px}
.sys__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sys__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px;background:var(--card)}
.sys__note{font-size:14px;color:var(--soft);margin:0;line-height:1.6;max-width:34ch}
/* 字号阶梯：主色大卡，白字 */
.sys__scale{padding:clamp(24px,3vw,44px) clamp(24px,3.4vw,48px);border-radius:28px;background:var(--c1);color:#fff;font-size:14px;--sl:rgba(255,255,255,.22);--ss:rgba(255,255,255,.72)}
/* 深色章节（块对搜题 / NBA）：字体卡改白底深字，主色卡会和底色糊在一起 */
.ch--sou .sys__scale,.ch--nba .sys__scale{background:#fff;color:#0A0A0C;--sl:rgba(10,10,12,.12);--ss:rgba(10,10,12,.55)}
.sys__th,.sys__scale li{display:grid;grid-template-columns:minmax(0,1.6fr) .6fr .6fr .9fr 1.2fr;gap:12px;align-items:baseline}
.sys__th{padding:0 0 14px;border-bottom:1px solid var(--sl);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss);font-weight:700}
.sys__scale ul{list-style:none;margin:0;padding:0}
.sys__scale li{padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--sl)}
.sys__scale li:last-child{border-bottom:0;padding-bottom:0}
/* 示例字重按规范（--w）走；不落到本地只有 900 的 Noto Sans SC，Windows 用微软雅黑兜底 */
.sys__scale li span{font-family:var(--f,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);font-size:calc(var(--s) / 2);font-weight:var(--w,400);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys__scale li code{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:400;font-size:14px}
.sys__scale li em{font-style:normal}
.sys__scale li b{font-weight:400;font-size:14px}
/* 色板：主色占左半，其余 2 × 3 铺满右半 */
.sw{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;grid-auto-rows:minmax(clamp(120px,12vw,170px),auto);gap:clamp(8px,1vw,12px)}
.sw>div{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:clamp(14px,1.6vw,22px);border-radius:20px;background:var(--c);color:#0A0A0C;font-size:13px;box-shadow:inset 0 0 0 1px rgba(10,10,12,.06)}
.sw>div.dk{color:#fff;box-shadow:none}
.ch--sou .sw>div.dk,.ch--nba .sw>div.dk{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.sw>div b{font-weight:800;font-size:14px}
.sw>div code{font-family:var(--body);font-size:12px;opacity:.8}
.sw__main{grid-row:span 2}
.sw>div:nth-child(5){grid-column:span 2}
@media (max-width:900px){
  .sys>div{grid-template-columns:1fr;gap:24px 0}
  .sys>div>*,.sys>div>.sys__tiles,.sys>div>.sys__scale,.sys>div>.sw{grid-column:1;grid-row:auto}
  .sys h4{margin-bottom:16px}
  .sw{grid-template-columns:1fr 1fr}
  .sw>div:nth-child(5){grid-column:auto}
}

/* 组件切片：从截图裁出的组件，平铺不套机 */
.cuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.cuts figure{margin:0;display:flex;flex-direction:column;gap:12px}
.cuts img{display:block;width:100%;height:auto;border-radius:18px;background:var(--card);box-shadow:0 14px 34px rgba(8,10,20,.12)}
.cuts img.cut--raw{border-radius:0;background:none;box-shadow:none}
/* 块对搜题三张切图：素材已统一为 660x790 画布、主体矩形 496x540 底边对齐；页面上缩到列宽 82% 居中，图注居中 */
.ch--sou .cuts figure{align-items:center;text-align:center}
.ch--sou .cuts img{width:82%}
.cuts figcaption{font-size:14px;color:var(--soft);line-height:1.5}
.cuts figcaption b{display:block;color:var(--fg);font-size:14px;margin-bottom:2px}
.cuts figcaption i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--dot,var(--c1))}
@media (max-width:900px){.cuts{grid-template-columns:repeat(2,minmax(0,1fr))}.cuts--1 figure{grid-template-columns:1fr}}
@media (max-width:560px){.cuts{grid-template-columns:1fr}}
/* 缺省 / 弹层 / 过程：横排手机，不带步骤箭头 */
.flow-s--plain figure::after{display:none}
.flow-s--2{max-width:640px}

/* 核心页面：手机 + 热点编号 + 右侧说明 */
.key{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px);align-items:center}
/* 标注连线：case-apps.js 在每个 .key 里画一层 SVG，从机身边缘的圆点用虚线折到对应说明条（没有序号） */
.key__lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.key__lines path{fill:none;stroke:var(--c1);stroke-width:1.5;stroke-dasharray:4 4;--lo:.75}
.ch--sou .key__lines path{stroke:#fff;--lo:.6}
/* 入场：整块随 data-reveal 升起（手机先到），说明条与对应连线按序各晚 90ms 跟上，视线从机身引到注解 */
.key .notes li{--k:0;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(.35s + var(--k)*90ms)}
.key__lines path{--k:0;opacity:0;transition:opacity .4s;transition-delay:calc(.5s + var(--k)*90ms)}
.key .notes li:nth-child(2),.key__lines path:nth-child(2){--k:1}
.key .notes li:nth-child(3),.key__lines path:nth-child(3){--k:2}
.key .notes li:nth-child(4),.key__lines path:nth-child(4){--k:3}
.key.in .notes li{opacity:1;transform:none}
.key.in .key__lines path{opacity:var(--lo)}
.key + .key{margin-top:clamp(36px,5vw,72px)}
.key--rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.key--rev .key__media{order:2}
@media (max-width:900px){.key,.key--rev{grid-template-columns:1fr}.key--rev .key__media{order:0}}
.key__media{position:relative;display:grid;place-items:center;padding:clamp(20px,3vw,40px) 0}
/* 手机按 1x 原尺显示：屏幕 375 逻辑像素，机身含 2% 边框约 390px */
.key__media .ph{--w:min(100%,413px);position:relative}
/* 热点：描边圆，贴在界面元素靠说明栏一侧的边上（位置为机身百分比，按屏幕坐标换算，见 README）；连线起点 */
.hs{position:absolute;z-index:3;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid var(--c1);box-sizing:border-box;transform:translate(-50%,-50%)}
.ch--sou .hs{border-color:#2B5BFF}
/* 窄屏：连线画不下，热点改成编号圆点，说明条标题前配同号，对应关系不丢；手机缩到 80% 让标题早一点进入视野 */
@media (max-width:900px){
  .key__lines{display:none}
  .key{counter-reset:hs note}
  .key__media .ph{--w:min(80%,413px)}
  .hs{counter-increment:hs;width:20px;height:20px;border:0;background:var(--c1);color:#fff;font:700 11px/20px var(--body);text-align:center}
  .hs::after{content:counter(hs)}
  .notes li{counter-increment:note}
  .notes li b::before{content:counter(note);display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--c1);color:#fff;font-size:11px;vertical-align:1px}
  .ch--sou .hs{background:#2B5BFF}
  .ch--sou .notes li b::before{background:#fff;color:#0A0A0C}
}
.key__txt{display:flex;flex-direction:column;gap:14px}
.key__txt .eyebrow{color:var(--soft)}
.key__txt h4{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(24px,2.6vw,38px);line-height:1;text-transform:uppercase}
.key__txt > p{font-size:14px;color:var(--soft);max-width:52ch}
/* 说明条：标题 + 正文，不套框、无序号（靠虚线连到机身上的点）；对应组件的切片直接挂在该条下面（参考稿做法） */
.notes{list-style:none;display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px);margin-top:clamp(14px,1.6vw,22px)}
.notes li{font-size:14px;color:var(--soft);line-height:1.55}
.note__cut{display:block;width:min(100%,420px);height:auto;margin-top:12px;border-radius:14px;box-shadow:0 12px 30px rgba(8,10,20,.12)}
.note__cut--illus{width:min(100%,340px);border-radius:0;box-shadow:none}
.note__cut--raw{border-radius:0;box-shadow:none}
.note__cut--sm{width:min(100%,320px)}
/* 六类入口：用源文件导出的图标按 App 原样式重绘，不再裁截图 */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0;background:none;border-radius:0;box-shadow:none;font-family:"PingFang SC","Noto Sans SC",system-ui,sans-serif}
.catgrid span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(8,10,20,.06);font-size:14px;font-weight:500;color:#383838;line-height:1}
.catgrid img{width:48px;height:48px}
.catgrid small{display:inline;font-size:13px;color:#949597;margin-left:4px}
.catgrid span{flex-direction:row;flex-wrap:wrap;justify-content:center}
.catgrid img{flex:0 0 48px;width:48px;height:48px;margin:0 calc(50% - 24px) 10px}
.notes li b{display:block;color:var(--fg);font-size:14px;margin-bottom:2px}

/* 任务流：N 台横排 + 箭头。列宽固定按 4 列算（与块对搜题的 4 步流一致），3 步流居中、手机尺寸不随列数变大 */
.flow-s{--gap:clamp(14px,2vw,28px);display:grid;grid-template-columns:repeat(var(--n,3),calc((100% - 3*var(--gap))/4));justify-content:center;gap:var(--gap);align-items:start}
.flow-s--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.flow-s,.flow-s--2{grid-template-columns:repeat(2,1fr)}}
.flow-s figure{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.flow-s .ph{--w:min(100%,413px)}
/* 步骤箭头：本人提供的双层渐隐三角（arrow.webp，带透明通道），居中压在两台手机之间，允许叠在界面上 */
.flow-s figure:not(:last-child)::after{content:"";position:absolute;--aw:clamp(88px,9vw,128px);width:var(--aw);height:var(--aw);right:calc(-1*clamp(14px,2vw,28px)/2 - var(--aw)/2 + 20px);top:calc(42% - var(--aw)/2);
  background:url("assets/work/apps/arrow.webp") center/contain no-repeat;z-index:2;pointer-events:none}
@media (max-width:720px){.flow-s figure::after{display:none}}
.flow-s figcaption{font-size:14px;color:var(--soft)}
.flow-s figcaption b{display:block;color:var(--fg);font-size:14px;margin-bottom:2px}
.flow-s figcaption small{display:inline-block;margin-bottom:6px;padding:3px 9px;border-radius:999px;background:var(--c1);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em}
.ch--sou .flow-s figcaption small{color:#0A0A0C}

/* 全部界面墙：JS 按列轮流分配（case-apps.js），每列不同起始下沉形成错位；截图按原比例完整显示、不裁、无图注，上下渐隐 */
.wall{--cols:4;--gap:clamp(12px,1.6vw,22px);--fade:9%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);align-items:start;padding:12px 0 96px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.wall__col{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--off,0px)}
.wall__col:nth-child(4n+2){--off:clamp(80px,12vw,180px)}
.wall__col:nth-child(4n+3){--off:clamp(30px,5vw,70px)}
.wall__col:nth-child(4n+4){--off:clamp(120px,17vw,250px)}
.wall figure{margin:0}
.wall .ph{--w:100%;aspect-ratio:auto;filter:none}
.wall .ph::before{display:none}
.wall .ph__scr{position:static;width:100%;height:auto;border-radius:16px;box-shadow:0 12px 30px rgba(8,10,20,.12)}
.wall .ph__scr img{position:static;height:auto;object-fit:contain}
@media (max-width:760px){.wall{--cols:3}}
@media (max-width:480px){.wall{--cols:2}}
/* 手机端默认折叠：整墙 2 列要 5000px+，先露两屏，按钮展开全部（case-apps.js 按 --collapse 判断并插按钮） */
.wall__more{display:none}
@media (max-width:760px){
  .wall{--collapse:1}
  .wall.is-collapsed{max-height:140vw;overflow:hidden;padding-bottom:0}
  .wall__more{display:flex;justify-content:center;margin:-28px 0 56px;position:relative;z-index:1}
  .wall.is-collapsed+.wall__more{margin-top:-40px}
  .wall__more button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--fg);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
  .ch--sou .wall__more button,.ch--nba .wall__more button{color:#0A0A0C}
  .wall__more button svg{width:14px;height:14px;transition:transform .3s}
  .wall__more button.is-open svg{transform:rotate(180deg)}
}

/* 顶栏：与 LTC / 新华三 / 校灵通案例页（case-ltc.css .top）同款，返回主页 + 本页章节 */
:root{--nav-h:84px}
html{scroll-padding-top:var(--nav-h)}
.top{--n-ink:#0A0A0C;--n-spring:cubic-bezier(.34,1.56,.64,1);--n-out:cubic-bezier(.22,1,.36,1);
  position:sticky;top:0;z-index:50;height:var(--nav-h);padding:18px 0;pointer-events:none}
.top__in{position:relative;isolation:isolate;pointer-events:auto;height:100%;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;gap:16px;
  width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding:0 8px;border-radius:999px;color:var(--n-ink);
  background:transparent;box-shadow:none;transition:background .5s var(--n-out),box-shadow .5s var(--n-out),backdrop-filter .5s var(--n-out)}
.top__in::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s var(--n-out);
  background:radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.9),rgba(255,255,255,0) 55%),linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.5))}
.top.is-scrolled .top__in{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(10,10,12,.06),0 1px 0 rgba(255,255,255,.6),0 20px 60px rgba(10,10,12,.12),0 2px 10px rgba(10,10,12,.06)}
.top.is-scrolled .top__in::before{opacity:1}
/* 深色章节（蓝色 hero / 块对搜题 / NBA / CTA）上切浅色字，与新华三页 .top.is-dark 同款 */
.top.is-dark .top__back,.top.is-dark .top__nav a{color:#F2F5FF}
.top.is-dark.is-scrolled .top__in{background:rgba(10,14,36,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 60px rgba(0,0,0,.3)}
.top.is-dark.is-scrolled .top__in::before{opacity:0}
.top.is-dark .top__back:hover{background:rgba(255,255,255,.12)}
.top.is-dark .top__nav li.top__blob{background:rgba(255,255,255,.12)}
.top.is-dark .top__nav li.top__blob.is-solid{background:#fff}
.top.is-dark .top__nav a.is-on{color:var(--n-ink)}
.top.is-dark .top__nav ul.is-hovering a.is-on{color:#F2F5FF}
.top.is-dark .top__nav a:focus-visible,.top.is-dark .top__back:focus-visible{outline-color:#fff}
.top__back{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 12px;border-radius:999px;color:var(--n-ink);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;transition:background .25s var(--n-out),color .25s var(--n-out)}
.top__back svg{width:14px;height:14px;flex:none}
.top__back:hover{background:rgba(10,10,12,.07)}
.top__back:active{transform:scale(.97)}
.top__nav{position:relative;min-width:0;overflow-x:auto;scrollbar-width:none}
.top__nav::-webkit-scrollbar{display:none}
.top__nav ul{position:relative;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.top__nav li{position:relative;z-index:1}
.top__nav a{display:flex;align-items:center;padding:9px 14px;border-radius:999px;color:var(--n-ink);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;transition:color .25s var(--n-out)}
@media (pointer:coarse){.top__nav a{padding:13px 14px}}
.top__nav a.is-on{color:#fff}
.top__nav ul.is-hovering a.is-on{color:var(--n-ink)}
.top__nav a:focus-visible,.top__back:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px;border-radius:999px}
.top__nav li.top__blob{position:absolute;z-index:0;left:0;top:0;height:100%;width:0;border-radius:999px;background:rgba(10,10,12,.07);opacity:0;pointer-events:none;
  transition:transform .55s var(--n-spring),width .55s var(--n-spring),opacity .3s,background .3s}
.top__nav li.top__blob.is-solid{background:var(--n-ink)}
.top__nav li.top__blob.is-visible{opacity:1}
.top__nav li.top__blob.no-anim{transition:none}
@media (max-width:720px){
  :root{--nav-h:68px;--gut:12px;--gutter:12px}/* 手机端顶栏与内容统一距两侧 12px */
  .top{padding:10px 0}
  .top__in{gap:8px;padding:0 6px}
  .top__back{padding:9px 10px}
  .top__back span{display:none}/* 手机端只留返回箭头 */
  .top__back svg{width:16px;height:16px}
  .top__nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  /* 横向滚过之后左侧也渐隐（case-apps.js 按 scrollLeft 切 .is-left），不让章节名被硬切 */
  .top__nav.is-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}

/* 清理大师章首：手持样机 + 品牌蓝圆角色块已合成在 hero.webp 里（compose-app-hero.py 的 plate），手腕从色块底边伸出 */
.stage--hand .stage__img{max-height:clamp(380px,48vw,640px);filter:drop-shadow(0 24px 40px rgba(8,10,20,.18))}
.ch--clean .ch__hero{padding-bottom:clamp(28px,4vw,56px)}

@media (prefers-reduced-motion:reduce){.key .notes li{opacity:1;transform:none;transition:none}.key__lines path{opacity:var(--lo);transition:none}}