@charset "utf-8";

:root { --blue: #126fe9; --ink: #132b53; }
body { min-height: 100vh; background: radial-gradient(204% 138% at 100% 20%, #d4eaff 0%, #d4eaff00 54%), linear-gradient(180deg, #f5faff 0%, #edf5ff 66%, #e2f1ff 100%); color: var(--ink); }
.download-page { min-height: 100vh; max-width: 500px; margin: 0 auto; overflow: hidden; background: radial-gradient(204% 138% at 100% 20%, #d4eaff 0%, #d4eaff00 54%), linear-gradient(180deg, #f5faff 0%, #edf5ff 66%, #e2f1ff 100%); }
.hero { position: relative; min-height: 0; padding: calc(env(safe-area-inset-top, 0px) + 24px) 17px 0; overflow: hidden; background: url('../image/download-full-background.png') center top / 480px 844px no-repeat, radial-gradient(204% 138% at 100% 20%, #d4eaff 0%, #d4eaff00 54%), linear-gradient(180deg, #f5faff 0%, #edf5ff 66%, #e2f1ff 100%); }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: #192D4C; font-family: 'Alibaba PuHuiTi 3.0-95 ExtraBold', 'Alibaba PuHuiTi 3.0', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: 0; line-height: 34px; }
.brand__logo { width: 36px; height: 36px; border-radius: 8px; }
.hero__content { position: relative; z-index: 1; margin-top: 24px; text-align: center; }
h1 { margin: 0; color: #192D4C; font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi 30', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 45px; white-space: nowrap; }
h1 span { display: block; color: #1478F2; font-family: 'Alibaba PuHuiTi 3.0-85 Bold', 'Alibaba PuHuiTi 3.0', sans-serif; font-size: 32px; font-weight: 700; line-height: 45px; text-align: center; }
.hero__features { display: flex; justify-content: center; gap: 16px; margin: 18px 0 0; padding: 0; color: #53718F; font-size: 10px; line-height: 14px; list-style: none; }
.hero__features li { display: flex; align-items: center; white-space: nowrap; }
.hero__features li::before { width: 16px; height: 16px; margin-right: 2px; background: url('../image/download-item.png') center / contain no-repeat; content: ''; }
.platform-switch { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 24px auto 0; }
.download-button[hidden], .download-options[hidden] { display: none; }
.platform-switch__button { display: block; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.platform-switch__button img { display: block; width: 36px; height: 36px; }
.download-button { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 310px; max-width: 100%; height: 40px; margin: 8px auto 0; padding: 0; border: 1px solid #D7E6F9; border-radius: 8px; color: #285b9a; font-family: inherit; font-size: 16px; font-weight: 500; background: #FFFFFF; box-shadow: 0 4px 10px rgba(69, 129, 204, .05); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.download-button.is-active { width: min(342px, 87.7vw); margin-left: auto; margin-right: auto; border: 0; color: #fff; background: linear-gradient(130deg, #126FE9 0%, #149DF0 56%, #26C6D6 100%); box-shadow: 0 10px 20px rgba(23, 145, 232, .22); }
.download-button.has-download-url:active { transform: translateY(1px) scale(.99); }
.download-button:disabled { cursor: default; }
.download-button__icon { width: 27px; height: 27px; margin-right: 4px; object-fit: contain; }
.download-button__badge { position: absolute; top: -10px; right: -2px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 46px; height: 20px; padding: 0; border: 1px solid #FFFFFF; border-radius: 10px 10px 10px 0px; color: #333333; font-family: 'PingFang SC-Semibold', 'PingFang SC', sans-serif; font-size: 10px; font-weight: 600; line-height: 14px; white-space: nowrap; background: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 5px rgba(23, 75, 126, .07); pointer-events: none; }
.download-button__badge[hidden] { display: none; }
.download-options { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; width: min(342px, 87.7vw); max-width: 100%; margin: 8px auto 0; }
.download-options .download-button { width: 100%; min-width: 0; margin: 0; font-size: clamp(11px, 3vw, 15px); white-space: nowrap; }
.download-options .download-button__icon { width: 20px; height: 20px; margin-right: 2px; }
.download-status { position: relative; z-index: 2; margin: 12px 0 0; color: #53718F; font-size: 12px; line-height: 18px; text-align: center; }
.download-status[hidden] { display: none; }
.download-ad { position: relative; z-index: 1; display: block; left: 50%; width: min(390px, 100vw); height: auto; margin: 8px 0 0; transform: translateX(-50%); }
.phone { position: relative; z-index: 1; display: block; left: 50%; width: min(390px, 100vw); height: auto; margin: 8px 0 0; transform: translateX(-50%); }
.browser-tip[hidden] { display: none; }.browser-tip { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; }.browser-tip__backdrop { position: absolute; inset: 0; background: rgba(7, 23, 49, .55); }.browser-tip__content { position: relative; width: min(100%, 320px); padding: 31px 25px 27px; border-radius: 20px; text-align: center; background: #fff; }.browser-tip__close { position: absolute; top: 7px; right: 13px; border: 0; color: #9ba7b5; font-size: 27px; background: transparent; }.browser-tip__icon { width: 45px; height: 35px; margin: 0 auto 14px; padding-top: 6px; border-radius: 12px; color: #fff; font-weight: 700; letter-spacing: 2px; background: var(--blue); }.browser-tip h2 { font-size: 19px; }.browser-tip p { margin-top: 10px; color: #6f7e90; font-size: 14px; line-height: 1.75; }.browser-tip p b { color: var(--blue); }
@media (max-width: 360px) { .hero__features { gap: 7px; font-size: 9px; } }
@media (max-width: 500px) {
    html, body { width: 100%; height: 100%; overflow: hidden; }
    .download-page { width: 100%; height: 100vh; min-height: 100vh; height: 100dvh; min-height: 100dvh; }
    .hero { height: 100%; min-height: 100%; }
}
@media (min-width: 501px) {
    body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: #eaf2ff; }
    .download-page { width: 100%; min-height: 0; border-radius: 24px; box-shadow: 0 16px 45px rgba(27, 73, 128, .12); }
    .hero { border-radius: 24px; }
}