/* ============================================================
   企业商业价值认证证书 · 设计样式 v1
   配色: 深蓝底 + 金 + 红（盛力全球底牌数据库品牌色）
   用途: c50-result 证书区 + certificate-preview.html 设计样稿
   ============================================================ */

.cert {
  --cert-bg: #0b1a33;
  --cert-frame: #c9a84c;
  --cert-frame-soft: rgba(201,168,76,0.35);
  --cert-gold: #d4b45c;
  --cert-gold-light: #e8cf8a;
  --cert-ink: #f3ead2;
  --cert-ink-dim: #b7a97c;
  --cert-seal: #c0392b;

  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(100,120,220,0.10) 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 110%, rgba(201,168,76,0.12) 0%, transparent 60%),
    linear-gradient(165deg, #0e2040 0%, var(--cert-bg) 55%, #071324 100%);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(201,168,76,0.15);
  overflow: hidden;
}

/* 金色水印（居中底纹） */
.cert::before {
  content: "盛力";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 120px;
  font-weight: 900;
  letter-spacing: 24px;
  color: rgba(201,168,76,0.045);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* 内层双线框 */
.cert-frame {
  position: relative;
  margin: 10px;
  border: 1px solid var(--cert-frame-soft);
  border-radius: 9px;
  padding: 5px;
  z-index: 1;
}
.cert-frame-inner {
  position: relative;
  border: 1.5px solid rgba(212,180,92,0.7);
  border-radius: 6px;
  padding: 26px 22px 22px;
  background: rgba(4,10,22,0.28);
}

/* 四角装饰（金色菱形点） */
.cert-frame::after,
.cert-frame-inner::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--cert-gold-light), var(--cert-frame));
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(212,180,92,0.8);
}
.cert-frame::after  { top: -5px; right: -5px; }

/* 头部：品牌 */
.cert-head {
  text-align: center;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--cert-ink-dim);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cert-head b {
  display: block;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--cert-gold-light);
  font-weight: 700;
  margin-top: 3px;
}

/* 标题 */
.cert-title {
  text-align: center;
  font-family: var(--font-serif, "Noto Serif SC", serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--cert-gold-light);
  margin: 0 0 4px;
  text-shadow: 0 0 22px rgba(201,168,76,0.45);
}
.cert-title-sub {
  text-align: center;
  font-size: 11px;
  letter-spacing: 8px;
  color: var(--cert-ink-dim);
  margin: 0 0 14px;
  text-indent: 8px;
}

/* 分隔线 + 菱形 */
.cert-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 14px;
}
.cert-divider::before,
.cert-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cert-frame-soft));
}
.cert-divider::after {
  background: linear-gradient(90deg, var(--cert-frame-soft), transparent);
}
.cert-divider i {
  width: 7px;
  height: 7px;
  background: var(--cert-gold);
  transform: rotate(45deg);
}

/* 企业名称 */
.cert-ent {
  text-align: center;
  font-family: var(--font-serif, "Noto Serif SC", serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--cert-ink);
  line-height: 1.45;
  padding: 0 6px;
  margin: 0 0 10px;
  word-break: break-all;
}

/* 等级徽章（圆形奖章） */
.cert-medal {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--medal-color, var(--cert-gold));
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 60%),
              color-mix(in srgb, var(--medal-color, var(--cert-gold)) 14%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--medal-color, var(--cert-gold)) 25%, transparent),
              0 0 24px color-mix(in srgb, var(--medal-color, var(--cert-gold)) 45%, transparent);
  position: relative;
}
.cert-medal::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed color-mix(in srgb, var(--medal-color, var(--cert-gold)) 65%, transparent);
  border-radius: 50%;
}
.cert-medal .m-level {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--medal-color, var(--cert-gold));
}
.cert-medal .m-title {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--cert-ink);
  margin-top: 2px;
}

/* 正文 */
.cert-body {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--cert-ink);
  margin: 0 2px 14px;
}
.cert-body em {
  font-style: normal;
  color: var(--cert-gold-light);
  font-weight: 700;
}

/* 数据行（证书编号/综合分/企业编号等） */
.cert-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 8px;
  padding: 10px 8px;
  background: rgba(8,18,38,0.5);
  margin-bottom: 16px;
}
.cert-data .cd {
  text-align: center;
  padding: 2px 2px;
}
.cert-data .cd-label {
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--cert-ink-dim);
  margin-bottom: 3px;
}
.cert-data .cd-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--cert-ink);
  word-break: break-all;
}
.cert-data .cd-val.gold { color: var(--cert-gold-light); }

/* 底部：签发机构 + 印章 + 日期 */
.cert-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.cert-foot .cf-org {
  font-size: 12px;
  color: var(--cert-ink);
  text-align: left;
}
.cert-foot .cf-org .org-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cert-gold-light);
  letter-spacing: 1px;
}
.cert-foot .cf-org .org-date {
  font-size: 10px;
  color: var(--cert-ink-dim);
  margin-top: 4px;
}
.cert-foot .cf-org .org-no {
  font-size: 9.5px;
  color: var(--cert-ink-dim);
  margin-top: 2px;
  letter-spacing: 1px;
}

/* 红色认证专用章 */
.cert-seal {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px double var(--cert-seal);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--cert-seal);
  line-height: 1.35;
  background: rgba(192,57,43,0.08);
  box-shadow: 0 0 0 2px var(--cert-seal), 0 0 22px rgba(192,57,43,0.5);
  opacity: 0.92;
  flex-shrink: 0;
  transform: rotate(-8deg);
}

/* 验真区（仿域名证书：二维码 + 查询网址 + 编号） */
.cert-verify {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed rgba(201,168,76,0.25);
  border-radius: 10px;
  background: rgba(8,18,38,0.35);
}
.cert-qr {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  background: #f5f0e0;
  border-radius: 6px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
}
.cert-qr i { background: #0a1526; }
.cert-qr-text {
  font-size: 10px;
  line-height: 1.8;
  color: var(--cert-ink-dim);
}
.cert-qr-text span { color: var(--cert-ink); letter-spacing: 1px; }
.cert-qr-text b { color: var(--cert-gold-light); font-size: 11px; letter-spacing: 1px; word-break: break-all; }

/* 等级配色变量 */
.cert.is-L1 { --medal-color: #c9a84c; }
.cert.is-L2 { --medal-color: #e8a020; }
.cert.is-L3 { --medal-color: #d43030; }

/* 证书底部来源角标 */
.cert-source {
  text-align: center;
  font-size: 10px;
  color: var(--cert-ink-dim);
  letter-spacing: 2px;
  margin-top: 10px;
}

/* 移动端微调 */
@media (max-width: 420px) {
  .cert-frame-inner { padding: 20px 14px 16px; }
  .cert-title { font-size: 21px; letter-spacing: 4px; }
  .cert-ent { font-size: 18px; }
  .cert-data { grid-template-columns: repeat(2, 1fr); }
  .cert-medal { width: 64px; height: 64px; }
  .cert-medal .m-level { font-size: 20px; }
  .cert-seal { width: 62px; height: 62px; }
  .cert-foot { align-items: center; }
}