/* ── 统帅名片卡(L3 · 2026-07-08 质感重做)──────────────────────
   cc-* 命名空间,独立文件,不碰 styles.css/frost.css 热点。
   卡面 3:4(330×440,html2canvas scale:3 → 990×1320 出图)。
   分层:底图(web 压缩版 jpg,缺档走 cc-tN 占位渐变)→ .cc-shade(上下渐隐+四角晕影)
   → .cc-frame(细线内框,陨石以上鎏金)→ .cc-body(证书式排版:居中徽线+宋体大名+数据栏)。
   html2canvas 安全:只用 gradient/border/shadow/letter-spacing,不用伪元素/背景裁字/毛玻璃。 */

.cc-wrap { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 12px; }

/* ── 卡体 ── */
.cc-card {
  width: 330px; height: 440px; margin: 0 auto; position: relative; overflow: hidden;
  border-radius: 14px; background-color: #0A1420;
  background-size: cover; background-position: center top;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);
}
/* 占位渐变(缺图档兜底;压字由 .cc-shade 统一负责) */
.cc-t1 { background-image: linear-gradient(165deg, #2A5170, #14304A); }
.cc-t2 { background-image: linear-gradient(165deg, #33678A, #102941); }
.cc-t3 { background-image: linear-gradient(160deg, #3E7697, #122A3E); }
.cc-t4 { background-image: linear-gradient(160deg, #4C88A8, #0E2436 70%); }
.cc-t5 { background-image: linear-gradient(160deg, #23283C, #0B0E16 60%); }
.cc-t6 { background-image: linear-gradient(160deg, #1E4438, #0A1420 70%); }
.cc-t7 { background-image: linear-gradient(160deg, #2A5C4C, #081018 70%); }
.cc-t8 { background-image: linear-gradient(160deg, #4A3A17, #151006 65%); }

/* 遮罩:顶部轻压+底部深压(座住文字)+四角晕影(镜头感) */
.cc-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 95% at 50% 32%, rgba(0, 0, 0, 0) 55%, rgba(4, 9, 16, .45) 100%),
    linear-gradient(180deg, rgba(6, 12, 20, .60) 0%, rgba(6, 12, 20, 0) 24%,
                    rgba(6, 12, 20, 0) 44%, rgba(4, 9, 16, .88) 80%, rgba(4, 9, 16, .96) 100%);
}
/* 细线内框:普通档冰青,陨石以上鎏金 */
.cc-frame {
  position: absolute; inset: 9px; border-radius: 9px; pointer-events: none;
  border: 1px solid rgba(159, 216, 239, .30);
}
.cc-frame.gold {
  border-color: rgba(232, 196, 118, .55);
  box-shadow: inset 0 0 26px rgba(232, 196, 118, .07);
}

.cc-body { position: absolute; inset: 0; padding: 24px 22px 18px; display: flex; flex-direction: column; color: #EAF4FA; }

.cc-top { display: flex; justify-content: space-between; align-items: center; }
.cc-brand { font-size: 10.5px; letter-spacing: .32em; color: rgba(234, 244, 250, .88); font-weight: 600; }
.cc-state {
  font-size: 11px; letter-spacing: .1em; color: #D6EAF6; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(159, 216, 239, .38); border-radius: 3px; padding: 2px 8px;
  background: rgba(6, 12, 20, .45);
}

/* 证书式主区(居中) */
.cc-mid { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.cc-tier {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: #BFE3F5;
  letter-spacing: .4em; text-indent: .4em;
  background: rgba(6, 12, 20, .42); border-radius: 999px; padding: 4px 14px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.cc-tier .l { width: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(191, 227, 245, .75)); }
.cc-tier .l:last-child { background: linear-gradient(270deg, transparent, rgba(191, 227, 245, .75)); }
.cc-tier.gold { color: #EFD9A7; }
.cc-tier.gold .l { background: linear-gradient(90deg, transparent, rgba(232, 196, 118, .8)); }
.cc-tier.gold .l:last-child { background: linear-gradient(270deg, transparent, rgba(232, 196, 118, .8)); }
.cc-name {
  /* 评审共识:动态玩家名不赌衬线(安卓/微信静默降级、Windows 假粗糊边,分享物长相要跨端一致);
     证书感交给鎏金徽线+字距,名字用各端都稳的重磅黑体 */
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: .06em; line-height: 1.28;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .6);
  overflow-wrap: anywhere; max-width: 100%;
}
.cc-name.sm { font-size: 21px; }
.cc-seal { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #8FE3B3; }
.cc-seal b { color: #EFD9A7; font-weight: 700; }

/* 数据栏:标签上/数值下,细分隔线 */
.cc-stats {
  width: 100%; display: flex; margin-top: 3px;
  background: rgba(5, 10, 18, .5);
  border: 1px solid rgba(159, 216, 239, .16); border-radius: 10px;
  padding: 9px 0 8px;
}
.cc-stats .s { flex: 1; text-align: center; border-left: 1px solid rgba(159, 216, 239, .13); min-width: 0; }
.cc-stats .s:first-child { border-left: 0; }
.cc-stats em {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .3em; text-indent: .3em;
  color: #8FB3C9; margin-bottom: 3px;
}
.cc-stats b { font-size: 16.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.cc-foot {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(159, 216, 239, .18);
}
.cc-qr {
  background: #FBF7EF; padding: 4px; border-radius: 6px; display: inline-flex;
  box-shadow: 0 0 0 1px rgba(232, 196, 118, .5);
}
.cc-qr img { width: 56px; height: 56px; display: block; }
.cc-foot .t { font-size: 10.5px; line-height: 1.75; color: rgba(214, 232, 242, .85); letter-spacing: .03em; min-width: 0; }
.cc-foot .t b { color: #EFD9A7; letter-spacing: .14em; }

.cc-out { width: 330px; max-width: 94vw; margin: 0 auto; }
.cc-out img { width: 100%; border-radius: 12px; border: 1px solid rgba(159, 216, 239, .3); }

/* ── 制卡页 ── */
.cc-form label { display: block; font-size: 13px; color: var(--fz-dim, #7A93A8); margin: 12px 0 6px; }
.cc-form select {
  width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px;
  background: var(--fz-panel, #111E2E); color: var(--fz-snow, #EAF4FA);
  border: 1px solid var(--fz-line-hi, #2A4A63); border-radius: 10px;
}
.cc-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0; color: var(--fz-snow, #EAF4FA); }
.cc-check input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; accent-color: #F07F2D; }
.cc-cta { font-size: 12.5px; color: var(--fz-gold, #E8C476); margin: 8px 0 0; }

/* ── 名人堂 ── */
.cc-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cc-hcard {
  aspect-ratio: 3 / 4; border-radius: 12px; padding: 12px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--fz-snow, #EAF4FA); text-decoration: none;
  background-size: cover; background-position: center top;
  border: 1px solid rgba(232, 196, 118, .4);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7);
}
.cc-hcard .sn { font-size: 10.5px; font-weight: 700; color: #EFD9A7; letter-spacing: .18em; }
.cc-hcard .nm {
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.cc-hcard .tl { font-size: 11px; color: var(--fz-ice, #9FD8EF); letter-spacing: .08em; }
.cc-hcard .pw { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 审核队列 ── */
.cc-queue { display: flex; flex-direction: column; gap: 12px; }
.cc-qitem { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cc-qitem img { width: 180px; max-width: 42vw; border-radius: 8px; border: 1px solid var(--fz-line-hi, #2A4A63); }
.cc-qmeta { font-size: 13.5px; line-height: 1.9; min-width: 200px; flex: 1; }
.cc-qact { display: flex; gap: 8px; margin-top: 8px; }