*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{background:#fff;font-family:-apple-system,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;color:#222}
a{color:inherit;text-decoration:none}
.page{position:relative;width:100%;max-width:430px;min-height:100vh;margin:0 auto;overflow:hidden;padding-top:env(safe-area-inset-top)}
svg{display:block}
.ico{fill:none;stroke:#666;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home{height:859px;min-height:100vh;background:#fff}
.hero{position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(180deg,#e8834f 0%,#efa87c 45%,#f6ddc8 80%,#fff 100%)}
.top{position:absolute;top:calc(env(safe-area-inset-top) + 38px);left:0;right:0;height:50px;display:flex;align-items:flex-start;padding:0 12px 0 17px;color:#fff}
.tb{width:30px;text-align:center;font-size:11px;line-height:1.2}
.tb svg{width:26px;height:26px;margin:0 auto 1px}
.search{flex:1;margin:3px 14px 0 18px;height:30px;border-radius:15px;background:rgba(255,255,255,.28);display:flex;align-items:center;padding:0 10px;font-size:15px;color:#fff;justify-content:space-between}
.search span{display:flex;align-items:center;gap:8px}
.search svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.tools{display:flex;gap:11px}
.ad{position:absolute;top:92px;left:0;right:0;height:105px}
.ad b{position:absolute;left:52px;top:34px;font-size:27px;color:#1f6b4a;letter-spacing:2px}
.ad i{position:absolute;left:52px;top:73px;width:154px;height:27px;border-radius:14px;background:#7a4a2a;color:#f7e7c6;font-style:normal;font-size:14px;font-weight:700;line-height:27px;text-indent:12px}
.ad u{position:absolute;right:18px;top:20px;width:130px;height:84px;border-radius:50% 50% 8px 8px;background:radial-gradient(circle at 50% 40%,#f2b23c,#d98a1d 55%,#e7a24a)}
.tag{position:absolute;right:16px;bottom:5px;font-size:7px;color:#fff;opacity:.9}
.quick{position:absolute;top:197px;left:21px;width:355px;height:117px;border-radius:24px;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.08);display:flex;justify-content:space-around;padding:19px 4px 0}
.q{width:72px;text-align:center;font-size:15px;font-weight:600;color:#222}
.q em{display:block;width:44px;height:44px;margin:0 auto 14px;border-radius:12px;position:relative}
.q em:after{content:"";position:absolute;inset:7px;border-radius:9px;background:rgba(255,255,255,.55);border:2px solid #fff}
.g{background:linear-gradient(135deg,#8fe0c3,#3cc29a)}.o{background:linear-gradient(135deg,#f6b184,#ee8348)}
.grid{position:absolute;left:0;right:0;display:flex}
.todo{position:absolute;left:25px;right:20px;font-size:16px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.todo b{font-size:19px;font-style:italic;color:#555;width:48px;flex:none;text-shadow:0 3px 6px #f3c58a}
.ban{position:absolute;left:21px;top:582px;width:355px;height:105px;border-radius:20px;background:linear-gradient(90deg,#f1efec,#e3ecf5)}
.ban b{position:absolute;left:21px;top:30px;font-size:20px;color:#5a3a22}
.ban span{position:absolute;left:21px;top:61px;font-size:14px;color:#a89c92}
.ban u{position:absolute;right:35px;top:6px;width:80px;height:92px;border-radius:12px;background:linear-gradient(135deg,#7f9bf0,#5373d8)}
.dots{position:absolute;bottom:8px;left:174px;display:flex;gap:10px}.dots i{width:5px;height:5px;border-radius:3px;background:#c8cdd6}.dots i.on{width:14px;background:#7bd6c0}
.wealth{position:absolute;left:21px;top:710px;width:355px;font-size:25px;font-weight:700;display:flex;justify-content:space-between;color:#222}
.wealth svg{width:12px;height:12px;margin-top:9px;stroke:#888;stroke-width:2;fill:none}
.wc{position:absolute;top:763px;width:169px;height:80px;border-radius:14px;background:#fbf7ee}
.tab{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:calc(77px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:.5px solid #eee;display:flex;z-index:9}
.tab div{flex:1;text-align:center;font-size:11px;font-weight:600;padding-top:6px;color:#222}
.tab svg{width:30px;height:30px;margin:0 auto 4px;stroke:#222;fill:none;stroke-width:1.6}
.tab .on svg path{fill:#222}
.acc{background:#f5f5f5;padding-bottom:30px}
.nav{height:calc(84px + env(safe-area-inset-top));background:#f9f9f9;position:relative}
.nav h1{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:18px;font-weight:600;color:#111}
.nav a{position:absolute;left:17px;bottom:19px;width:24px;height:24px}
.nav a svg{width:24px;height:24px;stroke:#222;stroke-width:2;fill:none}
.nav s{position:absolute;right:17px;bottom:30px;display:flex;gap:4px}.nav s i{width:4px;height:4px;border-radius:2px;background:#888}
h2{font-size:19px;font-weight:700;color:#111;margin:23px 17px 0;line-height:1}
.card{margin:25px 17px 0;background:#fff;border-radius:12px;overflow:hidden;position:relative}
.d{height:119px;padding:13px 17px 0;position:relative}
.no{display:flex;align-items:center;font-size:19px;color:#333;height:32px;white-space:nowrap}
.no .t{width:31px;height:31px;border-radius:50%;background:#fe7873;color:#fff;font-size:12px;font-weight:700;font-family:serif;display:flex;align-items:center;justify-content:center;margin-right:6px}
.chk{font-size:12px;color:#17b28a;border:1px solid #17b28a;border-radius:3px;padding:0 5px;line-height:15px;margin-left:5px;height:17px}
.al{margin-left:auto;font-size:16px;color:#333;display:flex;gap:4px;align-items:center}
.al svg{width:16px;height:16px;stroke:#17b28a;fill:none;stroke-width:2}
.bal{margin-top:20px;font-size:15px;color:#555;display:flex;align-items:baseline;height:42px}
.bal b{font-size:30px;font-weight:500;color:#333;margin-left:6px;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
.bal b.edit{cursor:pointer}
.bal input{width:150px;font-size:30px;font-weight:500;color:#333;border:0;border-bottom:2px solid #17b28a;outline:none;background:transparent;font-family:inherit;user-select:text;-webkit-user-select:text}
.det{position:absolute;right:-6px;top:84px;height:25px;width:63px;background:#d9efe7;color:#7fb3a2;font-size:14px;font-weight:600;border-radius:13px 0 0 13px;padding-left:12px;line-height:25px}
.act{display:flex;border-top:1px solid #eee;height:45px}
.act div{flex:1;text-align:center;line-height:44px;font-size:18px;color:#222;border-right:1px solid #f1f1f1;position:relative}
.act div:last-child{border:0}
.act .hot{background:linear-gradient(160deg,#fff 40%,#ffe6d6)}
.act .hot sup{position:absolute;right:0;top:0;background:#ff6e6e;color:#fff;font-size:9px;line-height:11px;padding:3px 4px;border-radius:0 0 0 6px}
.cc{height:180px;margin-top:20px}.cc .d{height:134px}
.visa{font:italic 900 15px/1 Arial,sans-serif;color:#1a3b8f;margin-right:7px;border-top:2px solid #f5a623;padding-top:2px}
.due{position:absolute;right:17px;top:12px;text-align:right;font-size:19px;color:#333}.due small{display:block;font-size:12px;color:#999;margin-top:2px}
.sub{height:174px;margin-top:23px}.sub .d{height:127px}.sub .bal{margin-top:42px}
.rib{position:absolute;right:-31px;top:14px;width:120px;height:20px;transform:rotate(45deg);border-top:1px solid #4ccaa8;border-bottom:1px solid #4ccaa8;background:#dcf6ee;color:#17b28a;font-size:14px;text-align:center;line-height:20px}
.two div{width:50%}

/* ---- v2：固定 397px 设计宽度（JS 按屏宽缩放）+ 图标/横幅精修 ---- */
.page{width:397px;max-width:none;min-height:0;padding-top:0}
.home{height:859px;min-height:0}.acc{min-height:0}
body.accb{background:#f5f5f5}
.hero{background:linear-gradient(180deg,#e8834f 0,#ef9d6c 40%,#f4c9a8 70%,#fbeee2 92%,#fff 100%)}
.top{top:calc(max(env(safe-area-inset-top,0px),33px) + 17px)}
.tb svg{stroke:#fff}
.ad .art{position:absolute;right:0;top:0;width:230px;height:110px}
.ad b{left:52px;top:33px;font-size:23px;font-weight:700;color:#4a2e1a;white-space:nowrap}
.ad b .gn{color:#2f8f66}.ad b s{text-decoration:none;margin:0 6px;font-weight:400}
.ad b .lg{position:absolute;left:-14px;top:-2px;width:11px;height:11px;border-radius:50%;background:#c8453a;color:#fff;font-size:4px;line-height:11px;text-align:center;font-style:normal;text-indent:0}
.ad i.btn{left:62px;top:63px;width:151px;height:27px;line-height:27px;text-indent:12px;font-size:14px;color:#f7e7c6;background:#6d4326}
.ad i em{position:absolute;right:10px;color:#f6c33c;font-style:normal;font-size:18px;text-indent:0}
.q{font-weight:500}.q svg{width:48px;height:48px;margin:0 auto 7px;overflow:visible}
.q g{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gi{width:20%;text-align:center;font-size:15px;font-weight:500;color:#333;white-space:nowrap}
.gi svg{width:32px;height:32px;margin:0 auto 8px;fill:none;stroke:#59616a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gi .c{stroke:#f08a7e}.gi .e{stroke:#2fc096}
.todo{font-weight:400}
.ban .gift{position:absolute;right:28px;top:2px;width:110px;height:100px}
.ban u.tag{position:absolute;right:16px;bottom:5px}
.wealth{top:714px;font-size:21px;font-weight:600}.wealth svg{margin-top:7px}
.tab{width:397px;max-width:none;height:77px;padding-bottom:0}
.tab div{font-weight:500}.tab .on{font-weight:700}
.tab .on svg path{fill:none}
.tab svg{stroke-linecap:round;stroke-linejoin:round}

/* ---- v3：页面转场（首页向左收起 → 我的账户从右侧滑入） ---- */
html,body{overflow-x:hidden}
.page.leaving{transform:translateX(-100%);box-shadow:8px 0 24px rgba(0,0,0,.12);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.tab.leaving{transform:translateX(-150%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
body.leaving{background:#f5f5f5}
.acc{animation:slideIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{transform:translateX(28%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.acc{animation:none}.page.leaving,.tab.leaving{transition:none}}

/* ---- v4：账户页转场衔接（顶栏无缝，内容区灰底转圈 1 秒后显示） ---- */
.acc{animation:none}
.acc.loading>:not(.nav):not(.loader){visibility:hidden}
.acc:not(.loading) .loader{display:none}
.loader{position:absolute;left:50%;top:415px;width:31px;height:31px;margin-left:-15.5px;border-radius:50%;
 background:conic-gradient(transparent 0deg 80deg,#ffab00 85deg,rgba(255,171,0,.3) 150deg,transparent 155deg 265deg,rgba(16,191,166,.3) 270deg,#10bfa6 350deg,transparent 355deg);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
 animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.acc.ready>:not(.nav):not(.loader){animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---- v5：账户页整体上移（顶栏高度 84px → 44px，约上移 40px ≈ 页面宽度的 10%） ---- */
.nav{height:calc(44px + env(safe-area-inset-top,0px))}
.nav h1{bottom:11px;line-height:22px}
.nav a{bottom:10px}
.nav s{bottom:20px}
.loader{top:375px}

/* ---- v6：账户页卡片间距按原图重排（顶栏不动）+ 修复底部白线 ---- */
html:has(body.accb){background:#f5f5f5}
body.accb{min-height:100vh}
.acc{padding-bottom:16px}
.acc>h2:first-of-type{margin-top:30px}
.acc>h2[style]{margin-top:45px!important}
.acc h2+.card{margin-top:35px}
.acc h2+.card:not(.cc)>.d{height:135px}
.acc h2+.card:not(.cc) .det{top:96px}
.acc h2+.card .bal{margin-top:16px}
.acc .cc .bal{margin-top:36px}
.acc .sub{margin-top:34px}

/* ---- v7：VISA 标志还原（左上角黄色飘角 + 蓝色斜体字） ---- */
.visa{display:block;flex:none;width:36px;height:12.5px;margin-right:7px;padding:0;border:0;font-size:0;color:transparent;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20118%2040%22%3E%3Cpath%20fill=%22%23f7a823%22%20d=%22M0%204H12L14.7%2015Z%22/%3E%3Cg%20fill=%22%231b4fa0%22%20transform=%22translate%2813%200%29%20skewX%28-14%29%22%3E%3Cpath%20d=%22M0%204H11L18%2026L25%204H36L24%2036H12Z%22/%3E%3Cpath%20d=%22M40%204H50V36H40Z%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M76%2036L85%204H96L105%2036H95L94%2029H86L84%2036ZM87.5%2023H92.5L90%2012Z%22/%3E%3Cpath%20fill=%22none%22%20stroke=%22%231b4fa0%22%20stroke-width=%227.5%22%20d=%22M71%2012C69%205%2055%205%2055%2013C55%2020%2071%2020%2071%2028C71%2036%2057%2036%2054%2028%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center/100% 100%}

/* ---- v8：首页功能图标按原图重绘（viewBox 40，灰线+珊瑚红/青绿点缀） ---- */
.gi svg{width:34px;height:34px;margin:0 auto 6px;stroke:#555;stroke-width:2.4}
.gi .c{stroke:#f08b7e}.gi .e{stroke:#1fc4a0}