/* ============================================================
 *  系统弹窗 统一格式（全站通用，后续新弹窗一律用这套）
 *
 *  结构：
 *    .sys-mask                    半透明遮罩（点空白处关闭）
 *      .sys-box                   宽 330 的内容列
 *        .sys-poster / .sys-card  内容区：海报图 或 白色文字卡
 *          .sys-hot               （可选）海报内按设计比例叠加的真实控件
 *          .sys-x                 （可选）右上角关闭图标
 *        .sys-btns                统一底部：左「关闭」 右「前往办理」
 *
 *  用法见 includes/sys_popup.php 的 sys_popup()
 * ============================================================ */

.sys-mask {
    position: fixed; inset: 0; z-index: 700; display: none;
    align-items: center; justify-content: center; padding: 18px 16px; overflow-y: auto;
    background: rgba(8, 18, 38, .62);
}
.sys-mask.show { display: flex; }

.sys-box { position: relative; width: 330px; max-width: 100%; }

/* 内容区 A：海报 */
.sys-poster { position: relative; line-height: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.sys-poster > img { display: block; width: 100%; height: auto; }

/* 海报内的真实控件（位置由内联 style 按设计比例给出，禁止全图热区） */
.sys-hot { position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.sys-hot:active { background: rgba(255, 255, 255, .16); }

/* 内容区 B：白色文字卡 */
.sys-card { padding: 20px 20px 17px; border-radius: 16px; background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.sys-h { font-size: 17px; font-weight: 600; color: #0a2c7d; text-align: center; }
/* 可选：标题上方的居中徽标（国徽等）/ 标题下方的醒目副标题（2026-10-30，sys_popup 的 logo / sub） */
.sys-logo { display: block; width: 56px; height: 56px; margin: 0 auto 8px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
.sys-sub { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 25px; color: #18a058; text-align: center; }
.sys-card .sys-sub + .sys-b { margin-top: 10px; }
.sys-b { margin-top: 12px; font-size: 14px; line-height: 24px; color: #3a465e; }
.sys-card .sys-h + .sys-b { margin-top: 12px; }
/* 正文分段（sys_popup 的 text 传数组时） */
.sys-b .sys-p { margin: 0; }
.sys-b .sys-p + .sys-p { margin-top: 6px; }
/* 数据块（2026-10-12）：一行一个「标签 + 值」，带浅金底框，和正文文字明显区分 */
.sys-kv { margin: 8px 0 2px; padding: 4px 10px; border: 1px solid #f0e0b8; border-radius: 8px; background: #fffdf5; }
.sys-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #efe3c8; }
.sys-kv > div:last-child { border-bottom: 0; }
.sys-kv i { flex: none; font-size: 13px; font-style: normal; color: #6b6253; }
.sys-kv b { font-size: 14.5px; font-weight: 700; color: #c62d1f; text-align: right; }

/* 高亮提示块分行（tip 传数组时）：首行作小标题 */
.sys-tip .sys-p { margin: 0; }
.sys-tip .sys-p + .sys-p { margin-top: 3px; }
.sys-tip .sys-p:first-child:not(:only-child) { font-weight: 700; }

/* 右上角关闭图标（复用既有导出图标，非自绘） */
.sys-x { position: absolute; top: -14px; right: -4px; z-index: 2; width: 32px; height: 32px;
    padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sys-x img { display: block; width: 32px; height: 32px; }

/* 正文下方的高亮提示块（sys_popup 的 tip 参数） */
.sys-tip { margin-top: 12px; padding: 11px 12px; border-radius: 10px;
    background: #fff5f2; border: 1px solid #ffd9cd; border-left: 3px solid #f0492c;
    font-size: 13px; line-height: 22px; font-weight: 500; color: #c0341c; }

/* 统一底部按钮：左 关闭 / 右 前往办理
   min-height + 允许换行：按钮文案偶尔会长（如「立即成为预备特批人员」），
   原来写死 height:44px 且不换行，长文案会溢出到按钮外面去。 */
.sys-btns { display: flex; gap: 12px; margin-top: 12px; }
.sys-btn { flex: 1; min-width: 0; min-height: 44px; padding: 5px 10px; box-sizing: border-box;
    border-radius: 22px; display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 16px; line-height: 1.25; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sys-btn:active { opacity: .92; }
.sys-btn-close { background: rgba(255, 255, 255, .95); color: #4a5670; }
.sys-btn-go { background: linear-gradient(180deg, #ec1930 0%, #df0a20 100%); color: #fff;
    box-shadow: 0 8px 10px rgba(218, 10, 31, .22); }
/* 只有一个按钮时不拉伸成整行 */
.sys-btns.is-single { justify-content: center; }
.sys-btns.is-single .sys-btn { flex: 0 0 62%; }

/* 竖长海报（金卡加放名额 1:1.78）：小屏上整屏放不下，按视口高度限高等比缩小，
   保证底部两颗按钮始终露在屏内。只作用于带 .is-tall 的弹窗，其它海报弹窗不受影响。
   遮罩上下 padding 18×2 + 底部按钮 44 + 间距 12 + 余量 12 ≈ 104px */
.sys-mask .sys-box.is-tall { width: auto; max-width: 330px; }
.sys-mask .sys-box.is-tall .sys-poster > img { max-height: calc(100vh - 104px); width: auto; max-width: 330px; margin: 0 auto; }
/* 首页「国家财政报销系统正式上线」弹窗（includes/reimb_home_popup.php，2026-10-28）：
   正文里两条 ✅ 小标题（固定是第 4、6 段）加粗显绿，与下面的说明句分出层次；
   左按钮「联系专属客服开通存折」10 个字，默认字号会折成两行 -> 本弹窗按钮收到 13px；正文偏长，限高可滚 */
#rbhpMask .sys-h { line-height: 25px; }
#rbhpMask .sys-b { max-height: calc(100vh - 250px); overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* 够高就整段显示，屏幕矮才滚（减掉标题 / 提示块 / 按钮的高度） */
#rbhpMask .sys-b .sys-p:nth-child(4), #rbhpMask .sys-b .sys-p:nth-child(6) { margin-top: 10px; font-weight: 600; color: #0a7a46; }
#rbhpMask .sys-btn { padding: 5px 6px; font-size: 13px; }

/* 理财页《紧急通知 · 专属配额即将售罄》（includes/fin_pq_popup.php，2026-10-28）：
   右键「立即持有 · 锁定存折开通资格」14 个字，默认两键等宽会折行 —— 左键收窄、右键放宽并降一号字；正文偏长，限高可滚 */
#finPqMask .sys-b { max-height: calc(100vh - 290px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
#finPqMask .sys-btns { gap: 10px; }
#finPqMask .sys-btn-close { flex: 0 0 92px; }
#finPqMask .sys-btn-go { font-size: 13px; padding: 5px 6px; }

/* 登录页「账户已冻结」提示（login.php，2026-10-29）：右键「点击联系赖彩云助理报备解除」12 个字，两键等宽会折行 —— 左键收窄、右键降一号字 */
#frzMask .sys-btn-close { flex: 0 0 96px; }
#frzMask .sys-btn-go { font-size: 13px; padding: 5px 6px; }

/* 首页两个新海报弹窗（includes/home_pop_new.php，2026-11-01）：
   「立即存入享三倍提现」8 个字按默认字号会折行，这里把右键放宽、字号收一点 */
#hlqtMask .sys-btn { font-size: 15px; }
#hlqtMask .sys-btn-close { flex: 0 0 96px; }
#hlqtMask .sys-btn-go { white-space: nowrap; }
#hgcOpenMask .sys-btn { font-size: 16px; }

/* 第二排：整行次要按钮（金色，与主按钮的红色区分主次） */
.sys-btns-2 { margin-top: 10px; }
.sys-btn-go2 { background: linear-gradient(90deg, #ffd777, #f5a623); color: #5a3708;
    box-shadow: 0 8px 10px rgba(245, 166, 35, .24); }

/* 《🎉 理财活动奖励已到账》（includes/fin_bonus_popup.php，【我的】页）：文字卡，份数与金额红色加粗 */
.fbn-card .fbn-h { color: #c9302c; }
.fbn-bd { margin-top: 12px; font-size: 14px; line-height: 1.8; color: #33405c; text-align: center; }
.fbn-bd p + p { margin-top: 6px; }
.fbn-bd .fbn-hi { font-weight: 600; color: #1f2a44; text-align: left; }
.fbn-bd b { font-size: 17px; font-weight: 700; color: #e32218; font-family: Arial, "Liberation Sans", sans-serif; }

/* 「金卡启用名额」提醒弹窗（2026-10-12，includes/gce_pop.php）：
   标题较长要能折行；提示块里的 ✅ 清单逐行左对齐；末段单独一句 */
.gcp-pop .sys-h { font-size: 17px; line-height: 25px; }
.gcp-pop .sys-tip .sys-p { margin: 3px 0; }
.gcp-last { margin: 10px 0 0; font-size: 13.5px; line-height: 21px; color: #c0392b; font-weight: 500; }

/* ---------- 云数股权抛售 / 云数现金支票兑换「10月17日开放变现」弹窗（2026-10-14，includes/rw_popup.php，PPT 第 3、11 页样稿） ----------
   正文下面两块：核心权益（✅ 标题 + 一行说明）/ 温馨提示（📋 + 正文 + 右下落款）；底部「订阅开放通知」订过以后置灰 */
.rw-soon .sys-b { margin-top: 10px; font-size: 13.5px; line-height: 22px; }
.rw-core { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff8ec; border: 1px solid #f6dfb2; }
.rw-core-h { font-size: 13.5px; font-weight: 700; line-height: 20px; color: #9a5a00; }
.rw-core ul { margin: 4px 0 0; padding: 0; list-style: none; }
.rw-core li { padding: 4px 0; }
.rw-core li + li { border-top: 1px dashed #f1dcb3; }
.rw-core li b { display: block; font-size: 13px; font-weight: 700; line-height: 19px; color: #0a2c7d; }
.rw-core li span { display: block; padding-left: 19px; font-size: 12px; line-height: 18px; color: #5b6475; }
.rw-soon .rw-core-h, .rw-soon .rw-note-h { white-space: nowrap; }   /* 零钱通「3倍收益提现」弹窗（2026-10-14，includes/lqt_x3_popup.php）也用这套 */
.rw-note { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #f3f7fd; border: 1px solid #dce6f5; }
.rw-note-h { font-size: 13px; font-weight: 700; line-height: 19px; color: #0a2c7d; }
.rw-note p { margin: 3px 0 0; font-size: 12px; line-height: 19px; color: #4f5b70; }
.rw-note .rw-sign { margin-top: 4px; text-align: right; font-weight: 600; color: #0a2c7d; }
.rw-soon .sys-btn-go.is-done { background: #aab6c8; box-shadow: none; pointer-events: none; }

/* 幸运暴击「恭喜您，获得抽奖机会！」（2026-10-16，includes/lucky_ui.php lk_paypop）：文字长，白卡限高、卡内滚动，底部两颗按钮始终露在屏内 */
#lkPayMask .sys-card { max-height: calc(100vh - 118px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
#lkPayMask .sys-btns .sys-btn { white-space: nowrap; }