/*!
 * member.css —— 会员体系热修样式（2026-09-11）
 * ---------------------------------------------------------------------------
 * 配套 /assets/member.js 使用，完全不改动打包产物 index-app-*.js。
 * 覆盖四块：
 *   1. 需求大厅卡片上的「查看联系方式」按钮
 *   2. 需求详情页的联系方式操作条
 *   3. 会员中心的「我的会员权益」面板
 *   4. 管理后台的「会员身份」设置控件 + 通用弹窗
 * ---------------------------------------------------------------------------
 * 移除方式：删除 index.html 里的 member.css / member.js 引用即可。
 */

/* ===========================================================================
   1. 需求大厅卡片上的「查看联系方式」按钮
   ---------------------------------------------------------------------------
   .request-card-foot 原本是 flex + space-between，宽度约 368px。
   直接塞第三个元素会把「立即报价」挤走，所以把两个按钮包进 .mv-foot-actions
   自己成组，并允许整个 foot 换行（手机窄屏时"预算"独占一行）。
   =========================================================================== */
.request-card-foot { flex-wrap: wrap; row-gap: 8px; }
.mv-foot-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }

.mv-contact-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1;
  width: auto; height: 33px; padding: 0 12px; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-primary, #c93628);
  background: #fff7f3; color: var(--c-primary, #c93628);
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.mv-contact-btn:hover { background: var(--c-primary, #c93628); color: #fff; box-shadow: 0 8px 16px -8px rgba(201, 54, 40, .7); }
.mv-contact-btn:active { transform: translateY(1px); }
.mv-contact-btn[disabled] { opacity: .6; cursor: progress; }
.mv-contact-btn svg { width: 13px; height: 13px; flex: none; }

/* ---------------------------------------------------------------------------
   1b. 首页「需求匹配大厅」卡片上的同一个按钮
   ---------------------------------------------------------------------------
   首页卡片是另一套组件（.demand-card / .demand-foot），整张卡被 <a> 包住。
   .demand-foot 原本 flex + space-between：价格左、「去报价」右。加第三个元素
   同样会把「去报价」挤走，所以也用 .mv-foot-actions 成组；并允许换行 +
   margin-left:auto，让窄屏换行后按钮组仍贴右，不会把价格压变形。
   =========================================================================== */
.demand-foot { flex-wrap: wrap; row-gap: 8px; }
.demand-foot .mv-foot-actions { margin-left: auto; }
/* 与相邻的 .demand-cta（去报价）等高：实测 .demand-cta 渲染高 34px
   （12.5px 字 + 上下 padding 7px + 继承行高），所以这里也用 34px。
   注意用 .demand-foot 前缀提高特异性，压过 ≤640px 里 .mv-contact-btn{height:31px}。 */
.demand-foot .mv-contact-btn { height: 34px; padding: 0 13px; font-size: 12.5px; }

/* ===========================================================================
   2. 需求详情页：标题行下方的联系方式操作条
   =========================================================================== */
.mv-contact-bar {
  margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 13px 16px; border-radius: 14px;
  border: 1px dashed var(--c-line-2, #e6d8cf); background: #fffaf7;
}
.mv-contact-bar .mv-bar-text { font-size: 13px; line-height: 1.55; color: var(--c-ink-soft, #6b5b52); flex: 1 1 240px; min-width: 0; }
.mv-contact-bar .mv-bar-text b { color: var(--c-ink, #2f2620); }

/* 查看后的联系方式卡片 */
.mv-contact-card {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(201, 54, 40, .22); background: linear-gradient(180deg, #fff7f3, #fffdfc);
  display: grid; gap: 8px;
}
.mv-contact-card .mv-cc-title { font-size: 12.5px; font-weight: 800; color: var(--c-primary, #c93628); letter-spacing: .3px; }
.mv-contact-card .mv-cc-row { display: flex; align-items: baseline; gap: 10px; font-size: 14px; min-width: 0; }
.mv-contact-card .mv-cc-row > span { flex: none; width: 62px; color: var(--c-ink-light, #9a8a80); font-size: 12.5px; }
.mv-contact-card .mv-cc-row > b { font-weight: 800; color: var(--c-ink, #2f2620); overflow-wrap: anywhere; word-break: break-word; }
.mv-contact-card .mv-cc-note { font-size: 12px; color: var(--c-ink-light, #9a8a80); line-height: 1.5; }

/* ===========================================================================
   3. 会员中心「我的会员权益」面板
   =========================================================================== */
.mv-benefit { display: grid; gap: 14px; }
.mv-benefit-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.mv-level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 850; letter-spacing: .4px;
  padding: 6px 14px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, #8d8579, #6c645a);
}
.mv-level-badge.premium { background: linear-gradient(135deg, #d99a2b, #b9771a); }
.mv-level-badge.vip { background: linear-gradient(135deg, #d84435, var(--c-primary, #c93628)); box-shadow: 0 8px 18px -10px rgba(201,54,40,.9); }
.mv-benefit-sub { font-size: 12.5px; color: var(--c-ink-light, #9a8a80); }
.mv-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mv-stat {
  border: 1px solid var(--c-line-2, #e6d8cf); border-radius: 13px; background: #fff;
  padding: 12px 13px; display: grid; gap: 5px; min-width: 0;
}
.mv-stat .mv-stat-label { font-size: 12px; font-weight: 700; color: var(--c-ink-light, #9a8a80); }
.mv-stat .mv-stat-value { font-size: 19px; font-weight: 850; line-height: 1.1; color: var(--c-ink, #2f2620); font-variant-numeric: tabular-nums; }
.mv-stat .mv-stat-value small { font-size: 12px; font-weight: 700; color: var(--c-ink-light, #9a8a80); margin-left: 2px; }
.mv-stat.is-out .mv-stat-value { color: #c0392b; }
.mv-stat.is-contact { background: linear-gradient(180deg, #fff7f3, #fffdfc); border-color: rgba(201,54,40,.22); }
.mv-bar { height: 5px; border-radius: 999px; background: #f1e7e0; overflow: hidden; }
.mv-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d84435, var(--c-primary, #c93628)); }
.mv-stat.is-out .mv-bar > i { background: #c0392b; }
.mv-benefit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* 各套「查看联系方式」额度的口径说明（2026-09-14 新增，用户要求个人中心 / 会员中心
   把招聘查看次数怎么算写清楚）。放在额度网格下方，一条一条列出，不挤在卡片里。 */
.mv-view-note { margin: 13px 0 0; padding: 12px 14px; border-radius: 12px; background: #fffaf7; border: 1px solid rgba(201,54,40,.18); }
.mv-view-note p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.72; color: var(--c-ink-soft, #6b5b52); }
.mv-view-note p:last-child { margin-bottom: 0; }
.mv-view-note p b { color: var(--c-primary, #c93628); font-weight: 850; }
.mv-view-note .mv-view-note-h { font-size: 13px; font-weight: 850; color: var(--c-ink, #2f2620); margin-bottom: 7px; }

/* ===========================================================================
   4. 管理后台「会员身份」设置控件
   =========================================================================== */
.mv-admin-row {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-line-2, #e6d8cf);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
}
.mv-admin-row .mv-admin-label { font-size: 12.5px; font-weight: 800; color: var(--c-ink-soft, #6b5b52); }
.mv-admin-row select {
  font-family: inherit; font-size: 13px; font-weight: 700; min-width: 132px; width: auto;
  height: 34px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--c-line-2, #e6d8cf); background: #fff; color: var(--c-ink, #2f2620);
}
.mv-admin-row .mv-admin-saved { font-size: 12px; font-weight: 800; color: #1f8a4c; }
.mv-admin-row .mv-admin-err { font-size: 12px; font-weight: 800; color: #c0392b; }

/* ===========================================================================
   5. 通用弹窗
   =========================================================================== */
.mv-mask {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(38, 28, 22, .5);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mv-mask[hidden] { display: none; }
.mv-dialog {
  width: min(100%, 420px); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 18px; padding: 20px;
  box-shadow: 0 26px 60px -20px rgba(38, 28, 22, .55);
  animation: mv-pop .18s ease-out;
}
@keyframes mv-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
.mv-dialog h3 { margin: 0 0 8px; font-size: 17px; font-weight: 850; color: var(--c-ink, #2f2620); }
.mv-dialog p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.65; color: var(--c-ink-soft, #6b5b52); }
.mv-dialog p b { color: var(--c-primary, #c93628); font-weight: 850; }
.mv-dialog .mv-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.mv-dialog .mv-dialog-actions .fc-btn { min-width: 92px; justify-content: center; }
.mv-dialog .mv-lock { font-size: 12.5px; color: var(--c-ink-light, #9a8a80); line-height: 1.6; }
.mv-contact-list { display: grid; gap: 9px; margin: 14px 0 4px; padding: 14px; border-radius: 13px; background: #fffaf7; border: 1px solid rgba(201,54,40,.2); }
.mv-contact-list .mv-cc-row { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; min-width: 0; }
.mv-contact-list .mv-cc-row > span { flex: none; width: 60px; font-size: 12.5px; color: var(--c-ink-light, #9a8a80); }
.mv-contact-list .mv-cc-row > b { font-weight: 800; overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 640px) {
  .mv-benefit-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .mv-stat { padding: 10px 11px; }
  .mv-stat .mv-stat-value { font-size: 17px; }
  .mv-dialog { padding: 17px; border-radius: 16px; }
  .mv-contact-btn { height: 31px; padding: 0 10px; font-size: 12px; }
  .mv-contact-bar { padding: 12px 13px; }
}