/* ============================================================
   app.css — 全站共享设计令牌 + 基础组件（白底 + 品牌绿强调）
   通过 fragments.html 的 menu() 片段一处注入，全站生效。
   风格参照腾讯文档：白画布、大留白、浅灰描边、绿色只做点缀。

   ------------------------------------------------------------
   令牌分三层，改色只改这里：
     Layer 1 色阶层  --g-*            纯色阶，不直接用在组件上
     Layer 2 语义层  --brand/--ink/…  组件只准用这一层（名字永不改，只换值）
     Layer 3 业务层  --c-chong/--trust 业务含义绑定，独立管理，不由色阶派生
   ------------------------------------------------------------
   ⚠️ 硬编码替换映射表（模板内联 style 去 hex 时照此表替换）：
     #2c6e49→var(--brand)        #235c3c→var(--brand-strong)  #1f3329→var(--brand-dark)
     #eaf3ee→var(--brand-soft)   #f2f8f4→var(--brand-softer)  #e2ede7→var(--brand-line)
     #1f2329→var(--ink)          #4e5969→var(--ink-2)         #86909c→var(--ink-3)
     #a4abb6→var(--ink-4)        #ececf0→var(--line)          #e2e5ea→var(--line-2)
     #f6f8f9→var(--page)         #f4f6f8|#f7f9fa→var(--card-2)
     #fbe9e7→var(--err-bg)       #f5c6cb→var(--err-bd)        #fff8ec|#fff8e1→var(--warn-bg)
   ⚠️ 四个「不替换」白名单（换色时需人工同步，勿改成 var()）：
     1) ECharts 的 JS 色常量（accuracy.html / enrollment-trend.html / majors.html）——JS 里 var() 无效
     2) html2canvas 海报区（fragments::shareTools / report.html / result.html）——导出解析不可靠
     3) admin.html（内部页，最后一批统一处理）
     4) img/share-cover.png（素材烘焙了旧绿，换色后需重出图）
        ——img/mascot/* 已于 20260910 换成 img/student/*（新形象本身就是品牌绿）
   ============================================================ */
:root {
    /* ---------- Layer 1：绿色阶 ---------- */
    --g-50:  #f3faf6;
    --g-100: #e6f5ec;
    --g-200: #c9e9d6;
    --g-300: #9dd8b6;
    --g-400: #62c08f;
    --g-500: #2fa46b;
    --g-600: #1f8a57;
    --g-700: #176d45;
    --g-800: #125437;
    --g-900: #0f3b28;

    /* ---------- Layer 2：语义层（名字永不改） ---------- */
    /* 品牌绿 */
    --brand:        var(--g-600);
    --brand-strong: var(--g-700);
    --brand-dark:   var(--g-900);
    --brand-soft:   var(--g-100);   /* 激活态浅绿底 */
    --brand-softer: var(--g-50);    /* hover 更浅绿底 */
    --brand-line:   #d8ece1;        /* 浅绿区块的描边 */

    /* 文字（近黑 + 灰阶） */
    --ink:   #1b1f24;
    --ink-2: #4a5560;
    --ink-3: #8a93a0;
    --ink-4: #aab2bd;

    /* 画布与卡片 */
    --page:   #f7f9fa;
    --card:   #ffffff;
    --card-2: #fbfcfd;   /* 卡内嵌区块底 / 表头底 */

    /* 描边 */
    --line:   #edeff2;
    --line-2: #e0e4ea;
    --line-3: #cfd5dd;   /* 强描边：表头分隔 */

    /* 提示条 */
    --warn-bg: #fff8ec; --warn-bd: #f5e2b4; --warn-tx: #8a6d3b; --warn-link: #b5651d;
    --ok-bg:   #eef8f2; --ok-bd:   #c9e9d6; --ok-tx:   var(--g-600);
    --err-bg:  #fdeae8; --err-bd:  #f5c6cb; --err-tx:  #c0392b;
    --info-bg: #e6effc; --info-bd: #cfddf5; --info-tx: #2667c0;   /* 蓝色信息面板：MBTI 结果、报告里的性格块、后台统计表 */

    /* ---------- Layer 2：图标底座 7 色 ---------- */
    /* fg 值刻意等于业务语义色，使多彩图标与冲/稳/保/捡漏同源，不是第二套色 */
    --ic-green-bg:  #e6f5ec; --ic-green-fg:  #1f8a57; --ic-green-solid:  #2fa46b;
    --ic-yellow-bg: #fef4d9; --ic-yellow-fg: #a5760f; --ic-yellow-solid: #f0b429;
    --ic-purple-bg: #eee9fd; --ic-purple-fg: #6b46e5; --ic-purple-solid: #7d5bf0;
    --ic-blue-bg:   #e6effc; --ic-blue-fg:   #2667c0; --ic-blue-solid:   #3b82e0;
    --ic-orange-bg: #ffedde; --ic-orange-fg: #d35400; --ic-orange-solid: #f28024;
    --ic-pink-bg:   #ffe8f0; --ic-pink-fg:   #c2255c; --ic-pink-solid:   #e04b83;
    --ic-red-bg:    #fdeae8; --ic-red-fg:    #c0392b; --ic-red-solid:    #e05545;

    /* ---------- Layer 3：业务语义色（冲/稳/保/捡漏，不随色阶动） ---------- */
    --c-chong:   #c0392b;
    --c-wen:     var(--g-600);   /* 与 --brand 保持相等 */
    --c-bao:     #2667c0;
    --c-bargain: #d35400;

    /* ---------- Layer 3：信任资产（琥珀） ---------- */
    /* ⚠️ 铁律：--trust 只允许出现在 --brand-dark / --grad-proof 深底之上，
       它是全站唯一的第二强调色（实测战报数字），滥用即失效。 */
    --trust:        #ffd166;
    --trust-ink:    #5a4300;   /* 琥珀底上的正文 */
    --trust-ink-2:  #4a3800;   /* 琥珀按钮上的字（更重） */
    --trust-hover:  #ffdb85;
    /* 浅底版：信息栏的「真实结果验证」卡是浅绿底（2026-09-14 按参考稿改，深绿块太突兀），
       浅底上 #ffd166 对比度不够，数字用加深的金色、按钮用中饱和琥珀 */
    --trust-deep:      #c0891a;   /* 浅底上的大数字 */
    --trust-btn:       #f2c25c;   /* 浅底上的琥珀按钮 */
    --trust-btn-hover: #f6cf78;

    /* ---------- 深底之上的文字（战报卡 / Hero 深绿底） ---------- */
    --ondark:   #dff0e4;   /* 主文字 */
    --ondark-2: #bcd9c7;   /* 次文字 */
    --ondark-3: #a9cdb8;   /* 弱文字 / 标签 */

    /* ---------- 间距尺度 ---------- */
    --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
    --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

    /* ---------- 字号 / 行高 / 字重 ---------- */
    --fs-xs:11px; --fs-sm:12px;  --fs-13:13px; --fs-md:14px;  --fs-lg:15px;
    --fs-xl:16px; --fs-2xl:18px; --fs-3xl:22px; --fs-4xl:28px; --fs-5xl:34px;
    --fs-num:40px;                        /* 战报大数字 */
    --lh-tight:1.35; --lh:1.6; --lh-loose:1.85;
    --fw-md:500; --fw-b:600;              /* 参考稿用 600，不是 bold(700) */

    /* ---------- 形状 ---------- */
    --radius-xs:6px; --radius:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;

    /* ---------- 阴影 ---------- */
    --shadow-sm:    0 1px 2px rgba(16,24,40,.04);
    --shadow-card:  0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.04);
    --shadow-hover: 0 6px 20px rgba(31,138,87,.10);
    --shadow-pop:   0 8px 28px rgba(16,24,40,.12);

    /* ---------- 渐变 ---------- */
    --grad-hero:  linear-gradient(120deg,#e9f7ef 0%,#f4fbf7 46%,#ffffff 100%);
    --grad-brand: linear-gradient(135deg,#2fa46b 0%,#1f8a57 100%);
    --grad-proof: linear-gradient(160deg,#176d45 0%,#0f3b28 100%);

    /* ---------- 布局尺寸 ---------- */
    /* 版心：两档。正文/表单保持窄（行宽过长反而难读），数据页放开吃掉大屏两侧的空白 */
    --content-max:1100px;
    --wide-max:1960px;   /* 27 列的推荐结果表连内边距要 ~1896px，上限取 1960 让 2K 以上屏能整表放下 */
    --topnav-h:56px; --topnav-h-m:48px; --disclaimer-h:38px; --tabbar-h:56px;   /* 手机底部 Tab 栏高度（不含安全区） */
    --shell-max:1360px; --rail-l:260px; --rail-r:320px; --shell-gap:20px;

    /* ---------- z-index：把注释里的「约定」变成强制令牌 ---------- */
    /* 新组件只准从这里选，不准写新数字 */
    --z-rail:8800; --z-mascot:8900; --z-disclaimer:9000; --z-fab:9001;
    --z-overlay:9100; --z-topnav:9500; --z-backdrop:9550; --z-dropdown:9600; --z-drawer:9700;
    --z-tour:9800;   /* 新手引导：盖住抽屉与推荐页的加载遮罩，引导期间页面只能看不能点 */
}

/* ---------- 画布 ---------- */
/* 顶部导航后，内容靠各页 margin:auto 居中；补一点左右安全留白，避免中等宽度屏贴边（移动端由 fragments 媒体查询以 !important 覆盖） */
body { background: var(--page); color: var(--ink); padding-left: 16px; padding-right: 16px; }
a { color: var(--brand); }

/* ---------- 通用输入控件（低特异性兜底，页面专属样式仍可覆盖） ---------- */
input[type=text], input[type=number], input[type=password], input[type=email], select, textarea {
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=email]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- 通用工具类（页面按需 opt-in） ---------- */
/* 白卡：白底 + 浅描边 + 大圆角 + 轻阴影 */
.u-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
/* 分节标题：品牌绿竖条 */
.u-sec {
    font-size: 16px; font-weight: bold; color: var(--ink);
    border-left: 4px solid var(--brand); padding-left: 10px; border-radius: 0;
    margin: 26px 0 12px;
}
.u-sec .tip { color: var(--ink-3); font-weight: normal; font-size: 12px; margin-left: 8px; }
/* 主按钮 / 次按钮 */
.u-btn {
    display: inline-block; background: var(--brand); color: #fff; border: none;
    padding: 10px 22px; font-size: 14px; border-radius: var(--radius);
    cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.u-btn:hover { background: var(--brand-strong); }
.u-btn-ghost {
    display: inline-block; background: #fff; color: var(--brand);
    border: 1px solid var(--brand); padding: 9px 21px; font-size: 14px;
    border-radius: var(--radius); cursor: pointer; text-decoration: none;
    transition: background .15s ease;
}
.u-btn-ghost:hover { background: var(--brand-softer); }

/* ============================================================
   信息栏卡片 .sr-*（fragments::railCards 的内容层）
   ⚠️ 这些样式一度写在已废弃的 sideRail 外壳的 <style> 里，导致 20260911 三栏首页直接调 railCards 时
   拿不到样式、左栏与「你可能没发现」渲染成裸文本。组件样式就该放在这里，
   让 shell 的左/右栏(.shell-l/.shell-r)随处可用。
   ============================================================ */
/* ① 真实结果验证卡：浅绿渐变底 + 金色数字 + 琥珀按钮（参考稿样式；原深绿块在白色信息栏里太突兀） */
.sr-proof { position:relative; overflow:hidden; color:var(--ink); border-radius:var(--radius-lg);
            background:linear-gradient(160deg, var(--g-50) 0%, var(--g-100) 55%, var(--g-200) 100%);
            border:1px solid var(--brand-line); padding:14px 15px 13px; box-shadow:var(--shadow-card); }
.sr-phead { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--fw-b); color:var(--ink); }
.sr-ptop { font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:8px; }
/* 右侧四根装饰柱：纯 CSS，不承载数据 */
.sr-pdeco { position:absolute; right:16px; top:50px; height:66px; display:flex; align-items:flex-end; gap:7px; pointer-events:none; }
.sr-pdeco i { display:block; width:11px; border-radius:var(--radius-pill);
              background:linear-gradient(180deg, rgba(47,164,107,.42) 0%, rgba(47,164,107,.05) 100%); }
.sr-pdeco i:nth-child(1) { height:36%; } .sr-pdeco i:nth-child(2) { height:64%; }
.sr-pdeco i:nth-child(3) { height:100%; } .sr-pdeco i:nth-child(4) { height:50%; }
.sr-pbig { color:var(--trust-deep); margin:4px 0 2px; line-height:1; }
.sr-pbig b { font-size:44px; letter-spacing:.5px; }
.sr-pbig i { font-size:16px; font-style:normal; margin-left:4px; font-weight:var(--fw-b); }
.sr-psub { font-size:12px; color:var(--ink-2); line-height:1.6; }
.sr-pbar { margin-top:9px; }
.sr-pbar-t { font-size:11px; color:var(--ink-2); line-height:1.6; }
.sr-pbar-t b { color:var(--brand); font-size:13px; }
.sr-pbar-r { height:5px; border-radius:var(--radius-pill); background:rgba(31,138,87,.14);
             overflow:hidden; margin-top:4px; }
.sr-pbar-r i { display:block; height:100%; background:var(--brand); border-radius:var(--radius-pill); }
.sr-pfoot { font-size:12px; color:var(--ink-2); line-height:1.6; margin-top:8px;
            padding-top:8px; border-top:1px solid rgba(31,138,87,.16); }
.sr-pfoot b { color:var(--ink); }
.sr-pbtn { display:block; text-align:center; background:var(--trust-btn); color:var(--trust-ink-2); font-size:13px;
           font-weight:bold; border-radius:16px; padding:8px 0; margin-top:10px; }
.sr-pbtn:hover { background:var(--trust-btn-hover); }
/* 通用白卡 */
.sr-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
           padding:13px 14px; box-shadow:var(--shadow-sm); }
.sr-ttl { display:flex; align-items:baseline; gap:6px; font-size:13px; font-weight:var(--fw-b);
           color:var(--ink); margin-bottom:10px; }
.sr-ttl .sr-cnt { margin-left:auto; }
/* 报考进度：大数字 + 进度条（对齐参考稿的「已完成 2/3」） */
.sr-big { color:var(--brand); line-height:1; margin:2px 0 8px; }
.sr-big b { font-size:32px; font-weight:var(--fw-b); }
.sr-big i { font-size:14px; font-style:normal; color:var(--ink-3); margin-left:4px; }
.sr-prog { height:6px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; margin-bottom:10px; }
.sr-prog i { display:block; height:100%; background:var(--brand); border-radius:var(--radius-pill);
             transition:width .3s ease; }
@media (prefers-reduced-motion: reduce) { .sr-prog i { transition:none; } }
/* ② 三步走 */
.sr-step { display:flex; gap:9px; padding:7px 0; }
.sr-step + .sr-step { border-top:1px dashed var(--line); }
.sr-num { flex:none; width:20px; height:20px; border-radius:50%; font-size:12px; line-height:20px;
          text-align:center; background:var(--line); color:var(--ink-3); }
.sr-step.done .sr-num { background:var(--brand-soft); color:var(--brand); font-weight:bold; }
.sr-step.now .sr-num { background:var(--brand); color:#fff; font-weight:bold; }
.sr-body { min-width:0; }
.sr-sttl { font-size:13px; color:var(--ink-3); line-height:20px; }
.sr-step.done .sr-sttl { color:var(--ink-2); }
.sr-step.now .sr-sttl { color:var(--brand); font-weight:bold; }
.sr-cnt { font-size:11px; color:var(--ink-3); font-weight:normal; margin-left:5px; }
.sr-go { display:inline-block; font-size:12px; color:var(--brand); margin-top:2px; }
.sr-go:hover { text-decoration:underline; }
/* ③ 快捷入口 */
.sr-link { display:flex; gap:8px; padding:8px 6px; margin:0 -6px; border-radius:var(--radius); }
.sr-link:hover { background:var(--brand-softer); }
.sr-link .ico { flex:none; }
.sr-link b { display:block; font-size:13px; color:var(--ink); font-weight:normal; }
.sr-link:hover b { color:var(--brand); }
.sr-link i { display:block; font-size:11px; color:var(--ink-3); font-style:normal; line-height:1.5; margin-top:1px; }
/* ⑤ 报考政策小卡 */
.sr-polkv > div { display:flex; align-items:baseline; gap:8px; padding:6px 0; border-top:1px dashed var(--line); font-size:12px; }
.sr-polkv > div:first-child { border-top:none; padding-top:2px; }
.sr-polkv i { flex:none; width:56px; font-style:normal; color:var(--ink-3); }
.sr-polkv b { min-width:0; color:var(--ink); font-weight:var(--fw-b); line-height:1.5; }
.sr-polkv em { font-style:normal; color:var(--brand); font-size:16px; }
.sr-poltip { font-size:12px; color:var(--ink-3); line-height:1.6; padding:2px 0 4px; }
.sr-poltabs { display:flex; gap:6px; margin:8px 0 6px; }
.sr-poltabs a { flex:1; text-align:center; font-size:12px; color:var(--brand-strong); background:var(--brand-soft);
                border:1px solid var(--brand-line); border-radius:var(--radius-pill); padding:4px 0; text-decoration:none; white-space:nowrap; }
.sr-poltabs a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
/* ④ 福利 */
.sr-welfare { background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:var(--radius-lg); padding:13px 14px; }
.sr-wttl { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:var(--fw-b); color:var(--warn-tx); }
.sr-wtx { font-size:12px; color:var(--warn-tx); line-height:1.7; margin:6px 0 10px; }
.sr-wrow { display:flex; align-items:center; gap:10px; }
.sr-wbtn { background:var(--brand); color:#fff; font-size:13px; border-radius:16px; padding:6px 16px; }
.sr-wbtn:hover { background:var(--brand-strong); }
.sr-wlink { font-size:12px; color:var(--warn-tx); text-decoration:underline; }

/* ---------- 志愿助手卡 .aic-*（fragments::aiAssistant） ---------- */
.aic { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
       padding:14px 15px; box-shadow:var(--shadow-sm); }
.aic-hd { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.aic-t b { display:block; font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-b); line-height:1.4; }
.aic-t i { display:block; font-style:normal; font-size:var(--fs-sm); color:var(--ink-3); margin-top:1px; }
.aic-q { display:flex; align-items:center; gap:8px; padding:8px 10px; margin:0 -4px 6px;
         border:1px solid var(--line); border-radius:var(--radius);
         font-size:var(--fs-13); color:var(--ink-2); text-decoration:none; background:var(--card-2);
         transition:border-color .15s ease, background .15s ease; }
.aic-q:hover { border-color:var(--brand); background:var(--brand-softer); color:var(--brand); }
.aic-q > span { flex:1; min-width:0; }
.aic-q > span + .ico { color:var(--ink-4); }          /* 末尾的箭头 */
.aic-q:hover > span + .ico { color:var(--brand); }
.aic-more { display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
            box-sizing:border-box; margin-top:4px; padding:9px; border:none; border-radius:var(--radius);
            background:var(--brand); color:#fff; font-size:var(--fs-13); font-family:inherit;
            cursor:pointer; transition:background .15s ease; }
.aic-more:hover { background:var(--brand-strong); }
.aic-note { font-size:var(--fs-xs); color:var(--ink-4); line-height:1.6; margin-top:8px; text-align:center; }
@media (prefers-reduced-motion: reduce) { .aic-q, .aic-more { transition:none; } }

/* 卡片里的链接不带下划线（早期靠已废弃的 .side-rail a 兜底，现在自己声明） */
.sr-card a, .sr-welfare a, .sr-proof a { text-decoration:none; }

/* ============================================================
   三栏骨架 .shell（fragments::shell）
   用 sticky 而不是 fixed：留在文档流里，不再和吉祥物/反馈按钮抢位置，也不自带滚动条。
   ============================================================ */
body.has-shell { max-width:none; margin:0; padding-left:0; padding-right:0; }
.shell { max-width:var(--shell-max); margin:0 auto; display:grid; align-items:start;
         gap:var(--shell-gap);
         /* 底部留出固定免责条的高度，否则最后一行内容会被盖住 */
         padding:var(--sp-6) var(--sp-5) calc(var(--sp-8) + var(--disclaimer-h)); }
.shell.cols-lmr { grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r); }
.shell.cols-lm  { grid-template-columns:var(--rail-l) minmax(0,1fr); }
.shell.cols-mr  { grid-template-columns:minmax(0,1fr) var(--rail-r); }
.shell.cols-m   { grid-template-columns:minmax(0,1fr); max-width:var(--content-max); }
.shell-l, .shell-r { position:sticky; top:calc(var(--topnav-h) + var(--sp-5)); z-index:1; }
.shell-l > * + *, .shell-r > * + * { margin-top:12px; }
.shell-m { min-width:0; }          /* 没有它，栏内宽表会把 1fr 撑破 */

/* 1120–1359：两条边栏都留，但收窄 */
@media (max-width:1359px) { :root { --rail-l:240px; --rail-r:290px; } }

/* 900–1119：只保住右栏，左栏降到正文下方。
   取舍：右栏是「志愿摘要 / 下一步建议」这类持续参考位，左栏是一次性引导位。 */
@media (max-width:1119px) {
    .shell.cols-lmr { grid-template-columns:minmax(0,1fr) var(--rail-r);
                      grid-template-areas:"m r" "l r"; }
    .shell.cols-lmr > .shell-l { grid-area:l; position:static; }
    .shell.cols-lmr > .shell-m { grid-area:m; }
    .shell.cols-lmr > .shell-r { grid-area:r; }
    .shell.cols-lm  { grid-template-columns:minmax(0,1fr); }
    .shell.cols-lm  > .shell-l { position:static; }
}

/* ≤899：单栏，顺序 正文 → 右栏 → 左栏（DOM 不复制，只调 order） */
@media (max-width:899px) {
    .shell, .shell.cols-lmr, .shell.cols-lm, .shell.cols-mr {
        grid-template-columns:minmax(0,1fr); grid-template-areas:none; }
    /* ⚠️ 光把容器的 grid-template-areas 置 none 不够：上一档给子元素设过 grid-area:l/m/r，
       区域没了以后这些名字会解析成不存在的具名线，三栏会全挤到同一格（实测 top 都是 100）。
       必须把子元素的 grid-area 也还原。 */
    .shell.cols-lmr > .shell-l,
    .shell.cols-lmr > .shell-m,
    .shell.cols-lmr > .shell-r { grid-area:auto; }
    .shell-l, .shell-r { position:static; }
    .shell-m { order:1; } .shell-r { order:2; } .shell-l { order:3; }
}

/* ≤768：把版心控制权交还给 fragments 里那条 body{max-width:100%!important;padding:12px!important}，
   否则会出现「12px + shell padding」双层内缩，手机端整体变窄 */
@media (max-width:768px) {
    .shell { max-width:none; padding:0; }
}

/* ---------- 手机端非首页：侧栏只留「评测期福利」与「报考政策」，其余（志愿助手 / 你可能没发现 / 报考进度 / 真实结果验证）
   与页面主体重复，且每页底部拖 2,000px+，统统隐藏；首页(.pg-home)自己在 home.html 里处理，不受此规则影响 ---------- */
@media (max-width:768px) {
    body.has-shell:not(.pg-home) .shell-l .sr-card:not(.sr-policy),
    body.has-shell:not(.pg-home) .shell-l .sr-proof,
    body.has-shell:not(.pg-home) .shell-r .aic,
    body.has-shell:not(.pg-home) .shell-r .sr-card:not(.sr-policy) { display:none; }
    /* 页面标题：全站统一 20px，右侧给悬浮吉祥物留位；「— 副标题」换行成小字 */
    h1 { font-size:20px; line-height:1.3; padding-right:64px; }
    h1 .hint { display:block; font-size:12px; font-weight:normal; color:var(--ink-3); margin-top:3px; line-height:1.5; }
}

/* ---------- 长列表分批显示（gkMore）：手机端先显前 N 条，其余点「加载更多」 ---------- */
.gk-hid { display:none !important; }
.gk-more { display:block; width:100%; box-sizing:border-box; margin:4px 0 10px; padding:11px;
           background:var(--card); border:1px dashed var(--brand-line); border-radius:var(--radius);
           color:var(--brand); font-size:13px; font-family:inherit; cursor:pointer; }
.gk-more:active { background:var(--brand-softer); }

/* ---------- 两端可见性工具类：.m-only 只在手机出现，.d-only 只在桌面出现 ---------- */
/* .m-only 在手机端 revert 回元素自身的 display（div→block，a→inline）；要 flex 的在页内自己再声明 */
.m-only { display:none; }
@media (max-width:768px) {
    .d-only { display:none !important; }
    .m-only { display:revert; }
    /* 志愿助手卡：手机上问题改成 chips 流式排，去掉大按钮与「开发中」说明 */
    .aic-q { display:inline-flex; width:auto; margin:0 6px 6px 0; padding:5px 10px; border-radius:var(--radius-pill); font-size:12px; }
    .aic-q > span { flex:none; }
    .aic-q > span + .ico { display:none; }
    .aic-more, .aic-note { display:none; }
}

/* ---------- 宽版心：表格 / 图表 / 卡片流页面用 ---------- */
/* 1600 视口实测：推荐结果那张 27 列表想要 1847px，而 1100px 版心只给到 1083px，
   要横滚 765px，同时两侧白白空着 468px。开了这个类，空白就让给内容。
   选择器 body.u-wide (0,1,1) 压过各页内联的 body{...} (0,0,1)，不必用 !important；
   ≤768px 时 fragments 里那条 body{max-width:100%!important} 在文档顺序上更靠后，手机端照旧。
   ⚠️ 用了 fragments::shell 的页面不要加这个类：版心归 .shell 管（见下面的 --shell-max / cols-*），
      两边同时设 max-width 只会打架。 */
body.u-wide { max-width: min(96vw, var(--wide-max)); }

/* ---------- 图标：线性 SVG（fragments::iconSprite）+ 彩色圆角底座 ---------- */
/* 调用：~{fragments :: icon(name, tone, size)}；颜色全走 --ic-* 令牌，改令牌即改全站图标 */
.ico { display:inline-flex; align-items:center; justify-content:center; flex:none;
       border-radius:var(--radius); vertical-align:middle; }
.ico > svg { width:60%; height:60%; display:block; fill:none; stroke:currentColor;
             stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
/* 尺寸：xs/sm 走小圆角，md/lg 走大圆角，贴参考稿的方形图标块 */
.ico-xs { width:20px; height:20px; border-radius:var(--radius-xs); }
.ico-xs > svg { width:68%; height:68%; }   /* 小尺寸下 60% 太瘦，字形要占满一些 */
.ico-sm { width:30px; height:30px; border-radius:var(--radius-xs); }
.ico-md { width:40px; height:40px; }
.ico-lg { width:48px; height:48px; border-radius:var(--radius-lg); }
/* plain：无底座、纯线条随当前文字色，铺满整个盒子（导航项、行内提示用） */
.ico-plain { background:none; color:inherit; }
.ico-plain > svg { width:100%; height:100%; stroke-width:1.7; }
/* 收藏星标（fragments::favStar）：灰描边 → 已收藏黄色实心；尺寸随字号，h1 旁/表格里/卡片角都能放 */
.fav-star { display:inline-flex; align-items:center; justify-content:center; width:1.6em; height:1.6em; padding:0;
            border:0; border-radius:50%; background:none; color:var(--ink-4); cursor:pointer; vertical-align:middle;
            font-size:16px; line-height:1; transition:color .15s, background .15s, transform .15s; }
.fav-star > svg { width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linejoin:round; }
.fav-star:hover { color:var(--ic-yellow-fg); background:var(--ic-yellow-bg); }
.fav-star:active { transform:scale(.9); }
.fav-star.on { color:var(--ic-yellow-solid); }
.fav-star.on > svg { fill:currentColor; }
/* 结果行里紧挨「+志愿」的院校专业星：与按钮同排、稍小 */
td.c-op { white-space:nowrap; }
td.c-op .fav-plan { font-size:14px; margin-left:2px; }
td.c-op form.addwish { display:inline; }
/* 七色底座 */
.ico-green  { background:var(--ic-green-bg);  color:var(--ic-green-fg); }
.ico-yellow { background:var(--ic-yellow-bg); color:var(--ic-yellow-fg); }
.ico-purple { background:var(--ic-purple-bg); color:var(--ic-purple-fg); }
.ico-blue   { background:var(--ic-blue-bg);   color:var(--ic-blue-fg); }
.ico-orange { background:var(--ic-orange-bg); color:var(--ic-orange-fg); }
.ico-pink   { background:var(--ic-pink-bg);   color:var(--ic-pink-fg); }
.ico-red    { background:var(--ic-red-bg);    color:var(--ic-red-fg); }
/* 实心变体：深底白线条，用于 Hero / 主 CTA */
.ico-solid  { background:var(--grad-brand); color:#fff; }
/* 深底之上的白描线（战报卡等） */
.ico-ondark { background:rgba(255,255,255,.14); color:#fff; }
/* 公告条：条目是多行流式文本，不能用 flex 包，靠 vertical-align 让图标贴住首行 */
.ann > div > .ico, .u-ann > div > .ico { vertical-align:-9px; margin-right:5px; }

/* 列表页宽表横滚容器：手机端把多列表格改成「横向滑动」，避免列被挤压变形 */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .tscroll { border: 1px solid var(--line); border-radius: var(--radius); }
    .tscroll > table { max-width: none !important; width: auto; margin-top: 0 !important; }
    .tscroll > table th, .tscroll > table td { white-space: nowrap; }
    /* 校名/专业等长文本列：保留换行但给最小宽度，避免整表过宽 */
    .tscroll > table td.name, .tscroll > table td.l { white-space: normal; min-width: 120px; }
}

/* ============================================================
   推荐结果共享组件（recTable / schoolTable / bargainTable 通用）
   集中在此，让任何用到这些片段的页面外观一致。
   ============================================================ */
.tag { display:inline-block; background:var(--brand-soft); color:var(--brand); border-radius:5px; padding:1px 7px; font-size:12px; }
/* 专业类徽标「命中你勾选的具体专业」高亮（片段内联样式给了默认灰，故 !important） */
td.c-major .sub.hit { color:var(--brand) !important; border-color:var(--brand) !important; background:var(--brand-soft); }

.scroll { overflow:auto; max-height:64vh; border:1px solid var(--line); border-radius:var(--radius); margin-top:6px; -webkit-overflow-scrolling:touch; background:var(--card); }
.scroll-hint { display:none; color:var(--ink-3); font-size:12px; margin:6px 0 0; text-align:center; }
@media (max-width:768px){ .scroll-hint { display:block; } }

table.rec { border-collapse:collapse; width:100%; font-size:13px; background:var(--card); }
table.rec th, table.rec td { border:1px solid var(--line); padding:6px 8px; text-align:center; white-space:nowrap; color:var(--ink); }
table.rec td.l { text-align:left; white-space:normal; min-width:150px; max-width:320px; }
table.rec td.c-uni { min-width:76px; max-width:118px; }
table.rec th.c-plan, table.rec td.c-plan { white-space:normal; min-width:0; width:44px; }
table.rec td.c-plan .prev { display:block; color:var(--ink-3); font-size:11px; }
table.rec th.c-rank, table.rec td.c-rank { white-space:normal; min-width:0; }
table.rec td.c-rank .sub { display:block; margin-left:0; }
/* 预测区间：默认 ±1.5σ（实测覆盖约七成半），点一下换成 ±2.2σ（约九成）。只有头部区的行才有值 */
:is(table.rec, table.mini) .band { display:block; margin-top:2px; font-size:11px; font-style:normal; color:var(--ink-3);
                  cursor:pointer; user-select:none; white-space:nowrap; }
:is(table.rec, table.mini) .band:hover { color:var(--brand-dark); }
:is(table.rec, table.mini) .band .w { display:none; }
:is(table.rec, table.mini) .band.open .n { display:none; }
:is(table.rec, table.mini) .band.open .w { display:inline; }
table.rec th.sortable { cursor:pointer; user-select:none; }
table.rec th.sortable:hover { background:var(--brand-soft); }
table.rec th .caret2 { font-size:11px; color:var(--brand); }
table.rec thead th { background:var(--card-2); color:var(--ink-2); font-weight:500; position:sticky; top:0; z-index:1; }
table.rec .yr, table.rec .grp { border-right:2px solid var(--line-2); }
table.rec td.grp b { color:var(--c-chong); }
table.rec tbody tr:hover { background:var(--brand-softer); }

.addbtn { background:var(--brand); color:#fff; border:none; border-radius:5px; padding:3px 9px; font-size:12px; cursor:pointer; }
.addbtn:hover { background:var(--brand-strong); } .addbtn.done { background:var(--ink-3); }
form.addwish { margin:0; }

.schoolwrap { max-height:64vh; overflow:auto; }
.schoolcard { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--card); }
.schoolhead { background:var(--card-2); padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none; border-radius:var(--radius) var(--radius) 0 0; }
.schoolcard.collapsed .schoolhead { border-bottom:none; border-radius:var(--radius); }
.schoolcard.collapsed table.mini { display:none; }
.schoolhead .caret { display:inline-block; width:14px; color:var(--brand); font-size:12px; }
.schoolhead .sname { font-weight:bold; font-size:15px; margin-right:8px; color:var(--ink); }
.schoolhead .meta { color:var(--ink-2); font-size:13px; margin-left:10px; }
table.mini { border-collapse:collapse; width:100%; font-size:13px; }
table.mini th, table.mini td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:center; color:var(--ink); }
table.mini td.l { text-align:left; }
table.mini thead th { background:var(--card-2); color:var(--ink-3); font-weight:normal; }

/* ============================================================
   志愿梯度色带（/wishlist 的模拟投档块 + /wishlist/compare 的概况矩阵共用）
   一格 = 一条志愿，按 position 从左到右排。色 = 冲/稳/保/捡漏，深浅 = 录取概率。
   目的：把「顺序」这件事画出来——保底压在第几条、冲档扎堆在哪、梯度是否单调，一眼可见。
   宽度全靠 flex:1 均分，容器 overflow:hidden 兜底：112 条志愿在 375px 下每格 ~3px，
   不许把版心撑破（20260922 那批的溢出根因就是这类宽元素）。
   ============================================================ */
/* --lad-n = 这条色带按几格均分。多方案并排时全部取「最长的那套」的条数，
   位次才在同一横坐标上可比（各自按自身条数均分的话，A 的第 5 格和 B 的第 5 格不在一条竖线上）。
   减去 (n-1) 个 1px 间隙再均分，否则固定基准宽 + gap 会超出容器把最后一格切掉。 */
.ladder { --lad-n:1; display:flex; gap:1px; height:18px; border-radius:var(--radius-xs); overflow:hidden;
          background:var(--line); border:1px solid var(--line); box-sizing:border-box; }
.ladder i { display:block; height:100%; min-width:1px;
            flex:0 0 calc((100% - (var(--lad-n) - 1) * 1px) / var(--lad-n)); }
/* 档位色：与 .bk / .bar 同源，冲=红 稳=绿 保=蓝 捡漏=橙 其他=灰 */
.ladder i.c { background:var(--c-chong); }
.ladder i.w { background:var(--brand); }
.ladder i.b { background:var(--c-bao); }
.ladder i.g { background:var(--c-bargain); }
.ladder i.x { background:var(--ink-4); }
/* 概率四档：低概率淡、高概率实。用 opacity 而非另配一套色，保证和档位色永远同源 */
.ladder i.p1 { opacity:.32; } .ladder i.p2 { opacity:.55; }
.ladder i.p3 { opacity:.78; } .ladder i.p4 { opacity:1; }
/* 倒挂 / 浪费：推演判定这条基本轮不到，描边标出来 */
.ladder i.fl { box-shadow:inset 0 0 0 1px var(--ink); }
.lad-axis { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--ink-4); margin-top:2px; }
.lad-legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:var(--fs-sm); color:var(--ink-3); margin-top:6px; }
.lad-legend span { display:inline-flex; align-items:center; gap:4px; }
.lad-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; }
.lad-legend i.c { background:var(--c-chong); } .lad-legend i.w { background:var(--brand); }
.lad-legend i.b { background:var(--c-bao); }   .lad-legend i.g { background:var(--c-bargain); }
.lad-legend i.fl { background:transparent; box-shadow:inset 0 0 0 1px var(--ink); }
@media (max-width:768px) { .ladder { height:14px; } .lad-legend { font-size:var(--fs-xs); gap:3px 8px; } }

/* ============================================================
   手机端：推荐结果宽表 → 卡片式（专业优先 table.rec + 院校优先 table.mini 共用）
   分组紧凑：选科|计划 一行；预测位次|分数|概率 一行；最近3年 分|位
   ============================================================ */
@media (max-width: 768px) {
    /* 只对推荐结果的容器解除滚动（表→卡片）；其他页拿 .scroll 做横滑容器的宽表（高校详情录取表、图鉴趋势表、
       招生趋势明细表）必须保留横滑，否则整页被撑宽——20260922 前这里误伤了它们 */
    .rec-scroll, .schoolwrap { max-height:none; overflow:visible; border:none; background:none; }
    .scroll:not(.rec-scroll) { max-height:none; overflow-x:auto; overflow-y:visible; }
    .rec-hint { display:none; }
    :is(table.rec, table.mini) { border:0; background:none; width:100%; }
    :is(table.rec, table.mini) thead { display:none; }
    :is(table.rec, table.mini) tbody { display:block; }
    /* 每条 = flex 换行卡片，用 flex-basis 控制每行几列 */
    :is(table.rec, table.mini) tr { position:relative; display:flex; flex-wrap:wrap; align-items:baseline;
                   column-gap:6px; row-gap:3px; padding:12px 14px; }
    :is(table.rec, table.mini) td { display:block; border:0 !important; padding:2px 0 !important; text-align:left !important;
                   white-space:normal !important; min-width:0 !important; max-width:none !important; }
    :is(table.rec, table.mini) td.m-hide, :is(table.rec, table.mini) td.yr-extra { display:none !important; }
    /* 带标签字段：标签 + 值（同一行） */
    :is(table.rec, table.mini) td[data-label] { display:flex; align-items:baseline; gap:5px; font-size:13px; }
    :is(table.rec, table.mini) td[data-label]::before { content:attr(data-label); color:var(--ink-3); font-size:12px; flex:none; }
    /* 整行字段 */
    :is(table.rec, table.mini) :is(td.c-uni, td.c-tier, td[data-label="城市"], td.c-major) { flex:1 1 100%; }
    /* 两列：选科 | 计划 */
    :is(table.rec, table.mini) :is(td[data-label="选科"], td.c-plan) { flex:1 1 42%; }
    /* 预测位次单独一行（含扩缩招注记不再挤压邻列）；预测分数 | 概率 同一行 */
    :is(table.rec, table.mini) td[data-label="预测位次"] { flex:1 1 100%; }
    :is(table.rec, table.mini) :is(td[data-label="预测分数"], td[data-label="概率"]) { flex:1 1 42%; }
    /* 最近3年：每年 分 | 位 各半行 */
    :is(table.rec, table.mini) td.ycell { flex:1 1 42%; color:var(--ink-2); }
    /* 高校名：大号标题（右上留出 +志愿 按钮位） */
    :is(table.rec, table.mini) td.c-uni { font-size:16px; font-weight:bold; color:var(--ink); line-height:1.4; padding:0 66px 2px 0 !important; }
    :is(table.rec, table.mini) td.c-uni::before { display:none; }
    :is(table.rec, table.mini) td.c-uni a { color:var(--ink); text-decoration:none; }
    :is(table.rec, table.mini) td.c-tier { padding:0 0 4px 0 !important; }
    /* 专业名：小标题 + 虚线分隔上方院校信息 */
    :is(table.rec, table.mini) td.c-major { font-size:14px; font-weight:bold; color:var(--brand-dark); margin-top:4px;
                           padding-top:8px !important; border-top:1px dashed var(--line) !important; }
    :is(table.rec, table.mini) td.c-major .sub { font-weight:normal; }
    /* 预测数字醒目 */
    :is(table.rec, table.mini) :is(td.c-rank b, td.grp b) { font-size:14px; }
    :is(table.rec, table.mini) td.c-rank .sub { display:inline; margin-left:3px; font-size:11px; }
    :is(table.rec, table.mini) .band { flex:1 1 100%; margin-top:0; text-align:right; }
    :is(table.rec, table.mini) td.c-plan .prev { display:inline; margin-left:2px; font-size:11px; color:var(--ink-3); }
    /* +志愿 固定卡片右上角 */
    :is(table.rec, table.mini) td.c-op { position:absolute; top:12px; right:12px; padding:0 !important; }
    :is(table.rec, table.mini) td.c-op::before { display:none; }
    :is(table.rec, table.mini) td.c-op .addbtn { padding:6px 12px; font-size:13px; border-radius:8px; }
    /* 专业优先：每条独立白卡 */
    table.rec tr { border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow-card); margin:0 0 12px; }
    table.rec tbody tr:hover { background:var(--card); }
    /* 院校优先：mini 在院校卡内，用轻分隔即可（院校信息已在卡头） */
    table.mini tr { border-bottom:1px solid var(--line); }
    table.mini tr:last-child { border-bottom:0; }
    table.mini td.c-major { border-top:0 !important; margin-top:0; padding-top:2px !important; }
}

/* ============================================================
   Markdown 正文 .md（报考政策解读 / 规则 / FAQ，MarkdownRenderer 输出，th:utext 注入）
   ============================================================ */
.md { font-size:14px; line-height:1.85; color:var(--ink-2); word-break:break-word; }
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
.md h1, .md h2, .md h3, .md h4 { color:var(--ink); line-height:1.4; margin:18px 0 8px; font-weight:var(--fw-b); }
.md h1 { font-size:19px; } .md h2 { font-size:17px; } .md h3 { font-size:15px; } .md h4 { font-size:14px; }
.md h2 { padding-left:10px; border-left:3px solid var(--brand); }
.md p { margin:0 0 10px; }
.md ul, .md ol { margin:0 0 10px; padding-left:22px; }
.md li { margin:2px 0; }
.md li > p { margin:0; }
.md strong { color:var(--ink); font-weight:var(--fw-b); }
.md a { color:var(--brand); }
.md blockquote { margin:0 0 10px; padding:8px 14px; background:var(--brand-softer); border-left:3px solid var(--brand); border-radius:var(--radius-xs); color:var(--ink-2); }
.md blockquote p { margin:0; }
.md code { font-family:Consolas, Menlo, monospace; font-size:12.5px; background:var(--page); border:1px solid var(--line-2); border-radius:4px; padding:0 4px; }
.md pre { background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius-xs); padding:10px 12px; overflow:auto; }
.md pre code { border:0; background:none; padding:0; }
.md hr { border:0; border-top:1px dashed var(--line-2); margin:14px 0; }
.md table { border-collapse:collapse; width:100%; font-size:13px; margin:0 0 12px; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.md table th { background:var(--card-2); color:var(--ink-2); font-weight:var(--fw-b); padding:7px 10px; border:1px solid var(--line-2); text-align:left; white-space:nowrap; }
.md table td { padding:7px 10px; border:1px solid var(--line); vertical-align:top; line-height:1.6; }
.md img { max-width:100%; border-radius:var(--radius-xs); }


/* ============================================================
   顶栏站内搜索 .tn-search（fragments::menu + js/site-search.js）
   桌面：吃掉一级栏与右侧账户之间的弹性空白；≤768px：进抽屉顶部（见 fragments 媒体查询）
   ============================================================ */
.tn-search { position:relative; flex:0 1 300px; min-width:150px; margin-left:auto; }
.tn-search input[type=search] { width:100%; box-sizing:border-box; height:34px; padding:0 30px 0 32px;
    border:1px solid var(--line-2); border-radius:var(--radius-pill); background:var(--page); color:var(--ink);
    font-size:13px; outline:none; -webkit-appearance:none; appearance:none; }
.tn-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; }
.tn-search input[type=search]:focus { border-color:var(--brand); background:var(--card); box-shadow:0 0 0 3px var(--brand-soft); }
.tn-search input::placeholder { color:var(--ink-4); }
.tn-search > .ico { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--ink-4); pointer-events:none; }
.tn-search-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:0; border-radius:50%;
    background:none; color:var(--ink-4); cursor:pointer; line-height:0; padding:0; display:none; }
.tn-search.has-q .tn-search-clear { display:inline-flex; align-items:center; justify-content:center; }
.tn-search-clear:hover { background:var(--line); color:var(--ink-2); }
.tn-search-panel { position:absolute; top:calc(100% + 6px); right:0; width:min(440px, 92vw); max-height:min(70vh, 560px); overflow-y:auto;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 30px rgba(31,35,41,.14);
    padding:6px; z-index:var(--z-dropdown); }
.tn-search-panel[hidden] { display:none; }
.tns-g { padding:8px 10px 3px; font-size:11px; letter-spacing:1px; color:var(--ink-4); }
.tns-i { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-xs); text-decoration:none; color:var(--ink); cursor:pointer; }
.tns-i:hover, .tns-i.act { background:var(--brand-softer); }
.tns-i .ico { color:var(--ink-3); }
.tns-i:hover .ico, .tns-i.act .ico { color:var(--brand); }
.tns-i > span:not(.ico) { min-width:0; flex:1; }
.tns-i b { display:block; font-size:14px; font-weight:var(--fw-md); line-height:1.3; }
.tns-i b mark { background:none; color:var(--brand); font-weight:var(--fw-b); }
.tns-i i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tns-i .tns-lock { flex:none; font-size:11px; color:var(--ink-3); background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius-pill); padding:1px 7px; }
.tns-i.locked b { color:var(--ink-3); }
.tns-empty { padding:16px 12px; font-size:13px; color:var(--ink-3); line-height:1.7; text-align:center; }
.tns-empty a { color:var(--brand); cursor:pointer; }
.tns-hint { padding:8px 12px 6px; font-size:11px; color:var(--ink-4); border-top:1px dashed var(--line); margin-top:4px; }
/* 顶栏的移动端放大镜按钮（桌面隐藏；≤768px 由 fragments 媒体查询显示） */
.nav-search-btn { display:none; }

/* ============================================================
   新手引导 .tour-*（js/tour.js）：暗遮罩 + 高亮盒 + 手指 + 说明卡
   页面用 <script type="application/json" id="tourSteps"> 声明步骤，引擎全站共用
   ============================================================ */
/* 不锁 body 滚动：Chrome 在 body overflow:hidden + 已滚动时会把固定定位的顶栏画错位；引导期间允许滚动，高亮盒随 scroll 重算 */
body.tour-on #mascot { display:none !important; }
.tour-root { position:fixed; inset:0; z-index:var(--z-tour); }
/* 高亮盒：靠超大 box-shadow 把四周压暗，本身透明；不接收点击，引导期间页面不可操作 */
.tour-spot { position:fixed; border-radius:10px; box-shadow:0 0 0 9999px rgba(10,20,15,.62), 0 0 0 3px rgba(255,255,255,.9);
    transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events:none; }
.tour-spot.none { box-shadow:0 0 0 9999px rgba(10,20,15,.62); width:0; height:0; }
.tour-hand { position:fixed; font-size:34px; line-height:1; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
    transform:translate(-50%, 0); animation:tourHand 1.1s ease-in-out infinite; }
@keyframes tourHand { 0%,100% { margin-top:0; } 50% { margin-top:-10px; } }
.tour-card { position:fixed; width:min(380px, calc(100vw - 32px)); background:var(--card); color:var(--ink); border-radius:var(--radius-lg);
    box-shadow:0 14px 40px rgba(0,0,0,.35); padding:16px 18px 14px; box-sizing:border-box; }
.tour-card .tour-step { font-size:11px; color:var(--ink-4); letter-spacing:1px; margin-bottom:4px; }
.tour-card h4 { margin:0 0 6px; font-size:17px; font-weight:var(--fw-b); color:var(--ink); line-height:1.35; }
.tour-card p { margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.75; }
.tour-cards { display:flex; flex-direction:column; gap:8px; margin:12px 0 2px; }
.tour-opt { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius);
    background:var(--card-2); cursor:pointer; text-align:left; font-family:inherit; color:var(--ink); transition:border-color .15s, background .15s; }
.tour-opt:hover { border-color:var(--brand); background:var(--brand-softer); }
.tour-opt.on { border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-soft); }
.tour-opt.static { cursor:default; }
.tour-opt.static:hover { border-color:var(--line-2); background:var(--card-2); }
.tour-opt .tour-oi { flex:none; width:40px; height:40px; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:var(--fw-b); background:var(--brand); color:#fff; }
.tour-opt .tour-oi.chong { background:var(--c-chong); } .tour-opt .tour-oi.wen { background:var(--c-wen); } .tour-opt .tour-oi.bao { background:var(--c-bao); }
.tour-opt .tour-oi.plain { background:var(--brand-soft); color:var(--brand); }
.tour-opt > span:not(.tour-oi) { min-width:0; flex:1; }
.tour-opt b { display:block; font-size:14.5px; font-weight:var(--fw-b); line-height:1.3; }
.tour-opt i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:2px; }
.tour-opt .tour-ok { margin-left:auto; flex:none; font-size:12px; color:var(--brand); font-weight:var(--fw-b); display:none; }
.tour-opt.on .tour-ok { display:inline; }
.tour-foot { display:flex; align-items:center; gap:10px; margin-top:14px; }
.tour-skip { background:none; border:0; color:var(--ink-3); font-size:13px; cursor:pointer; padding:6px 4px; font-family:inherit; }
.tour-skip:hover { color:var(--ink); }
.tour-next { margin-left:auto; background:var(--brand); color:#fff; border:0; border-radius:var(--radius-pill); padding:9px 20px; font-size:14px;
    font-weight:var(--fw-b); cursor:pointer; font-family:inherit; }
.tour-next:hover { background:var(--brand-strong); }
.tour-dots { display:flex; gap:5px; }
.tour-dots i { width:6px; height:6px; border-radius:50%; background:var(--line-2); }
.tour-dots i.on { background:var(--brand); width:16px; border-radius:var(--radius-pill); }
@media (max-width:768px) {
    /* 手机：卡片固定贴底，不去追高亮盒；留出安全区。
       20260922：字号下调一档；「下一步」所在的 .tour-foot 改成 sticky 常驻卡片底部——
       之前长卡片（如结果页 4 张选择卡）一滚就把按钮推到折叠线以下，选完看不到下一步。 */
    .tour-card { left:12px !important; right:12px !important; top:auto !important; bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)) !important;
        width:auto; max-height:72vh; overflow-y:auto; padding:14px 14px 0; }
    .tour-card h4 { font-size:15.5px; }
    .tour-card p { font-size:12.5px; line-height:1.7; }
    .tour-cards { gap:6px; margin:10px 0 2px; }
    .tour-opt { padding:8px 10px; gap:10px; }
    .tour-opt .tour-oi { width:32px; height:32px; font-size:16px; }
    .tour-opt b { font-size:13.5px; }
    .tour-opt i { font-size:11.5px; }
    .tour-foot { position:sticky; bottom:0; margin-top:10px; padding:8px 0 12px; background:var(--card);
        box-shadow:0 -8px 10px -8px rgba(16,24,40,.18); }
    .tour-next { padding:9px 16px; font-size:13.5px; }
    .tour-hand { font-size:30px; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-hand { animation:none; }
    .tour-spot { transition:none; }
}