:root{
  --green:#106F6C;
  --green-dark:#0A5451;
  --green-light:#E8F3F2;
  --gold:#A8873C;
  --gold-light:#C9AE72;
  --ink:#1F2A2A;
  --ink-soft:#5C6B6A;
  --line:#DCE5E4;
  --bg:#F4F7F7;
  --white:#fff;
  --danger:#C0392B;
  --radius:14px;
  --shadow:0 2px 12px rgba(16,111,108,.08);
  --shadow-lg:0 8px 32px rgba(16,111,108,.14);
  --font-hei:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  --font-song:"Songti SC","STSong","SimSun","Source Han Serif SC","Noto Serif CJK SC",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

/* ---------- 整页背景 ----------
   用会议主视觉里的那张空白纹理图铺满整页。

   关于 background-attachment:fixed —— 它在 iOS Safari 上有长期 bug
   （滚动时背景不跟随、局部会闪）。这里不用 fixed，改用 min-height + 100vh，
   背景挂在 html 上自然铺满，兼容性最稳。 */
html{
  min-height:100%;
  background-color:var(--bg);
  background-image:url("bg-mobile.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  -webkit-background-size:cover;
}
body{
  font-family:var(--font-hei);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* body 自身透明，让 html 的背景透出来 */
  background:transparent;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}

/* ---------- 顶部主视觉 ----------
   这里仍用纹理图，但换成和整页背景不同的一张（横版 bg-texture），
   否则头部和整页完全同图，会看不出层次。
   叠一层白纱保证标题文字清晰 —— 纹理图本身是浅色的，
   不加遮罩的话 logo 和标题会糊在纹理上。 */
.hero{
  position:relative;
  /* 用竖版纹理图，和整页背景同源但取景不同，头部才不会显得平 */
  background:url("bg-mobile.jpg") center/cover no-repeat;
  padding:28px 20px 30px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.93),rgba(255,255,255,.88));
}
.hero-inner{position:relative;max-width:520px;margin:0 auto;text-align:center}
.hero-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
/* 「助力骨松专科发展」是宽幅毛笔字（原图 2954x436，比例约6.8:1），
   不能再按高度定尺寸 —— 34px 高只有49px 宽，挤成一小条。
   改成按宽度铺满，并留出左右安全边距。 */
.hero-logo img{width:100%;max-width:420px;height:auto;display:block}
.hero-title{
  font-family:var(--font-song);
  font-size:26px;font-weight:700;color:var(--green);
  letter-spacing:2px;margin:10px 0 6px;
}
/* hero-sub 现在排在 hero-title 上面（先机构名后主标题），
   所以给它加下边距，把主标题推开一点层次。 */
.hero-sub{font-size:14px;color:var(--ink-soft);letter-spacing:1px;margin:0 0 0}
/* .hero-badge 已在 2026-10-14 随「助力骨松专科发展」圆角标签一起删除 ——
   同样的文字改用毛笔字图片呈现（见 .hero-logo img）。 */

/* ---------- 主体容器 ---------- */
.wrap{
  max-width:520px;margin:0 auto;
  /* 底部 40 -> 14：页脚只剩版权一行，中间不需要留那么多空 */
  padding:22px 16px 14px;
  position:relative;z-index:1;
}
/* 极淡白纱：把内容区提亮保证文字可读，同时让背景纹理透出来。
   背景图本身已提过对比，这里只需很薄的一层（0.12）。 */
.wrap::before{
  content:"";position:fixed;top:0;right:0;bottom:0;left:0;
  background:rgba(255,255,255,.12);
  z-index:0;pointer-events:none;
}
/* 卡片用 0.94 白 —— 留一点点透，让背景纹理在卡片间露出来，
   但保持足够不透明以确保文字对比度。纯白会让整页像贴在白纸上。 */
.card{
  background:rgba(255,255,255,.94);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 18px;margin-bottom:16px;
  position:relative;z-index:1;
}
.card-title{
  font-size:17px;font-weight:600;color:var(--green);
  margin:0 0 4px;display:flex;align-items:center;gap:7px;
}
.card-title::before{
  content:"";width:3px;height:15px;background:var(--green);border-radius:2px;
}
.card-desc{font-size:13px;color:var(--ink-soft);margin:0 0 16px}

/* ---------- 表单 ---------- */
.field{margin-bottom:16px}
.field label{
  display:block;font-size:13px;color:var(--ink-soft);
  margin-bottom:7px;font-weight:500;
}
.field input{
  width:100%;height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;
  font-size:16px;font-family:var(--font-hei);color:var(--ink);
  background:#FAFCFC;transition:.2s;outline:none;
}
.field input::placeholder{color:#A9B6B5;font-size:15px}
.field input:focus{
  border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(16,111,108,.09);
}
.field input.err{border-color:var(--danger);background:#FDF5F4}

.btn{
  width:100%;height:50px;border:none;border-radius:10px;
  background:var(--green);color:#fff;
  font-size:17px;font-weight:600;letter-spacing:2px;
  font-family:var(--font-hei);cursor:pointer;transition:.2s;
  box-shadow:0 4px 14px rgba(16,111,108,.24);
}
.btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(16,111,108,.24)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
/* 次要按钮：白底描边，用于"返回登录页"这类辅助操作 */
.btn-2{
  background:#fff;color:var(--green);border:1px solid var(--green);
  box-shadow:none;font-weight:500;letter-spacing:1px;
}
.btn-2:active{background:var(--green-light);transform:translateY(1px)}

.hint{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.7}
.hint b{color:var(--green)}

/* ---------- 提示条 ---------- */
.tip{
  border-radius:10px;padding:12px 14px;font-size:13.5px;
  margin-bottom:14px;display:none;line-height:1.65;
}
.tip.show{display:block}
.tip-err{background:#FDF3F2;color:#9C2B1E;border:1px solid #F2D3CF}
.tip-ok{background:var(--green-light);color:var(--green-dark);border:1px solid #C6E0DE}

/* ---------- 会议信息列表 ---------- */
.info-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;
}
.info-row:last-child{border-bottom:none}
.info-row .k{color:var(--ink-soft);flex-shrink:0}
/* 右列空间有限，允许换行；min-width:0 是必须的，
   否则 flex 子项按内容宽度撑开，整行会把页面撑出横向滚动条 */
.info-row .v{
  text-align:right;font-weight:500;
  min-width:0;overflow-wrap:anywhere;
}
/* 日期、编号、唯一码这类不该被拆开的内容 */
.info-row .v .nb{white-space:nowrap;display:inline-block}

/* ---------- 证书主体 ---------- */
.cert-shell{max-width:560px;margin:0 auto;padding:0 10px 40px}
.cert-paper{
  position:relative;background:#fff;
  background-image:url("bg-texture.jpg");
  background-size:cover;background-position:center;
  border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.cert-paper::before{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(16,111,108,.28);border-radius:3px;pointer-events:none;
}
.cert-paper::after{
  content:"";position:absolute;inset:13px;
  border:1px solid rgba(168,135,60,.35);border-radius:2px;pointer-events:none;
}
.cert-inner{position:relative;padding:34px 26px 26px;text-align:center}

.cert-org{
  font-family:var(--font-song);font-size:14px;color:var(--green);
  letter-spacing:1.5px;line-height:1.7;margin-bottom:6px;
}
.cert-org-en{font-size:10.5px;color:var(--ink-soft);letter-spacing:.4px;margin-bottom:20px}

.cert-seal-tag{
  display:inline-block;padding:4px 16px;border-radius:999px;
  background:var(--green);color:#fff;font-size:13px;letter-spacing:3px;
  margin-bottom:16px;font-weight:500;
}
.cert-heading{
  font-family:var(--font-song);font-size:30px;font-weight:700;
  color:var(--green);letter-spacing:8px;margin:0 0 4px;text-indent:8px;
}
.cert-heading-en{
  font-size:10px;color:var(--gold);letter-spacing:3px;
  text-transform:uppercase;margin-bottom:22px;
}
.cert-rule{
  width:56px;height:2px;margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.cert-name{
  font-family:var(--font-song);font-size:34px;font-weight:700;
  color:var(--ink);letter-spacing:4px;margin:0 0 4px;text-indent:4px;
  line-height:1.35;
}
.cert-name-en{font-size:12px;color:var(--ink-soft);letter-spacing:2px;margin-bottom:20px;overflow-wrap:anywhere}

.cert-body{
  font-size:14.5px;color:var(--ink);line-height:2.15;text-align:justify;
  padding:0 4px;
}
.cert-body .em{font-weight:600;color:var(--green)}
.cert-body .u{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-light);padding:0 1px;
}

.cert-meta{
  margin:22px 0 18px;padding:14px 12px;
  background:rgba(16,111,108,.045);border-radius:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;
}
.cert-meta .m{text-align:center}
.cert-meta .mk{font-size:11.5px;color:var(--ink-soft);margin-bottom:3px;letter-spacing:.5px}
.cert-meta .mv{font-size:14px;font-weight:600;color:var(--green-dark);word-break:break-word}
/* 日期和编号里的短横线前后不允许断行，否则窄屏会断成"2026.09.08—09." + "10" */
.cert-meta .mv .nb{white-space:nowrap}

.cert-foot{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  text-align:left;
}
.cert-sign{font-size:12px;color:var(--ink-soft);line-height:1.9;flex:1;min-width:0}
.cert-sign .org{color:var(--ink);font-weight:600;font-size:12.5px}
.cert-qr{flex-shrink:0;text-align:center;width:88px}
.cert-qr img{width:88px;height:88px;border:1px solid var(--line);border-radius:4px}
.cert-qr .cap{font-size:10px;color:var(--ink-soft);margin-top:5px;letter-spacing:.5px}

.cert-code{
  margin-top:16px;font-size:11px;color:var(--ink-soft);
  letter-spacing:1px;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.cert-code b{color:var(--green);font-size:12.5px;letter-spacing:1.5px}

/* ---------- 证书操作区 ---------- */
.cert-actions{display:flex;gap:10px;margin-top:16px}
.btn-ghost{
  flex:1;height:44px;border:1px solid var(--green);border-radius:10px;
  background:#fff;color:var(--green);font-size:15px;font-weight:500;
  font-family:var(--font-hei);cursor:pointer;transition:.2s;
}
.btn-ghost:active{background:var(--green-light)}

.notice{
  font-size:12px;color:var(--ink-soft);line-height:1.75;
  padding:12px 14px;background:rgba(255,255,255,.7);
  border-radius:10px;margin-top:16px;border:1px solid var(--line);
}

/* ---------- 详情页（当前未启用）---------- */
.verify-hero{
  text-align:center;padding:24px 20px 26px;
  background:url("bg-texture.jpg") center/cover;
  border-bottom:1px solid var(--line);
}
.verify-ico{
  width:60px;height:60px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
}
.verify-ico.ok{background:var(--green-light);color:var(--green)}
.verify-ico.bad{background:#FDF3F2;color:var(--danger)}
.verify-title{font-size:19px;font-weight:600;margin:0 0 4px}
.verify-ico.ok ~ .verify-title{color:var(--green)}
.verify-ico.bad ~ .verify-title{color:var(--danger)}
.verify-sub{font-size:13px;color:var(--ink-soft);margin:0}

/* ---------- 底部 ---------- */
.foot{
  text-align:center;font-size:11.5px;color:var(--ink-soft);
  padding:20px 16px 30px;line-height:1.9;
}
/* ---------- 页脚版权声明 ----------
   2026-10-19 从图片改为纯文字（用户要求）。
   保留一个独立的类名而不是并入 .foot 文本流，
   是为了单独控制它的字号、颜色和上下间距。

   间距刻意收窄：原来卡片底到版权行之间空了 88px
   （wrap 底部 40 + foot 顶部 20 + 分隔线区 28），
   页面拉得很空。合并变量后整体上移约 34px。 */
.foot--tight{
  padding:6px 16px 22px;
}
.foot--tight .foot-copyright{
  margin:8px 0 0;font-size:10.5px;color:var(--ink-soft);
  /* 不要加 letter-spacing：43 个字符 × 0.3px ≈ 13px，
     在 390px 屏上正好把整句挤到第二行（实测折成「...ALL RIGHTS / RESERVED」）。
     版权行不需要字间距。 */
  letter-spacing:0;line-height:1.7;
  word-break:break-word;
}
.foot--tight .foot-copyright::before{
  content:"";display:block;width:28px;height:1px;
  margin:0 auto 8px;background:var(--line);
}

/* ---------- 加载/空状态 ---------- */
.loading{
  display:none;text-align:center;padding:30px 0;
  font-size:13px;color:var(--ink-soft);
}
.loading.show{display:block}
.spinner{
  width:22px;height:22px;border:2px solid var(--line);
  border-top-color:var(--green);border-radius:50%;
  animation:spin .7s linear infinite;margin:0 auto 10px;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media print{
  /* 整页背景图会被浏览器单独输出成第二张纸，必须关掉。
     证书自己的纸底由 cert.css 保留。 */
  html,body{background:#fff !important;background-image:none !important}
  .cert-actions,.notice,.foot,.no-print{display:none !important}
  .cert-paper{box-shadow:none;border:none}
  .cert-paper::before,.cert-paper::after{display:block}
  /* 尺寸/分页规则统一由 cert.css 的 @media print 管，
     这里不重复设 width —— 两处都设会以最后加载的为准，容易打架。 */
}
@media (max-width:360px){
  .cert-name{font-size:28px}
  .cert-heading{font-size:26px;letter-spacing:6px}
  .cert-inner{padding:28px 18px 22px}
  /* 320px 窄屏下两列太挤，日期和编号会折行，降级成单列 */
  .cert-meta{grid-template-columns:1fr;gap:10px}
  .cert-qr{width:76px}
  .cert-qr img{width:76px;height:76px}
  .hero-title{font-size:23px}
}

/* ============================================================
   微信内置浏览器降级
   --------------------------------------------------------
   iOS 微信走 WKWebView，Android 走腾讯 X5 内核。X5 版本跨度很大，
   2020 年前的老设备可能不支持 CSS 变量 —— 而上面全站样式都建立在
   var() 之上，一旦不支持就是彻底白屏（不是"不好看"，是完全没法用）。

   所以这里用 @supports 把变量展开成硬编码色值兜底。
   @supports 本身 X5 支持（Chrome 28+），所以这个降级是可靠的。
   ============================================================ */
@supports not (color: var(--green)) {
  html{
    min-height:100%;
    /* 背景色兜底：万一背景图加载失败，至少不是刺眼的白 */
    background-color:#F4F7F7;
    background-image:url("bg-mobile.jpg");
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
  }
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    color:#1F2A2A;background:transparent;min-height:100vh;
  }
  a{color:#106F6C}
  /* 整页背景上的提亮白纱，老内核同样需要 */
  .wrap{position:relative;z-index:1}
  .wrap::before{
    content:"";position:fixed;top:0;right:0;bottom:0;left:0;
    background:rgba(255,255,255,.12);
    z-index:0;pointer-events:none;
  }
  .hero{
    position:relative;
    background-image:url("bg-mobile.jpg");
    background-size:cover;background-position:center top;
    background-repeat:no-repeat;-webkit-background-size:cover;
    padding:28px 20px 30px;overflow:hidden;
  }
  .hero::before{
    position:absolute;top:0;right:0;bottom:0;left:0;
    background:linear-gradient(160deg,rgba(255,255,255,.93),rgba(255,255,255,.88));
  }
  .hero-logo{margin-bottom:16px}
  /* 老 X5 内核不支持 max-width 于图片时的自适应组合，
     显式给宽度保证毛笔字铺满（原 34px 高度写法会让它挤成一小条）。 */
  .hero-logo img{width:100%;max-width:420px;height:auto;display:block}
  .hero-logo img + img{margin-left:8px}
  .hero-title{
    font-family:"Songti SC","STSong","SimSun",serif;
    color:#106F6C;font-size:26px;letter-spacing:2px;margin:10px 0 6px;
  }
  .hero-sub{font-size:14px;color:#5C6B6A;letter-spacing:1px;margin:0}

  .card{
    background:rgba(255,255,255,.94);border-radius:14px;padding:22px 18px;margin-bottom:16px;
    box-shadow:0 2px 12px rgba(16,111,108,.08);
    position:relative;z-index:1;
  }
  .card-title{color:#106F6C;font-size:17px;margin:0 0 4px}
  .card-title::before{background:#106F6C}
  .card-desc{color:#5C6B6A;font-size:13px;margin:0 0 16px}

  .field label{color:#5C6B6A;font-size:13px;margin-bottom:7px}
  .field input{
    border-color:#DCE5E4;border-radius:10px;color:#1F2A2A;background:#FAFCFC;
  }
  .field input:focus{border-color:#106F6C;box-shadow:0 0 0 3px rgba(16,111,108,.09)}
  .field input.err{border-color:#C0392B;background:#FDF5F4}
  .field input::placeholder{color:#A9B6B5}

  .btn{
    background:#106F6C;color:#fff;border-radius:10px;
    box-shadow:0 4px 14px rgba(16,111,108,.24);
  }
  .btn-2{background:#fff;color:#106F6C;border:1px solid #106F6C;box-shadow:none}
  .hint{color:#5C6B6A;font-size:12px}
  .hint b{color:#106F6C}

  .tip-err{background:#FDF3F2;color:#9C2B1E;border-color:#F2D3CF}
  .tip-ok{background:#E8F3F2;color:#0A5451;border-color:#C6E0DE}

  .info-row{border-bottom-color:#DCE5E4;font-size:14px;padding:11px 0}
  .info-row .k{color:#5C6B6A}
  .info-row .v{font-weight:500}
  /* anywhere 老内核不认，break-word 兼容性更好 */
  .info-row .v{overflow-wrap:break-word;word-wrap:break-word}

  .cert-paper{
    border-color:#DCE5E4;border-radius:6px;background:#fff;
    background-image:url("bg-texture.jpg");
    background-size:cover;background-position:center;
    box-shadow:0 8px 32px rgba(16,111,108,.14);
  }
  .cert-paper::before{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-color:rgba(16,111,108,.28)}
  .cert-paper::after{position:absolute;top:13px;right:13px;bottom:13px;left:13px;border-color:rgba(168,135,60,.35)}
  .cert-inner{padding:34px 26px 26px;text-align:center}

  .cert-org{color:#106F6C;font-size:14px;letter-spacing:1.5px}
  .cert-org-en{color:#5C6B6A;font-size:10.5px;margin-bottom:20px}
  .cert-seal-tag{background:#106F6C;color:#fff;font-size:13px;letter-spacing:3px}
  .cert-heading{
    font-family:"Songti SC","STSong","SimSun",serif;
    color:#106F6C;font-size:30px;letter-spacing:8px;text-indent:8px;
  }
  .cert-heading-en{color:#A8873C;font-size:10px;letter-spacing:3px;margin-bottom:22px}
  .cert-rule{
    background:linear-gradient(90deg,rgba(168,135,60,0),#A8873C,rgba(168,135,60,0));
  }
  .cert-name{
    font-family:"Songti SC","STSong","SimSun",serif;
    color:#1F2A2A;font-size:34px;letter-spacing:4px;text-indent:4px;
  }
  .cert-name-en{color:#5C6B6A;font-size:12px;letter-spacing:2px;overflow-wrap:break-word;word-wrap:break-word}
  .cert-body{color:#1F2A2A;font-size:14.5px;line-height:2.15}
  .cert-body .em{color:#106F6C}
  .cert-body .u{text-decoration-color:#C9AE72}

  /* Grid 不支持时改用 flex 两列，视觉等价 */
  .cert-meta{
    display:flex;flex-wrap:wrap;background:rgba(16,111,108,.045);
    border-radius:8px;padding:14px 12px;
  }
  .cert-meta .m{width:50%;text-align:center;margin-bottom:12px}
  .cert-meta .mk{color:#5C6B6A;font-size:11.5px;margin-bottom:3px}
  .cert-meta .mv{color:#0A5451;font-size:14px;word-break:break-word}
  .cert-meta .nb{white-space:nowrap}

  .cert-foot{border-top-color:#DCE5E4}
  .cert-sign{color:#5C6B6A;font-size:12px;line-height:1.9}
  .cert-sign .org{color:#1F2A2A;font-size:12.5px}
  .cert-qr img{border-color:#DCE5E4}
  .cert-qr .cap{color:#5C6B6A;font-size:10px}
  .cert-code{color:#5C6B6A;font-size:11px}
  .cert-code b{color:#106F6C;font-size:12.5px}

  .cert-actions{gap:10px;display:flex}
  .cert-actions .btn-ghost + .btn-ghost{margin-left:10px}
  .btn-ghost{border-color:#106F6C;color:#106F6C;background:#fff;border-radius:10px}
  .notice{border-color:#DCE5E4;background:rgba(255,255,255,.7);color:#5C6B6A}

  .verify-ico.ok{background:#E8F3F2;color:#106F6C}
  .verify-ico.bad{background:#FDF3F2;color:#C0392B}
  .verify-title{font-size:19px}
  .verify-ico.ok ~ .verify-title{color:#106F6C}
  .verify-ico.bad ~ .verify-title{color:#C0392B}
  .verify-sub{color:#5C6B6A;font-size:13px}
  .foot{color:#5C6B6A;font-size:11.5px}

  .loading{color:#5C6B6A}
  .spinner{border-color:#DCE5E4;border-top-color:#106F6C}

  @media (max-width:360px){
    .cert-name{font-size:28px}
    .cert-heading{font-size:26px;letter-spacing:6px}
    .cert-inner{padding:28px 18px 22px}
    .cert-meta .m{width:100%}
    .cert-qr{width:76px}
    .cert-qr img{width:76px;height:76px}
    .hero-title{font-size:23px}
  }
}