/* ==========================================================================
   好己伴学 · 悬浮二维码组件（hj-qr）
   右侧底部悬浮，扫码可在手机上打开当前页面。
   依赖 assets/qrcode.js（Kazuhiko Arase, MIT）与 assets/mobile-qr.js
   所有类名以 .hj-qr 前缀，避免与页面样式冲突。
   ========================================================================== */
.hj-qr, .hj-qr *{box-sizing:border-box}
.hj-qr{
  position:fixed; right:22px; bottom:22px; z-index:2147483000;
  font-family:"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px; line-height:1.5; color:#22302E;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  pointer-events:none;
}
/* 用 :where() 把重置的权重降到 0，否则 .hj-qr button（0,1,1）会盖掉下面 .hj-qr__pill 等（0,1,0）的背景色 */
.hj-qr :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- 卡片态（默认：二维码常驻可见） ---------- */
.hj-qr__card{
  pointer-events:auto;
  position:relative; width:168px;
  background:#fff; border:1px solid rgba(23,63,58,.10); border-radius:18px;
  padding:11px 11px 9px;
  box-shadow:0 22px 48px -22px rgba(14,42,39,.55), 0 4px 14px -6px rgba(14,42,39,.18);
  transform-origin:100% 100%;
  transition:width .3s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1), opacity .22s ease, box-shadow .34s ease;
}
.hj-qr__card:hover{box-shadow:0 26px 56px -22px rgba(14,42,39,.6), 0 6px 18px -6px rgba(14,42,39,.22)}
.hj-qr[data-state="mini"] .hj-qr__card{
  transform:scale(.55) translateY(14px); opacity:0; pointer-events:none;
}
.hj-qr__head{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:800; color:#173F3A; letter-spacing:.02em;
  padding:1px 3px 8px;
}
.hj-qr__dot{
  position:relative; flex:0 0 7px; width:7px; height:7px; border-radius:50%;
  background:#E65A3A;
}
.hj-qr__dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid #E65A3A; opacity:.5;
  animation:hjQrPulse 2.4s ease-out infinite;
}
@keyframes hjQrPulse{0%{transform:scale(.7);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.hj-qr__min{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#6A625A; background:#F7F3EA; border:1px solid #EDE7DC;
  transition:background .2s, color .2s, transform .2s;
}
.hj-qr__min:hover{background:#173F3A; color:#fff; transform:translateY(-1px)}
.hj-qr__min svg{width:11px;height:11px}

.hj-qr__frame{
  display:block; width:100%; padding:0; border-radius:12px;
  background:#fff; border:1px solid #EDE7DC;
  overflow:hidden; transition:border-color .2s, transform .2s;
}
.hj-qr__frame:hover{border-color:#173F3A}
.hj-qr__canvas{display:block; width:100% !important; height:auto !important}
/* 点击二维码放大 */
.hj-qr[data-zoom="true"] .hj-qr__card{width:242px}
.hj-qr[data-zoom="true"] .hj-qr__tip{color:#173F3A}

.hj-qr__tip{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; font-weight:700; color:#6A625A;
  padding:6px 2px 1px; letter-spacing:.01em;
}
.hj-qr__scan{width:64px;height:auto;flex:0 0 auto;margin-bottom:-5px}
.hj-qr__copy{
  display:block; width:100%; margin-top:8px; padding:7px 0; border-radius:10px;
  font-size:11.5px; font-weight:800; color:#173F3A;
  background:#F7F3EA; border:1px solid #EDE7DC;
  transition:background .18s, color .18s, border-color .18s;
}
.hj-qr__copy:hover{background:#173F3A; color:#fff; border-color:#173F3A}
.hj-qr__copy.is-done{background:#5ED4A0; border-color:#5ED4A0; color:#0E2A27}

/* ---------- 收起后的胶囊 ---------- */
.hj-qr__pill{
  pointer-events:auto; position:absolute; right:0; bottom:0;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#173F3A; color:#fff;
  box-shadow:0 14px 30px -12px rgba(14,42,39,.7);
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .22s ease, background .2s;
}
.hj-qr__pill:hover{background:#E65A3A; transform:scale(1.06)}
.hj-qr[data-state="mini"] .hj-qr__pill{opacity:1; transform:none; pointer-events:auto}
.hj-qr__pill svg{width:24px;height:24px}

/* 首次出现：轻抖两下提示可点（只播一次，由 JS 控制 class） */
.hj-qr__pill.is-hint{animation:hjQrHint 2.6s cubic-bezier(.22,1,.36,1) 2}
@keyframes hjQrHint{
  0%,100%{transform:none}
  8%{transform:scale(1.12)}
  16%{transform:none}
  24%{transform:scale(1.08)}
  32%{transform:none}
}

/* 组件整体隐藏开关（打印 / 长图导出 / 手机） */
@media print{.hj-qr{display:none !important}}
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  .hj-qr{display:none !important}
}
.hj-qr.is-hidden{display:none !important}