/* 全站分享组件：桌面右侧悬浮条 + 移动端圆钮面板 + 二维码浮层
   颜色一律取 site.css 的变量（金 / 土体系），不引入任何第三方样式 */

/* ── 悬浮条（桌面） ── */
.shp{position:fixed;right:0;top:46%;transform:translateY(-50%);z-index:88;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.shp-g{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.shp-h{background:var(--gold);color:#fff;font-size:11px;letter-spacing:2px;line-height:1;
  padding:9px 5px;writing-mode:vertical-rl;border-radius:8px 0 0 8px;user-select:none;}
.shp-b{display:flex;align-items:center;width:44px;height:44px;overflow:hidden;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-right:0;border-radius:9px 0 0 9px;
  padding:0;color:var(--gold-d);box-shadow:var(--shadow);transition:width .18s ease,background .18s ease,border-color .18s ease;}
.shp-b svg{flex:none;width:20px;height:20px;margin:0 11px;}
.shp-b span{font-size:12.5px;color:var(--ink2);white-space:nowrap;opacity:0;transition:opacity .12s ease;}
.shp-b:hover,.shp-b:focus-visible{width:112px;background:var(--gold-p);border-color:var(--gold-l);outline:none;}
.shp-b:hover span,.shp-b:focus-visible span{opacity:1;}
.shp-b:active{background:var(--gold-p);}
.shp-b.on{background:var(--gold);border-color:var(--gold);color:#fff;}
.shp-b.on span{color:#fff;}
.shp-b.on svg{color:#fff;}

/* ── 移动端：只留一个圆钮 ── */
.shp-fab{display:none;position:fixed;right:14px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:88;
  width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(150,119,58,.38);align-items:center;justify-content:center;}
.shp-fab svg{width:22px;height:22px;}

@media (max-width:767px){
  .shp{right:0;left:0;top:auto;bottom:0;transform:none;gap:0;align-items:stretch;
    background:#fff;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -8px 26px rgba(60,48,24,.16);padding:16px 14px calc(18px + env(safe-area-inset-bottom));
    display:none;z-index:89;}
  .shp.open{display:block;}
  .shp-h{display:none;}
  .shp-b{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:24%;height:auto;border:0;border-radius:12px;background:transparent;box-shadow:none;
    padding:6px 0;margin:0 0.5%;color:var(--gold-d);}
  .shp-b svg{margin:0;width:24px;height:24px;}
  .shp-b span{opacity:1;font-size:11.5px;}
  .shp-b:hover,.shp-b:focus-visible{width:24%;background:var(--gold-p);border:0;}
  /* 让四个按钮横向排列 */
  .shp-g{flex-direction:row;justify-content:space-between;align-items:stretch;width:100%;gap:0;}
  .shp-fab{display:flex;}
}

.shp-cancel{display:none;width:100%;height:38px;margin-top:10px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink2);font-size:13px;font-family:inherit;cursor:pointer;}
/* ── 遮罩 + 二维码浮层 ── */
.shp-maskx{position:fixed;inset:0;background:rgba(44,42,36,.42);z-index:900;}
.shp-qr{position:fixed;z-index:901;left:50%;top:50%;transform:translate(-50%,-50%);
  width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 48px rgba(60,48,24,.28);padding:20px 20px 16px;text-align:center;}
.shp-qr>b{display:block;font-size:14px;color:var(--ink);}
.shp-qr>p{margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6;}
.shp-qrbox{width:212px;height:212px;margin:14px auto 0;border:1px solid var(--line);border-radius:10px;
  padding:8px;background:#fff;display:flex;align-items:center;justify-content:center;}
.shp-qrbox img{display:block;width:100%;height:100%;}
.shp-qrbox .load{font-size:12px;color:var(--muted);}
.shp-qru{display:flex;align-items:center;gap:8px;margin-top:12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);padding:6px 8px;text-align:left;}
.shp-qru span{flex:1;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shp-qru button{flex:none;border:0;background:var(--gold);color:#fff;font-size:11.5px;padding:4px 11px;
  border-radius:6px;cursor:pointer;font-family:inherit;}
.shp-qru button:hover{background:var(--gold-d);}
.shp-x{width:100%;height:36px;margin-top:10px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink2);font-size:13px;cursor:pointer;font-family:inherit;}
.shp-x:hover{background:var(--surface2);}

/* ── 复制提示 ── */
.shp-tip{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:902;
  background:rgba(44,42,36,.92);color:#fff;font-size:13px;padding:11px 20px;border-radius:9px;
  display:flex;align-items:center;gap:8px;pointer-events:none;animation:shpIn .18s ease;}
.shp-tip svg{width:15px;height:15px;color:var(--gold-l);}
@keyframes shpIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* ── 微信内引导 ── */
.shp-wxtip{position:fixed;right:12px;top:12px;z-index:902;max-width:250px;background:rgba(44,42,36,.94);
  color:#fff;font-size:12.5px;line-height:1.7;padding:12px 14px;border-radius:10px;}
.shp-wxtip b{color:var(--gold-l);}

/* 移动端才显示「取消」按钮（须排在全局 display:none 之后） */
@media (max-width:767px){ .shp-cancel{display:block;} }