/* ============================================================
 *  底部导航栏（Figma nRYuPYYCWR6Lx2AvVbGvXO「新导航栏」1:29）—— 全站共用
 *  393×66 固定吸底；5 项：首页 · 特批金卡 · 权益中心 · 常用服务 · 我的
 *  （2026-10-11：第 2 项原为「邀请好友」，换成「特批金卡」直达金卡页；邀请好友移进常用服务弹窗）
 *  数值取自设计稿：五格宽 79 / 80.59 / 78 / 79 / 76，图标 40×40 @top 4px（「我的」5px），
 *  文字 9.5px/500 @top 44px（「我的」45px），未选中 #606b7b、选中 #0962d6，
 *  底 rgba(255,255,255,.97)，上边框 #d7e0e9，阴影 0 -4px 13px rgba(25,62,106,.08)
 *  各格图标 / 文字相对格子中心的微小偏移（--ix / --tx）也按稿还原
 * ============================================================ */
a { text-decoration: none; color: inherit; }

.nav-bottom {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
    width: 393px; height: 66px; z-index: 50;
    display: flex; align-items: flex-start; box-sizing: border-box;
    background: rgba(255, 255, 255, .97); border-top: 1px solid #d7e0e9;
    box-shadow: 0 -4px 13px rgba(25, 62, 106, .08);
}
.nav-bottom .nav-item {
    --ix: 0px; --iy: 4px; --tx: 0px; --ty: 44px;
    position: relative; flex: none; height: 65px; -webkit-tap-highlight-color: transparent;
}
.nav-bottom .nav-home    { width: 79px;    --ix: .5px; }
.nav-bottom .nav-card    { width: 80.59px; --tx: -.29px; }   /* 原「邀请好友」格位，宽度沿用设计稿 */
.nav-bottom .nav-benefit { width: 78px;    --ix: .29px; --tx: .29px; }
.nav-bottom .nav-service { width: 79px;    --ix: 1.91px; --tx: 1.41px; }
.nav-bottom .nav-mine    { width: 76px;    --ix: .41px; --iy: 5px; --tx: -.09px; --ty: 45px; }
.nav-bottom .nav-item img {
    position: absolute; left: 50%; top: var(--iy); display: block; width: 40px; height: 40px;
    margin-left: calc(-20px + var(--ix));
}
.nav-bottom .nav-item span {
    position: absolute; left: 50%; top: var(--ty); transform: translateX(calc(-50% + var(--tx)));
    padding-bottom: 2px; font-size: 9.5px; font-weight: 500; line-height: 13px; color: #606b7b; white-space: nowrap;
}
.nav-bottom .nav-item.active span { color: #0962d6; }
.nav-bottom .nav-item:active img { opacity: .85; }
/* 「常用服务」是 <button>（不跳页，就地弹窗），外观要和 <a> 一致 */
.nav-bottom button.nav-item {
    border: 0; background: transparent; padding: 0; font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
 *  「常用服务」弹窗（Figma 1:1438，371×311）
 *  组件：includes/nav_bottom.php 的 nav_service_popup()，开关在 main.js（[data-nav-svc]）
 *  格子区 inset 40/10/82/10：两列 171.5 宽、列距 8；三行 59 高、行距 6
 * ============================================================ */
.nsv-mask {
    position: fixed; inset: 0; z-index: 880; display: none;
    align-items: center; justify-content: center; background: rgba(8, 20, 45, .6);
}
.nsv-mask.is-show { display: flex; }
.nsv-box { position: relative; width: 371px; height: 311px; background: #fff; border-radius: 10px; }
/* 2026-10-11 新增「邀请好友」后共 6 格，正好把原来 5 格时空着的右下角填满，行数与高度不变 */
.nsv-t {
    position: absolute; left: 0; right: 0; top: 10px; height: 24px;
    font-size: 17px; font-weight: 500; line-height: 24px; letter-spacing: .2px; color: #071338; text-align: center;
}
.nsv-grid {
    position: absolute; left: 10px; right: 10px; top: 40px; height: 189px;
    display: grid; grid-template-columns: 171.5px 171.5px; grid-auto-rows: 59px; column-gap: 8px; row-gap: 6px;
}
.nsv-cell {
    position: relative; display: flex; align-items: center; padding: 0 0 0 12px; overflow: hidden;
    border: 0; border-radius: 9px; font-family: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nsv-cell.is-cream { background: linear-gradient(100deg, #fffbf1 0%, #fffaf0 100%); }
.nsv-cell.is-blue  { background: linear-gradient(100deg, #e9f5ff 0%, #f0f8ff 100%); }
.nsv-cell:active { opacity: .85; }
.nsv-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 50px; }
.nsv-ic img { display: block; width: 52px; height: 50px; }        /* 铺满 52×50 容器的背景图（三倍图 156×150） */
.nsv-cell.is-pb .nsv-ic img { width: 50px; height: 50px; }         /* 建行存折是 50×50 的图标框 */
.nsv-cell.is-iv .nsv-ic img { width: 46px; height: 46px; }         /* 邀请好友：原导航图标（正方形），按 46 显示视觉重量才与其它格一致 */
.nsv-l { padding: 1px 0 2px 5px; font-size: 13px; font-weight: 500; line-height: 18px; color: #071338; white-space: nowrap; }
.nsv-cell.is-pb .nsv-l { color: #380707; }
/* 右侧箭头：设计稿节点本身就是一个旋转 45° 的 8×8 右上描边框（非图片素材），按稿还原 */
.nsv-cell::after {
    content: ''; position: absolute; right: 15px; top: 25.5px; width: 8px; height: 8px; box-sizing: border-box;
    border-top: 1px solid #64708a; border-right: 1px solid #64708a; transform: rotate(45deg);
}
/* ---------------- 八格两行四列（2026-10-14，Figma WZ4ctGBmedJwuDjFI07EjN 1:167 起） ----------------
   与原来的 2 列横向格子不同：这里是竖向（图标 40×40 在上、文字在下），无右侧箭头。
   首页卡片与本弹窗共用 .hs-grid.is-8 / .nsv-grid.is-8 下的同一套规则。               */
.nsv-grid.is-8 {
    height: auto; left: 10px; right: 10px;
    grid-template-columns: repeat(4, 1fr); grid-auto-rows: 67px; column-gap: 3px; row-gap: 11px;
}
.hs-grid.is-8 .nsv-cell,
.nsv-grid.is-8 .nsv-cell {
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 0; background: none; border-radius: 0; text-align: center; overflow: visible;
}
.hs-grid.is-8 .nsv-cell::after,
.nsv-grid.is-8 .nsv-cell::after { display: none; }          /* 这一版格子没有右侧箭头 */
.hs-grid.is-8 .nsv-ic,
.nsv-grid.is-8 .nsv-ic { width: 40px; height: 40px; }
.hs-grid.is-8 .nsv-ic img,
.nsv-grid.is-8 .nsv-ic img { width: 40px; height: 40px; }
.hs-grid.is-8 .nsv-l,
.nsv-grid.is-8 .nsv-l {
    padding: 2px 0 0; width: 100%; font-size: 12.5px; font-weight: 400; line-height: 25px; color: #0a0e1b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-grid.is-8 .nsv-cell.is-pb .nsv-l,
.nsv-grid.is-8 .nsv-cell.is-pb .nsv-l { color: #0a0e1b; }

/* ---------------- 2026-10-26：「常用服务-1」（Figma V5DpH0OeyhUJKI5k8Rpah3 1:1701）----------------
   文字 14.5px；新增「建设银行」（logo 40×40）与「更多」（稿里 Group 在 40×40 内 inset 12.5% 10.42% 8.33% → 31.67 见方、上 5）；
   角标换成稿里导出的红色「1」图（18×18），各格位置按稿；「更多」的角标是 14×14 红底字
   定时上线（ccb_visible，10-07 09:00）：上线后格子容器才带 .is-v2，字号等改动只挂在它下面，到点前仍是原样 */
.hs-grid.is-v2 .nsv-l,
.nsv-grid.is-v2 .nsv-l { font-size: 14.5px; }
.hs-grid.is-8 .nsv-cell.is-more .nsv-ic,
.nsv-grid.is-8 .nsv-cell.is-more .nsv-ic { align-items: flex-start; }
.hs-grid.is-8 .nsv-cell.is-more .nsv-ic img,
.nsv-grid.is-8 .nsv-cell.is-more .nsv-ic img { width: 31.67px; height: 31.67px; margin-top: 5px; }
.nsv-badge { position: absolute; left: 70px; top: -3px; z-index: 3; width: 18px; height: 18px; pointer-events: none; }
.nsv-cell[data-k="card"] .nsv-badge     { left: 68px; top: -3px; }
.nsv-cell[data-k="passbook"] .nsv-badge { left: 72px; top: -4px; }
.nsv-cell[data-k="finance"] .nsv-badge  { left: 72px; top: -5px; }
.nsv-cell[data-k="benefit"] .nsv-badge  { left: 70px; top: -6px; }
.nsv-cell[data-k="mall"] .nsv-badge     { left: 70px; top: -3px; }
.nsv-cell[data-k="express"] .nsv-badge,
.nsv-cell[data-k="ccb"] .nsv-badge      { left: 72px; top: 0; }
.nsv-badge.is-txt {
    left: 74px; top: -1px; width: 14px; height: 14px; box-sizing: border-box; padding: 0 0 0 4px; border-radius: 7px;
    background: #f00; font-size: 13px; font-style: normal; font-weight: 500; line-height: 14px; color: #fff; text-align: left; overflow: hidden;
}
/* 「全部服务」面板：9 个入口三行，盒子与关闭按钮相应下移 */
.nsv-box.is-all { height: 344px; }
.nsv-box.is-all .nsv-close { top: 278px; }

/* ---------------- 建设银行模拟接入弹窗（2026-10-26，includes/ccb.php ccb_join_popup；需求：3~5 秒、显示建行 logo，样式自定、符合主题） ----------------
   建行蓝卡片：logo 白底圆 + 呼吸光环；三步依次「转圈 -> 打勾」（ic_spin.svg / ic_okc.png 都是已有的 Figma 导出素材）；底部进度条 */
.ccbj-pop {
    position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 22, 52, .62); -webkit-tap-highlight-color: transparent;
}
.ccbj-pop[hidden] { display: none; }
.ccbj-pop-box {
    position: relative; width: 300px; box-sizing: border-box; padding: 28px 24px 18px; overflow: hidden; text-align: center;
    border-radius: 18px; background: linear-gradient(180deg, #0a71d2 0%, #1c86dd 38%, #eaf6fd 74%, #f6fcfc 100%);
    box-shadow: 0 18px 55px rgba(12, 43, 70, .35); animation: ccbjIn .24s ease-out both;
}
@keyframes ccbjIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ccbj-pop-wm { position: absolute; right: -6px; top: 6px; font: italic 900 54px/1 Arial, sans-serif; letter-spacing: 2px; color: rgba(255, 255, 255, .08); pointer-events: none; }
.ccbj-pop-logo { position: relative; display: block; width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 45, 103, .3); }
.ccbj-pop-logo img { position: absolute; left: 14px; top: 14px; width: 48px; height: 48px; }
.ccbj-pop-logo i { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: ccbjRing 1.6s ease-out infinite; }
@keyframes ccbjRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.ccbj-pop-t { display: block; margin-top: 16px; font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: .5px; color: #fff; }
.ccbj-pop-s { margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, .85); }
.ccbj-pop-steps { list-style: none; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 45, 103, .1); text-align: left; }
.ccbj-pop-steps li { display: flex; align-items: center; height: 26px; font-size: 13.5px; color: #9aa6b6; transition: color .2s; }
.ccbj-pop-steps li .st { position: relative; flex: none; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background: #e3ebf5; }
.ccbj-pop-steps li .st img { position: absolute; inset: 0; width: 18px; height: 18px; opacity: 0; }
.ccbj-pop-steps li.is-doing { color: #10264a; }
.ccbj-pop-steps li.is-doing .st { background: none; }
.ccbj-pop-steps li.is-doing .sp { opacity: 1; animation: ccbjSpin .9s linear infinite; }
.ccbj-pop-steps li.is-done { color: #10264a; }
.ccbj-pop-steps li.is-done .st { background: none; }
.ccbj-pop-steps li.is-done .ok { opacity: 1; }
@keyframes ccbjSpin { to { transform: rotate(360deg); } }
.ccbj-pop-bar { display: block; height: 6px; margin-top: 16px; overflow: hidden; border-radius: 3px; background: #dbe7f3; }
.ccbj-pop-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2387f6, #0870e9); }
.ccbj-pop-bank { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font: 600 11px/14px Arial, sans-serif; letter-spacing: .3px; color: #4370bb; }
.ccbj-pop-bank img { width: 14px; height: 14px; }
.ccbj-pop.is-ok .ccbj-pop-logo i { animation: none; border-color: rgba(255, 255, 255, .9); }

/* 未读红点（1:172 等，18×18 在图标右上角）：按格子定位的真实元素，不是整图热区 */
.nsv-dot {
    position: absolute; left: 68px; top: -3px; z-index: 3;
    min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 4px; border-radius: 9px;
    background: #f5222d; border: 1.5px solid #fff;
    font-size: 11px; font-style: normal; font-weight: 700; line-height: 15px; color: #fff; text-align: center;
}

.nsv-close {
    position: absolute; left: 13px; right: 13px; top: 245px; height: 51px; padding: 0;
    background: #fff; border: 1px solid #0059ee; border-radius: 13px; filter: drop-shadow(0 6px 5.5px rgba(10, 88, 236, .23));
    font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: .5px; color: #0059ee; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nsv-close:active { background: #f3f7ff; }

/* ============================================================
 *  「未晋升正式特批人员」拦截弹窗
 *  组件：includes/official_gate_popup.php
 *  放在 nav_bottom.css 里是因为：底部导航出现在哪一页，这个弹窗就可能在哪一页弹，
 *  而全部 16 个带导航的页面都已引入本文件，不用逐页加 CSS。
 *
 *  2026-09-22 换图 pop_gate2.png（690×690 正方形，2 倍图，显示 345×345）。
 *  两个控件按实测比例精确叠加，合计仅占整图 6.3%，不是全图热区。
 *  新图右上角没有 × 图标，所以不再有 .pb-gate-x —— 留着会落在纯装饰区误触。
 *  热区数值与签到提示弹窗（.cko-*）相同，两张图出自同一版式。
 * ============================================================ */
.pb-gate-mask {
    position: fixed; inset: 0; z-index: 900; display: none;
    align-items: center; justify-content: center; background: rgba(8, 20, 45, .6);
}
.pb-gate-mask.is-show { display: flex; }
.pb-gate-box { position: relative; width: 345px; }
/* 正方形素材，宽高相等 */
.pb-gate-box img { display: block; width: 345px; height: 345px; }
.pb-gate-hot {
    position: absolute; display: block; border: 0; background: transparent; padding: 0;
    border-radius: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pb-gate-hot:active { background: rgba(255, 255, 255, .22); }
.pb-gate-no   { left: 11.5%; width: 35.5%; top: 87.5%; height: 8.8%; }
.pb-gate-go   { left: 51.5%; width: 36.5%; top: 87.5%; height: 8.8%; }
/* 可选的右上角 ×（储蓄卡页 Figma Group 7 的独立节点 1:1107：52×48 @ 387,9 / 448）
   这是叠在图上的真实图标按钮，不是隐形热区；只有组件传 $ogX 时才渲染 */
.pb-gate-xbtn {
    position: absolute; left: 86.384%; top: 2.009%; width: 11.607%; height: 10.714%;
    padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pb-gate-box .pb-gate-xbtn img { width: 100%; height: 100%; }
.pb-gate-xbtn:active { opacity: .75; }

/* ============================================================
 *  底部导航上方的悬浮卡片（2026-10-22，Figma gIPpqtEitMKkKCmr9A1LR5「悬浮卡片」1:2，369×158）
 *  nav_float_card() 输出；倒计时到 NFC_END 后卡片与占位一起移除
 *  下面的 left / top 都是相对卡片左上角的设计稿坐标（卡片内边距 14 / 12）
 * ============================================================ */
/* 页面流里的占位：卡片高 158 + 与导航间距 8 + 余量 6 —— 页面最下面的内容能滚到卡片上面，不被挡住 */
.nfc-gap { height: 172px; }
.nfc {
    position: fixed; left: 50%; bottom: 74px; z-index: 60; transform: translateX(-50%);   /* 导航(50)之上、在线客服(120)与各类弹窗之下 */
    width: 369px; height: 158px; box-sizing: border-box; overflow: hidden; border-radius: 10px;
    background: radial-gradient(circle 84.2px at 324.72px 25.28px, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, 0) 84.2px),
                linear-gradient(135deg, #0750b4 0%, #0874df 52%, #13a8ee 100%);
    box-shadow: 0 10px 24px rgba(4, 58, 126, .22);
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 500; color: #fff;
}
.nfc > * { position: absolute; }
.nfc img { display: block; object-fit: contain; }
/* 右上角水印「CCB」（1:6） */
.nfc-wm {
    left: 246.67px; top: -4px; width: 116.15px; height: 56px; pointer-events: none; white-space: nowrap;
    font: bold 56px/56px "Liberation Sans", Arial, Helvetica, sans-serif; letter-spacing: -3px; color: rgba(255, 255, 255, .12);
}
/* 左栏（1:8，x12 y23.28，宽 218，纵向间距 4.8） */
.nfc-l { left: 12px; top: 23.28px; width: 218px; display: flex; flex-direction: column; align-items: flex-start; gap: 4.8px; }
.nfc-pill {                                     /* 1:9 177×24 胶囊：建行标 22.6×22 + 文字 */
    display: flex; align-items: center; gap: 1.686px; height: 24px; padding: 0 8px 0 4.686px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .18);
    font-size: 10.8px; line-height: 15px; letter-spacing: .5px; white-space: nowrap;
}
.nfc-pill img { flex: none; width: 22.627px; height: 22px; }
.nfc-h { display: block; height: 23.2px; padding-top: 3.2px; box-sizing: border-box; font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; }   /* 1:12 */
.nfc-p { margin: 0; font-size: 12px; line-height: 17.76px; color: rgba(255, 255, 255, .92); white-space: nowrap; }   /* 1:14，三行按稿断行 */
/* 右栏（1:15，x240 y14，宽 126，纵向间距 8） */
.nfc-r { left: 240px; top: 14px; width: 126px; display: flex; flex-direction: column; gap: 8px; }
.nfc-cdt { display: block; padding: 1px 0 2px; font-size: 11px; line-height: 15px; color: #e9f7ff; text-align: center; white-space: nowrap; }   /* 1:16 */
.nfc-cd { display: flex; gap: 4px; height: 43px; }   /* 1:18 三格各 39.33 宽 */
.nfc-cd .u {
    flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; background: rgba(2, 34, 88, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.nfc-cd b { font: bold 17px/17px "Liberation Sans", Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfc-cd i { font-style: normal; font-size: 10px; line-height: 10px; color: #aee6ff; }
.nfc-btn {                                      /* 1:34 126×34 金色胶囊 */
    display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 11px; box-sizing: border-box; border-radius: 999px;
    background: linear-gradient(180deg, #fff2ba 0%, #ffc65b 100%);
    -webkit-filter: drop-shadow(0 5px 6px rgba(105, 61, 0, .22)); filter: drop-shadow(0 5px 6px rgba(105, 61, 0, .22));
    font-size: 13px; line-height: 18px; color: #7a3500; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.nfc-btn:active { opacity: .9; }
.nfc-tip { display: block; padding: 1px 0 2px; font-size: 10px; line-height: 14px; color: rgba(255, 255, 255, .82); text-align: center; white-space: nowrap; }   /* 1:36 */
/* 左下角「China Construction Bank」（1:3，x13，距底 10） */
.nfc-bank {
    left: 13px; bottom: 10px; display: flex; align-items: center; gap: 5px; height: 14px; white-space: nowrap;
    font: bold 10px/11px "Liberation Sans", Arial, Helvetica, sans-serif; letter-spacing: .2px; color: rgba(255, 255, 255, .72);
}
.nfc-bank img { width: 14px; height: 14px; border-radius: 7px; object-fit: cover; }

/* ============================================================
 *  「卡片新-1」（2026-10-23，Figma gmnfC56psioAO4rN72Ua6m 1:1350，369×172）：建设银行存折入账可开通提示
 *  与上面的倒计时卡同一套 .nfc-* 版式，这里只写不同的地方；坐标相对卡片左上角（内边距 14 / 12）
 * ============================================================ */
.nfc-gap.is-open { height: 186px; }                               /* 卡高 172 + 间距 8 + 余量 6 */
.nfc2 {
    height: 172px;
    background: radial-gradient(circle 81.73px at 309.96px 30.96px, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 81.73px),
                linear-gradient(135deg, #0647a2 0%, #0872d8 48%, #0aa884 100%);
}
.nfc2[hidden] { display: none; }
.nfc2 .nfc2-sheen {                                               /* 1:1352 斜向高光 */
    left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 33%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, .14) 35%, rgba(255, 255, 255, 0) 36%),
                linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 50%);
}
.nfc2 .nfc2-ring {                                                /* 1:1353 右下角半透明环（稿里就是描边圆 + 圆角方块） */
    right: 97.39px; bottom: -57.61px; width: 161.22px; height: 161.22px;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.nfc2 .nfc2-ring > i {
    position: relative; display: block; box-sizing: border-box; width: 114px; height: 114px;
    border: 20px solid rgba(255, 255, 255, .1); border-radius: 57px; transform: rotate(45deg);
}
.nfc2 .nfc2-ring > i > i { position: absolute; left: 23px; top: 23px; right: 23px; bottom: 23px; border-radius: 7px; background: rgba(255, 255, 255, .09); }
.nfc2 .nfc-wm { left: 248.67px; top: -5px; }                       /* 1:1358 */
.nfc2 .nfc-l  { top: 30.28px; }                                    /* 1:1360：14 + 16.28 */
.nfc2 .nfc-p  { color: rgba(255, 255, 255, .93); }
.nfc2 .nfc-tip { color: rgba(255, 255, 255, .84); }
.nfc2-st {                                                         /* 1:1368 126×83 状态框 */
    display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 62px; box-sizing: border-box;
    padding: 8px 8px 7px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(2, 34, 88, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.nfc2-st img { display: block; width: 25px; height: 25px; border-radius: 12.5px; object-fit: cover; }   /* 1:1369 */
.nfc2-st b { display: block; font-size: 14px; font-weight: 500; line-height: 14px; color: #fff; white-space: nowrap; }
.nfc2-st i { display: block; padding: 1px 0 2px; font-style: normal; font-size: 10px; line-height: 14px; color: #bfffe0; white-space: nowrap; }