/* ============================================================================
   测评线手机适配（2026-09-14）
   只被 start.html / assess.html / report.html 三个页面引用。
   index.html（首页）与 admin.html（后台）**不引**，所以它们的版式一点不受影响
   —— 这是 Robin 明确的要求：「仅对认知测评部分的页面做手机适配优化，别的页面先不用动」。

   ⚠️ 2026-09-14 二次改版（Robin：「和我网页的 UI 不一致，颜色、字体都有问题」）：
   本文件里的颜色与字体**一律只能取官网 tokens**，一个自造色都不许有。
   官网的视觉语言（右边就是本文件的取值来源）：
     · 深色区 = 扁平 var(--dark) #081A1E；深色区里的卡片 = var(--dark-2) #0E262B
       + 1px rgba(255,255,255,.09) 描边（官网 .agent 就是这么写的）
     · 深色区强调色 = #7CD8D4（官网 .section-dark .h2 strong / .eyebrow / .badge 用的就是它）
     · 深色区正文 = #F0F4F4，次要 = #99A7AB，卡内正文 = #A0C9CD，标签文字 = #C2DEE0
     · 浅底强调 = var(--accent) #0ABAB5（.display .hl 连下划高亮一起），次级强调 = var(--accent-2)
     · 按钮 = 100px 药丸（官网 .btn 就是 100px，不是圆角矩形）
     · 标题字阶 = 直接沿用官网 .display / .h2 的 clamp，不另设字号
   机器化保证在第 14 道闸门 _tools/ui_consistency_check.js：越界色 / 自写字体栈 / 渲染字体对不上，直接发版失败。

   文件分两段：
     ① 落地页版式（.land-*）：微信转发进来的第一屏，桌面端 / 手机端都要好看，故不在媒体查询里；
        这些类名只出现在 start.html，别的页面没有，不存在误伤。
     ② 移动端增强：全部包在 @media (max-width:860px) 里（**跟官网同一个断点**），桌面端零影响。
   ============================================================================ */

/* ==========================================================================
   ① 落地页（start.html）
   ========================================================================== */
.land-hero{
  position:relative;overflow:hidden;color:#F0F4F4;padding:76px 0 84px;
  background:var(--dark);
}
/* 跟官网 .hero-bg 同构的两团柔光（右上薄荷 / 左下暖橙），只是把透明度压到深底上好看 */
.land-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 480px at 88% 8%, rgba(124,216,212,.16) 0%, transparent 62%),
    radial-gradient(700px 420px at 6% 92%, rgba(194,100,58,.16) 0%, transparent 60%);
}
.land-hero .wrap{position:relative;z-index:1}
.land-hero .tag{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:#7CD8D4;background:rgba(124,216,212,.16);border:1px solid rgba(124,216,212,.3);
  border-radius:100px;padding:5px 13px;
}
.land-hero .tag i{width:6px;height:6px;border-radius:50%;background:#7CD8D4;font-style:normal}
/* 标题沿用官网 .display：clamp 字阶、-.01em 字距、1.25 行高 */
.land-hero h1{font-size:clamp(34px,4.4vw,58px);margin:16px 0 0;letter-spacing:-.01em;line-height:1.25}
/* 深底上的高亮 = 只换色（官网 .section-dark .h2 strong 的做法），不加下划高亮 */
.land-hero h1 .hl{color:#7CD8D4}
/* 正文沿用官网 .lede：17px / max-width 56ch / margin-top 22px，只换深底配色 */
.land-hero .lede{
  color:#A0C9CD;font-size:17px;line-height:1.75;margin-top:22px;max-width:56ch;
}
.land-hero .lede b{color:#F0F4F4;font-weight:700}
.land-hero .metas{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.land-hero .metas span{
  font-size:13.5px;color:#C2DEE0;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:7px 15px;
}
.land-hero .metas span b{color:#7CD8D4;font-weight:700}

/* 入口区（JS 按登录态渲染，见 start.html 的三个视图）。
   按钮排布沿用官网 .hero-actions：flex + 14px 间距 + 自动换行 + 宽度自适应，不做整行大按钮。 */
.land-entry{margin-top:32px}
.land-who{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:15px;color:#C2DEE0;margin-bottom:16px;
}
.land-who b{color:#F0F4F4;font-weight:600}
.land-who .pill{
  font-size:12px;color:#7CD8D4;background:rgba(124,216,212,.16);
  border:1px solid rgba(124,216,212,.3);border-radius:100px;padding:3px 10px;
}
/* 与官网 .hero-actions 一致 */
.land-acts{display:flex;gap:14px;flex-wrap:wrap}
/* = 官网 .btn-lg 的形状（100px 药丸、15px/30px 内距、16px 字号），不做圆角矩形 */
.land-btn{
  font-size:16px;padding:15px 30px;border-radius:100px;font-weight:600;
}
.land-btn.lg-ghost{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);
  color:#fff;box-shadow:none;
}
.land-btn.lg-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.land-last{
  font-size:13.5px;color:#99A7AB;margin-top:16px;line-height:1.8;
}
.land-last b{color:#F0F4F4}
.land-note{font-size:13px;color:#99A7AB;margin-top:16px;line-height:1.8}
.land-note a{color:#7CD8D4}
.land-loading{font-size:14px;color:#99A7AB}

/* 正文区：留白沿用官网 .section 的 96px，交替段用 .section-tint 的底色 */
.land-sec{padding:96px 0}
.land-sec:nth-of-type(even){background:var(--surface-2)}
/* 小标签沿用官网 .eyebrow：12.5px / .16em 字距 / 大写 / accent 色 */
.land-eyebrow{
  display:inline-block;font-size:12.5px;color:var(--accent);letter-spacing:.16em;
  font-weight:700;text-transform:uppercase;margin:0 0 16px;
}
/* 标题沿用官网 .h2 的 clamp 字阶 */
.land-h2{font-size:clamp(26px,3vw,38px);margin-top:0;line-height:1.25}
.land-h2 .hl{color:var(--accent)}
/* 段首说明沿用官网 .sec-sub */
.land-sub{color:var(--muted);font-size:16.5px;margin-top:16px;line-height:1.75;max-width:760px}

.land-why{display:grid;gap:13px;margin-top:20px}
.land-why .it{
  display:flex;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:20px 22px;
}
.land-why .it .no{
  flex:0 0 30px;height:30px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13.5px;
  font-family:var(--serif);
}
.land-why .it .tx b{display:block;font-size:16px;font-family:var(--serif);margin-bottom:5px}
.land-why .it .tx span{font-size:14.5px;color:var(--ink-2);line-height:1.8}

.land-steps{display:grid;gap:11px;margin-top:20px}
.land-steps .st{
  display:flex;align-items:center;gap:12px;background:var(--surface-2);
  border-radius:var(--r-m);padding:14px 16px;font-size:15px;
}
.land-steps .st i{
  font-style:normal;font-family:var(--serif);font-weight:700;color:var(--accent-2);font-size:18px;
}
.land-steps .st span{color:var(--muted);font-size:13.5px;margin-left:auto;text-align:right}

.land-has{display:grid;gap:9px;margin-top:18px}
.land-has .it{
  font-size:14.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--r-s);padding:12px 15px;line-height:1.8;
}
.land-has .it b{color:var(--accent-2)}

/* 底部入口块：对应官网深色区的卡片（var(--dark-2) + rgba(255,255,255,.09) 描边），
   不再用自造的双色渐变 */
.land-mid{padding:96px 0}
.land-mid .box{
  border-radius:var(--r-l);padding:30px 28px;color:#F0F4F4;
  background:var(--dark-2);border:1px solid rgba(255,255,255,.09);
}
.land-mid .box h2{font-size:clamp(24px,2.6vw,32px);line-height:1.3;color:#fff}
.land-mid .box p{color:#A0C9CD;font-size:15px;line-height:1.8;margin-top:12px}
.land-mid .box .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.land-mid .box .btn{font-size:16px;padding:15px 30px;border-radius:100px}

/* 页脚沿用官网 .footer：白底 + 上边框 + 13.5px 灰字 */
.land-foot{
  padding:30px 0;color:var(--muted);font-size:13.5px;line-height:1.9;
  background:var(--surface);border-top:1px solid var(--line);
}
.land-foot a{color:var(--accent)}
.land-foot .icp{margin-left:10px;color:var(--muted);font-size:12.5px;text-decoration:none}
.land-foot .icp:hover{color:var(--accent-2)}
.land-foot nav{margin-top:6px;display:flex;gap:22px}

/* ==========================================================================
   ② 移动端增强（只影响测评线三页，桌面端不生效）
   断点与官网一致：styles.css 也是 @media (max-width:860px)（官网在那里把 .wrap 收到 100% - 32px，
   所以这里**不再自己覆盖宽度**，栅格跟着官网走）。
   ========================================================================== */
@media (max-width:860px){
  /* 头部：手机上必须**单行**。这里踩过一次：nav 里的文字会自己折行，
     sticky 顶栏变成两行高（实测把整页往下顶了 60px），测评页与报告页都中招 ——
     所以链接与账号名一律 nowrap，账号名超宽就省略号（完整账号在测评首页显示）。 */
  .as-header .wrap{gap:10px;flex-wrap:nowrap}
  .as-header nav{gap:10px;font-size:12.5px;flex-wrap:nowrap}
  .as-header nav a{white-space:nowrap}
  /* 品牌锁定：手机上官网也是「色块 + 主名 + 副名」三件套全显示（见首页 860 断点下的导航），
     所以这里不做任何精简，只允许它在窄屏上被压缩 */
  .brand{min-width:0}
  .as-user{font-size:12.5px;gap:8px;min-width:0}
  .as-user>span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .as-user a{white-space:nowrap}

  /* 主体留白：底部多留一点，给吸底的提交条让位 */
  .as-main{padding:20px 0 72px}
  .as-title{font-size:24px}
  .as-lede{font-size:14.5px;line-height:1.85;margin-bottom:20px}

  /* 步骤条 */
  .steps{gap:6px;font-size:12.5px;margin-bottom:18px}
  .steps .st i{width:20px;height:20px;font-size:11px}
  .steps .sep{width:10px}

  /* 分流卡：单列、点击区放大 */
  .pick{grid-template-columns:1fr;gap:12px}
  .pick-c{padding:18px 17px}
  .pick-c b{font-size:16.5px}
  .pick-c span{font-size:13.5px}
  .pick-c.dp{min-height:0;padding:19px 17px 14px}
  .pick-c.dp .idx{font-size:24px;left:17px;top:12px}
  .pick-c.dp b{font-size:17px;margin:20px 0 6px}
  .pick-c.dp em{top:12px;right:12px}

  .as-panel{padding:17px 15px}
  .as-panel h3{font-size:17px}

  /* 按钮：手机上一律整行，好点 */
  .as-actions{gap:10px;margin-top:18px}
  .as-actions .btn,.as-actions .btn.btn-sm,.as-actions .btn.btn-lg{width:100%;min-height:48px;font-size:15px}

  /* 答题：提交按钮吸底，长卷子不用滚到底。
     两个按钮**并成一行**（实测上下叠会占掉 ~130px 屏高，一直挡着题目）；
     「重新选择身份」收窄成次要按钮，别跟主按钮抢宽度。 */
  #pQuiz .as-actions{
    position:sticky;bottom:0;z-index:30;margin-top:16px;
    padding:11px 0 calc(11px + env(safe-area-inset-bottom,0px));
    background:rgba(251,250,248,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    display:flex;flex-wrap:nowrap;gap:9px;
  }
  #pQuiz .as-actions .btn{width:auto;min-height:46px}
  #pQuiz .as-actions #btnSubmit{flex:1 1 auto;font-size:15px}
  #pQuiz .as-actions #btnRestart{flex:0 0 auto;padding:0 13px;font-size:13px}
  .qbar{top:0;padding:10px 0 8px}
  .q{padding:14px 15px;margin-bottom:10px}
  .q .t{font-size:15px}
  .opt{padding:13px 14px;font-size:15.5px;margin-bottom:8px;line-height:1.6}
  .opt input{width:18px;height:18px;margin-right:10px}

  /* 报告：收窄留白、标题降一号、建议头不再左右挤 */
  .rep{padding:18px 15px;border-width:1.5px}
  .rep-h{gap:8px}
  .rep-tier{font-size:30px}
  .rep-score{font-size:14px}
  .rep-sum{font-size:14px;line-height:1.85}
  .sec-t{font-size:14.5px;margin:20px 0 9px}
  .ax-row .rw{font-size:13px}
  .adv .h{display:block;padding:10px 13px;line-height:1.6}
  .adv .h .sub{display:block;text-align:left;margin:4px 0 0}
  .adv .b{padding:11px 13px 12px;font-size:13px}
  .syn{padding:11px 13px}
  .syn-tx{font-size:13px}
  .note-b,.note-g{font-size:13.5px;padding:11px 13px}
  .note-w{font-size:13px}
  .rep-foot{gap:9px}
  .rep-foot .btn{width:100%;min-height:47px}
  .raw{font-size:11px}

  /* 我的报告列表 */
  .mrow{padding:13px 14px;gap:9px}
  .mrow .mt b{font-size:15.5px}
  .mrow .ms b{font-size:17px}

  /* 登录 / 注册弹层：手机上占满宽度，输入框 16px 防 iOS 聚焦缩放 */
  .mask{padding:6vh 12px 12px;align-items:start}
  .modal{padding:20px 17px;width:100%}
  .modal h3{font-size:18.5px}
  .fld input{font-size:16px;padding:12px 13px}
  .fld-row .btn{height:48px}
  .tabs button{padding:10px;font-size:14px}

  /* 落地页：留白与字号沿用官网在 860 断点下的取值（.hero / .section），不再另设一套 */
  .land-hero{padding:52px 0 60px}
  .land-sec{padding:70px 0}
  .land-mid{padding:70px 0}
  .land-mid .box{padding:24px 20px}

  /* 报告末尾的「进入 AI织造局」CTA */
  .cta-land{padding:22px 17px}
}

/* 报告末尾的「进入 AI织造局」CTA（assess.html 与 report.html 共用，桌面端也用） */
.cta-land{
  margin-top:24px;border-radius:var(--r-l);padding:30px 28px;color:#F0F4F4;
  background:var(--dark-2);border:1px solid rgba(255,255,255,.09);
}
.cta-land .t{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.35;color:#fff}
.cta-land p{color:#A0C9CD;font-size:15px;line-height:1.8;margin-top:10px}
.cta-land .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.cta-land .acts .btn{font-size:16px;padding:15px 30px;border-radius:100px}
.cta-land .acts .btn-light{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:#fff;
}
.cta-land .acts .btn-light:hover{background:rgba(255,255,255,.16);color:#fff}