/* ============================================================================
   投资人库权限门控 · 两个弹窗（用户 2026-09-28）
   —— 照 Demo 原样搬：H5投资人库-权限门控-Demo.html / PC个人中心-投资人库-权限门控-Demo(1).html
   场景：创业者未开通服务包时点「投递 / 查看邮箱 / 一键直投」
         → 「该权益尚未开通」居中弹框 →「立即开通」→ 姓名 + 电话留资

   H5 变体：.perm-overlay / .lead-overlay（max-width 320 / 330，z-index 400 / 500）
   PC 变体：.perm-mask    / .lead-mask   （宽 400 / 420，z-index 1500 / 1600）
   两端各自加载本文件（由 home/h5、founder/h5、home/pc、founder/pc 四个页面引入）：
   类名不重叠，所以一份样式表够用，不必往 home.css / founder.css / h5-shell.css 里塞。
   ============================================================================ */

/* ===== 未开通权限弹框（居中 Dialog）· H5 ===== */
.perm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(7, 16, 32, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 0 34px; opacity: 0; transition: opacity .2s; }
.perm-overlay.show { display: flex; }
.perm-overlay.vis { opacity: 1; }
.perm-box { width: 100%; max-width: 320px; background: var(--white, #fff); border-radius: 22px; padding: 30px 24px 22px; text-align: center; transform: translateY(14px) scale(.97); transition: transform .24s ease; position: relative; overflow: hidden; box-shadow: 0 24px 70px rgba(10, 23, 48, .35); }
.perm-overlay.vis .perm-box { transform: translateY(0) scale(1); }
.perm-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold, #c8a45e), transparent); }
.perm-lock { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(180deg, rgba(200, 164, 94, .14), rgba(200, 164, 94, .05)); border: 1.5px solid rgba(200, 164, 94, .5); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.perm-lock svg { width: 26px; height: 26px; stroke: var(--gold-deep, #a8843f); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.perm-box h3 { font-size: 18px; font-weight: 800; color: var(--navy, #0F1E3A); letter-spacing: -.2px; }
.perm-desc { font-size: 13px; color: #5A6B84; margin-top: 10px; line-height: 1.8; }
.perm-desc b { color: #1748D9; font-weight: 700; }
.perm-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.perm-open { width: 100%; height: 46px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #2f7bff, #1748D9); color: #fff; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -6px rgba(30, 94, 255, .5); }
.perm-close { width: 100%; height: 42px; border-radius: 12px; border: 1px solid rgba(15, 30, 58, .1); background: var(--white, #fff); color: #5A6B84; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.perm-link { margin-top: 14px; font-size: 12px; color: var(--gold-deep, #a8843f); cursor: pointer; font-weight: 600; }

/* ===== 留资弹框（姓名+电话）· H5 ===== */
.lead-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(7, 16, 32, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 0 30px; opacity: 0; transition: opacity .2s; }
.lead-overlay.show { display: flex; }
.lead-overlay.vis { opacity: 1; }
.lead-box { width: 100%; max-width: 330px; background: var(--white, #fff); border-radius: 22px; padding: 28px 24px 20px; text-align: left; transform: translateY(14px) scale(.97); transition: transform .24s ease; position: relative; overflow: hidden; box-shadow: 0 24px 70px rgba(10, 23, 48, .35); }
.lead-overlay.vis .lead-box { transform: translateY(0) scale(1); }
.lead-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold, #c8a45e), transparent); }
.lead-box h3 { font-size: 18px; font-weight: 800; color: var(--navy, #0F1E3A); letter-spacing: -.2px; text-align: center; }
.lead-sub { font-size: 12.5px; color: #5A6B84; margin-top: 8px; line-height: 1.7; text-align: center; }
.lead-sub b { color: var(--gold-deep, #a8843f); font-weight: 700; }
.lead-field { margin-top: 18px; }
.lead-field label { display: block; font-size: 12px; font-weight: 700; color: #2A3A55; margin-bottom: 7px; }
.lead-field input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid rgba(15, 30, 58, .1); background: #f8fafd; padding: 0 14px; font-size: 14.5px; color: #152238; font-family: inherit; outline: none; transition: border .15s, box-shadow .15s; }
.lead-field input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(30, 94, 255, .12); background: #fff; }
.lead-field input.err { border-color: #e5484d; background: #fff5f5; }
.lead-field .hint { display: none; font-size: 11px; color: #e5484d; margin-top: 5px; }
.lead-field .hint.show { display: block; }
.lead-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.lead-submit { width: 100%; height: 48px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #2f7bff, #1748D9); color: #fff; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -6px rgba(30, 94, 255, .5); }
.lead-submit:active { transform: translateY(1px); }
.lead-submit[disabled] { opacity: .65; cursor: default; }
.lead-skip { width: 100%; height: 40px; border-radius: 12px; border: 0; background: none; color: #5A6B84; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.lead-note { margin-top: 14px; font-size: 11px; color: #8A95A5; text-align: center; line-height: 1.6; }

/* ===== 权限弹框 · PC ===== */
.perm-mask { position: fixed; inset: 0; z-index: 1500; background: rgba(7, 14, 30, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .2s; }
.perm-mask.show { display: flex; }
.perm-mask.vis { opacity: 1; }
.perm-mask .perm-box { width: 400px; max-width: 100%; background: var(--white, #fff); border-radius: 20px; padding: 0; overflow: hidden; text-align: left; transform: translateY(14px) scale(.97); transition: transform .24s ease; box-shadow: 0 24px 70px rgba(10, 23, 48, .35); }
.perm-mask.vis .perm-box { transform: translateY(0) scale(1); }
.perm-head { text-align: center; padding: 30px 30px 6px; }
.perm-mask .perm-box h3 { font-size: 19px; }
.perm-mask .perm-desc { font-size: 13.5px; color: #5A6B84; margin-top: 10px; line-height: 1.85; padding: 0 10px; }
.perm-mask .perm-desc b { color: var(--gold-deep, #a8843f); }
.perm-mask .perm-actions { padding: 20px 30px 22px; display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
.perm-mask .perm-open { height: 48px; border-radius: 11px; background: linear-gradient(120deg, #2563EB, #4c86ff); transition: transform .15s; }
.perm-mask .perm-open:hover { transform: translateY(-1px); }
.perm-mask .perm-close { height: 42px; border-radius: 11px; }
.perm-mask .perm-link { margin-top: 2px; font-size: 12.5px; text-align: center; padding-bottom: 22px; }

/* ===== 留资弹框 · PC ===== */
.lead-mask { position: fixed; inset: 0; z-index: 1600; background: rgba(7, 14, 30, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .2s; }
.lead-mask.show { display: flex; }
.lead-mask.vis { opacity: 1; }
.lead-mask .lead-box { width: 420px; max-width: 100%; background: var(--white, #fff); border-radius: 20px; padding: 0; overflow: hidden; transform: translateY(14px) scale(.97); transition: transform .24s ease; box-shadow: 0 24px 70px rgba(10, 23, 48, .35); }
.lead-mask.vis .lead-box { transform: translateY(0) scale(1); }
.lead-head { padding: 28px 30px 4px; text-align: center; }
.lead-mask .lead-box h3 { font-size: 19px; }
.lead-mask .lead-sub { font-size: 13px; margin-top: 8px; line-height: 1.8; }
.lead-body { padding: 18px 30px 8px; }
.lead-mask .lead-field { margin-bottom: 16px; margin-top: 0; text-align: left; }
.lead-mask .lead-field label { font-size: 12.5px; }
.lead-mask .lead-field input { height: 46px; border-radius: 10px; }
.lead-mask .lead-field input:focus { border-color: #2563EB; }
.lead-mask .lead-actions { padding: 6px 30px 22px; display: flex; flex-direction: column; gap: 9px; margin-top: 0; }
.lead-mask .lead-submit { height: 48px; border-radius: 11px; background: linear-gradient(120deg, #2563EB, #4c86ff); transition: transform .15s; }
.lead-mask .lead-submit:hover { transform: translateY(-1px); }
.lead-mask .lead-skip { height: 40px; border-radius: 11px; color: #8A95A5; }
.lead-mask .lead-note { padding-bottom: 6px; }

/* 手机端窄屏时 PC 弹窗也别溢出（两个变体共用一套兜底） */
@media (max-width: 420px) {
  .perm-mask, .lead-mask { padding: 18px; }
  .perm-mask .perm-box, .lead-mask .lead-box { width: 100%; }
}