/* ==========================================================================
   首次引导 / 新用户导航 · 样式（第 4 批 · 2026-10-18）
   --------------------------------------------------------------------------
   断点与全站一致：480 / 640 / 900（桌面写 min-width: 901px）。
   类名前缀一律 .gd-，不与 style.css 抢名字（.app / .card / .btn 都不碰）。
   ⚠️ [hidden] 必须 !important：下面给 .gd-type / .gd-rec 写了 display:flex，
      不加这一条，JS 里 `card.hidden = true` 会被 CSS 顶掉 —— 样例页会 11 张
      卡一起摊在屏幕上，而且看起来一点错都没有。
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

body.gd-body {
    /* ★ 批 13（72 方案 §4）：净档六页与文迹首页**同时**加载 style.css，那份的
       `body { display:flex; align-items:center; justify-content:center }` 会把
       顶上那条 `.gw-backstrip` 变成同一行的第二个 flex 项 —— 白带被 flex-shrink
       压成一小截（390px 实测只剩 171px 宽），后面的 .jd-wrap 也被挤。
       这里显式写回块级（只加载 guide.css 的页面本来就是块级，等于没变）。 */
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #1f2440;
    padding: 18px 14px 40px;
    line-height: 1.55;
}

.gd-wrap { max-width: 820px; margin: 0 auto; }

/* ===== 全局返回导航的容器（批 13 · 72 方案 §4）=====
   gd-body 这一族（hub / 1000 词 / 文迹 / 净档）的白带。style.css 里有一份
   **逐字相同**的 `.gw-backstrip`（那一族是 flex 居中的 body，靠 has-appbar 竖排；
   这一族是普通文档流，靠负外边距顶到窗口边）。改类名/颜色/高度两处一起改。 */
.gw-backstrip {
    position: sticky; top: 0; z-index: 210;
    width: 100%;
    display: flex; align-items: center;
    min-height: 54px; padding: 0 6px; box-sizing: border-box;
    background: #fff; border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* body.gd-body 自带 `padding: 18px 14px 40px` —— 用负外边距把白带顶到窗口边。
   ⚠️ -18px/-14px 抄的就是上面 body.gd-body 的 padding；桌面档那组
      `padding: 32px 20px 56px`（本文件末尾的 @media min-width:901px）另有覆盖，
      三处一起改，改漏一个白带就缩进去一截。 */
body.gd-body > .gw-backstrip { margin: -18px -14px 12px; width: calc(100% + 28px); }

/* ===== 全局返回导航（《72-全局返回导航方案》§3.2）=====
   ⚠️ 这一块在四个应用里**逐字相同**（tools/check_backnav.py 会比对）。
      改之前先看方案 §3.2：13.5px/400、触摸 ≥44px、行内不换行、文字最多 6em 后省略。
   ⚠️ 这是**导航**，不是动作：取消 / 关闭 / 停止识别 / 上一步 / 重来 一律不套这套类。 */
.backbar { display:flex; align-items:center; gap:8px; margin:0; padding:0; }
.backbar-btn { display:inline-flex; align-items:center; gap:4px;
  min-height:44px; padding:0 10px; border-radius:8px;
  font:400 13.5px/1 "Microsoft YaHei","PingFang SC",sans-serif;
  color:#2f46c8; text-decoration:none; white-space:nowrap; }
.backbar-btn:hover,
.backbar-btn:focus-visible { background:#eef1fb; color:#1f2f9e; outline:none; }
.backbar-btn[aria-disabled="true"] { color:#b9bfd4; pointer-events:none; }
.backbar-ico { font-size:14px; line-height:1; }
.backbar-label { min-width:0; max-width:6em; overflow:hidden; text-overflow:ellipsis; }

/* ---- 卡片外壳 ---- */
.gd-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 10px 30px rgba(20, 16, 60, 0.18);
}

.gd-head { text-align: center; margin-bottom: 16px; }
.gd-brand { font-size: 1.05rem; color: #6b7280; letter-spacing: .06em; }
.gd-step {
    display: inline-block;
    font-size: .8rem;
    color: #5b5bd6;
    background: #eef0ff;
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 8px;
}
.gd-title { font-size: 1.55rem; line-height: 1.3; color: #17203c; }
.gd-sub { color: #606a85; margin-top: 8px; font-size: .95rem; }

/* ---- ★ 1024 第 9 条：官方样例小卡（样例题型页顶部，3 个官方精选词） ---- */
.gd-official {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f6f7ff;
    border: 1px solid #e3e5f7;
}
.gd-official-h {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: .95rem; color: #3a3f66; font-weight: 700;
}
.gd-official-h span { font-weight: 400; color: #7b819c; font-size: .82rem; }
.gd-official-words { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gd-official-w {
    flex: 1 1 140px; min-width: 0; background: #fff; border-radius: 10px;
    border: 1px solid #e7e9f6; padding: 8px 10px;
}
.gd-official-w b { display: block; color: #1d2340; font-size: 1rem; }
.gd-official-w i { font-style: normal; color: #8a90a8; font-size: .78rem; }
.gd-official-w em { display: block; font-style: normal; color: #4b5169; font-size: .86rem; margin-top: 2px; }
.gd-official-a { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 700; color: #4a4fd0; text-decoration: none; }

/* ---- 按钮 ---- */
.gd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 12px 18px;
}
.gd-btn:active { transform: translateY(1px); }
/* ★ 1018 第二轮：引导样题没作答时「继续」是灰色不可点（用户 2026-10-18 点名）。
   `:disabled` 同时挡掉点击与键盘回车；去掉渐变与浮起，一眼能看出"还不能走"。 */
.gd-btn:disabled {
    background: #e4e7f1;
    color: #9aa1b5;
    cursor: not-allowed;
    transform: none;
}
.gd-btn.ghost {
    background: #f2f3fb;
    color: #3f3f8f;
    border: 1px solid #dfe2f5;
    font-weight: 500;
}
.gd-btn.line {
    background: transparent;
    color: #5b5bd6;
    border: 1px dashed #c9cdf0;
    min-height: 46px;
    font-weight: 500;
}
.gd-btn.small { min-height: 44px; font-size: .95rem; }
.gd-acts { display: grid; gap: 10px; margin-top: 18px; }
.gd-link { color: #5b5bd6; }
.gd-note { font-size: .82rem; color: #7b849e; margin-top: 12px; text-align: center; }
.gd-h2 { font-size: 1.05rem; color: #2b3454; margin: 20px 0 2px; }
.gd-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.gd-backlink {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #5b5bd6; text-decoration: none; font-size: .92rem;
}

/* ---- 欢迎页 ---- */
.gd-hero { text-align: center; padding: 14px 0 4px; }
.gd-hero .logo { font-size: 3rem; line-height: 1; }
.gd-hero h1 { font-size: 1.85rem; margin-top: 10px; color: #17203c; }
.gd-hero p { color: #5d6784; margin-top: 8px; }
.gd-points { display: grid; gap: 8px; margin: 18px 0 4px; }
.gd-point {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f7f8ff; border-radius: 12px; padding: 10px 12px;
    font-size: .92rem; color: #424d6b;
}
.gd-point b { color: #333c7a; }

/* ---- 年级 ---- */
.gd-grades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 4px;
}
.gd-grade {
    min-height: 58px;
    border-radius: 14px;
    border: 2px solid #e3e5f4;
    background: #fbfbff;
    font-size: 1.05rem;
    font-weight: 600;
    color: #3b4360;
    cursor: pointer;
}
.gd-grade[aria-pressed="true"] {
    border-color: #6a6ae0;
    background: #eef0ff;
    color: #3939a8;
    box-shadow: inset 0 0 0 1px #6a6ae0;
}
.gd-classbox { margin-top: 14px; border-top: 1px dashed #e3e5f4; padding-top: 12px; }
.gd-classbox summary { cursor: pointer; color: #5b5bd6; font-size: .92rem; min-height: 44px; display: flex; align-items: center; }
.gd-field { display: grid; gap: 6px; margin-top: 6px; }
.gd-field label { font-size: .86rem; color: #606a85; }
.gd-field input {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid #d9dcf0;
    padding: 0 14px;
    font-size: 1rem;
    background: #fff;
}
.gd-field input:focus { outline: 2px solid #b9bcf5; border-color: #8f92e8; }

/* ★ 1101-3「添加小孩」页（/setup/child）：年级用下拉；**定好的年级灰掉**
   （用户原话「直接根据班级号选好，直接灰色」），下面一行小字说明为什么不用选。 */
.gd-field select {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid #d9dcf0;
    padding: 0 12px;
    font-size: 1rem;
    color: #17203c;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}
.gd-field select:focus { outline: 2px solid #b9bcf5; border-color: #8f92e8; }
.gd-field select:disabled {
    background: #f1f2f8;
    border-color: #e3e5f4;
    color: #8b90a6;
    cursor: not-allowed;
    opacity: 1;                 /* iOS 的 disabled 默认更淡，这里统一灰 */
}
.gd-field-lock { margin-top: 14px; }
.gd-why { font-size: .82rem; color: #8b90a6; line-height: 1.5; }
/* 二孩家庭的第二格：<details> 无 JS 也能展开 */
.gd-kidbox { margin-top: 14px; border-top: 1px dashed #e3e5f4; padding-top: 12px; }
.gd-kidbox summary {
    cursor: pointer; color: #5b5bd6; font-size: .92rem;
    min-height: 44px; display: flex; align-items: center;
}
/* ★ 1101-5（用户截图「用户看不出一宝 和 二宝 怎么填」）：
   两个孩子各自一整块卡片、带「1 / 2」编号；中间一颗「二宝家庭」复选框，
   勾上才展开第二块。原来 <details> 里"昵称贴分隔线、年级落在它下面"，
   看着像在给老二选年级，谁是谁分不清。 */
.gd-kidblock {
    margin-top: 14px; padding: 12px 14px 16px;
    border: 1px solid #e3e5f4; border-radius: 14px; background: #fbfbff;
}
.gd-kidtag {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700; color: #3d4380;
}
.gd-kidno {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
    background: linear-gradient(135deg, #6a6ae0, #9b6ae0); color: #fff;
    font-size: .76rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.gd-two-toggle {
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    margin-top: 14px; padding: 10px 14px; border-radius: 14px;
    border: 2px dashed #c9cbf0; background: #f5f6ff;
    color: #3d4380; font-size: .92rem; line-height: 1.45; cursor: pointer;
}
.gd-two-toggle input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #6a6ae0; margin: 0; }
.gd-two-toggle:has(input:checked) { border-style: solid; border-color: #9b9bf0; background: #eeefff; }
.gd-kid2box { margin-top: 12px; }
.gd-kid2box[hidden] { display: none; }   /* 没勾就看不着；没 JS 时常显 */
/* ★ 1101-6 扫码进班（/join/<班级编号>）：出错条 + 底部「用原方式登录」一行。 */
.gd-join-err {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: #fdf1f0; border: 1px solid #f3c9c6; color: #a63a35;
    font-size: .92rem; line-height: 1.55;
}
.gd-join-alt {
    margin-top: 18px; text-align: center;
    font-size: .86rem; color: #7b849e;
}
.gd-join-alt a { color: #5b5bd6; }
/* ★ 2026-11-02：老账号回来只填手机号 —— 后 4 位自动带出，这一行只是告诉他
   "激活码是什么"，不让他再输一遍。 */
.gd-join-tail {
    margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
    background: #f2f4ff; border: 1px solid #d9defa; color: #4a5170;
    font-size: .94rem; line-height: 1.6; text-align: center;
}
.gd-join-tail b { color: #3d3dc7; letter-spacing: 2px; }

/* ---- 进度 ---- */
.gd-prog { margin: 12px 0 14px; }
.gd-prog .track { height: 8px; border-radius: 999px; background: #eceefb; overflow: hidden; }
.gd-prog .track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6a6ae0, #9b6ae0); border-radius: 999px; transition: width .25s ease; }
.gd-prog span { display: block; text-align: right; font-size: .8rem; color: #7b849e; margin-top: 4px; }

/* ---- 样例卡 ---- */
.gd-type { display: flex; flex-direction: column; gap: 10px; }
.gd-type-icon { font-size: 1.6rem; line-height: 1; }
.gd-type-name { font-size: 1.3rem; color: #17203c; }
.gd-type-tag { color: #606a85; font-size: .92rem; margin-top: -4px; }
.gd-demo {
    background: #f7f8ff;
    border: 1px solid #e5e7f8;
    border-radius: 14px;
    padding: 14px;
    margin-top: 4px;
}
/* ★ 1101 第 3 条：样例卡上的「请作答」提示（中英互译是连线形态，不点不知道要动手）。 */
.gd-ask {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef0ff;
    color: #4a4fd0;
    font-size: .84rem;
    font-weight: 700;
}
.gd-demo .q { font-size: 1.2rem; font-weight: 600; color: #202a4a; margin-bottom: 4px; }
.gd-demo .qline { font-size: 1.05rem; color: #202a4a; margin-bottom: 10px; }
.gd-demo .blank { display: inline-block; min-width: 4.2em; border-bottom: 2px solid #8f92e8; text-align: center; color: #5b5bd6; }
.gd-opts { display: grid; gap: 8px; }
.gd-opt {
    min-height: 48px;
    border-radius: 12px;
    border: 1.5px solid #dfe2f5;
    background: #fff;
    font-size: 1rem;
    color: #2b3454;
    cursor: pointer;
    padding: 8px 14px;
    text-align: left;
}
.gd-opt.ok { border-color: #38b26b; background: #e9f9f0; color: #1c7a46; }
.gd-opt.bad { border-color: #e06565; background: #fdeeee; color: #a53b3b; }
.gd-fb { min-height: 1.4em; font-size: .88rem; color: #5b5bd6; margin-top: 10px; }

/* 对对碰 */
.gd-match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-match .col { display: grid; gap: 8px; align-content: start; }
.gd-m {
    min-height: 46px; border-radius: 12px; border: 1.5px solid #dfe2f5;
    background: #fff; font-size: .98rem; color: #2b3454; cursor: pointer; padding: 6px 10px;
}
.gd-m.picked { border-color: #6a6ae0; background: #eef0ff; }
.gd-m.done { border-color: #38b26b; background: #e9f9f0; color: #1c7a46; }
.gd-m.bad { border-color: #e06565; background: #fdeeee; }
.gd-m[data-side="r"] { text-align: center; }

/* 拼写 / 找词 */
.gd-slots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.gd-slot {
    width: 38px; height: 46px; border-radius: 10px;
    border: 1.5px dashed #b9bcf5; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 600; color: #333c7a; text-transform: lowercase;
}
.gd-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-pool button, .gd-cell {
    min-width: 44px; min-height: 44px;
    border-radius: 10px; border: 1.5px solid #dfe2f5; background: #fff;
    font-size: 1.05rem; color: #2b3454; cursor: pointer;
}
.gd-pool button.used { opacity: .35; }
.gd-grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 6px; justify-content: center; }
.gd-cell.picked { border-color: #6a6ae0; background: #eef0ff; color: #3939a8; }
.gd-reset { margin-top: 10px; min-height: 40px; border: 0; background: none; color: #5b5bd6; text-decoration: underline; cursor: pointer; font-size: .9rem; }
.gd-big { width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: #6a6ae0; color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.gd-trace { font-size: 2.6rem; letter-spacing: .3em; color: #cdd0ee; text-align: center; margin: 6px 0 10px; }

/* 低龄包六小卡 */
.gd-lowgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gd-low {
    background: #fff; border: 1px solid #e5e7f8; border-radius: 12px;
    padding: 10px; font-size: .86rem; color: #4a5474;
}
.gd-low b { display: block; font-size: .95rem; color: #2b3454; margin-bottom: 2px; }

/* ---- 「放进练习吗」 ---- */
.gd-choice-line {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px dashed #e3e5f4; margin-top: 14px; padding-top: 12px;
    font-size: .95rem; color: #333c7a;
}
.gd-choice-line input { width: 22px; height: 22px; accent-color: #6a6ae0; }
.gd-choice-line.off { color: #9aa2b8; }

/* ---- 完成页 ---- */
.gd-sum {
    background: #f7f8ff; border-radius: 12px; padding: 12px 14px;
    color: #424d6b; font-size: .95rem; margin: 14px 0;
}
.gd-goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gd-goal {
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid #dfe2f5; background: #fff; color: #3b4360;
    font-size: .95rem; cursor: pointer;
}
.gd-goal[aria-pressed="true"] { border-color: #6a6ae0; background: #eef0ff; color: #3939a8; font-weight: 600; }
.gd-check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .95rem; color: #424d6b; min-height: 44px; }
.gd-check input { width: 22px; height: 22px; accent-color: #6a6ae0; }

.gd-six { display: grid; gap: 8px; margin-top: 12px; }
.gd-rec {
    display: flex; flex-direction: column; gap: 2px;
    text-decoration: none;
    border: 1px solid #e5e7f8; border-radius: 12px;
    background: #fff; padding: 10px 12px;
    color: #2b3454;
}
.gd-rec .nm { font-weight: 600; font-size: .95rem; }
.gd-rec .rc { color: #4a3f9f; font-size: .9rem; }
.gd-rec .wy { color: #7b849e; font-size: .82rem; }

/* ---- Hub ---- */
.gd-hubline {
    background: #f7f8ff; border-radius: 12px; padding: 10px 14px;
    color: #424d6b; font-size: .93rem; margin: 8px 0 14px;
}
.gd-hubgrid { display: grid; gap: 10px; margin: 4px 0 6px; }
.gd-app {
    display: flex; align-items: flex-start; gap: 12px;
    text-decoration: none; color: inherit;
    border: 1px solid #e5e7f8; border-radius: 14px;
    background: #fff; padding: 12px;
}
.gd-app:active { background: #f7f8ff; }
/* ★ 2026-10-27 D：封面图（站内 /nav-static/guide_shots/*-cover-phone.webp）。
   只做一个 56px 的小方图，用来「一眼认出来是哪个应用」；图没生成就 hidden。 */
.gd-app .cov {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px;
    overflow: hidden; background: #f2f3fb; border: 1px solid #e8e9f6;
}
.gd-app .cov img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-app[hidden] .cov, .gd-app .cov[hidden] { display: none; }
.gd-app .bd { flex: 1 1 auto; min-width: 0; }
.gd-app .top { display: flex; align-items: center; gap: 8px; }
.gd-app .nm { font-size: 1.05rem; font-weight: 700; color: #17203c; }
.gd-app .ds { display: block; color: #606a85; font-size: .88rem; margin-top: 4px; line-height: 1.5; }
.gd-app .rec { display: block; color: #4a3f9f; font-size: .88rem; margin-top: 6px; }
/* ⚠️ 上面那句 display:block 会盖掉 UA 的 [hidden]{display:none} —— 显式收回来 */
.gd-app .rec[hidden] { display: none; }
.gd-app .go { display: inline-block; margin-top: 8px; color: #5b5bd6; font-size: .88rem; font-weight: 600; }
.gd-badge {
    font-size: .72rem; color: #8a5a00; background: #fff4d6;
    border-radius: 999px; padding: 2px 8px; margin-left: 2px;
}

/* ---- 游客拒绝页 ---- */
.gd-deny { text-align: center; padding: 10px 0; }
.gd-deny .big { font-size: 2.6rem; }

/* ---- 响应式 ---- */
@media (min-width: 640px) {
    .gd-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-lowgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-opts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    /* UX A7：手机上完成页先露前 3 条推荐 */
    .gd-six.collapsed > .gd-rec:nth-child(n+4) { display: none; }
}
@media (min-width: 901px) {
    body.gd-body { padding: 32px 20px 56px; }
    body.gd-body > .gw-backstrip { margin: -32px -20px 12px; width: calc(100% + 40px); }
    .gd-card { padding: 30px 34px; }
    .gd-grades { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .gd-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-hubgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-title { font-size: 1.8rem; }
}

/* ---- 每个应用的分步说明（第 7 批 · 2026-10-18） ----
   静态示意图：CSS 画的手机轮廓 + 三条界面横杠，不嵌 iframe / 原型 / 可点演示。
   一页只讲一件事，所以字少、图大、按钮只有两颗。 */
.gd-wrap-steps { max-width: 620px; }
.gs-prog { margin: 4px 0 10px; }
.gs-prog .track { height: 6px; border-radius: 999px; background: #e8e8f8; overflow: hidden; }
.gs-prog .track i { display: block; height: 100%; border-radius: 999px; background: #6c6ce0; transition: width .2s; }
.gs-art { display: flex; justify-content: center; padding: 4px 0 16px; }
/* ★ 2026-10-27 D：真截图 + 可点热区（guide.js::initSteps）。
   三层叠着：<img> 打底、.gs-hot-all 全面积透明按钮、「点图继续」小药丸。
   具体的 .gs-hot-zone 由 guide-data.js 的 hot[] 百分比定位，压在整图那颗上面。
   ⚠️ .gs-hot 是 button，不是 .gd-btn 也不是 a —— 闸门要求 .gs-acts a 恰好 2 颗。 */
.gs-shot {
    position: relative; width: min(100%, 320px);
    border-radius: 18px; overflow: hidden;
    border: 1px solid #e5e7f8; background: #fff;
    box-shadow: 0 8px 24px rgba(23, 32, 60, .10);
}
.gs-shot-img { display: block; width: 100%; height: auto; }
.gs-hot {
    position: absolute; padding: 0; margin: 0; cursor: pointer;
    background: transparent; border: 0; border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
}
.gs-hot-all { left: 0; top: 0; width: 100%; height: 100%; border-radius: 18px; }
.gs-hot-all:active { background: rgba(108, 108, 224, .10); }
.gs-hot-zone {
    border: 2px dashed rgba(108, 108, 224, .8);
    background: rgba(108, 108, 224, .12);
    animation: gs-hot-pulse 1.8s ease-in-out infinite;
}
@keyframes gs-hot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108, 108, 224, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(108, 108, 224, 0); }
}
/* ★ 1101 第 4 条：虚线热区里那颗「点我」药丸（guide.js::addHot 只给 .gs-hot-zone 挂）。 */
.gs-hot-badge {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 12px; border-radius: 999px;
    background: #6c6ce0; color: #fff;
    font-size: .78rem; line-height: 1.5; font-weight: 700;
    white-space: nowrap; pointer-events: none;
    box-shadow: 0 2px 8px rgba(23, 32, 60, .28);
}
.gs-hot-tip {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(23, 32, 60, .72); color: #fff;
    font-size: .76rem; line-height: 1.4; pointer-events: none;
}
/* ★ 1101 第 8 条：每页左上角的「← 返回（看其它应用）」。走「低调但对得起手指」
   那一档 —— 44px 高、灰蓝、虚线底边，跟页尾的退出/试一遍同一套视觉，不抢主按钮。
   它挂在 .gd-head 里，父级 text-align 是 center，所以这里要自己改回左对齐。 */
.gs-back { margin: 0 0 4px; text-align: left; }
.gs-back a {
    display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px 0 0;
    font-size: .86rem; color: #66788f; text-decoration: none;
    border-bottom: 1px dashed rgba(102, 120, 143, .45);
}
.gs-back a:active { opacity: .7; }

/* ★ 2026-11-01 全站体检 #1：串联导航（?chain=1）的「退出导航」链接。
   与 .gs-tour 同一位置、同一档低调样式 —— 它不是第三条主路，只是给一条退路。 */
.gs-exit { margin: 10px 0 0; text-align: center; }
.gs-exit a {
    display: inline-block; min-height: 44px; line-height: 44px; padding: 0 10px;
    font-size: .84rem; color: #66788f; text-decoration: none;
    border-bottom: 1px dashed rgba(102, 120, 143, .45);
}
.gs-exit a:active { opacity: .7; }

/* D6（2026-10-27）：末页那条「在真实页面上跟着点一遍」。刻意做得比两颗主按钮轻，
   免得跟「开始用」抢注意力 —— 它是补充，不是第三条主路。 */
.gs-tour { margin: 10px 0 0; text-align: center; }
.gs-tour a {
    display: inline-block; padding: 6px 10px;
    font-size: .84rem; color: #6c6ce0; text-decoration: none;
    border-bottom: 1px dashed rgba(108, 108, 224, .45);
}
.gs-tour a:active { opacity: .7; }
@media (min-width: 901px) {
    .gs-shot { width: min(100%, 460px); }
}
.gs-phone {
    width: 200px; height: 142px; border: 2px solid #d9d9f2;
    border-radius: 18px; background: linear-gradient(180deg, #fbfbff 0%, #f3f3ff 100%);
    box-shadow: 0 8px 20px rgba(80, 80, 170, .10);
    padding: 12px 16px; box-sizing: border-box;
}
.gs-top { width: 44px; height: 5px; border-radius: 999px; background: #d5d5ee; margin: 0 auto 6px; }
.gs-emoji { font-size: 2.1rem; line-height: 1.2; text-align: center; margin: 4px 0 8px; }
.gs-bars { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gs-bar { display: block; height: 8px; border-radius: 999px; background: #e1e1f5; }
.gs-bar.on { background: #9090e8; }
.gs-points { margin: 0 0 18px; padding-left: 22px; color: #3d4666; line-height: 1.75; }
.gs-points li { margin: 7px 0; }
.gs-acts { flex-wrap: wrap; }

/* ★ 2026-10-22（B9）：弹层基线 —— 新页面统一用 .gd-mask + .gd-sheet
   （遮罩 + 底部弹出圆角面板，640px 以上居中）。四套老弹层
   （theme dialog / wenji mask / index modal / plan pi-mask）按需逐个迁移，
   迁移完之前**不许再新增第五套**。 */
.gd-mask {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15, 23, 42, .45);
}
.gd-mask .gd-sheet {
    width: 100%; max-width: 480px; max-height: 86vh; overflow: auto;
    background: #fff; border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
    .gd-mask { align-items: center; }
    .gd-mask .gd-sheet { border-radius: 16px; }
}