/* ============================================================
   我的（个人中心）
   设计稿基准：375 × 812（移动端），1rem = min(100vw, 480px) / 37.5
   ============================================================ */

html {
    font-size: calc(min(100vw, 480px) / 37.5);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #fbe7c2;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
    color: #333;
}

a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ===== Phone 容器（米黄底） ===== */
.phone {
    position: relative;
    width: 37.5rem;
    min-height: 100vh;
    padding-bottom: 8rem;       /* 给 tabbar 留空间 */
    background: #fbe7c2;
    overflow: hidden;
}

/* ===== 顶部 Hero：设计稿原图（党徽 + 标题 + 持福字男士） ===== */
.pf-hero {
    position: relative;
    width: 100%;
    line-height: 0;
    background: #b10207;       /* 与新图主红一致，防图加载前露白 */
}

.pf-hero__img {
    width: 100%;
    height: auto;              /* 图片自然比例 1024 : 738 ≈ 1.388 */
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

/* ===== 用户卡：叠在 hero 男士下巴位置，半透明让背景人物透出 ===== */
.user-card {
    position: relative;
    margin: -14rem 1.2rem 0;
    padding: 1.1rem 1.4rem;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0.05rem solid rgba(255, 255, 255, 0.45);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow: 0 0.4rem 1.4rem rgba(140, 0, 0, 0.18);
    z-index: 3;
}

.user-card__avatar {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.2rem 0.5rem rgba(160, 0, 0, 0.25);
}

.user-card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.user-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.45rem;
    color: #222;
}

.user-card__row {
    line-height: 1.2;
}

.user-card__row span {
    color: #888;
    font-weight: 400;
}

.user-card__checkin {
    flex: 0 0 auto;
    height: 3rem;
    padding: 0 1.2rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #ffb13a 0%, #ff7a18 100%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1rem;
    box-shadow: 0 0.3rem 0.7rem rgba(255, 122, 24, 0.45),
                inset 0 0.1rem 0 rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.user-card__checkin-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.user-card__checkin-days {
    font-size: 1.05rem;
    color: #9b5a10;
    white-space: nowrap;
}

.user-card__checkin-days b {
    color: #d8131c;
    font-size: 1.22rem;
    font-weight: 900;
    margin: 0 0.1rem;
}

/* ===== 通用卡片 ===== */
.card {
    position: relative;
    margin: 1rem 1.2rem 0;
    padding: 1.4rem 1.4rem 1.6rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.3rem 0.8rem rgba(140, 0, 0, 0.06);
}

.card__title {
    margin: 0 0 0.8rem;
    font-size: 1.55rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.05rem;
}

/* ===== 实名信息 ===== */
.realname-card {
    padding: 1.4rem 1.4rem 1.5rem;
}
.realname-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.realname-card__title { margin: 0; }
.realname-card__badge {
    flex: 0 0 auto;
    padding: 0.18rem 0.8rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
}
.realname-card__badge--ok { background: #d6f3cb; color: #1d6a14; }
.realname-card__badge--wait { background: #fff0c6; color: #b14406; }
.realname-card__badge--warn { background: #ffd9b3; color: #8a3e08; }
.realname-card__info {
    padding: 1rem 1.2rem;
    background: #fffaee;
    border: 0.05rem solid #f3d8a5;
    border-radius: 0.8rem;
}
.realname-card__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 1.25rem;
    color: #6b3a0d;
}
.realname-card__row span { color: #999; }
.realname-card__row b { color: #2a1308; font-weight: 700; text-align: right; word-break: break-all; }
.realname-card__row b.mono {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.03rem;
}
.realname-card__hint {
    margin-top: 0.8rem;
    color: #b14406;
    font-size: 1.1rem;
    line-height: 1.55;
}
.realname-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.realname-form__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.8rem;
    padding: 0 1rem;
    background: #fffaee;
    border: 0.05rem solid #f3d8a5;
    border-radius: 0.7rem;
}
.realname-form__field span {
    flex: 0 0 6.5rem;
    color: #d8131c;
    font-size: 1.25rem;
    font-weight: 700;
}
.realname-form__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #2a1308;
    font-size: 1.3rem;
}
.realname-form__field input::placeholder { color: #c9a96a; }
.realname-form__btn {
    align-self: center;
    min-width: 18rem;
    height: 3.8rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ea1c25, #ad0810);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    box-shadow: 0 0.3rem 0.7rem rgba(180, 10, 16, 0.3);
}
.realname-form__btn:active { transform: translateY(0.05rem); }

/* =================================================
   我的钱包：4 个余额汇总（2×2 网格）
   ================================================= */
.my-wallets {
    margin: 1rem 1.2rem 0;
    padding: 1.4rem 1.4rem 1.5rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(216, 19, 28, 0.06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
    border: 0.05rem solid #f3e6d2;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 1rem rgba(140, 0, 0, 0.06);
    position: relative;
}
.my-wallets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}
.my-wallets__title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: #2a1308;
    letter-spacing: 0.06rem;
    position: relative;
    padding-left: 0.8rem;
}
.my-wallets__title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 0.3rem; height: 1.3rem;
    background: linear-gradient(180deg, #ea1c25, #ad0810);
    border-radius: 0.15rem;
}
.my-wallets__action {
    font-size: 1.75rem;
    color: #c81222;
    font-weight: 800;
    letter-spacing: 0.08rem;
}

/* "我的钱包" 头部右侧按钮组：充值 + 提现 */
.my-wallets__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.my-wallets__action-link {
    display: inline-flex;
    align-items: center;
    height: 1.85rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04rem;
    line-height: 1;
}
.my-wallets__action-link--recharge {
    background: linear-gradient(135deg, #fff7e0, #ffe7ad);
    color: #b45309;
    border: 1px solid #ffd58a;
}
.my-wallets__action-link--withdraw {
    background: linear-gradient(135deg, #ea1c25, #ad0810);
    color: #fff;
    box-shadow: 0 0.2rem 0.6rem rgba(180, 18, 30, 0.28);
}

.my-wallets__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #d8131c 0%, #a30b13 100%);
    border-radius: 0.7rem;
    color: #fff;
    box-shadow: 0 0.3rem 0.8rem rgba(160, 10, 18, 0.25);
}
.my-wallets__total-label {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.18rem;
    opacity: 0.95;
}
.my-wallets__total-amount {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.04rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.18);
}

.my-wallets__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.wallet-tile {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 0.85rem 0.8rem;
    background: #ffffff;
    border: 0.05rem solid #f3e6d2;
    border-radius: 0.85rem;
    box-shadow: 0 0.25rem 0.7rem rgba(140, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: inherit;
    min-width: 0;
    min-height: 9.6rem;
    overflow: hidden;
}
.wallet-tile:active {
    transform: translateY(0.08rem);
    box-shadow: 0 0.12rem 0.4rem rgba(140, 0, 0, 0.06);
}

.wallet-tile__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    min-width: 0;
    min-height: 2.8rem;
}
.wallet-tile__icon {
    flex: 0 0 2.8rem;
    width: 2.8rem; height: 2.8rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: SimSun, "Songti SC", "Microsoft YaHei", serif;
    font-size: 1.35rem;
    font-weight: 900;
    border: 0.08rem solid rgba(120, 30, 10, 0.18);
    box-shadow:
        0 0.25rem 0.55rem rgba(120, 47, 8, 0.16),
        inset 0 0.06rem 0 rgba(255, 255, 255, 0.24);
    text-shadow: 0 0.08rem 0.14rem rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
}
.wallet-tile__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%),
        linear-gradient(315deg, rgba(0, 0, 0, 0.12), transparent 44%);
    pointer-events: none;
}
.wallet-tile--pa       .wallet-tile__icon { background: linear-gradient(180deg, #d81f2c 0%, #b1121c 56%, #7e0a12 100%); }
.wallet-tile--pension  .wallet-tile__icon { background: linear-gradient(180deg, #b98735 0%, #8a5818 56%, #6a3f10 100%); }
.wallet-tile--chuangye .wallet-tile__icon { background: linear-gradient(180deg, #c69a41 0%, #9a6a24 56%, #765018 100%); }
.wallet-tile--team     .wallet-tile__icon { background: linear-gradient(180deg, #355faa 0%, #244e83 56%, #17345a 100%); }

.wallet-tile__head { flex: 1; min-width: 0; }
.wallet-tile__name {
    font-size: 1.12rem;
    font-weight: 700;
    color: #2a1308;
    line-height: 1.25;
    margin-bottom: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-tile__sub {
    font-size: 0.9rem;
    color: #a07a48;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-tile__amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: #c81222;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0.1rem 0 0.4rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-tile__cta {
    font-size: 0.95rem;
    color: #c81222;
    font-weight: 600;
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 0.05rem dashed #f3d8a5;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 公户信息（卡片整体使用设计稿原图作为背景） ===== */
.pa-card {
    position: relative;
    margin: 1rem 1.2rem 0;
    background: transparent;          /* 视觉由背景图提供 */
    background-image: url('../img/profile/pa-card.png?v=20260520a');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 478 / 264;          /* 与裁切后素材一致 */
    border-radius: 0;
    box-shadow: none;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 整卡变可点击（跳详情页） */
.pa-card--link {
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.pa-card--link:active {
    transform: translateY(0.1rem);
    filter: brightness(0.96);
}

/* 内层内容区：上文本靠左（避开右上角橙色插画），下方缩略图行铺满 */
.pa-card__inner {
    position: absolute;
    inset: 0;
    padding: 2.2rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
}

.pa-card__title {
    margin: 0 0 0.4rem;
    font-size: 1.55rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.05rem;
    max-width: 55%;        /* 不要顶到右上角插画 */
}

.pa-card__label {
    margin-top: 0.4rem;
    font-size: 1.15rem;
    color: #888;
    max-width: 55%;
}

.pa-card__amount {
    margin-top: 0.3rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #d8131c;
    line-height: 1;
    max-width: 55%;
}

.pa-card__docs {
    margin-top: auto;       /* 推到卡底，那一带没有插画 */
    padding: 0.9rem 1rem;
    background: #f1f1f1;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pa-card__thumb {
    flex: 0 0 8rem;
    width: 8rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: #fff;
    display: block;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.08);
}

.pa-card__viewmore {
    margin-left: auto;
    color: #d8131c;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== 养老金 ===== */
.pension-card {
    padding: 1.4rem 1.4rem 1.6rem;
}

.pension-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.pension-card__title {
    margin: 0;
}

.pension-card__hint {
    font-size: 1.15rem;
    font-weight: 600;
    color: #d8131c;
}

.pension-card__bar {
    position: relative;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, #ee2a32 0%, #c20911 100%);
    padding: 1.4rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    box-shadow: inset 0 0.1rem 0 rgba(255, 255, 255, 0.18),
                0 0.3rem 0.7rem rgba(180, 10, 16, 0.25);
}

.pension-card__bar-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pension-card__label {
    font-size: 1.15rem;
    opacity: 0.9;
}

.pension-card__amount {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05rem;
}

.pension-card__btn {
    height: 2.8rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 1.4rem;
    background: #fff;
    color: #d8131c;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05rem;
    box-shadow: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.05);
}

.pension-card__btn:active {
    transform: translateY(0.1rem);
}

/* 提现按钮使用 a 标签时也保持视觉一致 */
a.pension-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 养老金卡：底部链接区 */
.pension-card__links {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 0.05rem solid rgba(216, 19, 28, 0.12);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: #d8131c;
    font-size: 1.15rem;
    font-weight: 600;
}
.pension-card__links a { color: #d8131c; }
.pension-card__links a:active { opacity: 0.7; }
.pension-card__sep {
    width: 0.05rem;
    height: 1.2rem;
    background: rgba(216, 19, 28, 0.3);
}


/* ===== 营业执照 ===== */
.license-card__body {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.license-card__thumb {
    flex: 0 0 9rem;
    width: 9rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.4rem;
    background: #fff;
    display: block;
}

.license-card__action {
    margin-left: auto;
    color: #d8131c;
    font-size: 1.3rem;
    font-weight: 700;
}

/* ===== 主功能区（2×4 = 8 格 SVG 图标网格） ===== */
.feat-grid {
    margin: 1.2rem 1.2rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}
.feat-grid--2x4 { grid-template-columns: repeat(2, 1fr); }

.feat-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 0.6rem 1.2rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.3rem 0.8rem rgba(140, 0, 0, 0.07);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    text-align: center;
}
.feat-icon:active {
    transform: translateY(0.1rem);
    box-shadow: 0 0.2rem 0.4rem rgba(140, 0, 0, 0.12);
}

.feat-icon__wrap {
    width: 5rem; height: 5rem;
    border-radius: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.7rem;
    color: #fff;
    box-shadow: 0 0.3rem 0.7rem rgba(140, 0, 0, 0.2);
}
.feat-icon__wrap svg { width: 2.6rem; height: 2.6rem; }

.feat-icon__wrap--red    { background: linear-gradient(135deg, #ea1c25, #ad0810); }
.feat-icon__wrap--orange { background: linear-gradient(135deg, #ff8a18, #c95710); }
.feat-icon__wrap--gold   { background: linear-gradient(135deg, #ffb13a, #e58410); }
.feat-icon__wrap--blue   { background: linear-gradient(135deg, #2962d8, #1a3f8e); }
.feat-icon__wrap--green  { background: linear-gradient(135deg, #2c8a16, #185f0e); }
.feat-icon__wrap--pink   { background: linear-gradient(135deg, #e85a8e, #c12c5e); }
.feat-icon__wrap--purple { background: linear-gradient(135deg, #8b4de8, #5b22a3); }
.feat-icon__wrap--gray   { background: linear-gradient(135deg, #8b8b8b, #4c4c4c); }

.feat-icon__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2a1308;
    letter-spacing: 0.05rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}
.feat-icon__sub {
    font-size: 1rem;
    color: #999;
    line-height: 1.3;
    letter-spacing: 0.02rem;
    min-height: 1.3rem;
}

/* ===== 底部 Tabbar（与其他页面一致） ===== */
.tabbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 37.5rem;
    height: 5.8rem;
    display: flex;
    background: #fff;
    box-shadow: 0 -0.2rem 0.8rem rgba(0, 0, 0, 0.06);
    border-top: 0.05rem solid #f0e0c0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 20;
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: #777;
    font-size: 1.05rem;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.tab__icon {
    width: 2.4rem;
    height: 2.4rem;
    color: inherit;
}

/* PNG 图标在未选中态做灰阶 + 半透明，模拟 SVG 跟随选中态变色的效果 */
.tab:not(.tab--active) .tab__icon--img {
    filter: grayscale(1) opacity(0.55);
}
.tab__icon--img { transition: filter 0.15s ease; }

.tab--active {
    color: #d8131c;
    font-weight: 700;
}

/* ============================================================
   图片大图查看器（Lightbox）
   ============================================================ */
.pa-card__thumb {
    cursor: zoom-in;
    transition: transform 0.15s ease;
}
.pa-card__thumb:active {
    transform: scale(0.97);
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4rem 1.5rem 3rem;
    -webkit-tap-highlight-color: transparent;
}
.lightbox.is-open {
    display: flex;
    animation: lb-fade 0.18s ease;
}
@keyframes lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox__stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    gap: 1rem;
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 14rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.4rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
    display: none;
}
.lightbox__img.is-active { display: block; }

/* ============================================================
   证件块：图片背景 + 注册信息字段浮层
   ============================================================ */
.cert {
    position: relative;
    /* 开户许可证原图 1024 宽，基本存款账户信息 744 宽；按更小的那张定上限 */
    width: min(92vw, 1024px);
    display: none;
    border-radius: 0.4rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: #fff;
    container-type: inline-size;
}
.cert.is-active { display: block; }

.cert__bg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.cert__field {
    position: absolute;
    color: #1a1a1a;
    font-family: "SimSun", "Songti SC", "STSong", serif;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* 默认字号：1cqw ≈ 容器宽度的 1% */
    font-size: 2.4cqw;
    letter-spacing: 0.06rem;
}

.cert__placeholder {
    color: #c0c0c0;
    font-weight: 400;
    letter-spacing: 0.4rem;
}

/* === 开户许可证（1024×697）字段位置 === */
.cert--permit .cert__field--approval-no    { top: 26%; left: 20%; }
.cert--permit .cert__field--cert-no        { top: 26%; left: 74%; }
.cert--permit .cert__field--company        { top: 39%; left: 30%; max-width: 35%; }
.cert--permit .cert__field--legal-rep      { top: 57%; left: 39%; max-width: 19%; overflow: hidden; text-overflow: ellipsis; }
.cert--permit .cert__field--bank           { top: 57%; left: 68%; max-width: 24%; overflow: hidden; text-overflow: ellipsis; }
.cert--permit .cert__field--account-no     { top: 67%; left: 22%; max-width: 60%; }
.cert--permit .cert__field--issue-authority{ top: 79%; left: 56%; font-size: 2.1cqw; max-width: 38%; }
.cert--permit .cert__field--issue-date     { top: 85%; left: 56%; font-size: 2.1cqw; color: #444; }

/* === 基本存款账户信息（1024×689）字段位置 ===
   底图的标签是黑体（无衬线），整张证件的字段都用 sans-serif 来配。 */
.cert--info .cert__field {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", sans-serif;
    font-weight: 500;
    letter-spacing: 0.02rem;
}

/* 各行标签在底图里的精确像素位置（已扫描得出 1024×689 底图坐标）：
   name   label top ≈ 37.59% colon ≈ 26.8%
   acc    label top ≈ 46.15% colon ≈ 26.8%
   bank   label top ≈ 53.56% colon ≈ 26.8%
   legal  label top ≈ 62.12% colon ≈ 29.4%
   basic  label top ≈ 73.73% colon ≈ 37.4%
   值的 top 与标签 top 完全对齐，left 紧贴冒号后只留 ≈0.7% 视觉间隙。 */
.cert--info .cert__field--info-name        { top: 37.5%; left: 27.5%; max-width: 65%; }
.cert--info .cert__field--info-acc         { top: 46.1%; left: 27.5%; max-width: 65%; }
.cert--info .cert__field--info-bank        { top: 53.5%; left: 27.5%; max-width: 65%; }
.cert--info .cert__field--info-legal       { top: 62.1%; left: 30.1%; max-width: 60%; }
.cert--info .cert__field--info-basic-no    { top: 73.7%; left: 38.1%; max-width: 55%; }
/* 注：发证日期 "YYYY 年 MM 月 DD 日" 已由服务端 PHP+Noto Sans CJK 直接画进图里，
   不再用 CSS 覆盖层，避免与底图的预印字体出现差异。 */

.lightbox__caption {
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);
    text-align: center;
}

.lightbox__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 3.6rem;
    height: 3.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s ease;
    z-index: 2;
}
.lightbox__close:hover,
.lightbox__close:active {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.4rem;
    height: 3.4rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2;
}
.lightbox__nav:hover,
.lightbox__nav:active {
    background: rgba(255, 255, 255, 0.35);
}
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }

.lightbox__dots {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    padding-top: 0.6rem;
}
.lightbox__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* 让"查看大图"链接看起来可点 */
.pa-card__viewmore {
    cursor: pointer;
    user-select: none;
}
.pa-card__viewmore:active {
    opacity: 0.7;
}

/* ============================================================
   公户激活徽章
   ============================================================ */
.pa-card__badge {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.15rem 0.6rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    vertical-align: middle;
    transform: translateY(-0.15rem);
}
.pa-card__badge--ok   { background: #c6f0c1; color: #1d6a14; }
.pa-card__badge--warn { background: #ffd9b3; color: #8a3e08; }

/* ============================================================
   每日打卡模态：tabs / article / video
   ============================================================ */
.checkin-tabs {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.checkin-tab {
    flex: 1;
    height: 3.4rem;
    border-radius: 1.7rem;
    border: 0.1rem solid #d8a85a;
    background: #fffaee;
    color: #8b5a16;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
}
.checkin-tab.is-active {
    background: linear-gradient(180deg, #ea1c25, #ad0810);
    color: #fff;
    border-color: #ad0810;
}

.checkin-article {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.6rem 1rem;
    background: #fffaee;
    border: 0.1rem solid #f3d8a5;
    border-radius: 0.6rem;
    color: #2a1308;
    font-size: 1.2rem;
    line-height: 1.7;
}
.checkin-article h4 {
    color: #d8131c;
    font-size: 1.5rem;
    margin: 0 0 0.6rem;
}
.checkin-article b { color: #d8131c; }

.checkin-video {
    background: #000;
    border-radius: 0.6rem;
    overflow: hidden;
    padding-bottom: 0.6rem;
}
.checkin-video video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}
.checkin-video__hint {
    color: #f3d8a5;
    background: #000;
    margin: 0;
    padding: 0.4rem 1rem 0.6rem;
    font-size: 1.05rem;
    text-align: center;
}

.checkin-progress {
    text-align: center;
    margin: 1rem 0 0;
    font-size: 1.2rem;
    color: #6b3a0d;
}
.checkin-progress b {
    color: #d8131c;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0.2rem;
}

.checkin-streak {
    margin: -0.4rem 0 1rem;
    text-align: center;
    color: #8b5a16;
    font-size: 1.2rem;
    font-weight: 700;
}

.checkin-streak b {
    color: #d8131c;
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0 0.15rem;
}

/* ===== 红色重要提示（打卡模态） ===== */
.checkin-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #fff2f2 0%, #ffe1e0 100%);
    border: 0.1rem solid #f5b9b6;
    border-left: 0.32rem solid #d8131c;
    border-radius: 0.6rem;
    color: #c81222;
    line-height: 1.65;
    box-shadow: 0 0.25rem 0.7rem rgba(180, 16, 24, 0.12);
}
.checkin-notice__icon {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #ea3a32, #b81017);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(180, 16, 24, 0.32);
    margin-top: 0.05rem;
}
.checkin-notice__text {
    flex: 1;
    min-width: 0;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
}
.checkin-notice__text b {
    color: #d8131c;
    font-weight: 900;
    font-size: 1.3rem;
    margin: 0 0.1rem;
}
.checkin-notice__highlight {
    display: inline-block;
    color: #fff;
    background: linear-gradient(180deg, #ea3a32, #b81017);
    padding: 0.05rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    margin-left: 0.1rem;
    box-shadow: 0 0.15rem 0.35rem rgba(180, 16, 24, 0.28);
}

/* ============================================================
   全局轻量 Toast（功能未上线的弱提示）
   ============================================================ */
.pf-toast {
    position: fixed;
    left: 50%;
    bottom: 8rem;
    transform: translate(-50%, 0.6rem);
    max-width: 28rem;
    padding: 0.9rem 1.6rem;
    border-radius: 1.6rem;
    background: rgba(20, 20, 20, 0.86);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.pf-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}