/* ============================================================
   verify.css
   首屏主体 · 标题 / 副题 / 弹性留白 / 验证成功卡
   ============================================================ */

/* ---------- 主体 ---------- */
.main{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  text-align:center;
  padding:clamp(20px,4.4vh,40px) 22px 0;
}
.title{
  font-family:var(--serif);
  font-size:clamp(33px,9.4vw,42px);
  font-weight:700;
  letter-spacing:.055em;
  text-indent:.055em;
  color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.85);
}
.subtitle{
  margin-top:11px;
  font-family:var(--serif);
  font-size:15.5px;
  letter-spacing:.2em;
  text-indent:.2em;
  color:var(--gold);
}

/* ---------- 弹性留白：把多余高度分给"标题→卡片""卡片→页脚"两处 ---------- */
.spacer{flex:1 1 0;max-height:120px}
.spacer--card{min-height:24px}
.spacer--foot{min-height:20px}

/* ---------- 验证成功卡 ---------- */
.card{
  position:relative;
  padding:38px 22px 32px;
  border-radius:22px;
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 88% at 50% 0%, rgba(255,255,255,.05), transparent 68%),
    linear-gradient(158deg,rgba(255,255,255,.052),rgba(255,255,255,.012));
  box-shadow:
    0 26px 64px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.card::after{ /* 金色渐变描边：左上亮、右下淡 */
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(201,163,78,.46),rgba(201,163,78,.05) 42%,rgba(201,163,78,0) 62%,rgba(201,163,78,.26));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
          mask-composite:exclude;
  pointer-events:none;
}
.check{
  width:54px;height:54px;
  margin:0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(122% 122% at 30% 24%,#4ED26C,var(--green-1) 46%,var(--green-2));
  box-shadow:0 8px 20px rgba(31,158,69,.26),inset 0 0 0 1px rgba(255,255,255,.14);
}
.check svg{width:26px;height:26px;display:block}
.card__label{
  margin-top:21px;
  font-size:16.5px;
  font-weight:400;
  letter-spacing:.30em;
  text-indent:.30em;
  color:#EAEAEC;
}
.card__result{
  margin-top:16px;
  font-size:21px;
  font-weight:600;
  letter-spacing:.05em;
  color:#fff;
}
.card__desc{
  margin-top:30px;
  font-size:13.2px;
  line-height:2.1;
  letter-spacing:.015em;
  color:var(--gray);
}
.card__desc em{font-style:normal;color:#A6A6AB}
@media (max-width:374px){ /* 极窄屏兜底：避免说明文字断行尴尬 */
  .card__desc{font-size:12.6px}
}

/* ---------- 查询次数（由 js/verify.js 填入） ---------- */
.card__count{
  margin-top:18px;
  font-size:12.5px;
  line-height:1.95;
  letter-spacing:.03em;
  color:#9A9AA0;
}
.card__count b{
  color:var(--gold);
  font-weight:600;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  margin:0 2px;
}
.card__count span{color:var(--gray-dim)}

/* ---------- 失败 / 警示态 ----------

   注意：绿勾和红叉两个 SVG 都在 .check 这个圆里，默认只显示勾。
   隐藏规则必须写成 .check .check__no（优先级 0,2,0），
   不能只写 .check__no（0,1,0）—— 否则会被上面第 73 行的
   .check svg{display:block}（0,1,1）压过去，变成勾和叉叠在一起。 */
.check .check__no{display:none}

.card--fail{border-color:rgba(234,0,41,.34)}
.card--fail::after{
  background:linear-gradient(135deg,rgba(234,0,41,.44),rgba(234,0,41,.05) 42%,rgba(234,0,41,0) 62%,rgba(234,0,41,.24));
}
.card--fail .check{
  background:radial-gradient(122% 122% at 30% 24%,#FF5A75,var(--red) 52%,#8E0018);
  box-shadow:0 8px 20px rgba(234,0,41,.24),inset 0 0 0 1px rgba(255,255,255,.14);
}
.card--fail .check .check__ok{display:none}
.card--fail .check .check__no{display:block}
.card--fail .card__result{color:#FFD9E0}
.card--fail .card__count b{color:#FF8095}

.card--warn{border-color:rgba(224,169,59,.34)}
.card--warn::after{
  background:linear-gradient(135deg,rgba(224,169,59,.44),rgba(224,169,59,.05) 42%,rgba(224,169,59,0) 62%,rgba(224,169,59,.24));
}
.card--warn .check{
  background:radial-gradient(122% 122% at 30% 24%,#F0C25E,var(--amber,#E0A93B) 52%,#96690F);
  box-shadow:0 8px 20px rgba(224,169,59,.22),inset 0 0 0 1px rgba(255,255,255,.14);
}
.card--warn .check .check__ok{display:none}
.card--warn .check .check__no{display:block}