/* PC 落地页内联样式(自 index.html 抽出,路径归一为 /src) */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { vertical-align: middle; }
html, body { width: 100vw; height: 100vh; }
body { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.l1 { position: absolute; top: 10vh; left: 45%; transform: translateX(-50%); z-index: 10; }
.l2 { position: absolute; left: 12vh; top: 40%; transform: translateY(-50%); z-index: 10; }
.bg-slider { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.bg-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.bg-slide.active { opacity: 1; }
.bg-slide img { width: 100%; height: 100%; object-fit: fill; display: block; }
.page-container { position: absolute; left: 5vh; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 5; }
.page-container img { width: auto; height: auto; }
header { display: flex; align-items: center; margin-top: 5vh; }
header > img:first-of-type { width: 12%; height: auto; }
.header-buttons { margin-left: auto; display: flex; align-items: center; background: url(/src/image/desktop/tgbg.png?v=7) no-repeat center center; background-size: contain; padding: 20px 40px; min-width: 550px; height: 120px; justify-content: center; }
.header-buttons img { height: 8vh; width: auto; margin-right: 25px; cursor: pointer; }
.header-buttons img:last-child { margin-right: 0; }
main { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; overflow: hidden; position: relative; }
.main-content { padding-top: 10vh; width: 50%; display: flex; flex-direction: column; gap: 5vh; }
.main-top { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.main-top img { height: auto; max-width: 100%; }
.main-middle { flex: 1; display: flex; justify-content: center; align-items: center; gap: 20px; }
.main-middle-left { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
.qr-box { position: absolute; width: 240px; z-index: 1; }
.qr-box > img { width: 100%; height: auto; }
#qrcode { position: absolute; width: 240px; height: 240px; z-index: 2; display: flex; align-items: center; justify-content: center; top: -2px; left: -15px; }
#qrcode > img { width: 140px; height: 140px; object-fit: contain; }
.main-middle-right { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.main-middle-right .download { width: auto; max-width: 100%; height: auto; cursor: pointer; }
.main-bottom { display: flex; justify-content: center; align-items: center; }
.main-bottom img { width: auto; max-width: 100%; height: auto; }

/* 引导安装弹窗(原 app.js 注入,现服务端渲染) */
.dialog { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: rgba(0,0,0,0.57); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.5s; }
.dialog.show { z-index: 999; opacity: 1; width: 100%; height: 100%; }
.dialog .content { width: 0; height: fit-content; overflow: hidden; background: #000; position: relative; transition: width 0.5s; }
.dialog.show .content { width: 70%; }
.dialog .content img { width: 100%; border-radius: 10px; }

/* P2.5 广告位浮窗(服务端渲染 ad.json) */
.lp-ad { position: fixed; right: 10px; bottom: 12px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; }
.lp-ad a { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.65); color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 20px; font-size: 13px; backdrop-filter: blur(2px); }
.lp-ad a img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }