@charset "UTF-8";
/* ============================================================================
   打样 / 在线留言表单 —— 共用样式
   ----------------------------------------------------------------------------
   同一份表单现在用在两处：
     ① 首页「免费打样」区块   —— 深色底（.home-d / body.home-d-page）
     ② 联系我们 → 在线留言页  —— 浅色底（普通页面）

   ★★★ 为什么单独成文件，而不是继续留在 home-d.css 里
     home-d.css 只在 is_front_page() 时入队，且它里面那套全局重置（body 13px、
     h1~h4 去 margin、ul 去样式）一旦全站生效会把产品详情 / 新闻 / 案例页一起改。
     表单要给留言页用，但留言页不能继承那套重置 → 只能把「表单自己的样式」抽出来，
     在两个页面都入队，且**只管 .lead-form 及其子元素**，一行全局规则都不写。

   ★★★ 两套配色靠 CSS 变量切换，不写两遍规则
     表单的 8 处颜色（标签 / 底线 / 输入值 / 占位 / 下拉箭头 / 错误红 / 成功态 / 按钮）
     在深底浅底上是完全不同的值。若按 `.home-d .lead-form{...}` 和
     `.msg-page .lead-form{...}` 各写一遍，将来改一处尺寸就要改两遍，
     迟早会不一致。
     做法：所有颜色写成 var(--lf-*)，默认值 = 浅底配色（普通页面直接可用），
     深底只覆盖 9 个变量（见文件末尾 .home-d 段）。
     尺寸、字距、间距、结构全部只有一份 —— 两处视觉差异只来自颜色。

   ★★ 尺寸基线锁死（改前先看这里）
     桌面：表单宽 415、按钮 415×52、输入框高 40、标签 12px、值 15px
     移动：表单宽 350、按钮 350×50、输入框高 42、值 16px（≥16px 防 iOS 自动放大）
     这套数字是从首页线上实测抓下来的基线（scripts/_form_baseline.json），
     抽组件时必须逐项复现，差一个都会让首页出现位移。
   ============================================================================ */

/* ============================================================================
   一、配色变量 —— 默认浅底（留言页 / 任何普通页面）
   ----------------------------------------------------------------------------
   对比度都按正文标准核过（13~15px 需 4.5:1，12px 辅助文字同样 4.5:1）。
   ============================================================================ */
.lead-form {
  /* 标签文字：浅底上 #6b7480 on #fff = 4.98 */
  --lf-label:      #6b7480;
  /* 输入值 */
  --lf-value:      #1f2933;
  /* 输入底线（发丝线） */
  --lf-line:       #d6dde4;
  /* 占位文字：浅底上 #7a848f on #fff = 4.53 */
  --lf-ph:         #7a848f;
  /* 下拉自绘箭头 */
  --lf-arrow:      #7a848f;
  /* 下拉展开后 option 的底色与文字（深底需要单独给，否则会是白字白底） */
  --lf-opt-bg:     #fff;
  --lf-opt-fg:     #1f2933;
  /* 下拉展开后「悬停 / 当前选中行」的底色：品牌蓝的极浅调（蓝 6% 混白），
     代替浏览器默认的系统蓝块。文字用 --lf-accent 压住对比度（≥4.5:1） */
  --lf-opt-hl:     #eaf3f8;
  /* 错误 */
  --lf-err:        #c8372d;
  /* 成功态正文与图标的描边色 */
  --lf-ok-fg:      #1f2933;
  --lf-ok-sub:     #5c6670;
  /* 说明文字 */
  --lf-note:       #5c6670;
  --lf-note-link:  #0a6f99;
  --lf-note-line:  #c3ccd4;
  /* 按钮：浅底上用品牌蓝 --primary（白字 5.60:1），hover 压暗 */
  --lf-btn-bg:     #0a6f99;
  --lf-btn-fg:     #fff;
  --lf-btn-hv:     #085a7c;
  --lf-btn-dis:    #c3ccd4;
  --lf-btn-dis-fg: #6b7480;
  --lf-accent:     #0a6f99;
  /* 字距 / 字体族：跟随宿主页面即可，这里只做兜底 */
  --lf-sans: "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --lf-mt:   "Montserrat","Bahnschrift","DIN Alternate","Segoe UI",sans-serif;
}

/* ============================================================================
   二、结构（两处共用，只有一份）
   ============================================================================ */
.lead-form{margin-top:26px}
.lf-row{position:relative;padding-top:20px}
.lf-row label{
  display:block;font-size:12px;color:var(--lf-label);letter-spacing:.18em;
  font-family:var(--lf-mt);text-transform:uppercase;margin-bottom:7px;
}
.lf-row label i{font-style:normal;color:var(--lf-accent);margin-left:3px}
.lf-row input,
.lf-row select{
  width:100%;height:40px;padding:0 0 8px;border:0;
  border-bottom:1px solid var(--lf-line);background:transparent;
  color:var(--lf-value);font-family:var(--lf-sans);font-size:15px;line-height:1.4;
  border-radius:0;outline:none;appearance:none;
  transition:border-color .25s ease;
  /* ★★★ 2026-10-29 修「下拉展开后选中项是刺眼的系统蓝底白字」。
     那不是我们写的 —— 是 Chrome/Edge 原生 select 弹层的**系统高亮色**，
     取的是浏览器主题色（默认亮蓝 #0075ff 一类），跟本站品牌蓝完全不是一个色系，
     而且浅灰卡片上突然一块饱和蓝，非常扎眼。
     处理分两层：
       ① accent-color —— Chrome 105+ / Firefox / Safari 都支持，
          原生 select 弹层的高亮块会直接用这个色，兼容面最广；
       ② ::picker(select) —— Chrome 135+ 的完全定制（含高亮项底色），
          用 @supports 包住，老浏览器自动跳过，不会因为不认识而整块失效。
     ★ 值用品牌蓝 --primary #0a6f99，与按钮同一色；高亮项文字用白，对比度 5.6:1。 */
  accent-color:var(--lf-accent);
}
/* Chrome 135+：把原生弹层也纳入样式体系（边框/圆角/高亮块） */
@supports (appearance:base-select){
  .lf-row select,
  .lf-row select::picker(select){
    appearance:base-select;
  }
  /* ★ base-select 下 select 内部会多渲染一个 ::picker-icon（系统箭头），
     与下面自绘的 background-image 箭头会重叠成两个 → 这里关掉系统的。
     不能反过来去掉自绘箭头：老浏览器没有 ::picker-icon，去掉就没箭头了。 */
  .lf-row select::picker-icon{display:none;}
  .lf-row select::picker(select){
    /* 弹层与输入框同一套发丝线语言，不用系统默认的灰边圆角 */
    border:1px solid var(--lf-line);
    border-radius:0;
    background:var(--lf-opt-bg);
    box-shadow:0 8px 24px rgba(16,34,48,.10);
    padding:4px 0;
    margin-top:4px;
  }
  /* 展开后每一行 */
  .lf-row select option{
    padding:9px 14px;
    font-size:14px;
    color:var(--lf-opt-fg);
    background:var(--lf-opt-bg);
  }
  /* ★ 悬停 / 键盘定位到的那一行：浅品牌底 + 品牌蓝字，替代系统蓝块 */
  .lf-row select option:hover,
  .lf-row select option:focus{
    background:var(--lf-opt-hl);
    color:var(--lf-accent);
  }
  /* 已选中项（弹层里打勾的那个） */
  .lf-row select option:checked{
    background:var(--lf-opt-hl);
    color:var(--lf-accent);
    font-weight:600;
  }
}
.lf-row select{
  cursor:pointer;
  /* 自绘箭头，避免各浏览器原生控件破坏统一感 */
  background-image:linear-gradient(45deg,transparent 50%,var(--lf-arrow) 50%),
                   linear-gradient(135deg,var(--lf-arrow) 50%,transparent 50%);
  background-position:calc(100% - 6px) 17px, calc(100% - 1px) 17px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.lf-row select option{background:var(--lf-opt-bg);color:var(--lf-opt-fg)}
.lf-row input::placeholder{color:var(--lf-ph)}
.lf-row input:focus,
.lf-row select:focus{border-bottom-color:var(--lf-accent)}
.lf-row input:focus::placeholder{color:var(--lf-line)}
/* 未选中的 select 显示成 placeholder 一样淡 */
.lf-row select.is-empty{color:var(--lf-ph)}

/* 错误提示：默认不占位，出错才出现 */
.lf-err{
  font-size:12px;color:var(--lf-err);line-height:1.5;margin-top:5px;
  max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.lf-row.bad .lf-err{max-height:40px}
.lf-row.bad input,.lf-row.bad select{border-bottom-color:var(--lf-err)}

/* ============================================================================
   算术验证行（2026-10-29 新增）
   ----------------------------------------------------------------------------
   复用 .lf-row 的全部尺寸与配色 —— 这里只加「题目 + 输入框 + 换一题」的并排关系。
   ★ 输入框宽度必须写死（不用 flex:1 + 100%）：
     .lf-row input 的默认规则是 width:100%，在 flex 容器里会让题目被挤成 0 宽。
     65px 是「两位数结果 + 光标」的实测宽度（3 位数上限 maxlength=3，65px 够）。
   ★ 「换一题」做成纯文字按钮、无底色：它是个辅助动作，不该和提交按钮抢视线；
     但在手机上必须有 ≥ 44px 的点击区域，所以用 padding 撑而不是 min-height（会顶高行）。
   ============================================================================ */
.lf-cap-in{display:flex;align-items:flex-end;gap:10px}
.lf-cap-q{
  flex:none;font-family:var(--lf-sans);font-size:15px;
  color:var(--lf-value);line-height:40px;letter-spacing:.06em;
  /* 题目本身不可选：避免拖动选中时误触到输入框 */
  user-select:none;
}
.lf-cap .lf-cap-in input{
  width:65px;flex:none;text-align:center;
  /* 数字框在部分安卓上默认带 spinner，去掉以免把 65px 挤爆 */
  appearance:textfield;-moz-appearance:textfield;
}
.lf-cap .lf-cap-in input::-webkit-outer-spin-button,
.lf-cap .lf-cap-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lf-cap-new{
  flex:none;margin-left:auto;padding:10px 2px 12px;
  background:none;border:0;border-radius:0;
  font-family:var(--lf-sans);font-size:12px;line-height:1;
  color:var(--lf-note-link);cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.lf-cap-new:hover{color:var(--lf-accent);border-bottom-color:var(--lf-note-line)}
.lf-cap-new:disabled{color:var(--lf-ph);cursor:default}

/* 提交按钮：直角、通栏 */
.lf-submit{
  width:100%;height:52px;margin-top:26px;border:0;border-radius:0;
  background:var(--lf-btn-bg);color:var(--lf-btn-fg);
  font-family:var(--lf-sans);font-size:15px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:background .25s ease;
}
.lf-submit:hover{background:var(--lf-btn-hv)}
.lf-submit:disabled{background:var(--lf-btn-dis);color:var(--lf-btn-dis-fg);cursor:not-allowed}
.lf-note{font-size:12px;color:var(--lf-note);line-height:1.7;margin-top:12px}
.lf-note a{color:var(--lf-note-link);border-bottom:1px solid var(--lf-note-line)}
.lf-note a:hover{color:var(--lf-accent)}

/* 提交后的成功态 */
.lf-done{display:none;padding:22px 0 4px}
.lf-done .ok{
  display:flex;align-items:center;gap:10px;
  font-size:16px;color:var(--lf-ok-fg);letter-spacing:.02em;
}
.lf-done .ok svg{width:22px;height:22px;stroke:var(--lf-accent);fill:none;stroke-width:2}
.lf-done p{font-size:13px;color:var(--lf-ok-sub);line-height:1.9;margin-top:10px}
.lf-done p a{color:var(--lf-accent);border-bottom:1px solid var(--lf-note-line)}
.lead-form.done .lf-row,
.lead-form.done .lf-submit,
.lead-form.done .lf-note{display:none}
.lead-form.done .lf-done{display:block}
/* 成功态把蜜罐和错误一起清掉，避免残留在 DOM 里 */
.lead-form.done .lf-hp{display:none}

/* ============================================================================
   三、蜜罐字段
   ----------------------------------------------------------------------------
   打样表单里的反垃圾字段：真人看不见（绝对定位到屏幕外 + 1px 大小），
   爬虫会照着 name="site" 填。填了就静默丢（见 inc-lead.php）。
   ★ 不能用 display:none / visibility:hidden：很多爬虫会跳过这类字段，等于没设。
   ★ 不能用 opacity:0 + 正常占位：会白白吃掉 60px 行高。
   ★ 必须加 tabindex="-1"（模板里已加），否则键盘用户 Tab 会掉进这个黑洞。
   ============================================================================ */
.lf-hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ============================================================================
   四、移动端
   ★ 输入框字号必须 ≥16px，否则 iOS Safari 聚焦时会自动放大页面。
   ============================================================================ */
@media (max-width:768px){
  .lead-form{margin-top:20px}
  .lf-row{padding-top:16px}
  .lf-row input,.lf-row select{height:42px;font-size:16px}
  .lf-row select{background-position:calc(100% - 6px) 18px, calc(100% - 1px) 18px}
  .lf-submit{height:50px;margin-top:22px}
  /* 验证行：输入框在移动端是 42px，题目的 line-height 必须同步跟到 42
     否则题目文字会贴着底部、与输入框里的数字不在一条基线上 */
  .lf-cap-q{font-size:16px;line-height:42px}
  .lf-cap .lf-cap-in input{width:70px}
}

/* ============================================================================
   五、深色底覆盖 —— 只改颜色变量，尺寸一条不动
   ----------------------------------------------------------------------------
   作用域限定在 .home-d（首页容器）。不用 body.home-d-page：
   那个 class 只在首页出现，将来若别处也用深色表单区，加个 .home-d 容器即可。
   变量值与原 home-d.css 完全一致，抽出来只是为了让浅底能有另一套。
   ============================================================================ */
.home-d .lead-form{
  /* 标签 #8a8a8a on #111d2d = 4.92 */
  --lf-label:      #8a8a8a;
  --lf-value:      #e0e0e0;
  --lf-line:       #27313f;
  /* 占位 #858585 on #111d2d = 4.60 */
  --lf-ph:         #858585;
  --lf-arrow:      #7b7b7b;
  --lf-opt-bg:     #111d2d;
  --lf-opt-fg:     #e0e0e0;
  /* 深底下高亮行用「亮青 12% 混深底」，不能照搬浅底那个浅蓝（在深底上会白得刺眼） */
  --lf-opt-hl:     #16344a;
  --lf-err:        #e2564b;
  --lf-ok-fg:      #e0e0e0;
  --lf-ok-sub:     #8a8a8a;
  --lf-note:       #8a8a8a;
  --lf-note-link:  #9a9a9a;
  --lf-note-line:  #323942;
  /* 深底上不用 #0a6f99（对比不足），沿用首页原来的亮蓝 + 深蓝字 */
  --lf-btn-bg:     #1abbef;
  --lf-btn-fg:     #0b3a5c;
  --lf-btn-hv:     #63d4f7;
  --lf-btn-dis:    #1b293b;
  --lf-btn-dis-fg: #666;
  --lf-accent:     #1abbef;
  --lf-sans: "Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
}
/* ★ 深底上 placeholder 聚焦时要更暗（原 home-d.css 有这一条：
   input:focus::placeholder → #323942）。统一用 --lf-line 会得到 #27313f，
   两者视觉一致，这里显式写回原值以保持逐像素不变。 */
.home-d .lead-form .lf-row input:focus::placeholder{color:#323942}
/* 深底上 .lf-done p 的字号原为 13px，与浅底一致，无需覆盖 */