/* ==========================================================================
   全局反馈层：Preloader（加载遮罩）+ 顶部弹窗提示
   两个前端共用（证书查询页 base.html / 推荐官页 member.html 都引入本文件），
   所以规则名一律带 mb- 前缀，避免和 app.css / member.css 撞车。

   z-index 直接跳到 2900/3000 —— 站内其它固定元素都在 20~40 这一档。
   ========================================================================== */

/* —— Preloader ——
   形状来自 loading-ui.com 的 InfinityLoop（path / dasharray / 终点 offset /
   自带的 scale(0.8) 全部原样照搬），描边走 currentColor，这里是品牌红。
   官方示例给的是 4:3 的盒子（h-12 w-16），全屏遮罩里放大到 96×72 才够醒目。
   遮罩本身照抄 Element Plus `.el-loading-mask`：全屏 fixed + 90% 白。 */
.mb-preloader {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  transition: opacity 0.2s ease;
}

.mb-preloader.is-leaving { opacity: 0; }

.mb-infinity {
  width: 96px;
  height: 72px;
  color: var(--mb-brand, #e70012);
}

.mb-infinity path {
  transform: scale(0.8);
  transform-origin: 50px 50px;
  animation: mb-infinity-dash 2s linear infinite;
}

@keyframes mb-infinity-dash {
  to { stroke-dashoffset: 256.58892822265625; }
}

/* —— 顶部弹窗提示 ——
   照搬后台 `/admin/#/login` 的 Element Plus `ElMessage`，几何全部是实测值：
   fixed top 16px 水平居中、flex + gap 8px、padding 11px 15px、圆角 4px、1px 描边、
   图标 16px（1024 视框的实心圆图标）、3s 自动关闭、多条并列间距 16px、
   进场 opacity 0 + translateY(-100%)。
   颜色用 EP 的三档（light-9 底 / light-8 描边 / 主色字），和后台看到的一模一样 ——
   ⚠️ 别按品牌红去「纠正」，提示色本就该区别于站内正文。
   唯一偏离：正文行高用 20px（EP 是 line-height:1，因为它设计时是单行；
   移动端 390 下长文案必然折行，1 倍行高两行会粘在一起）。 */
.mb-messages {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 30px);
  transform: translateX(-50%);
  /* 容器是不占位的透明层，别挡住它下面的点击 */
  pointer-events: none;
}

.mb-message {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 11px 15px;
  border: 1px solid;
  border-radius: 4px;
  pointer-events: auto;
  animation: mb-message-in 0.3s ease both;
}

.mb-message.is-leaving {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mb-message-icon {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
}

.mb-message-icon svg { width: 100%; height: 100%; }

.mb-message-content {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
}

.mb-message--error {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fde2e2;
}

.mb-message--success {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #e1f3d8;
}

@keyframes mb-message-in {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: none; }
}