.page {
  background: #f5f6fb;
  color: #171827;
}
.page .card {
  border: 1px solid #e3e5ee;
  background: #fff;
  box-shadow: 0 18px 55px rgba(34, 35, 64, .08);
  border-radius: 16px;
}
.page .brandbar { display:flex; align-items:center; gap:10px; margin:0 0 28px; padding-bottom:18px; border-bottom:1px solid #eef0f5; color:#1677ff; font-weight:700; }
.page .brandbar div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.page .brandbar small { color:#7686a0; font-size:12px; font-weight:500; line-height:1.35; }
.page .brandbar img { width:32px; height:32px; border-radius:10px; object-fit:cover; }
.page .hero-mark { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 18px; border-radius:18px; background:#eaf3ff; color:#1677ff; font-size:30px; font-weight:800; }
.page .eyebrow { color: #1677ff; }
#activate-card .eyebrow { margin-top: 4px; }
.page .card h1 { color: #171827; }
.page .muted { color: #64748b; }
.page .card label { color: #53627a; }
.page .card input { border-color: #e3e5ee; background: #fafaff; color: #171827; }
.page .card input:focus { border-color: #1677ff; box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); }
.page .card input::placeholder { color: #a5b1c2; }
.page .card button { background: #1677ff; color: #fff; }
.page .safe, .page .tips { border-color: #e3e1ff; background: #f7f6ff; color: #5e5a9b; }
.page .success { background: #eaf3ff; color: #1677ff; }
.page .wechat-row { border-color: #dce5f1; background: #f8fafc; color: #172033; }
.page .wechat-row span { color: #7b899e; }
.page .wechat-help { margin:14px 2px 0; padding:12px 13px; border-radius:12px; background:#f1f7ff; color:#536a86; font-size:12.5px; line-height:1.65; }
.page .fallback-contact { margin-top:12px; padding:12px; border:1px dashed #bfd7f4; border-radius:13px; background:#f7fbff; text-align:left; }
.page .fallback-contact strong { display:block; color:#172033; font-size:13px; line-height:1.35; }
.page .fallback-contact p { margin:4px 0 10px; color:#64748b; font-size:12px; line-height:1.55; }
.page .fallback-contact div { display:flex; gap:8px; }
.page .fallback-contact input { min-width:0; flex:1; height:42px; padding:0 12px; border:1px solid #dce5f1; border-radius:11px; background:#fff; color:#172033; outline:none; }
.page .fallback-contact input:focus { border-color:#1677ff; box-shadow:0 0 0 3px rgba(22,119,255,.12); }
.page .fallback-contact button { width:74px; height:42px; border-radius:11px; }
.page .fallback-contact small { display:block; margin-top:7px; color:#8290a4; font-size:11.5px; line-height:1.45; }
.page .fallback-contact small.saved { color:#20a35a; }
.page .contact-desk { padding: 24px; }
.page .verify-strip { display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:12px 13px; border:1px solid #d8e8ff; border-radius:14px; background:#f3f8ff; color:#172033; }
.page .verify-strip span { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#1677ff; color:#fff; font-weight:800; }
.page .verify-strip div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.page .verify-strip strong { font-size:14px; line-height:1.35; }
.page .verify-strip small { color:#65758b; font-size:12px; line-height:1.45; }
.page .contact-hero { padding:18px; border:1px solid #e1e9f6; border-radius:16px; background:linear-gradient(180deg,#f8fbff 0%,#fff 42%); }
.page .contact-hero .eyebrow { margin:0 0 6px; text-align:center; font-size:13px; font-weight:750; }
.page .contact-hero h1 { margin:0 0 8px; font-size:24px; }
.page .contact-hero .muted { max-width:290px; margin-bottom:14px; font-size:13px; line-height:1.65; }
.page .service-steps { display:grid; gap:8px; margin-top:14px; }
.page .service-steps div { padding:12px; border:1px solid #e7edf6; border-radius:13px; background:#fff; }
.page .service-steps strong { color:#172033; font-size:14px; line-height:1.35; }
.page .service-steps p { margin:0; color:#64748b; font-size:12.5px; line-height:1.55; }
.page .security-note { margin:14px 0 0; padding:13px 14px; border:1px solid #ffe1ac; border-radius:13px; background:#fff8e8; color:#875d12; font-size:12.5px; line-height:1.65; }
.page .secondary { background: #eaf3ff !important; color: #1677ff !important; }
.page .steps { display:flex; flex-wrap:wrap; gap:7px 12px; margin:18px 0 0; color:#8b8d9b; font-size:12px; line-height:1.5; }
.page .steps .active { color:#1677ff; font-weight:650; }
.page .flow-card { margin-top:18px; padding:18px; border:1px solid #e8e8f1; border-radius:14px; background:#fff; }
.page .flow-title { display:flex; align-items:center; gap:9px; margin-bottom:12px; color:#171827; font-size:16px; }
.page .flow-title span { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; background:#eaf3ff; color:#1677ff; font-weight:750; font-size:13px; }
.page .flow-card .muted { max-width:none; text-align:left; font-size:13px; line-height:1.7; }
.page .flow-card .inline-contact-note { margin-top:8px; }
.page .flow-card img { width:min(220px,100%); margin:16px auto; }
.page .qr-trigger { width:min(190px,100%); height:230px; display:block; margin:12px auto 6px; padding:0; border:0; border-radius:12px; background:transparent; overflow:hidden; cursor:pointer; box-shadow:0 8px 24px rgba(22,119,255,.12); }
.page .qr-compact { width:100%; height:100%; object-fit:contain; object-position:center center; margin:0; border-radius:12px; }
.page .qr-tip { margin:0 0 14px; color:#8a97aa; text-align:center; font-size:12px; line-height:1.4; }
.qr-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px; background:rgba(15,23,42,.72); }
.qr-modal img { width:min(390px,92vw); max-height:86vh; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.3); object-fit:contain; }
.qr-close { position:fixed; top:16px; right:16px; width:42px; height:42px; border:0; border-radius:50%; background:#fff; color:#172033; font-size:28px; line-height:1; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.22); }
@media (max-width: 600px) {
  .page { padding: 16px 12px; place-items: start center; }
  .page .card { width: 100%; max-width: none; padding: 26px 18px; }
  .page .contact-desk { padding: 18px; }
  .page .contact-hero { padding: 16px; }
  .page .contact-hero h1 { font-size: 22px; }
  .page .wechat-row strong { font-size: 18px; }
}
.page .inline-contact-note {
  display: block;
  margin-top: 8px;
  color: #8b6518;
  font-size: 12.5px;
  line-height: 1.65;
}