/* ==================================================================
 *  NovaWealth · 浅色 Fintech 主题
 *  设计基准：375–430px 手机宽度，白卡 + 大留白 + 蓝紫主色，
 *  底部标签栏中央浮一颗圆形主按钮（FAB）。
 * ================================================================ */
:root{
  --blue:#4667e6; --blue-d:#3a56c9; --blue-l:#eef2fe;   /* 主色 / 按下态 / 浅底 */
  --bg:#f6f7fb; --card:#fff; --line:#eceff5;
  --tx:#1f2431; --tx2:#9aa2b4; --tx3:#c3c9d6;           /* 主 / 次 / 更淡 */
  --up:#22c55e; --down:#ef4444;
  --r:16px;
  --sh:0 8px 24px rgba(70,103,230,.08);                  /* 通用柔和投影 */
  --sh-l:0 4px 14px rgba(70,103,230,.06);
  --safe: env(safe-area-inset-bottom,0px);
  --W:430px;                                             /* 手机容器宽度 */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#eef0f6; color:var(--tx);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",
       "PingFang SC","Noto Sans SC",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* 所有数字用等宽数位，实时跳动时宽度不会抖 */
b,strong,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* H5 优先：PC 上收成手机宽度。
   注意用 overflow-x:clip 而不是 overflow:hidden —— 带 overflow 的祖先会成为
   position:sticky 的参照容器，顶栏会跟着页面滚走。clip 不创建滚动容器。 */
#app{max-width:var(--W);margin:0 auto;position:relative;overflow-x:clip;
  min-height:100vh;background:var(--bg);padding-bottom:calc(112px + var(--safe))}
@media(min-width:431px){#app{box-shadow:0 0 0 1px rgba(20,30,60,.06),0 24px 70px rgba(20,30,60,.14)}}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
/* 鼠标点完不要留一圈默认焦点框（截图里标签栏那道蓝框就是它），
   键盘 Tab 过来时仍然要有，可达性不能丢 */
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}

/* 图标：尺寸随 font-size 走，颜色继承 color（见 assets/icons.js） */
.ic{display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;flex-shrink:0;vertical-align:-.125em}
.ic svg{display:block;width:100%;height:100%}
.mono{font-family:ui-monospace,Menlo,monospace}

/* ================= 视图切换 ================= */
.view{display:block;animation:vIn .24s ease-out}
.view[hidden]{display:none}
@keyframes vIn{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.view{animation:none}}

/* ================= 顶栏 ================= */
.topbar{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 12px}
.topbar h1{flex:1;margin:0;font-size:16px;font-weight:600;text-align:center}
.topbar .brand{flex:1;text-align:center;font-size:15.5px;font-weight:700;letter-spacing:.3px;color:var(--tx)}
.iconbtn{width:40px;height:40px;border:0;border-radius:13px;background:transparent;
  color:var(--tx);font-size:20px;display:grid;place-items:center;padding:0;position:relative;flex-shrink:0}
.iconbtn:active{background:rgba(70,103,230,.08)}
.iconbtn.ghost{visibility:hidden}
/* 铃铛：白色圆片 + 小红点 */
.iconbtn.bell{background:#fff;border-radius:50%;box-shadow:var(--sh-l);font-size:19px;color:var(--tx2)}
.iconbtn.bell em{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--down);border:1.5px solid #fff}

/* 区块标题 */
.sec{display:flex;align-items:center;padding:22px 18px 11px}
.sec h3{margin:0;font-size:15px;font-weight:600}
.sec .more{margin-left:auto;border:0;background:none;color:var(--blue);font-size:12.5px;padding:0}

/* ================= 账户卡 ================= */
/* 横滑：一屏露出下一张的边，滑动吸附到卡片中心 */
.rail{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 6px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* 不加这一条，鼠标/手指拖动会变成选中卡号文字而不是翻卡 */
  -webkit-user-select:none;user-select:none;cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail::-webkit-scrollbar{display:none}
.rail .bcard{flex:0 0 88%;scroll-snap-align:center}
/* 卡片翻到第几张的小圆点 */
.dots{display:flex;justify-content:center;gap:6px;padding:2px 0 2px}
.dots i{width:6px;height:6px;border-radius:50%;background:#d3d9e6;transition:.22s}
.dots i.on{width:18px;border-radius:3px;background:var(--blue)}

.bcard{position:relative;overflow:hidden;border-radius:18px;padding:16px 18px 15px;color:#fff;
  display:flex;flex-direction:column;min-height:186px;
  box-shadow:0 12px 26px rgba(24,32,58,.18)}
.bcard::after{content:"";position:absolute;right:-46px;top:-58px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.09)}
.bcard::before{content:"";position:absolute;right:-24px;bottom:-70px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.06)}
.c-dark{background:linear-gradient(135deg,#2a2a33,#131318)}
.c-violet{background:linear-gradient(135deg,#7d5cf1,#a68bf7)}
.c-teal{background:linear-gradient(135deg,#00b894,#54d6c2)}
.bcard>*{position:relative;z-index:1}
.bcard .bk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.bcard .bk i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.9);
  display:grid;place-items:center;font-size:12px;font-style:normal;color:#2a2a33;font-weight:800}
.bcard .bal{margin-top:14px;font-size:25px;font-weight:700;letter-spacing:-.4px;line-height:1.1}
.bcard .bal s{font-size:12px;font-weight:400;opacity:.75;text-decoration:none;margin-left:5px}
.bcard .no{margin-top:auto;padding-top:12px;font-size:13.5px;letter-spacing:2.2px;opacity:.9}
.bcard .ft{display:flex;align-items:flex-end;gap:10px;margin-top:11px}
.bcard .ft b{font-size:13.5px;font-weight:600}
.bcard .ft s{display:block;font-size:11px;opacity:.72;text-decoration:none;margin-top:3px}
/* 右下角品牌标记：占卡组织 logo 的位置，但用自己的字样，不仿任何真实卡组织 */
.bcard .mark{margin-left:auto;font-size:14px;font-weight:800;font-style:italic;
  letter-spacing:.6px;opacity:.92;white-space:nowrap}
.bcard .tag{position:absolute;top:14px;right:16px;font-size:10px;font-weight:600;
  background:rgba(255,255,255,.2);border-radius:6px;padding:3px 7px;z-index:1}

/* ================= 四宫格快捷入口 ================= */
.quads{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px}
.quad{border:0;background:none;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:8px}
.quad:active{transform:scale(.95)}
.quad span{font-size:11.5px;line-height:1.3;color:#5b6478;text-align:center}
/* 图标的**可见**大小 ≈ font-size × 图形在 24×24 画布里的占比（圆形系约 .83），
   所以这里给到 26px，落在色块里视觉约 21px，占 52px 的四成左右 —— 和设计稿一致。 */
.tile{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex-shrink:0}
.t-green{background:#e6f7ee;color:#1fa971}
.t-red{background:#fdeaec;color:#ef4c58}
.t-orange{background:#fff3e2;color:#f0a020}
.t-blue{background:#e9eeff;color:var(--blue)}
.t-violet{background:#f1ecfe;color:#7d5cf1}

/* ================= 服务卡 ================= */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px}
.svccard{display:block;background:#fff;border:0;border-radius:var(--r);
  padding:15px;text-align:left;box-shadow:var(--sh)}
.svccard:active{transform:scale(.985)}
.svccard .tile{width:38px;height:38px;border-radius:12px;font-size:22px}
.svccard b{display:block;margin-top:11px;font-size:13.5px;font-weight:600}

/* ================= 流水列表 ================= */
.txlist{background:#fff;border-radius:var(--r);margin:0 18px;padding:0 15px;box-shadow:var(--sh)}
.tx{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border:0}
.tx .ti{width:36px;height:36px;border-radius:12px;background:#f3f5fa;color:var(--tx2);
  display:grid;place-items:center;font-size:20px;flex-shrink:0}
.tx .ti.in{background:#e6f7ee;color:var(--up)}
.tx .ti.out{background:#fdeaec;color:var(--down)}
.tx .m{min-width:0;flex:1}
.tx b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx s{font-size:11px;color:var(--tx2);text-decoration:none}
.tx .amt{margin-left:auto;font-size:13.5px;font-weight:700;flex-shrink:0}
.amt.in{color:var(--up)} .amt.out{color:var(--down)}
.empty{text-align:center;color:var(--tx2);font-size:12.5px;padding:22px 0}

/* ================= 余额卡 + 分段控件 ================= */
.balance{margin:4px 18px 0;background:var(--blue-l);border-radius:18px;padding:17px;text-align:center}
.balance span{font-size:12px;color:#5f77cd}
.balance b{display:block;margin-top:3px;font-size:31px;font-weight:700;color:var(--blue);letter-spacing:-.8px}
.seg{display:flex;gap:2px;margin:16px 18px 0;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--sh)}
.seg button{flex:1;border:0;background:none;padding:9px 0;border-radius:999px;
  font-size:12.5px;color:var(--tx2);transition:.18s}
.seg button.on{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(70,103,230,.32)}

/* ================= 折线图 ================= */
.chartbox{margin:16px 18px 0;background:#fff;border-radius:18px;padding:14px 10px 8px;box-shadow:var(--sh)}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}

/* ================= 我的产品（卡片堆叠） ================= */
.stack{padding:4px 18px 0;display:flex;flex-direction:column;gap:14px}

/* ================= 表单 ================= */
.art{padding:6px 18px 2px}
.art svg{display:block;width:100%;max-width:250px;margin:0 auto;height:auto}
.form{padding:2px 18px 26px}
.fl{display:block;font-size:12.5px;color:var(--tx2);margin:16px 0 7px}
.ipwrap{position:relative}
.ipwrap input,.ipwrap select{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:0 14px;color:var(--tx);font:14px/1 inherit;-webkit-appearance:none;appearance:none}
.ipwrap select{padding-right:40px}
.ipwrap input:focus,.ipwrap select:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(70,103,230,.13)}
.ipwrap input::placeholder{color:var(--tx3)}
.ipwrap input.bad,.ipwrap select.bad{border-color:var(--down);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--tx2);pointer-events:none}
.chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--tx2);pointer-events:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two .fl{margin-top:16px}
input[readonly]{background:#f5f7fb;color:var(--tx2)}
.err{margin:7px 0 0;font-size:12px;color:var(--down)}
.estbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:20px;background:var(--blue-l);border-radius:12px;padding:13px 15px;font-size:12.5px;color:#5f77cd}
.estbar b{font-size:17px;font-weight:700;color:var(--blue)}
.btn{width:100%;height:50px;border:0;border-radius:12px;background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;margin-top:18px;box-shadow:0 8px 20px rgba(70,103,230,.3)}
.btn:active{background:var(--blue-d);transform:translateY(1px)}
.demo{margin:14px 0 0;font-size:11px;color:var(--tx3);text-align:center;line-height:1.6}

/* ================= 我的 ================= */
.profile{display:flex;align-items:center;gap:14px;margin:4px 18px 0;background:#fff;
  border-radius:18px;padding:16px;box-shadow:var(--sh)}
.profile b{display:block;font-size:16px;font-weight:600}
.profile p{margin:3px 0 0;font-size:12px;color:var(--tx2)}
.avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#6a86f2,#7d5cf1);color:#fff;font-size:17px;font-weight:700;letter-spacing:.5px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 18px 0}
.mini>div{background:#fff;border-radius:14px;padding:13px 8px;text-align:center;box-shadow:var(--sh-l)}
.mini b{display:block;font-size:15px;font-weight:700}
.mini span{font-size:10.5px;color:var(--tx2)}
.menu{margin:16px 18px 0;background:#fff;border-radius:var(--r);padding:0 16px;box-shadow:var(--sh)}
.mi{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--tx);text-align:left}
.mi:last-child{border:0}
.mi>.ic{font-size:19px;color:var(--tx2)}
.mi span{flex:1;min-width:0}
.mi em{font-size:12px;color:var(--tx2);font-style:normal}
.mi .go{font-size:16px;color:var(--tx3)}
.risk{margin:20px 18px 0;font-size:11px;line-height:1.75;color:var(--tx2)}
.ver{margin:12px 18px 0;font-size:11px;color:var(--tx3);text-align:center}

/* ================= 底部标签栏 + FAB ================= */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--W);z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:#fff;border-top:1px solid var(--line);padding:9px 0 calc(9px + var(--safe));
  box-shadow:0 -6px 20px rgba(24,32,58,.05)}
.tabbar button{border:0;background:none;display:grid;place-items:center;
  padding:7px 0;font-size:20px;color:var(--tx3);transition:color .18s}
.tabbar button.on{color:var(--blue)}
.fab{position:fixed;bottom:calc(26px + var(--safe));left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;border:0;z-index:45;
  background:linear-gradient(135deg,#5f7ef2,#4667e6);color:#fff;font-size:24px;
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(70,103,230,.45)}
.fab:active{transform:translateX(-50%) scale(.94)}

/* ================= 侧边抽屉 ================= */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,26,45,.42);animation:fade .25s}
.scrim[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.drawer{position:fixed;top:0;bottom:0;left:0;width:78%;max-width:320px;z-index:70;
  background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:8px 0 40px rgba(20,30,60,.2);animation:drIn .28s cubic-bezier(.22,1,.36,1)}
.drawer[hidden]{display:none}
@keyframes drIn{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.drawer,.scrim{animation:none}}
/* 宽屏时抽屉贴着手机容器的左边，不要贴到浏览器窗口边上 */
@media(min-width:431px){
  .drawer{left:calc(50% - var(--W)/2)}
  .scrim{left:calc(50% - var(--W)/2);right:calc(50% - var(--W)/2)}
}
.drhead{position:relative;background:linear-gradient(135deg,#1b1b40,#343060);color:#fff;
  padding:calc(26px + env(safe-area-inset-top,0px)) 20px 22px}
.drhead .avatar{width:46px;height:46px;font-size:15px;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.drhead b{display:block;margin-top:12px;font-size:15px;font-weight:600}
.drhead p{margin:3px 0 0;font-size:11.5px;opacity:.7}
.drx{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:16px;
  width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;display:grid;place-items:center;padding:7px}
.drawer .menu{margin:6px 20px;box-shadow:none;border-radius:0;padding:0}

/* ================= 成功弹层 / 轻提示 ================= */
.mask{position:fixed;inset:0;z-index:80;background:rgba(20,26,45,.42);animation:fade .25s}
.mask[hidden]{display:none}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:85;
  width:100%;max-width:var(--W);background:#fff;border-radius:24px 24px 0 0;
  padding:10px 20px calc(24px + var(--safe));text-align:center;
  animation:up .3s cubic-bezier(.22,1,.36,1)}
.sheet[hidden]{display:none}
@keyframes up{from{transform:translate(-50%,100%)}}
.sheet .grab{width:38px;height:4px;border-radius:4px;background:#e4e8f0;margin:0 auto 16px}
.sheet h3{margin:0 0 5px;font-size:19px;font-weight:700}
.sheet .tip{margin:0 0 18px;font-size:13px;color:var(--tx2);line-height:1.6}
.okmark{width:58px;height:58px;margin:4px auto 14px;border-radius:50%;background:var(--up);
  color:#fff;display:grid;place-items:center;padding:15px;
  box-shadow:0 10px 22px rgba(34,197,94,.35);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.okmark .ic{width:100%;height:100%}
.okmark svg{stroke-width:3}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.sheet .kv{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;
  background:#f7f8fc;border-radius:12px;font-size:12.5px;color:var(--tx2)}
.sheet .kv b{margin-left:auto;color:var(--tx);font-size:13px;font-weight:600;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(104px + var(--safe));transform:translateX(-50%);z-index:95;
  background:rgba(28,34,54,.94);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:999px;
  max-width:80%;text-align:center;animation:tIn .2s ease-out}
.toast[hidden]{display:none}
@keyframes tIn{from{opacity:0;transform:translate(-50%,8px)}}

/* ================= 语言切换（DOM 由 assets/i18n.js 生成） ================= */
#langSwitch{display:flex;padding:6px 20px 24px}
.lang{display:flex;align-items:center;gap:8px;width:100%;padding:13px 0;
  border:0;border-top:1px solid var(--line);background:transparent;color:var(--tx);font-size:14px}
.flag{display:block;width:20px;height:15px;border-radius:3px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(20,30,60,.12)}
.lang-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:22px}
.lang-modal[hidden]{display:none}
.lang-mask{position:absolute;inset:0;background:rgba(20,26,45,.45);backdrop-filter:blur(3px)}
.lang-box{position:relative;width:100%;max-width:380px;padding:18px 16px 16px;
  background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(20,30,60,.28);animation:langIn .18s ease-out}
@keyframes langIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.lang-title{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--tx2);text-align:center}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.lang-opt{display:flex;align-items:center;gap:9px;padding:12px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:var(--tx);font:inherit;font-size:13.5px;text-align:left}
.lang-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-opt.on{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}

/* ============ 「请在 Safari 中打开」引导页（assets/browser-gate.js） ============ */
/* 提前上锁：browser-gate.js 在 <head> 里判定不通过就给 <html> 打这个类，
   正文因此连一帧都闪不出来（引导页要等 DOM 就绪才插得进来）。 */
html.gated #app{display:none!important}

.gate{position:fixed;inset:0;z-index:999;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);display:flex;
  padding:calc(26px + env(safe-area-inset-top,0px)) 20px calc(26px + var(--safe))}
.gate .inner{margin:auto;width:100%;max-width:380px;text-align:center}
.gate h1{font-size:21px;line-height:1.35;margin:0 0 8px}
.gate .gsub{margin:0 0 20px;font-size:13.5px;color:var(--tx2);line-height:1.65}
.gate img{display:block;width:100%;height:auto;max-width:300px;margin:0 auto 20px;
  border-radius:16px;border:1px solid var(--line);background:#fff}
.gate .gsteps{list-style:none;margin:0 0 20px;padding:0;text-align:left}
.gate .gsteps li{display:flex;align-items:center;gap:11px;padding:12px 14px;margin-bottom:8px;
  background:#fff;border-radius:13px;box-shadow:var(--sh-l);font-size:13.5px}
.gate .gsteps b{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;background:var(--blue-l);color:var(--blue)}
.gate .ghint{margin:0 0 10px;font-size:12.5px;color:var(--tx2)}
.gate .gurl{font:11.5px/1.6 ui-monospace,Menlo,monospace;color:var(--tx2);word-break:break-all;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  margin-bottom:14px;-webkit-user-select:all;user-select:all}
.gate .gbtn{width:100%;height:48px;border:0;border-radius:12px;font-size:15px;font-weight:600;
  color:#fff;background:var(--blue);box-shadow:0 8px 20px rgba(70,103,230,.3)}