/*
 * 职责：定义 G Credit 下载落地页的桌面端、移动端布局与视觉规范。
 * 使用场景：Google Play 风格的应用详情与 APK 下载页面。
 * 关键依赖：仅依赖 index.html 中的语义化结构，不使用第三方样式库。
 */
:root{--green:#078b65;--green-dark:#057353;--text:#202124;--muted:#667079;--line:#e2e5e3;--soft:#f6f8f7;--shadow:0 12px 32px rgba(20,47,38,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#fff;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.shell{width:min(1300px,calc(100% - 48px));margin-inline:auto}
.topbar{height:72px;padding:0 24px;display:flex;align-items:center;border-top:1px solid #d6d9d7;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:20}.brand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:650;color:#5f6368}.brand-mark{width:36px;height:36px}.brand-mark svg{width:100%;height:100%}.desktop-nav{display:flex;align-self:stretch;margin-left:42px;gap:34px}.desktop-nav a{display:grid;place-items:center;position:relative;color:#4d5156;font-size:15px}.desktop-nav a.active{color:var(--green);font-weight:600}.desktop-nav a.active:after{content:"";position:absolute;bottom:5px;left:8px;right:8px;height:3px;background:var(--green);border-radius:3px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-button,.language-button{border:0;background:transparent;color:#5f666d}.icon-button{width:42px;height:42px;padding:9px}.icon-button svg,.language-button svg,.primary-actions svg,.compatibility svg,.bottom-nav svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.language{position:relative}.language-button{height:42px;display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:22px}.language-button:hover{background:var(--soft)}.language-button svg{width:22px}.chevron{font-size:18px}.language-menu{position:absolute;right:0;top:48px;width:150px;padding:6px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.language-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:white;text-align:left}.language-menu button:hover{background:#eef7f3;color:var(--green)}
.hero{min-height:440px;padding:64px 0 46px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:90px;align-items:center}.hero-copy{max-width:680px}.desktop-title h1,.mobile-app-head h1{margin:0;font-size:64px;line-height:1.08;letter-spacing:-2.4px}.desktop-title>a,.mobile-app-head a{display:inline-block;margin-top:22px;color:var(--green);font-weight:650}.desktop-title p,.mobile-app-head p{margin:4px 0;color:var(--muted);font-size:14px}.mobile-app-head{display:none}.app-icon{display:grid;place-items:center;background:linear-gradient(145deg,#09a978,#057c5c);color:white;box-shadow:0 18px 38px rgba(5,139,101,.25);position:relative;overflow:hidden}.app-icon:before,.app-icon:after{content:"";position:absolute;border:2px solid rgba(255,255,255,.23);border-radius:50%}.app-icon:before{width:75%;height:75%;top:-30%;right:-25%}.app-icon:after{width:55%;height:55%;bottom:-22%;left:-18%}.app-icon span{font-size:72px;font-weight:800;letter-spacing:-7px;transform:translateX(-3px);z-index:1}.app-icon.large{width:240px;height:240px;border-radius:48px;justify-self:center}.app-icon.small{width:72px;height:72px;border-radius:17px}.app-icon.small span{font-size:24px;letter-spacing:-2px}
.metrics{display:flex;margin:34px 0;max-width:470px}.metrics>div{flex:1;text-align:center;padding:0 18px;border-right:1px solid var(--line)}.metrics>div:first-child{padding-left:0}.metrics>div:last-child{border:0}.metrics strong,.metrics span{display:block}.metrics strong{font-size:15px}.metrics span{font-size:13px;color:var(--muted);margin-top:7px}.primary-actions{display:flex;align-items:center;gap:20px}.download-button{height:48px;min-width:250px;padding:0 25px;border:0;border-radius:8px;background:var(--green);color:white;font-weight:650;display:flex;justify-content:center;align-items:center;gap:9px;transition:.2s}.download-button:hover{background:var(--green-dark);box-shadow:0 8px 18px rgba(5,139,101,.2);transform:translateY(-1px)}.download-button svg{width:20px}.share-button{height:46px;padding:0 9px;border:0;background:transparent;color:var(--green);font-weight:650;display:flex;align-items:center;gap:7px}.share-button svg{width:24px}.compatibility{display:flex;align-items:center;gap:11px;margin-top:24px;color:var(--muted);font-size:14px}.compatibility svg{width:22px}
.content-grid{display:grid;grid-template-columns:minmax(0,860px) 1fr;gap:72px;padding-bottom:100px}.screenshots-wrap{position:relative}.screenshots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 14px}.screenshots::-webkit-scrollbar{display:none}.shot{flex:0 0 168px;height:300px;border-radius:10px;padding:18px 12px 0;overflow:hidden;scroll-snap-align:start;box-shadow:0 1px 4px rgba(0,0,0,.2)}.shot-caption{height:60px;text-align:center;font-weight:750;font-size:14px;line-height:1.35}.shot-green{background:#03d56f}.shot-cream{background:#fff4e6}.shot-blue{background:#84d7f4}.shot-peach{background:#ffd8c7}.shot-violet{background:#d8c7ff}.phone{height:245px;background:#fff;border:5px solid #202124;border-bottom:0;border-radius:18px 18px 0 0;padding:17px 11px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.18)}.phone.dark{background:#17221f;color:white}.phone-top{position:absolute;top:5px;left:40%;width:30px;height:4px;background:#303638;border-radius:5px}.mock-title{font-size:11px;font-weight:800;margin:8px 0}.balance{height:45px;padding:12px 6px;background:#e2f8ef;border-radius:8px;font-weight:800;color:var(--green)}.mock-button{height:20px;background:var(--green);border-radius:7px;margin:12px 0}.mock-row{height:26px;background:#edf0ef;border-radius:5px;margin-top:8px}.mock-row.short{width:72%}.mock-card{height:44px;background:#f0f3f2;border-radius:7px;margin:10px 0;box-shadow:0 1px 3px rgba(0,0,0,.08)}.steps{display:flex;justify-content:space-between;margin:16px 0}.steps i{width:19px;height:19px;border-radius:50%;background:#ddd}.steps i.done{background:var(--green)}.shield{width:58px;height:58px;margin:20px auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--green);font-size:30px}.donut{width:70px;height:70px;border-radius:50%;margin:12px auto;border:13px solid #d5f2e8;border-top-color:var(--green)}.chat{height:28px;width:75%;background:#e6e9e8;border-radius:8px;margin:15px 0}.chat.right{margin-left:auto;background:#c9f3e3}.chat.small-chat{width:55%}.chat-input{position:absolute;bottom:14px;left:10px;right:10px;height:25px;border:1px solid #ddd;border-radius:16px}.next-shot{position:absolute;right:-22px;top:135px;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;background:white;font-size:34px;line-height:40px;color:#5f666d;box-shadow:0 2px 8px rgba(0,0,0,.12)}.details-section{padding:28px 0;border-bottom:1px solid var(--line)}.details-section h2,.side-column h2{margin:0;font-size:22px}.details-section p{max-width:760px;margin:15px 0 0;color:#5f666d;line-height:1.75}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading span{color:var(--muted);font-size:14px}.tags{display:flex;gap:10px;margin-top:18px}.tags span{padding:7px 14px;border:1px solid #cbd1ce;border-radius:18px;font-size:13px}.side-column{padding-top:8px}.rating-card{display:flex;gap:18px;padding:22px;border:1px solid #c9cecb;border-radius:16px}.age-icon{width:48px;height:48px;border:3px solid #242827;display:grid;place-items:center;font-weight:800;font-size:16px}.rating-card h2{font-size:21px}.rating-card p,.side-link p{margin:9px 0;color:#5f666d;font-size:14px;line-height:1.45}.rating-card a{color:#1a73e8;font-size:14px}.side-link{display:flex;justify-content:space-between;align-items:center;padding:26px 2px;border-bottom:1px solid var(--line)}.side-link span{font-size:28px;color:#737a77}
.bottom-nav{display:none}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);padding:12px 20px;background:#26312e;color:white;border-radius:8px;opacity:0;pointer-events:none;transition:.25s;z-index:50;font-size:14px}.toast.show{opacity:1;transform:translate(-50%,0)}
.download-modal[hidden]{display:none}.download-modal{position:fixed;inset:0;z-index:80;padding:20px;display:grid;place-items:center;background:rgba(24,31,29,.5);backdrop-filter:blur(4px)}.download-dialog{width:min(440px,100%);padding:32px;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.24);position:relative;text-align:center;animation:dialog-in .24s ease-out}.modal-close{position:absolute;right:16px;top:13px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f4f2;color:#5f6663;font-size:25px;line-height:32px}.download-state-icon{width:68px;height:68px;margin:4px auto 20px;border-radius:22px;background:#e6f7f1;color:var(--green);display:grid;place-items:center}.download-state-icon svg{width:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.success-glyph{display:none}.download-dialog.complete .download-state-icon{border-radius:50%;background:var(--green);color:white}.download-dialog.complete .download-glyph{display:none}.download-dialog.complete .success-glyph{display:block}.download-dialog h2{margin:0;font-size:24px}.download-dialog>p{margin:10px auto 0;max-width:340px;color:var(--muted);line-height:1.55;font-size:14px}.progress-area{margin:26px 0 24px}.progress-meta{display:flex;justify-content:space-between;margin-bottom:9px;font-size:13px;color:var(--muted)}#progressText{color:var(--green);font-weight:750}.progress-track{height:9px;background:#e6ece9;border-radius:20px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0ba779,#20c98f);border-radius:20px;transition:width .2s}.install-steps{list-style:none;padding:4px 0 0;margin:20px 0;text-align:left}.install-steps li{display:flex;align-items:flex-start;gap:12px;padding:9px 0}.install-steps li>span{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e7f6f1;color:var(--green);font-size:12px;font-weight:750}.install-steps p{margin:3px 0;color:#4f5754;font-size:14px;line-height:1.45}.download-dialog-actions{display:flex;gap:10px}.download-dialog-actions button{flex:1;height:46px;border-radius:9px;font-weight:700}.secondary-modal-button{border:1px solid #ccd4d0;background:#fff;color:#48504c}.primary-modal-button{border:0;background:var(--green);color:#fff}.security-note{display:flex;justify-content:center;align-items:center;gap:7px!important;font-size:12px!important;margin-top:18px!important}.security-note>span:first-child{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e3f4ee;color:var(--green);font-size:11px;font-weight:800}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){body{background:#f4eef3}.shell{width:100%}.topbar{height:72px;padding:0 20px;border-top:0;box-shadow:0 1px 0 rgba(36,54,47,.08)}.brand{font-size:22px}.brand-mark{width:34px;height:34px}.desktop-nav,.icon-button{display:none}.language-button{width:46px;height:46px;justify-content:center;padding:0;border:1px solid #e3e7e5;background:#f8faf9}.language-button #currentLanguage{display:none}.language-button .chevron{position:absolute;right:-7px;font-size:15px}.language-menu{right:-4px}.hero{background:white;display:block;min-height:0;padding:48px 25px 32px}.desktop-title,.app-icon.large{display:none}.mobile-app-head{display:flex;gap:20px;align-items:center}.mobile-app-head h1{font-size:27px;letter-spacing:-.6px}.mobile-app-head>a{margin-top:5px}.metrics{max-width:none;margin:30px -4px 28px}.metrics>div{padding:0 8px}.metrics strong{font-size:14px}.primary-actions{display:block}.download-button{width:100%;height:50px;border-radius:9px}.share-button{margin:13px auto 0}.compatibility{margin-top:20px}.content-grid{display:block;background:white;padding:22px 25px 110px}.side-column{margin-top:12px}.rating-card{display:none}.side-link{padding:22px 0}.screenshots{gap:12px;margin-right:-25px;padding-right:25px}.shot{flex-basis:144px;height:265px;padding:14px 10px 0}.shot-caption{height:54px;font-size:12px}.phone{height:216px;padding:15px 9px}.next-shot{display:none}.details-section{padding:22px 0}.details-section h2,.side-column h2{font-size:20px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:68px;padding-bottom:env(safe-area-inset-bottom);display:flex;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -5px 18px rgba(23,44,36,.06);z-index:30}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#5d6561;font-size:12px}.bottom-nav svg{width:22px;height:22px}.bottom-nav a.active{color:var(--green);font-weight:650}.toast{bottom:88px;white-space:nowrap}.app-icon.small{flex:0 0 72px}.download-modal{padding:16px}.download-dialog{padding:28px 22px 23px;border-radius:22px}.download-dialog h2{font-size:22px}}
@media(max-width:390px){.topbar{padding:0 16px}.hero,.content-grid{padding-left:20px;padding-right:20px}.mobile-app-head{gap:18px}.mobile-app-head h1{font-size:24px}.screenshots{margin-right:-20px;padding-right:20px}.shot{flex-basis:136px}.compatibility{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.download-button,.toast{transition:none}}

/*
 * 移动端视觉升级：强化品牌识别、首屏信息层级和下载按钮的可信感。
 * 保持原有 DOM 与下载逻辑不变，仅在窄屏重新组织视觉表现。
 */
.app-logo{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:8px}.official-pill,.preview-heading{display:none}
@media(max-width:900px){
  :root{--mobile-green:#087f62;--mobile-mint:#dff5ec;--mobile-ink:#16342b}
  body{background:#fff;color:var(--mobile-ink)}
  .topbar{height:70px;padding:0 18px;background:rgba(255,255,255,.9);border:0;box-shadow:none;backdrop-filter:blur(18px)}
  .brand{gap:10px;font-size:20px;font-weight:760;color:#173d32;letter-spacing:-.3px}
  .brand-mark{width:30px;height:30px;padding:5px;border-radius:9px;background:#e8f7f1}
  .top-actions{gap:0}
  .language-button{width:auto;min-width:86px;height:38px;padding:0 11px;border:1px solid #dce9e4;background:#fff;border-radius:20px;gap:6px;color:#2c5045;box-shadow:0 3px 12px rgba(24,72,57,.06)}
  .language-button svg{width:18px}.language-button #currentLanguage{display:inline;font-size:13px;font-weight:700}.language-button .chevron{position:static;font-size:14px;margin-left:1px}
  .language-menu{top:44px;border:0;box-shadow:0 16px 40px rgba(13,55,42,.18)}
  .hero{width:auto;margin:0 12px;padding:28px 22px 24px;border-radius:28px;background:radial-gradient(circle at 95% 4%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 34%),linear-gradient(145deg,#edf9f4 0%,#f9fcfb 68%);box-shadow:inset 0 0 0 1px rgba(8,127,98,.07)}
  .mobile-app-head{gap:17px;align-items:center}
  .app-icon.small{width:82px;height:82px;flex-basis:82px;border-radius:23px;background:linear-gradient(145deg,#12ad80 0%,#057356 100%);box-shadow:0 14px 26px rgba(8,127,98,.22)}
  .app-icon:before{width:62%;height:62%;top:-26%;right:-18%}.app-icon:after{width:45%;height:45%;bottom:-17%;left:-12%}
  .official-pill{display:inline-flex;margin-bottom:6px;padding:3px 8px;border-radius:20px;background:#d9f1e8;color:#08785c;font-size:10px;font-weight:800;letter-spacing:.5px}
  .mobile-app-head h1{font-size:26px;line-height:1.05;letter-spacing:-.8px;color:#122e26}
  .mobile-app-head>a{margin-top:7px;font-size:13px;color:#078463}.mobile-app-head p{font-size:12px;margin-top:3px}
  .metrics{margin:25px 0 22px;padding:15px 4px;background:rgba(255,255,255,.8);border:1px solid rgba(15,127,97,.09);border-radius:16px;box-shadow:0 7px 20px rgba(25,72,57,.055)}
  .metrics>div{border-color:#dce9e4}.metrics strong{font-size:13px;color:#173d32}.metrics span{margin-top:5px;font-size:11px;color:#718079}
  .download-button{height:52px;border-radius:14px;background:linear-gradient(135deg,#0b946f,#08795d);box-shadow:0 10px 22px rgba(8,127,98,.2);font-size:15px;letter-spacing:.1px}
  .download-button:active{transform:scale(.985)}
  .share-button{margin-top:10px;height:40px;font-size:13px}
  .compatibility{justify-content:center;margin-top:12px;font-size:11px;color:#6d7e77}.compatibility svg{width:17px}
  .content-grid{padding:28px 0 112px}
  .main-column{overflow:hidden}
  .preview-heading{display:block;margin:0 20px 14px;font-size:19px;font-weight:800;letter-spacing:-.4px;color:#16342b}
  .screenshots{gap:14px;margin:0;padding:0 20px 22px;scroll-padding-left:20px}
  .shot{flex-basis:158px;height:292px;border-radius:18px;padding:16px 11px 0;border:1px solid rgba(19,58,47,.06);box-shadow:0 10px 24px rgba(22,67,53,.12)}
  .shot-caption{height:59px;font-size:12px;line-height:1.45;color:#173a2f}
  .phone{height:238px;border-width:4px;border-color:#172b25;border-radius:20px 20px 0 0;box-shadow:0 9px 20px rgba(0,0,0,.13)}
  .shot-green{background:linear-gradient(160deg,#45dfa0,#12c47f)}.shot-cream{background:linear-gradient(160deg,#fff9ef,#f7ead7)}.shot-blue{background:linear-gradient(160deg,#b9ecfa,#78d3ee)}.shot-peach{background:linear-gradient(160deg,#ffe6da,#ffc9b5)}.shot-violet{background:linear-gradient(160deg,#eadfff,#cbb4f8)}
  .details-section,.side-column{margin-inline:20px}.details-section{padding:24px 0}.details-section h2,.side-column h2{font-size:19px}.details-section p{font-size:14px;line-height:1.7}
  .side-link{padding:20px 0}
  .bottom-nav{left:12px;right:12px;bottom:10px;height:64px;border:1px solid rgba(23,70,55,.09);border-radius:20px;padding:0 8px env(safe-area-inset-bottom);background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(15,56,43,.18);backdrop-filter:blur(18px);overflow:hidden}
  .bottom-nav a{position:relative;z-index:1;font-size:11px;gap:2px}.bottom-nav a.active:before{content:"";position:absolute;width:68px;height:50px;border-radius:15px;background:#e2f5ed;z-index:-1}.bottom-nav svg{width:20px;height:20px}
  .download-dialog{border-radius:26px}.toast{bottom:88px}
}
@media(max-width:390px){.hero{margin-inline:10px;padding-inline:18px}.screenshots{padding-inline:18px}.screenshots-wrap:before,.details-section,.side-column{margin-inline:18px}.language-button{min-width:80px}.app-icon.small{width:76px;height:76px;flex-basis:76px}.mobile-app-head h1{font-size:24px}}