/* 样式仅作用于本页内容区，避免与 Discuz 公共模板(common/header、common/footer)冲突 */
.container, .container *,
.coming-toast, .coming-toast *,
.wechat-mask, .wechat-mask *{margin:0;padding:0;box-sizing:border-box}

.container{max-width:1520px;margin:0 auto;padding:30px 16px 10px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

.page-header{text-align:center;margin-bottom:48px}
.page-header h1{font-size:30px;color:var(--app-color,#2488ff);font-weight:600}
.page-header p{margin-top:8px;font-size:16px;color:var(--app-color,#2488ff)}

.card-row{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:24px;justify-content:center;justify-items:center}
.card-item{width:100%;max-width:220px;display:flex;flex-direction:column;align-items:center;gap:12px}

.os-card{width:100%;aspect-ratio:1/1;background:#ffffff;border-radius:20px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,0.05);cursor:pointer;overflow:hidden;transition:all 0.26s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-decoration:none;color:inherit}
.os-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(36,136,255,0.12)}
a.os-card{color:inherit}
/* 上架中卡片：浅灰色 */
.os-card[data-coming]{background:#f0f1f3;cursor:default}
.os-card[data-coming]:hover{transform:none;box-shadow:0 2px 10px rgba(0,0,0,0.05)}

.icon-download{position:absolute;top:14px;right:14px;width:22px;height:22px;fill:var(--app-color,#2488ff)}
.corner-qr-tag{position:absolute;top:0;right:0;width:60px;height:60px;background:#e6f2ff;clip-path:polygon(100% 0,0 0,100% 100%);border-top-right-radius:20px;display:flex;align-items:flex-start;justify-content:flex-end;padding:9px}
.corner-qr-tag svg{width:20px;height:20px;fill:var(--app-color,#2488ff)}

.card-normal{text-align:center;transition:opacity 0.26s ease}
.card-icon{width:76px;height:76px;margin:0 auto 12px;object-fit:contain}
.card-title{font-size:22px;color:#111;margin-bottom:5px}
.card-desc{font-size:13px;color:#888}

.card-hover-blue{position:absolute;inset:0;background:linear-gradient(145deg,#238bff,#1068f0);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity 0.26s ease;padding:10px;}
.download-circle-wrap{background:#ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.download-circle-wrap svg{width:52px;height:52px;display:block}
.hover-title{color:#ffffff;font-size:26px;font-weight:500;line-height: 2;}
.hover-desc{color:#cce4ff;font-size:16px;text-align:center;line-height:2}

.qr-wrap{width:130px;height:130px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.qr-wrap canvas{width:120px;height:120px;object-fit:contain}
.qr-wrap .qr-empty{color:#999;font-size:14px}
.qr-tip{color:#fff;font-size:16px;margin-top:8px}

.qr-card:hover .card-normal,
.download-card:hover .card-normal{opacity:0}
.qr-card:hover .card-hover-blue,
.download-card:hover .card-hover-blue{opacity:1}

.ver-text{font-size:16px;color:#445570}

/* 底部应用截图区（全屏宽度，突破父容器约束） */
.screenshot-area{margin-top:60px;width:120vw;position:relative;left:50%;transform:translateX(-50%)}
.screenshot-area img{width:100%;height:auto;display:block}

/* 页脚 */
.page-footer{text-align:center;padding:40px 0 10px;color:#aaa;font-size:14px;line-height:1.8}

/* 上架中 Toast */
.coming-toast{position:fixed;left:50%;top:50%;z-index:100001;max-width:calc(100vw - 48px);padding:14px 24px;border-radius:10px;background:rgba(20,20,20,.9);color:#fff;font-size:16px;line-height:1.5;transform:translate(-50%,-40%);opacity:0;visibility:hidden;transition:.2s;pointer-events:none;white-space:nowrap}
.coming-toast.show{opacity:1;visibility:visible;transform:translate(-50%,-50%)}

/* WeChat 微信遮罩层 */
.wechat-mask{position:fixed;z-index:99999;inset:0;display:none;background:rgba(0,0,0,.82);color:#fff}
.wechat-mask.show{display:block}
.wechat-arrow{position:absolute;top:max(14px,env(safe-area-inset-top));right:23px;font-size:74px;font-weight:200;transform:rotate(-12deg)}
.wechat-guide{position:absolute;top:125px;left:24px;right:24px;text-align:center}
.wechat-guide strong{font-size:25px}
.wechat-guide p{margin:16px auto 28px;max-width:430px;font-size:17px;line-height:1.8;color:rgba(255,255,255,.8)}
.wechat-guide button{padding:11px 32px;border:1px solid rgba(255,255,255,.65);border-radius:24px;background:transparent;color:#fff;font-size:16px;cursor:pointer;font-family:inherit}

/* 响应式 */
@media(max-width:1440px){
  .card-row{grid-template-columns:repeat(3,minmax(180px,1fr))}
}
@media(max-width:768px){
  .screenshot-area{margin-top:36px}
  .card-title{font-size:18px}
  .hover-title{font-size:24px}
  .hover-desc{font-size:16px}
  .download-circle-wrap{width:80px;height:80px}
  .download-circle-wrap svg{width:38px;height:38px}
  .ver-text{font-size:14px}
  .page-header h1{font-size:20px}
  .page-header p{font-size:14px}
  .card-icon{width:56px;height:56px}
  .qr-wrap{width:100px;height:100px}
  .qr-wrap canvas{width:88px;height:88px}
  .card-hover-blue{gap:16px}
  .qr-tip{font-size:13px}
}