/* ============================================================
   cert.css · 证书服务类页面（查询/复审/真伪鉴别/成绩查询）
   ============================================================ */

/* 证书服务流程横向带 */
.cert-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin:36px 0}
.cert-flow .cf{text-align:center;position:relative;padding:0 14px}
.cert-flow .cf::after{content:"";position:absolute;right:-6px;top:26px;width:16px;height:2px;background:linear-gradient(90deg,var(--bronze),transparent)}
.cert-flow .cf:last-child::after{display:none}
.cert-flow .cf-ico{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:rgba(176,141,87,.1);border:1px solid var(--line);color:var(--bronze-l);display:flex;align-items:center;justify-content:center}
.cert-flow .cf-ico svg{width:24px;height:24px}
.cert-flow b{display:block;font-size:14.5px;color:#f2e8d4;margin-bottom:4px}
.cert-flow span{font-size:11.5px;color:var(--paper-3);letter-spacing:.06em}

/* 证件要素检查卡 */
.cert-check{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.check-cell{padding:22px;border-radius:14px;background:rgba(255,255,255,.022);border:1px solid var(--line-2);transition:.35s}
.check-cell:hover{border-color:var(--bronze);transform:translateY(-4px)}
.check-cell .ok-ico{width:40px;height:40px;border-radius:12px;background:rgba(125,154,95,.14);border:1px solid rgba(125,154,95,.4);color:#a3c37a;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.check-cell .ok-ico svg{width:20px;height:20px}
.check-cell h4{font-size:15px;margin-bottom:6px}
.check-cell p{font-size:12.5px;color:var(--paper-2);margin:0}

/* 复审倒计时/状态卡 */
.fu-card{display:flex;gap:20px;align-items:center;padding:24px;border-radius:16px;background:linear-gradient(130deg,rgba(138,47,47,.12),rgba(15,12,9,.4) 60%);border:1px solid rgba(138,47,47,.35)}
.fu-card .fu-num{font-family:var(--font-h);font-size:52px;color:transparent;-webkit-text-stroke:1.5px var(--bronze-l);line-height:1;flex-shrink:0}
.fu-card .fu-num i{font-style:normal;color:var(--bronze-l);-webkit-text-stroke:0;font-size:24px}
.fu-card .fu-body h4{font-size:17px;margin-bottom:6px}
.fu-card .fu-body p{font-size:13px;color:var(--paper-2);margin:0}

/* 真伪鉴别对照图 */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare-grid .cmp{padding:16px;border-radius:14px;background:rgba(255,255,255,.022);border:1px solid var(--line-2)}
.compare-grid .cmp h4{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:12px}
.compare-grid .cmp h4 .dot{width:9px;height:9px;border-radius:50%}
.compare-grid .cmp--ok h4 .dot{background:#7d9a5f;box-shadow:0 0 0 4px rgba(125,154,95,.2)}
.compare-grid .cmp--no h4 .dot{background:var(--red);box-shadow:0 0 0 4px rgba(138,47,47,.2)}
.compare-grid .cmp li{position:relative;padding:7px 0 7px 20px;font-size:13px;color:var(--paper-2)}
.compare-grid .cmp li::before{content:"—";position:absolute;left:0;color:var(--bronze)}
.compare-grid .cmp img{width:100%;border-radius:10px;aspect-ratio:16/10;object-fit:cover;margin-bottom:10px}

/* 官方渠道清单 */
.channel-list{display:flex;flex-direction:column;gap:14px}
.channel-row{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.024);border:1px solid var(--line-2);transition:.3s}
.channel-row:hover{border-color:var(--bronze)}
.channel-row .ch-ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--grad-bronze);color:#241b10;display:flex;align-items:center;justify-content:center}
.channel-row .ch-ico svg{width:22px;height:22px}
.channel-row .ch-body{flex:1}
.channel-row b{font-size:14.5px;display:block;margin-bottom:2px}
.channel-row p{font-size:12.5px;color:var(--paper-2);margin:0}
.channel-row a{color:var(--bronze-l);font-size:12.5px;flex-shrink:0}
.channel-row a:hover{text-decoration:underline}

@media (max-width:1024px){
  .cert-flow{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .cert-flow .cf::after{display:none}
  .cert-check{grid-template-columns:repeat(2,1fr)}
  .compare-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cert-check{grid-template-columns:1fr}
  .fu-card{flex-direction:column;align-items:flex-start}
}