/* ── 微信弹层 + 悬浮入口（全站共享）─────────────────────────────
   原来这套只内联在 22 个页面里，另外 129 页带着同样的
   [data-contact-open] 按钮却点不出任何东西（真点过，什么都不发生）。
   这份把它收成一件共享件，样式里的 CSS 变量全部换成真值——
   那几个变量只在那 22 页的表里定义，留着 var() 会让整条声明静默失效。
   ──────────────────────────────────────────────────────────── */
.qd-contact-layer[hidden]{display:none}
.qd-contact-layer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px}
.qd-contact-layer__backdrop{position:absolute;inset:0;background:rgba(8,10,11,.72);
  backdrop-filter:blur(3px)}
.qd-contact-layer__panel{position:relative;background:#FFFDF8;color:#14120C;
  border-radius:8px;padding:30px 28px 26px;width:min(430px,100%);
  max-height:92vh;overflow:auto;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 26px 70px rgba(0,0,0,.3)}
.qd-contact-layer__x{position:absolute;top:9px;right:11px;border:0;background:transparent;
  font-size:26px;line-height:1;cursor:pointer;color:#7A756C;padding:5px 9px;border-radius:8px}
.qd-contact-layer__x:hover{background:rgba(0,0,0,.06);color:#14120C}
.qd-contact-layer h2{font-family:"Songti SC","Noto Serif SC",STSong,serif;font-size:22px;margin:0 0 18px;line-height:1.35}
.qd-contact-layer__qr{width:210px;height:210px;display:block;margin:0 auto 18px;
  border:1px solid rgba(21,23,20,.14);border-radius:8px}
.qd-contact-layer__how{display:grid;gap:11px;text-align:left;margin:0 0 16px}
.qd-contact-layer__how>div{display:grid;gap:3px;border-left:2px solid #C49749;padding-left:12px}
.qd-contact-layer__how b{font-size:13.5px}
.qd-contact-layer__how span{font-size:13px;line-height:1.7;color:#5A4A3B}
.qd-contact-layer__go{margin:0 0 16px}
.qd-contact-layer__go .btn{width:100%;justify-content:center}
.qd-contact-layer__tip{font-size:13px;line-height:1.75;color:#5A4A3B;
  text-align:left;margin:0;border-top:1px solid rgba(21,23,20,.14);padding-top:15px}
.qd-contact-layer__tip b{color:#14120C}
.qd-contact-layer__copy{display:inline-block;margin-top:9px;border:1px solid rgba(21,23,20,.14);
  background:transparent;border-radius:8px;padding:7px 12px;
  font:inherit;font-size:12.5px;cursor:pointer;color:#14120C}
.qd-contact-layer__copy:hover{border-color:#C49749;color:#C49749}
.qd-contact-layer__toast{display:block;margin-top:8px;font-size:12.5px;color:#C49749;min-height:1.2em}
@media(max-width:620px){
  .qd-contact-layer__panel{padding:26px 20px 22px}
  .qd-contact-layer__qr{width:180px;height:180px}
}
.qd-search__empty[hidden],.qd-contact-layer[hidden],.qd-search[hidden],
[hidden]{display:none!important}
@media (pointer: coarse), (max-width: 900px){
  .menu,.nav-search,.qd-search__x,.qd-contact-layer__x,
  [data-search-close],[data-contact-close]{
    position:relative;
    min-width:44px;min-height:44px;
  }
  .menu::after,.nav-search::after,.qd-search__x::after,
  .qd-contact-layer__x::after,
  [data-search-close]::after,[data-contact-close]::after{
    content:"";position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px);
  }
}
.qd-contact-layer__panel,.qd-search__panel{
  background:#14120C !important;color:#F4F0E7 !important;
  border:1px solid rgba(237,237,242,.11);
}
.qd-contact-layer__panel input,.qd-contact-layer__panel textarea,
.qd-contact-layer__panel select,.qd-search__panel input{
  background:#080706;color:#F4F0E7;
  border:1px solid rgba(237,237,242,.16);
}
.qd-contact-layer__panel ::placeholder,.qd-search__panel ::placeholder{
  color:#6E6A5E;
}


/* ═══════════════════════════════════════════════════════════════════
   加微信浮层：并入暖黑金箔（2026-08-27）
   ───────────────────────────────────────────────────────────────────
   这是整个网站转化路径的最后一步 —— 首页上七个「说说你卡在哪 / 加微信」
   点下去，弹的都是它。实测点得开、二维码在、三种场景的操作说明都在、
   还有「复制这句开场白」，做得很周到，**功能没问题**。

   问题在它现在是个半改造状态：面板原设计是浅色（background:#FFFDF8），
   后来底被改暗了，但按钮还留着原来的白底黑字，标题「加叶玉浩微信，
   直接聊项目」还断在「微 / 信」中间。一个弹在暖黑首页正中央的浮层，
   里面顶着一个纯白按钮，是整条转化路径上最扎眼的一处不统一。

   这一层只改这个浮层的皮，不动它任何一行逻辑、不动二维码、不动文案。
   ═══════════════════════════════════════════════════════════════════ */

html body .qd-contact-layer__backdrop{
  background:rgba(8,7,5,.82)!important;
  backdrop-filter:blur(4px) saturate(1.1)!important}

html body .qd-contact-layer__panel{
  background:linear-gradient(180deg,#14120C 0%,#0E0D0B 62%,#0E0D0B 100%)!important;
  color:var(--xh-fg1,#D9D2C4)!important;
  border:1px solid rgba(196,151,73,.30)!important;
  border-radius:2px!important;
  box-shadow:0 40px 120px rgba(0,0,0,.62),
             0 0 0 1px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(226,192,121,.08)!important}

/* 标题：衬线 + 不许断在词中间（原来断成「加叶玉浩微 / 信，直接聊项目」） */
html body .qd-contact-layer h2{
  font-family:var(--xh-serif,'Songti SC',serif)!important;
  font-weight:400!important;
  font-size:23px!important;line-height:1.4!important;
  color:var(--xh-fg0,#F4F0E7)!important;
  word-break:keep-all!important;
  text-wrap:balance;
  margin:0 0 20px!important}

html body .qd-contact-layer__qr{
  border:1px solid rgba(196,151,73,.26)!important;
  border-radius:2px!important;
  background:#FFFDF8!important;
  padding:8px!important;
  box-sizing:border-box}

html body .qd-contact-layer__x{
  color:var(--xh-fg2,#9A9384)!important}
html body .qd-contact-layer__x:hover{
  background:rgba(196,151,73,.12)!important;
  color:var(--xh-gold-hi,#E2C079)!important}

/* 三段操作说明：左边那道线换金箔，标题暖白、正文暖灰 */
html body .qd-contact-layer__how > div{
  border-left:2px solid var(--xh-gold-lo,#7A5C1F)!important}
html body .qd-contact-layer__how b{
  color:var(--xh-fg0,#F4F0E7)!important;font-weight:500!important}
html body .qd-contact-layer__how span{
  color:var(--xh-fg2,#9A9384)!important}

/* 主按钮：白底黑字 → 金箔，和首页主 CTA 同一个语言 */
html body .qd-contact-layer__go .btn,
html body .qd-contact-layer__go a.btn,
html body .qd-contact-layer__go button{
  background:linear-gradient(140deg,#E2C079 0%,#C49749 58%,#C49749 100%)!important;
  color:#14120C!important;
  border:0!important;border-radius:2px!important;
  font-weight:600!important;letter-spacing:.02em;
  padding:14px 22px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 14px 34px rgba(140,102,40,.22)!important;
  transition:transform .34s cubic-bezier(.16,1,.3,1),filter .34s}
html body .qd-contact-layer__go .btn:hover{
  transform:translateY(-2px);filter:brightness(1.06)}

html body .qd-contact-layer__tip{
  color:var(--xh-fg2,#9A9384)!important;
  border-top:1px solid rgba(196,151,73,.16)!important}
html body .qd-contact-layer__tip b{
  color:var(--xh-fg0,#F4F0E7)!important}

html body .qd-contact-layer__copy{
  border:1px solid rgba(196,151,73,.34)!important;
  color:var(--xh-gold-hi,#E2C079)!important;
  border-radius:2px!important}
html body .qd-contact-layer__copy:hover{
  background:rgba(196,151,73,.12)!important;
  border-color:var(--xh-gold,#C49749)!important}
html body .qd-contact-layer__toast{
  color:var(--xh-gold-hi,#E2C079)!important}

/* ── 悬浮微信入口 ───────────────────────────────────────────────
   一直跟着滚动的那个联系入口。站上原来只有 22 页有微信弹层，
   其余 129 页的「说说你卡在哪」点了没反应（实点验证过），
   所以这份把弹层和入口一起做成全站共享件。

   墨黑底 + 品牌金，在米白页上是深色药丸、在墨黑页上靠金色描边立住，
   两种底都不用换第二套样式。金 #C49749 压墨黑 #14120C 实测 7.3:1。
   首屏不出现——往下滚过 240px 才浮出来，免得挡住 hero。
   ──────────────────────────────────────────────────────────── */
.qfloat{
  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:calc(clamp(14px,2.2vw,28px) + env(safe-area-inset-bottom,0px));
  z-index:110;                       /* 弹层 120、搜索 130，都在它之上 */
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px 11px 14px;
  border:1px solid rgba(196,151,73,.42);
  border-radius:999px;
  background:#14120C;
  color:#C49749;
  font:500 14px/1 "PingFang SC","Noto Sans SC",-apple-system,system-ui,sans-serif;
  letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  box-shadow:0 2px 6px rgba(8,7,6,.22),0 14px 34px rgba(8,7,6,.26);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .32s cubic-bezier(.16,1,.3,1),
             transform .32s cubic-bezier(.16,1,.3,1),
             visibility .32s,color .22s,border-color .22s;
}
.qfloat.is-in{opacity:1;visibility:visible;transform:none}
.qfloat:hover,.qfloat:focus-visible{
  color:#E2C079;border-color:rgba(226,192,121,.66)}
.qfloat:focus-visible{outline:2px solid #E2C079;outline-offset:3px}
.qfloat__icon{width:18px;height:18px;flex:0 0 18px;display:block}
.qfloat__icon path{fill:currentColor}
.qfloat__label{white-space:nowrap}
/* 弹层开着的时候把它收掉，免得压在弹层的关闭按钮上 */
.qfloat.is-hidden{opacity:0;visibility:hidden;transform:translateY(10px)}

@media (max-width:640px){
  .qfloat{padding:10px 14px 10px 12px;font-size:13px;gap:7px}
  .qfloat__icon{width:16px;height:16px;flex:0 0 16px}
}
@media (prefers-reduced-motion:reduce){
  .qfloat{transition:none}
}


/* 弹层一打开焦点就落在关闭键上，浏览器默认那圈蓝在金和墨黑上很突兀 */
html body .qd-contact-layer__x:focus-visible,
html body .qd-contact-layer__copy:focus-visible,
html body .qd-contact-layer__go .btn:focus-visible{
  outline:2px solid #E2C079!important;outline-offset:3px!important}


/* 手机上关闭键是绝对定位的，标题一长就跑到它底下。窄屏给标题让出右边那块。 */
@media (max-width:520px){
  html body .qd-contact-layer__head{padding-inline-end:38px}
  html body .qd-contact-layer__head h2{font-size:17px;line-height:1.45}
}

/* ────────────────────────────────────────────────────────────
   回到顶部 —— 和「微信联系」共用一次显隐，坐在它正上方。
   联系入口是主动作，所以它保持药丸形；这个是次要动作，做成
   一个只有图标的小圆钮，不跟主入口抢眼睛。
   金 #C49749 压墨黑 #14120C 实测 7.3:1。
   ──────────────────────────────────────────────────────────── */
.qtotop{
  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:calc(clamp(14px,2.2vw,28px) + env(safe-area-inset-bottom,0px) + 50px);
  z-index:110;
  width:40px;height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(196,151,73,.42);
  border-radius:999px;
  background:#14120C;
  color:#C49749;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(8,7,6,.22),0 14px 34px rgba(8,7,6,.26);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .32s cubic-bezier(.16,1,.3,1),
             transform .32s cubic-bezier(.16,1,.3,1),
             visibility .32s,color .22s,border-color .22s;
}
.qtotop.is-in{opacity:1;visibility:visible;transform:none}
.qtotop svg{width:18px;height:18px;display:block}
.qtotop svg path{fill:currentColor}
.qtotop:hover,.qtotop:focus-visible{
  color:#E2C079;border-color:rgba(226,192,121,.66)}
.qtotop:focus-visible{outline:2px solid #E2C079;outline-offset:3px}
.qtotop.is-hidden{opacity:0;visibility:hidden;transform:translateY(10px)}

@media (max-width:640px){
  .qtotop{
    width:36px;height:36px;
    bottom:calc(clamp(14px,2.2vw,28px) + env(safe-area-inset-bottom,0px) + 45px)}
  .qtotop svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .qtotop{transition:none}
}