/* ==========================================================================
   卢湾跑团 · 训练打卡分享图 · 预览层样式
   ---------------------------------------------------------------------------
   配合 /js/lw-share-card.js 使用（模块负责 DOM 与绘制，本文件只管外观）。
   类名统一 .shv-*，与 H5 课表里的同名样式**视觉一致**（两份都保留是因为两页
   CSS 体系不同：H5 走 /h5/assets/style.css，站点页走 /css/site.css + 页内 <style>）。

   生成分享图后弹出**全屏预览**，不铺在弹层正文里（正文只留按钮）。
   z-index 210 > 站点页详情弹层 130 > 下载弹层 99。
   ========================================================================== */
.shv{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 210;
  background: #eceef1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
.shv[hidden]{ display: none; }
/* 图片区：撑满剩余高度，图片按 contain 完整可见（3:4 图整幅呈现，四周无黑块） */
.shv-box{
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* 🔴 长按保存的两道坎：
   ① 站点页 body 上有全局 -webkit-touch-callout:none ⇒ iOS 长按连菜单都不弹，
      这里必须显式改回 default，否则「长按保存到相册」永远失效；
   ② user-select 同理放回 auto（部分安卓 WebView 会因 select 被禁而不给图片菜单）。 */
.shv-img{
  max-width: 100%; max-height: 100%;
  display: block; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 40px rgba(20,26,38,.16);
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}
.shv-tip{
  flex: 0 0 auto; margin: 14px 0 0;
  color: rgba(20,26,38,.62); font-size: 12px; line-height: 1.5;
  letter-spacing: .03em; text-align: center;
}
.shv-acts{ flex: 0 0 auto; display: flex; gap: 10px; }
.shv-btn{
  min-width: 132px; height: 44px; padding: 0 22px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  background: #ffe53b; color: #14161a;
  transition: opacity .15s ease;
}
.shv-btn:active{ opacity: .82; }
.shv-btn-ghost{ background: rgba(20,26,38,.08); color: #14161a; }

/* ---- 深色主题（站点页 html[data-theme="dark"]）：卡片本身固定黄底不变，
        只把预览层的底色与按钮调深，避免深色页面上白闪 ---- */
html[data-theme="dark"] .shv{ background: #0f1218; }
html[data-theme="dark"] .shv-tip{ color: rgba(255,255,255,.55); }
html[data-theme="dark"] .shv-btn-ghost{ background: rgba(255,255,255,.12); color: #f2f4f8; }