/* ============================================================
   分享海报模版（证书模版 + 模版切换器）
   由 index.html 与 pages/admin/profit.html 共享引入
   ============================================================ */

/* 证书专用字体（本地 woff2，同源加载，html2canvas 可捕获） */
@font-face {
  font-family: 'KazukiReiwa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/invite/domain-card-package/fonts/kazuki-reiwa.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/invite/domain-card-package/fonts/courier-prime-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/invite/domain-card-package/fonts/courier-prime-700.woff2') format('woff2');
}

/* ===== 模版切换器（弹窗内顶部） ===== */
.tpl-switch{
  display:flex;gap:6px;padding:4px;border-radius:10px;
  background:var(--bg,#f1eee6);border:1px solid var(--border,#e6dfcd);
  width:max-content;margin:0 auto 12px;
}
.tpl-switch .tpl-opt{
  border:none;background:transparent;color:var(--txt2,#8A8578);
  padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tpl-switch .tpl-opt:hover{color:var(--txt,#1C1B22)}
.tpl-switch .tpl-opt.active{background:#fff;color:#A8842E;box-shadow:0 2px 8px rgba(90,70,30,.14)}

/* ===== 证书模版卡片 ===== */
.poster-box .scard.tpl-cert{
  background:none;padding:0;border-radius:0;box-shadow:none;
  min-height:0;height:600px;overflow:visible;
}
.cert-card{
  position:relative;width:400px;height:600px;flex-shrink:0;
  display:flex;flex-direction:column;padding:20px 26px 16px;gap:10px;
  background:
    url('/invite/domain-card-package/paper-texture-seamless.jpg'),
    #FAF1DE;
  background-size:256px 256px,auto;
  background-repeat:repeat,no-repeat;
  box-shadow:
    inset 0 0 40px rgba(120,95,45,0.10),
    inset 0 0 8px rgba(120,95,45,0.06),
    0 0 0 1px rgba(201,162,75,0.28),
    0 30px 70px rgba(90,70,30,0.30),
    0 12px 30px rgba(90,70,30,0.15);
  font-family:"KazukiReiwa","HYMingChao","HYMincho","汇文明朝体","方正汇文明朝体","Noto Serif SC","Songti SC","SimSun","STSong",serif;
}
.cert-card footer{margin-top:auto}
.cert-card header,.cert-card .hero,.cert-card .info,.cert-card footer{position:relative;z-index:2}
.cert-card .cert-frame{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:3;
}
.cert-card .cert-title,.cert-card .cert-no,.cert-card .domain,.cert-card .price,
.cert-card .meaning,.cert-card .chip,.cert-card .info .label,.cert-card .info .value,
.cert-card .slogan,.cert-card .url,.cert-card .qr-tip{
  text-shadow:0 0 1.5px rgba(40,34,28,.20),0 0 0.5px rgba(40,34,28,.10);
}
.cert-card .hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:40px;flex-shrink:0}
.cert-card .cert-title{
  font-size:22px;font-weight:700;letter-spacing:12px;text-indent:12px;
  background:linear-gradient(180deg,#F4D98E 0%,#C9A24B 60%,#A8842E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.6));
}
.cert-card .cert-intro{
  color:#A8842E;font-size:11px;letter-spacing:4px;
  font-style:italic;font-family:"Georgia","Times New Roman",serif;
}
.cert-card .cert-no{
  position:absolute;top:22px;right:30px;z-index:2;
  font-family:"Courier New","Courier",monospace;
  color:#8A8578;font-size:10px;letter-spacing:1px;
}
/* 油墨斑驳文字 */
.cert-card .ink{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#201f26 0%,#0e0d13 100%);
  background-size:64px 64px,100% 100%;
  background-repeat:repeat,no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 1px rgba(38,35,32,.16);
}
/* 金额镏金 */
.cert-card .price .num.gold-num{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#F9EBBE 0%,#F0D488 30%,#D9B054 62%,#B78A34 100%);
  background-size:64px 64px,100% 100%;
  background-repeat:repeat,no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 14px rgba(217,176,84,.4),0 0 3px rgba(255,244,200,.5),0 1.5px 2px rgba(120,90,30,.5);
}
.cert-card .domain-row{display:flex;align-items:center;gap:12px}
.cert-card .domain{display:flex;align-items:baseline;gap:3px;position:relative;margin:0 10px 5px 10px}
.cert-card .domain .main{
  font-family:"KazukiReiwa","Courier Prime","Special Elite",serif;
  font-size:38px;font-weight:400;color:#262320;letter-spacing:1px;word-break:break-all;
}
.cert-card .domain .tld{
  font-family:"KazukiReiwa","Courier Prime","Special Elite",serif;
  font-size:30px;font-weight:500;color:#A8842E;flex-shrink:0;
}
.cert-card .stamp{
  position:absolute;top:-70px;right:-22px;width:62px;height:62px;z-index:3;
  transform:rotate(40deg);
}
.cert-card .stamp svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1.5px 3px rgba(90,25,15,.35))}
.cert-card .hero .meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 7px;width:100%;
}
.cert-card .hero .chip{
  padding:1px 6px;border-radius:3px;border:1px solid rgba(201,162,75,.22);
  background:rgba(201,162,75,.10);color:#A8842E;font-size:9px;font-weight:400;
  letter-spacing:.5px;white-space:nowrap;line-height:1.7;
}
.cert-card .hero .meaning{
  color:#8A8578;font-size:11px;letter-spacing:1px;line-height:1.7;text-align:center;max-width:100%;
}
.cert-card .price{
  font-family:"KazukiReiwa","Courier Prime","Special Elite",serif;
  font-size:48px;font-weight:400;letter-spacing:-1px;line-height:1.1;color:#262320;
  font-variant-numeric:tabular-nums;margin-top:10px;text-align:center;
}
.cert-card .price .cur{font-size:24px;font-weight:400;color:#A8842E;margin-right:3px}
.cert-card .price .num.is-face{font-size:30px;color:#262320}
.cert-card .price .label{
  display:block;text-align:center;font-size:10px;font-weight:500;letter-spacing:6px;
  color:#8A8578;margin-top:4px;
}
.cert-card .info{display:flex;justify-content:center;margin-top:10px;flex-shrink:0}
.cert-card .info .block{
  position:relative;width:86%;padding:4px 14px;border-radius:10px;
  background:rgba(255,255,255,.55);border:1px solid rgba(201,162,75,.28);
  box-shadow:0 6px 18px rgba(120,95,45,.08);display:flex;flex-direction:column;
}
/* 印章盖在信息卡片（成交时间/交易平台）右上角 */
.cert-card .info .block .stamp{top:90px;right:-18px;width:60px;height:60px;transform:rotate(-30deg)}
.cert-card .info .row{
  display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;padding:7px 2px;
}
.cert-card .info .row + .row{border-top:1px solid rgba(201,162,75,.14)}
.cert-card .info .label{
  color:#8A8578;font-size:11px;font-weight:500;letter-spacing:1.5px;white-space:nowrap;
}
.cert-card .info .value{
  color:#262320;font-weight:400;font-size:12px;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cert-card footer{
  position:relative;flex-shrink:0;margin-top:auto;
  height:104px;width:100%;z-index:2;
}
.cert-card footer .qr-col{
  position:absolute;left:0;bottom:10px;z-index:3;
  display:flex;flex-direction:column-reverse;align-items:center;gap:5px;
}
.cert-card footer .txt-col{
  position:absolute;right:6px;bottom:10px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
.cert-card footer .slogan{color:#8A8578;font-size:8px;font-weight:400;letter-spacing:1.5px}
.cert-card footer .steel-seal{
  position:absolute;right:4px;bottom:4px;z-index:1;width:58px;height:58px;opacity:0.08;pointer-events:none;
}
.cert-card footer .steel-seal svg{width:100%;height:100%;display:block}
.cert-card footer .steel-seal text{filter:drop-shadow(-1.4px -1.4px 0 rgba(255,255,255,.75)) drop-shadow(1.6px 1.6px 1.2px rgba(70,50,20,.7))}
.cert-card footer .steel-seal rect{filter:drop-shadow(-1.2px -1.2px 0 rgba(255,255,255,.6)) drop-shadow(1.4px 1.4px 1.2px rgba(70,50,20,.6))}
.cert-card footer .qr{
  width:60px;height:60px;border-radius:6px;background:rgba(255,255,255,.55);
  border:1px solid rgba(201,162,75,.28);box-shadow:0 6px 18px rgba(120,95,45,.08);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cert-card footer .qr img{width:100%;height:100%;display:block}
.cert-card footer .qr-tip{color:#8A8578;font-size:8px;letter-spacing:2px}
.cert-card footer .url{color:#A8842E;font-size:9px;letter-spacing:.5px}

/* ===== 导出图片降级：html2canvas 对 background-clip:text / SVG 内联滤镜 / drop-shadow 支持有限，渲染前加上 .for-render 让这些元素回到纯色可绘制状态 ===== */
.cert-card.for-render{
  /* 去掉外投影（0 30px 70px 等），避免导出图右侧/下方出现黑色阴影蒙板；仅保留描边 */
  box-shadow:0 0 0 1px rgba(201,162,75,0.28);
}
.cert-card.for-render .cert-title{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  filter:none;color:#C9A24B;
}
.cert-card.for-render .ink{
  background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#1C1B22;text-shadow:0 1px 1px rgba(38,35,32,.16);
}
.cert-card.for-render .price .num.gold-num{
  background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#C9A24B;text-shadow:0 1px 1px rgba(255,244,200,.55),0 1.5px 2px rgba(120,90,30,.35);
}
.cert-card.for-render .stamp svg,
.cert-card.for-render .steel-seal svg,
.cert-card.for-render footer .steel-seal text,
.cert-card.for-render footer .steel-seal rect{
  filter:none;
}
.cert-card.for-render .info .block{
  /* 半透明背景在 canvas 上常常显示为发白，给出更稳定的纯白 + 边框 */
  background:#FFFBF1;
}
.cert-card.for-render footer .qr{
  /* 二维码容器背景直接纯白，避免半透明混色时 canvas 偏色 */
  background:#fff;
}