:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #172630; background: #eff5f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(ellipse at 12% 10%, #d7f4f0 0, transparent 52%), radial-gradient(ellipse at 90% 88%, #e0e9fb 0, transparent 48%), #eff5f7; }
.support-card { width: min(500px, 100%); padding: 28px 32px 32px; border: 1px solid #dfe8eb; border-radius: 24px; background: #fff; box-shadow: 0 18px 70px #2748530c; text-align: center; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #129ba8; outline-offset: 5px; }
.back-link { display: block; width: fit-content; color: #697982; font-size: 13px; text-decoration: none; }
.back-link:hover { color: #078a97; }
.brand { margin: 35px 0 12px; color: #138f9b; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
h1 { margin: 0; font-size: clamp(25px, 5vw, 30px); font-weight: 650; letter-spacing: .5px; }
.description { margin: 13px 0 24px; color: #687981; font-size: 14px; line-height: 1.8; }
.qr-link { display: block; margin: 0 auto; background: #fff; border: 1px solid #edf1f2; border-radius: 14px; padding: 12px 0; }
.qr-link img { display: block; width: 100%; height: auto; }
.scan-note { margin: 20px 0; color: #738189; font-size: 12px; line-height: 1.8; }
.save-link { display: inline-block; padding: 11px 25px; border: 1px solid #c1e7e9; border-radius: 10px; color: #087b87; background: #ecf9f9; text-decoration: none; font-size: 14px; }
.save-link:hover { background: #def3f3; }
@media (max-width: 420px) { .support-card { padding: 22px 18px 26px; border-radius: 18px; } .brand { margin-top: 26px; } .description { font-size: 13px; } }