/* ============ m67 浮光底图·图块按钮（参考 36554 微站 t15 主题） ============
   版式：背景图（固定层，按屏宽等比铺开不裁切）→ 海报带（高度＝图自身比例，会名/海报区完整露出）
        → 磨砂倒计时卡 → 图块按钮组 → 图文栏卡 → 版权（整页一屏，不滚动）
   按钮：直接用后台逐条上传的图片（不使用系统图标），图片自带圆角与半透明，浮在底图之上；
        尺寸按参考站：1/3 槽 294×214、大方块 452×505、半宽 452×246；第 9 个起按半宽两列依次往下。
   逻辑量 --u 以参考站的 1rem 换算：容器宽 /10.8（参考站 1080 设计宽、容器上限 800px）。 */
/* 尺寸体系：按钮与倒计时全部按屏宽缩放（--u = 屏宽/10.8，对应参考站 1080 设计宽）；
   顶部留白固定（500 设计 px，见 m67Fit）。整页锁死：左右、上下都不滑动。 */
body.tpl-picbtn{background:var(--cf-cyan-03, #0b2b4d);height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;--u:calc(min(100vw, 480px) / 10.8)}
body.tpl-picbtn .page{padding-bottom:0;min-height:0;height:100vh;height:100dvh;overflow:hidden}   /* 顶掉通栏底部预留，避免多出 66px 可滚动高度 */
/* 背景层：整张背景图按屏宽等比铺开（不裁不拉伸），顶部对齐；海报带下方继续露在按钮后面，两者同比例所以衔接无痕 */
.tpl-picbtn .b67-bg{position:fixed;left:0;right:0;top:0;bottom:0;margin:0 auto;max-width:480px;z-index:0;background-color:var(--cf-cyan-03, #0b2b4d);background-position:center top;background-size:100% auto;background-repeat:no-repeat}
.tpl-picbtn .b67-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,18,38,.10),rgba(4,18,38,.30) 55%,rgba(4,18,38,.48))}
.tpl-picbtn .b67-wrap{position:relative;z-index:1;width:100%;max-width:800px;flex:0 0 auto;transform-origin:top center;--g:calc(var(--u) * .3)}
/* 顶部留白：固定 500px（由 m67Fit 写入）。整张底图由 .b67-bg 固定层按屏宽铺开，会名/海报区完整露出；
   这里不再另画一张海报图 —— 同一张图只画一次，避免横向接缝与上下明暗不一致造成的「错位感」 */
.tpl-picbtn .b67-top{position:relative;z-index:1;width:100%;max-width:800px;flex:0 0 auto;height:500px}   /* flex:0 0 auto：不被 .page 的列弹性压缩 */
.tpl-picbtn .b67-cd{margin:calc(var(--u)*.5) calc(var(--u)*.5) 0;background:rgba(255,255,255,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:calc(var(--u)*.2);box-shadow:1px 2px 4px 0 rgba(0,0,0,.19);padding:calc(var(--u)*.48) 0 calc(var(--u)*.2);text-align:center}
.tpl-picbtn .b67-cd .lbl{font-size:calc(var(--u)*.5);opacity:.72;letter-spacing:1px}
.tpl-picbtn .b67-cd .nums{display:flex;justify-content:center;align-items:baseline;gap:calc(var(--u)*.12);margin-top:calc(var(--u)*.06)}
.tpl-picbtn .b67-cd .n{font-size:calc(var(--u)*1.1);font-weight:300;font-variant-numeric:tabular-nums;line-height:1.5;min-width:calc(var(--u)*.7)}
.tpl-picbtn .b67-cd .co{font-size:calc(var(--u)*.5);opacity:.8}
.tpl-picbtn .b67-list{display:flex;flex-direction:column;gap:var(--g);padding:calc(var(--u)*.4) calc(var(--u)*.5) 0}
.tpl-picbtn .r67{display:flex;gap:var(--g);justify-content:center;align-items:flex-start}
.tpl-picbtn .r67>*{flex:0 0 auto}
.tpl-picbtn .r67.r3>*{width:calc((100% - var(--g) * 2) / 3)}
.tpl-picbtn .r67.r2>*{width:calc((100% - var(--g)) / 2)}
.tpl-picbtn .r67.rbig>*{width:calc((100% - var(--g)) / 2)}
.tpl-picbtn .r67.rbig .col67{display:flex;flex-direction:column;gap:var(--g)}
.tpl-picbtn .b67{display:block;position:relative;width:100%;border-radius:calc(var(--u)*.48);overflow:hidden;box-shadow:1px 2px 4px 0 rgba(0,0,0,.19);transition:transform .22s ease,box-shadow .22s ease;-webkit-tap-highlight-color:transparent}
.tpl-picbtn .b67 img{display:block;width:100%;height:auto}
/* 按钮槽尺寸写死（留白/宽高比固定，栏目增减都不会变宽变窄）：1/3 槽 294×214、大方块 452×505、半宽 452×246 */
.tpl-picbtn .r67.r3>.b67:not(.b67-txt){aspect-ratio:294/214}
.tpl-picbtn .r67.rbig>.b67:not(.b67-txt){aspect-ratio:452/505}
.tpl-picbtn .r67.rbig .col67>.b67:not(.b67-txt){aspect-ratio:452/246}
.tpl-picbtn .r67.r2>.b67:not(.b67-txt){aspect-ratio:452/246}
/* 图片始终整张显示（不裁切），大图小图都不会变形 */
.tpl-picbtn .b67:not(.b67-txt)>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tpl-picbtn .b67:active{transform:scale(.975);box-shadow:0 0 0 rgba(0,0,0,0)}
/* 未上传图片的兜底：磨砂玻璃卡片（图标 + 名称），同样浮在底图上 */
.tpl-picbtn .b67-txt{min-height:calc(var(--u)*3.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.12);background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.62);color:var(--cf-cyan-04, #0b3556);padding:calc(var(--u)*.2)}
.tpl-picbtn .r67.rbig>.b67-txt{min-height:calc(var(--u)*6.9)}
.tpl-picbtn .b67-txt .ic{display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*.62);line-height:1;opacity:.9}
.tpl-picbtn .b67-txt .ic img{width:calc(var(--u)*.5);height:calc(var(--u)*.5);border-radius:0}
.tpl-picbtn .b67-txt b{font-size:calc(var(--u)*.36);font-weight:600;text-align:center;line-height:1.3;max-width:100%;overflow:hidden}
.tpl-picbtn .b67-sec{position:relative;z-index:1;padding:calc(var(--u)*.4) calc(var(--u)*.5) 0}
.tpl-picbtn .b67-card{background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border-radius:calc(var(--u)*.3);box-shadow:1px 2px 6px rgba(0,0,0,.14);padding:calc(var(--u)*.34) calc(var(--u)*.36);margin-bottom:var(--g);font-size:15px;line-height:1.85;color:var(--cf-cyan-06, #2b4a66);white-space:pre-line}
.tpl-picbtn .b67-card h3{font-size:calc(var(--u)*.38);font-weight:700;color:var(--cf-cyan-04, #0b3556);margin-bottom:calc(var(--u)*.12);letter-spacing:.5px}
.tpl-picbtn .b67-foot{position:relative;z-index:1;text-align:center;font-size:14px;line-height:1.6;color:rgba(255,255,255,.9);padding:calc(var(--u)*.5) 16px calc(var(--u)*.7);text-shadow:0 1px 5px rgba(0,0,0,.5)}
.tpl-picbtn .b67-foot a{color:inherit}
/* 滚动进场动效（尊重系统“减弱动态”偏好） */
.tpl-picbtn .b67-fx{opacity:0;transform:translateY(16px);transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1)}
.tpl-picbtn .b67-fx.b67-on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.tpl-picbtn .b67-fx{opacity:1!important;transform:none!important;transition:none!important}}
/* 二级页：沿用同底色/导航色 */
#subpage.p67-skin .sp-head{backdrop-filter:blur(8px)}