/* HKAIFM · 第二版视觉：「放映厅」。全站有白天和夜晚两套外观：默认跟随系统，也可以在页眉手动切换。白天以纸白为底、墨黑作字，夜晚反过来；朱红在两套里都整面使用 */
/* 只用 VI 三色：墨黑 #232326 / #131315、朱红 #EF432F、纸白 #F6F3ED，没有引入第四种颜色 */

/* 1 展示页（.showpg）跟随白天/夜晚；市场数据页（.darkpg）是一块始终深色的看板，变量范围单独给出 */
.page.showpg{background:var(--paper)}
.page.darkpg{background:#131315;color:#F6F3ED;color-scheme:dark;
  --paper:#131315;--paper-2:#1C1C1F;--card:#1F1F23;--ink:#F6F3ED;--ink-2:#C6C3BC;--ink-3:#8D8B87;--line:rgba(246,243,237,.16);--line-2:rgba(246,243,237,.08);
  --red-text:#FF6A57;--good:#4CC38A;--warn:#E0A53A;--info:#7FB0F0;--panel:#0C0C0E;--glass:rgba(27,27,30,.72);--glass-line:rgba(246,243,237,.12);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.6);--shadow-2:0 24px 60px -20px rgba(0,0,0,.8);--show-l:none;--show-d:block;--aux:.5}
body.darkpage{background:#131315}
body.darkpage .topbar,body.darkpage .tabbar,body.darkpage .back{color:#F6F3ED;--paper:#131315;--ink:#F6F3ED;--ink-2:#C6C3BC;--ink-3:#8D8B87;--glass:rgba(30,30,34,.74);--glass-line:rgba(246,243,237,.14);--show-l:none;--show-d:block}
.page.darkpg .foot{background:#0C0C0E}
.page.darkpg .input{background:#1C1C1F}
.page.showpg .mapsec{margin-top:0}

/* 2 底部菜单：居中的悬浮胶囊，两边留白；向下滚动时收成左下角的圆点 */
.tabbar{left:0;right:0}
.tbar{left:50%;width:min(336px,calc(100% - 64px));transform:translateX(-50%);transition:width .5s var(--spring),height .5s var(--spring),left .5s var(--spring),transform .5s var(--spring)}
.tbar a{font-size:10px;letter-spacing:-.01em}.tbar a span{max-width:100%;overflow:hidden;white-space:nowrap}
.tbar a.on::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--red)}.tbar a{position:relative}.tbar a.plus.on::after{display:none}
body.min .tbar{left:max(12px,env(safe-area-inset-left,0px));transform:none}
body.min .tbar a.on::after{display:none}
.fab{right:max(12px,env(safe-area-inset-right,0px))}

/* 3 通用动效：没有脚本或系统要求减少动态效果时，以下内容直接可见 */
.wd{display:inline-block;white-space:nowrap}
html.fx [data-split] .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(5deg);transition:opacity .6s var(--ease),transform .9s var(--spring);transition-delay:calc(var(--i) * 26ms)}
html.fx [data-split].in .ch{opacity:1;transform:none}
html.fx [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--spring);transition-delay:calc(var(--d,0) * 70ms)}
html.fx [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.fx [data-split] .ch,html.fx [data-rv]{opacity:1;transform:none;transition:none}.vm div{transform:none!important}.vlive i,.gsrc div,.pwc{animation:none!important}}
html.fx .tcard .poster{transform:perspective(720px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tcard .poster::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.3),transparent 48%);opacity:0;transition:opacity .3s;pointer-events:none}
.tcard.tilting .poster{transition-duration:.12s;box-shadow:0 2px 4px rgba(0,0,0,.2),0 30px 50px -18px rgba(0,0,0,.7)}.tcard.tilting .poster::after{opacity:1}
[data-mag]{transition:transform .35s var(--spring)}
.hfm-cursor{position:fixed;left:0;top:0;z-index:9999;width:0;height:0;pointer-events:none;display:none}
body.showpage .hfm-cursor.on,body.darkpage .hfm-cursor.on{display:block}
.hfm-cursor::before{content:"";position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .3s var(--spring)}
.hfm-cursor::after{position:absolute;left:-36px;top:-36px;width:72px;height:72px;display:grid;place-items:center;font:800 11px/1 var(--f-display);letter-spacing:.1em;color:#fff;opacity:0;transition:opacity .2s}
.hfm-cursor[data-k="play"]::before,.hfm-cursor[data-k="drag"]::before,.hfm-cursor[data-k="open"]::before{transform:scale(1)}
.hfm-cursor[data-k="play"]::after{content:"▶";font-size:17px;opacity:1;padding-left:3px}.hfm-cursor[data-k="drag"]::after{content:"←  →";opacity:1}.hfm-cursor[data-k="open"]::after{content:"↗";font-size:20px;opacity:1}

/* 4 首页首屏：背景是缓慢滚动的倾斜海报墙；片库里作品不足时退回着色器背景。两种背景都随白天/夜晚换色 */
.page.home{padding-top:0}
.vh{position:relative;min-height:max(600px,var(--ph,100svh));display:flex;flex-direction:column;justify-content:flex-end;padding:calc(150px + env(safe-area-inset-top,0px)) 0 0;overflow:hidden;isolation:isolate;background:var(--paper)}
.vh.nowall{padding-top:calc(96px + env(safe-area-inset-top,0px))}
.vh.nowall{background:radial-gradient(120% 80% at 84% 10%,color-mix(in srgb,var(--red) 58%,var(--paper)) 0%,color-mix(in srgb,var(--red) 20%,var(--paper)) 34%,var(--paper) 70%)}
.vh canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3}.vh canvas.nogl{display:none}
.vh::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(90% 200px at 90% 0%,rgba(239,67,47,.26),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--paper) 36%,transparent) 0,color-mix(in srgb,var(--paper) 4%,transparent) 80px,color-mix(in srgb,var(--paper) 6%,transparent) 100%)}
.vh.nowall::after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 66%,transparent) 0,color-mix(in srgb,var(--paper) 14%,transparent) 24%,color-mix(in srgb,var(--paper) 36%,transparent) 58%,var(--paper) 100%)}
.vh .mk{position:absolute;z-index:-2;right:-34%;top:6%;width:118%;max-width:none;opacity:.1;transform:rotate(-10deg);pointer-events:none}
.pw{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.pwi{position:absolute;left:50%;top:128px;width:152vw;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start;transform:translate(-50%,-50%) translate3d(calc(var(--mx,0) * -34px),calc(var(--my,0) * -22px),0) perspective(1500px) rotateX(16deg) rotateZ(-9deg);transition:transform .9s var(--ease)}
.pwc{display:flex;flex-direction:column;gap:10px;animation:pwup var(--d,60s) linear infinite;will-change:transform}
.pwc:nth-child(even){animation-direction:reverse}.pwc:nth-child(n+6){display:none}
.pwc .poster{border-radius:10px;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.pw.paused .pwc{animation-play-state:paused}
@keyframes pwup{to{transform:translateY(calc(-50% - 5px))}}
.vh .wrap{display:flex;flex-direction:column;gap:18px;padding-top:92px;padding-bottom:calc(var(--tab) - 8px);background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--paper) 86%,transparent) 62px,var(--paper) 104px)}
.vh.nowall .wrap{padding-top:0;background:none}
.vlive{display:inline-flex;align-items:center;gap:9px;font:650 11px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.vlive i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;animation:vpulse 2.2s infinite}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgba(239,67,47,.75)}70%,100%{box-shadow:0 0 0 11px rgba(239,67,47,0)}}
.vt{font:800 clamp(46px,9.4vw,152px)/1.02 var(--f-display);letter-spacing:-.045em;margin:0;color:var(--ink);text-shadow:0 0 44px color-mix(in srgb,var(--paper) 70%,transparent),0 0 14px color-mix(in srgb,var(--paper) 50%,transparent)}
.vt.en{font-size:clamp(40px,8.2vw,132px);line-height:.94;letter-spacing:-.052em}
.vt em{font-style:normal;display:inline-block;color:#fff;background:var(--red);padding:.02em .12em .06em;border-radius:.09em;line-height:1;text-shadow:none}
.vlead{font-size:clamp(15px,1.45vw,19px);line-height:1.62;color:var(--ink);opacity:.86;max-width:54ch;text-wrap:pretty;font-weight:450}
.vcta{display:flex;flex-wrap:wrap;gap:10px}
.vk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;border-top:1px solid color-mix(in srgb,var(--ink) 24%,transparent);padding-top:16px;margin-top:4px}
.vk b{display:block;font:800 clamp(34px,5.2vw,72px)/1 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.vk span{display:block;margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.vnote{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink-2)}.vnote svg{width:15px;height:15px;flex:none;margin-top:1px}
.vscroll{display:none}
.ibtn.thb span,.dbtn.ico span{line-height:0}
@media (max-width:359px){.ibtn.thb{display:none}}

/* 5 大字滚动带：随页面滚动左右错位 */
.vm{overflow:hidden;padding:18px 0 22px;display:grid;gap:2px;user-select:none;-webkit-user-select:none}
.vm div{display:flex;white-space:nowrap;width:max-content;font:800 clamp(62px,13.2vw,214px)/.92 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;will-change:transform;transform:translateX(calc(var(--p,.5) * -24%))}
.vm div:nth-child(2){transform:translateX(calc(-34% + var(--p,.5) * 24%))}
.vm span{padding-right:.26em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 38%,transparent)}
.vm span.f{color:var(--red);-webkit-text-stroke:0}.vm span.p{color:var(--ink);-webkit-text-stroke:0}

/* 6 片库带：可以横向拖动的海报 */
.vr{padding:22px 0 26px;overflow:hidden}
.vhd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:6px}
.vhd .eyebrow{margin-bottom:12px}
.vh2{font:800 clamp(30px,5.6vw,84px)/1.02 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
.vh2.en{line-height:.96;letter-spacing:-.045em}
.vrib{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:26px max(var(--gut),calc((100% - 1320px) / 2 + var(--gut))) 44px;transform:rotate(-2deg);margin-inline:-12px;cursor:grab;-webkit-overflow-scrolling:touch}
.vrib::-webkit-scrollbar{display:none}.vrib.dragging{cursor:grabbing}.vrib.dragging *{pointer-events:none}
.vrib .tcard{flex:0 0 clamp(148px,17vw,240px)}.vrib .tcard:nth-child(even){margin-top:26px}
.vrib .tcard .t{font-size:15.5px}

/* 7 朱红整面：绿色通道 */
.vg{background:var(--red);color:#131315;padding:44px 0 0;position:relative;overflow:hidden;isolation:isolate;--ink:#131315;--ink-2:rgba(19,19,21,.78);--line:rgba(19,19,21,.22)}
.vg .eyebrow{color:#131315}.vg .eyebrow::before{background:#131315}
.vgg{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
.vg .vh2{color:#131315;font-size:clamp(28px,8.4vw,46px)}
.vg p.vgl{font-size:clamp(15px,1.4vw,18px);line-height:1.6;max-width:50ch;color:rgba(19,19,21,.86);font-weight:500}
.vgc{display:flex;flex-direction:column;gap:18px;min-width:0;align-items:flex-start}
.gsearch{display:flex;align-items:center;gap:8px;height:64px;padding:0 7px 0 24px;border-radius:32px;background:#131315;color:#F6F3ED;width:100%;max-width:620px;text-align:left;transition:transform .3s var(--spring)}
.gsearch:hover{transform:scale(1.015)}
.gsearch span,.gsearch input{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;color:rgba(246,243,237,.66)}
.gsearch input{background:none;border:0;outline:0;color:#F6F3ED;height:100%;padding:0}.gsearch input::placeholder{color:rgba(246,243,237,.56)}
.gsearch i{width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}.gsearch i svg{width:22px;height:22px}
.vgl2{display:flex;flex-wrap:wrap;gap:8px 20px}
.gh .pick{background:#131315;color:#F6F3ED;box-shadow:none;--ink:#F6F3ED;--ink-2:#C6C3BC;--ink-3:#8D8B87;--line:rgba(246,243,237,.16);--line-2:rgba(246,243,237,.08);--paper-2:#26262a}
.vga{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:14.5px;line-height:1.2;color:#131315;padding:6px 0;border-bottom:2px solid #131315}.vga svg{width:16px;height:16px}
.gsrc{overflow:hidden;border-top:1.5px solid rgba(19,19,21,.9);margin-top:34px;padding:15px 0 16px}
.gsrc div{display:flex;width:max-content;animation:marq 120s linear infinite}
.gsrc span{font:750 13px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;padding-right:22px;color:#131315}.gsrc span::after{content:"✳";margin-left:22px;opacity:.55}

/* 8 权益包卡片 */
.pks{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pk{position:relative;border-radius:22px;padding:16px;background:#131315;color:#F6F3ED;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;text-align:left;transition:transform .45s var(--spring),box-shadow .3s}
.pk .lt{font:800 clamp(64px,9vw,128px)/.78 var(--f-display);letter-spacing:-.07em;margin-left:-.04em}
.pk .rt{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font:750 13px/1.2 var(--f-display);letter-spacing:.02em}
.pk .rt b{font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.03em}
.pk ul{display:grid;gap:7px;font-size:12.5px;line-height:1.4;opacity:.86}.pk li{display:flex;gap:7px}.pk li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;margin-top:.5em;opacity:.7}
.pk .who{font-size:12px;line-height:1.4;opacity:.72;margin-top:auto;padding-top:8px;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.vg .pk.pS .lt{color:var(--red)}.vg .pk.pB .lt,.vg .pk.pC .lt{color:transparent;-webkit-text-stroke:2px #F6F3ED}.vg .pk.pC .lt{-webkit-text-stroke-color:rgba(246,243,237,.5)}
.vg .pk li:nth-child(n+3){display:none}
.gp .pk{background:var(--card);color:var(--ink)}.gp .pk.pS{background:var(--red);color:#131315}.gp .pk.pA{background:var(--ink);color:var(--paper)}
.gp .pk.pB{box-shadow:inset 0 0 0 1px var(--line)}.gp .pk.pC{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent)}
.gp .pk.pC .lt{color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--ink) 70%,transparent)}
.gp .pk.hl{transform:translateY(-10px) scale(1.02);box-shadow:0 30px 60px -20px rgba(239,67,47,.6),inset 0 0 0 2px var(--red)}
.gp.dim .pk:not(.hl){opacity:.42}
.tag.pack{font-weight:800;letter-spacing:.06em}
.tag.pack.pS{background:var(--red);color:#fff}.tag.pack.pA{background:var(--ink);color:var(--paper)}
.tag.pack.pB{background:transparent;box-shadow:inset 0 0 0 1.4px var(--ink);color:var(--ink)}.tag.pack.pC{background:transparent;box-shadow:inset 0 0 0 1.2px var(--ink-3);color:var(--ink-2)}

/* 9 钉住的步骤：滚动推进，一次只讲一步 */
.pin{--pp:0;position:relative}
.pst{padding:44px 0 30px}
.pgrid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.pbig{display:grid;gap:22px}
.pb{display:grid;gap:16px;align-content:start}
.pb .n{font:800 clamp(72px,17vw,250px)/.8 var(--f-display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:2px var(--red);font-variant-numeric:tabular-nums}
.pb h3{font:800 clamp(28px,4.4vw,64px)/1.05 var(--f-display);letter-spacing:-.04em}
.pb p{font-size:clamp(15px,1.4vw,19px);line-height:1.6;color:var(--ink-2);max-width:44ch}
.pl{display:none}.pbar{display:none}
html.fx .pin:not(.flat){height:calc(var(--ph,100vh) * 3.6)}
html.fx .pin:not(.flat) .pst{position:sticky;top:0;height:var(--ph,100vh);padding:calc(74px + env(safe-area-inset-top,0px)) 0 calc(var(--tab) + 4px);display:flex;flex-direction:column;overflow:hidden}
html.fx .pin:not(.flat) .pgrid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
html.fx .pin:not(.flat) .pbig{position:relative;display:block}
html.fx .pin:not(.flat) .pb{position:absolute;inset:0;align-content:center;--d:calc(var(--pp) * (var(--n) - 1) - var(--i));opacity:clamp(0,calc(1.6 - max(var(--d),calc(-1 * var(--d))) * 2.8),1);transform:translateY(calc(var(--d) * -70px));will-change:opacity,transform}
html.fx .pin:not(.flat) .pb .n{-webkit-text-stroke:0;color:var(--red)}
html.fx .pin:not(.flat) .pbar{display:block;height:3px;border-radius:2px;background:var(--line);margin-top:14px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--pp))}

/* 10 绿色通道专页 */
.gh{background:var(--red);color:#131315;padding:calc(92px + env(safe-area-inset-top,0px)) 0 30px;position:relative;overflow:hidden;isolation:isolate;--ink:#131315;--ink-2:rgba(19,19,21,.8);--line:rgba(19,19,21,.24)}
.gh .eyebrow{color:#131315}.gh .eyebrow::before{background:#131315}
.gh .bg{position:absolute;z-index:-1;right:-4%;bottom:-.16em;font:800 clamp(190px,44vw,700px)/.74 var(--f-display);letter-spacing:-.09em;color:transparent;-webkit-text-stroke:2px rgba(19,19,21,.2);pointer-events:none;white-space:nowrap;transform:translateX(calc((var(--p,0) - .5) * -12%))}
.gh .wrap{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.gt{font:800 clamp(40px,8.8vw,138px)/1.02 var(--f-display);letter-spacing:-.045em;color:#131315}
.gt.en{font-size:clamp(36px,7.4vw,118px);line-height:.95;letter-spacing:-.05em}
.gt em{font-style:normal;color:#F6F3ED}
.gh .vgl{font-size:clamp(15px,1.4vw,18px);line-height:1.6;max-width:56ch;font-weight:500;color:rgba(19,19,21,.88)}
.gk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;width:100%;border-top:1.5px solid #131315;padding-top:16px;margin-top:6px}
.gk b{display:block;font:800 clamp(34px,5vw,70px)/1 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}.gk span{display:block;margin-top:6px;font-size:12.5px;line-height:1.3;font-weight:550;color:rgba(19,19,21,.8)}
.gs{padding-block:46px 8px}.gs.tight{padding-top:26px}
.gs .vhd{margin-bottom:22px}.gs .vhd p{color:var(--ink-2);max-width:60ch;margin-top:12px;font-size:15px;line-height:1.6}
.gp{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.gp .pk{padding:20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px}.gp .pk .lt{grid-row:1/4;font-size:clamp(86px,22vw,128px)}.gp .pk ul,.gp .pk .who{grid-column:2}
.gmx{border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.gm{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))}
.gm>*{padding:14px 10px;display:flex;align-items:center;justify-content:center;min-height:58px;border-top:1px solid var(--line-2);font-size:13px;text-align:center}
.gm>.hd{border-top:0;font:650 11px/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.gm>.rw{justify-content:flex-start;gap:10px;padding-left:16px;font-weight:650;text-align:left}.gm>.rw b{font:800 26px/1 var(--f-display);letter-spacing:-.04em;color:var(--red)}
.gm button{cursor:pointer;transition:background .2s}.gm button:hover,.gm button.on{background:rgba(239,67,47,.14)}
.gm .tag.pack{height:28px;padding:0 11px;font-size:12.5px}
.gfil{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut)) 18px;padding:2px var(--gut)}.gfil::-webkit-scrollbar{display:none}
.ggrp{margin-top:26px}.ggrp[hidden]{display:none}
.ggh{display:flex;align-items:flex-end;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ggh b{font:800 clamp(52px,7vw,92px)/.8 var(--f-display);letter-spacing:-.06em;color:var(--red)}
.ggh>div{display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:4px}.ggh h3{font:750 18px/1.2 var(--f-display);letter-spacing:-.01em}
.ggh .wrapx{gap:6px 6px;align-items:center}.ggh .wrapx .tag{margin-right:10px}
.gtl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.gti{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;min-width:0;overflow:hidden;transition:transform .4s var(--spring),box-shadow .25s,background .25s}
.gti[hidden]{display:none}
.gti::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring)}
.gti:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--card) 94%,var(--ink));box-shadow:inset 0 0 0 1px var(--line),0 22px 40px -22px rgba(0,0,0,.5)}.gti:hover::after{transform:scaleX(1)}
.gti .mo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font:800 15px/1 var(--f-display);letter-spacing:-.02em;background:var(--line-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.gti .mo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:5px}
.gti.pt .mo{background:var(--red);color:#fff;box-shadow:none}
.gti .nm{display:block;font:650 14.5px/1.28 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.gti .mt{display:block;font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:3px}
.gti .tg{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.gti .tag{height:19px;font-size:10px;padding:0 6px}
.gnone{padding:30px 16px;text-align:center;color:var(--ink-2);border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}
.gcr{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.gci{padding:16px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);display:flex;flex-direction:column;gap:8px;min-width:0}
.gci .between{align-items:baseline}.gci b{font:700 16px/1.25 var(--f-display)}.gci .pt{font:800 13px/1 var(--f-display);color:var(--red-text);white-space:nowrap}
.gci p{font-size:13px;line-height:1.5;color:var(--ink-2)}
.gci .dots{display:flex;gap:5px}.gci .dots i{flex:1;height:5px;border-radius:3px;background:var(--red)}.gci .dots i.o{background:var(--line)}
.gci.gate{background:var(--red);color:#131315;box-shadow:none}.gci.gate p{color:rgba(19,19,21,.84)}.gci.gate .pt{color:#131315}
.gth{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
.gth div{padding:12px 10px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);text-align:center;font-size:12px;color:var(--ink-2)}.gth b{display:block;font:800 26px/1 var(--f-display);letter-spacing:-.04em;color:var(--ink);margin-bottom:5px}
.g3{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);counter-reset:g3}
.g3 li{counter-increment:g3;padding:18px 18px 20px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:8px;align-content:start}
.g3 li::before{content:"0" counter(g3);font:800 clamp(54px,6vw,84px)/.85 var(--f-display);letter-spacing:-.06em;color:var(--red)}
.g3 b{font:750 18px/1.25 var(--f-display);letter-spacing:-.01em}.g3 p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.gend{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* 11 费用页与佣金计算器 */
.fh{padding:calc(98px + env(safe-area-inset-top,0px)) 0 8px}
.fh .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.fh .gt{color:var(--ink)}.fh .gt em{color:var(--red)}
.fcalc{border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:20px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.fcalc .lab{font:650 11px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.fprice{font:800 clamp(40px,7vw,84px)/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}.fprice small{font-size:.36em;font-weight:700;letter-spacing:0;color:var(--ink-2);margin-right:6px}
.frange{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:8px 0 0;cursor:pointer}
.frange::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red) var(--v,40%),var(--line) var(--v,40%))}
.frange::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}.frange::-moz-range-progress{height:6px;border-radius:3px;background:var(--red)}
.frange::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--ink);border:0;margin-top:-12px;box-shadow:0 0 0 6px rgba(239,67,47,.28),0 6px 16px rgba(0,0,0,.35)}
.frange::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 0 0 6px rgba(239,67,47,.28)}
.fseg{display:flex;flex-wrap:wrap;gap:6px}
.fout{display:grid;gap:14px;align-content:start}
.fsp{display:flex;height:54px;border-radius:14px;overflow:hidden;font:750 13px/1 var(--f-display)}
.fsp i{display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden;min-width:0;font-style:normal;transition:flex-basis .35s var(--ease)}
.fsp .s{background:var(--ink);color:var(--paper);flex:1 1 0}.fsp .c{background:var(--red);color:#fff;flex:0 0 var(--c,15%);justify-content:center;padding:0 4px}
.fnum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fnum b{display:block;font:800 clamp(24px,3.4vw,40px)/1.05 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}.fnum span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.35}
.frule{font-size:13px;line-height:1.55;color:var(--ink-2)}
.ftb{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.ftc{padding:20px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.ftc h3{font:800 22px/1.2 var(--f-display);letter-spacing:-.02em;margin-bottom:8px}.ftc .kv>span:last-child{font-weight:700}
.ftc .kv .free{color:var(--good)}

/* 12 深色页面上的原有组件微调 */
.page.showpg .gen b{text-shadow:0 1px 12px rgba(0,0,0,.4)}
.page.showpg .ctaband::before{background:linear-gradient(180deg,rgba(19,19,21,.94) 0%,rgba(19,19,21,.74) 100%)}
.page.showpg .ctaband{margin-top:34px}
.vsec{padding-block:40px 6px}
.capline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}.capline svg{width:15px;height:15px;color:var(--good)}
.fver{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fver div{padding:12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.fver b{font:700 13.5px/1.25 var(--f-display)}.fver span{font-size:12px;line-height:1.4;color:var(--ink-2)}.fver .tag{align-self:flex-start;margin-top:4px}
.idgrid{display:grid;gap:8px}
.scsheet .srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}.scsheet .srow:first-child{border-top:0}
.scsheet .srow b{display:block;font-weight:600}.scsheet .srow .seg{flex:none}.scsheet .srow .seg button{width:38px;padding:0}
.lgprev{width:46px;height:46px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden;flex:none}.lgprev img{max-width:100%;max-height:100%;padding:4px}
.scsum{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--paper-2);font-weight:650}.scsum b{font:800 30px/1 var(--f-display);letter-spacing:-.04em;color:var(--red-text)}

/* 13 桌面端 */
@media (min-width:1024px){
  .vh,.vh.nowall{padding:128px 0 40px;min-height:max(720px,var(--ph,100vh))}.vh .wrap{padding-top:0;padding-bottom:0;background:none}
  .vh .mk{right:-6%;top:-4%;width:min(58vw,880px)}
  .pwi{width:max(1480px,116vw);grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;left:60%;top:50%}.pwc{gap:16px}.pwc:nth-child(n+6){display:flex}.pwc .poster{border-radius:14px}
  @keyframes pwup{to{transform:translateY(calc(-50% - 8px))}}
  .vh::after{background:
    radial-gradient(50% 50% at 96% 0%,rgba(239,67,47,.28),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--paper) 60%,transparent) 0,transparent 16%,transparent 56%,color-mix(in srgb,var(--paper) 86%,transparent) 80%,var(--paper) 95%),
    linear-gradient(90deg,var(--paper) 0,var(--paper) 45%,color-mix(in srgb,var(--paper) 90%,transparent) 55%,color-mix(in srgb,var(--paper) 36%,transparent) 68%,transparent 88%)}
  .vh .wrap{gap:26px}
  .vk{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;padding-top:22px;margin-top:10px}
  .vcta .btn.lg{height:60px;padding:0 32px;font-size:17px}
  .vscroll{display:flex;position:absolute;right:max(28px,calc((100% - 1320px) / 2 + 16px));top:112px;writing-mode:vertical-rl;font:650 11px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);gap:12px;align-items:center}
  .vscroll::after{content:"";width:1px;height:64px;background:linear-gradient(var(--ink),transparent);animation:vsc 2s var(--ease) infinite}
  @keyframes vsc{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  .vm{padding:30px 0 40px}
  .vr{padding:50px 0 40px}.vrib{gap:22px;padding-block:40px 64px}.vrib .tcard:nth-child(even){margin-top:44px}
  .vg{padding:84px 0 0}.vg .vh2{font-size:clamp(40px,4.2vw,62px)}.vgg{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:56px;align-items:end}
  .vg .pk{padding:22px}.pks{gap:14px}
  .gsrc{margin-top:64px;padding:20px 0 22px}.gsrc span{font-size:15px;padding-right:30px}.gsrc span::after{margin-left:30px}
  .pst{padding:90px 0 60px}
  .pgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}
  .pl{display:grid;align-content:center;gap:0;counter-reset:pl}
  .pl li{counter-increment:pl;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line);font:700 clamp(17px,1.5vw,22px)/1.25 var(--f-display);letter-spacing:-.015em}
  .pl li::before{content:"0" counter(pl);font:750 12px/1 var(--f-display);letter-spacing:.08em;color:var(--red-text)}
  html.fx .pin:not(.flat) .pst{padding:112px 0 44px}
  html.fx .pin:not(.flat) .pl li{--d:calc(var(--pp) * (var(--n) - 1) - var(--i));opacity:clamp(.3,calc(1.5 - max(var(--d),calc(-1 * var(--d))) * 1.6),1)}
  .pin.flat .pl,html:not(.fx) .pl{display:none}
  .pin.flat .pbig,html:not(.fx) .pbig{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}.pin.flat .pgrid,html:not(.fx) .pgrid{grid-template-columns:minmax(0,1fr)}
  .gh{padding:150px 0 46px}.gh .wrap{gap:26px}.gk{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:22px}
  .gsearch{height:76px;border-radius:38px;padding:0 9px 0 30px}.gsearch i{width:58px;height:58px}.gsearch span,.gsearch input{font-size:18px}
  .gs{padding-block:92px 10px}.gs.tight{padding-top:44px}.gs .vhd{margin-bottom:34px}
  .gp{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .gp .pk{display:flex;padding:24px;min-height:430px}.gp .pk .lt{font-size:clamp(110px,11vw,170px)}.gp .pk ul{font-size:13.5px}
  .gmg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
  .gm>*{min-height:72px;font-size:14.5px}.gm>.rw{padding-left:24px}.gm>.rw b{font-size:34px}
  .gfil{margin-inline:0;padding-inline:0;flex-wrap:wrap;overflow:visible}
  .ggrp{margin-top:44px}.gtl{gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .gcr{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.gci{padding:22px}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.g3 li{padding:26px}
  .fh{padding:156px 0 10px}
  .fcalc{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;padding:36px;align-items:center}
  .ftb{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ftc{padding:28px}
  .vsec{padding-block:84px 10px}
  .fver{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page.showpg .ctaband{margin-top:70px}
}
@media (min-width:640px) and (max-width:1023px){.gp{grid-template-columns:repeat(2,minmax(0,1fr))}.gp .pk{display:flex}.gcr,.g3,.ftb{grid-template-columns:repeat(2,minmax(0,1fr))}.vk,.gk{grid-template-columns:repeat(4,minmax(0,1fr))}}