/* ============================================================================
   分享页样式（/share/:slug）
   只负责"把海报托起来"：一屏之内先看到海报，再看到保存/分享按钮。
   海报本身是深色的，所以页面用浅底 + 大留白，让海报成为唯一焦点。
   ============================================================================ */
body.sh-body{background:var(--bg)}

.sh{max-width:520px;margin:0 auto;padding:26px 18px 44px}

.sh-head{text-align:center;margin-bottom:20px}
.sh-kicker{
  display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:999px;
  background:rgba(247,117,25,.12);color:var(--orange-d);
  font-size:12px;letter-spacing:.08em;line-height:1.6;
}
.sh-head h1{margin:0;font-size:26px;line-height:1.35;color:var(--navy)}
.sh-sub{margin:8px 0 0;font-size:13px;color:var(--ink-3);line-height:1.6}

/* 海报容器：深底 + 圆角，海报本身也是深底，接缝几乎看不出来 */
.sh-pv{
  position:relative;border-radius:18px;overflow:hidden;background:var(--navy);
  box-shadow:0 18px 44px -20px rgba(1,27,54,.55), 0 2px 6px rgba(1,27,54,.12);
  min-height:200px;
}
.sh-pv canvas,.sh-pv img{display:block;width:100%;height:auto}

.sh-load{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:rgba(255,255,255,.7);font-size:14px;
}

.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 20px}
.sh-span{grid-column:1/-1}
.sh-btn{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:12px;padding:14px 16px;font-size:15px;font-weight:600;
  font-family:var(--font);cursor:pointer;transition:transform .12s ease,box-shadow .18s ease;
}
.sh-btn:active{transform:scale(.985)}
.sh-primary{
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -12px rgba(247,117,25,.9);
}

.sh-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.sh-share-l{font-size:13px;color:var(--ink-3);margin-right:2px}
.sh-chip{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  border-radius:999px;padding:8px 16px;font-size:13px;font-family:var(--font);cursor:pointer;
}
.sh-chip:active{background:var(--line-2)}

.sh-qr{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;
}
.sh-qr img{border-radius:8px;border:1px solid var(--line-2);background:#fff}
.sh-qr-tx b{display:block;font-size:15px;color:var(--navy)}
.sh-qr-tx span{display:block;margin-top:4px;font-size:12px;color:var(--ink-3);line-height:1.6}
.sh-qr-save{
  appearance:none;border:0;background:none;padding:6px 0 0;margin:0;
  font-family:var(--font);font-size:12.5px;color:var(--orange-d);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

.sh-tip{margin:18px 0 0;font-size:12px;color:var(--ink-3);line-height:1.7;text-align:center}

/* 微信说明弹层 */
.sh-modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(1,27,54,.62);backdrop-filter:blur(2px);
}
.sh-modal[hidden]{display:none}
.sh-modal-in{
  width:100%;max-width:340px;background:#fff;border-radius:18px;padding:22px;
  text-align:center;box-shadow:0 24px 60px -24px rgba(0,0,0,.5);
}
.sh-modal-t{margin:0;font-size:17px;font-weight:700;color:var(--navy)}
.sh-modal-s{margin:8px 0 14px;font-size:13px;color:var(--ink-3);line-height:1.6}
.sh-modal-qr{display:block;margin:0 auto 14px;width:176px;height:176px;border-radius:10px;border:1px solid var(--line-2)}
.sh-steps{margin:0 0 18px;padding-left:18px;text-align:left;font-size:13px;color:var(--ink-2);line-height:1.9}
.sh-modal-in .sh-btn{width:100%}

/* 轻提示 */
.sh-toast{
  position:fixed;left:50%;bottom:44px;z-index:70;transform:translate(-50%,10px);
  background:rgba(1,27,54,.94);color:#fff;font-size:14px;line-height:1.5;
  padding:11px 18px;border-radius:10px;opacity:0;transition:opacity .24s ease,transform .24s ease;
  max-width:76vw;
}
.sh-toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:380px){
  .sh-acts{grid-template-columns:1fr}
  .sh{padding:20px 14px 36px}
}