/* ============================================================
 * rectify_mx.css — 模型透明原则（MX 切片）
 * 视觉：浅蓝白体系，零深色；与 .v10-mask / .i5-mask 同款遮罩
 * ============================================================ */

/* ---- 浅黄提示条（固定底部，不阻断浏览，不自动切换） ---- */
.mx-hintbar {
  position: fixed; left: 50%; bottom: 22px;
  transform: translateX(-50%) translateY(16px);
  background: #FFF7DB; border: 1px solid #E6D28B; color: #6E5A1D;
  padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(90, 110, 150, .18);
  display: flex; align-items: center; gap: 10px;
  z-index: 120; max-width: min(92vw, 600px);
  font-size: 13px; line-height: 1.4;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.mx-hintbar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mx-hb-ico { font-size: 14px; }
.mx-hb-text { flex: 1; }
.mx-hb-btn {
  background: #F0B429; color: #fff; border: none; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.mx-hb-btn:hover { background: #E0A61F; }
.mx-hb-x {
  background: transparent; border: none; cursor: pointer;
  color: #9A8540; font-size: 13px; padding: 2px 4px;
}

/* ---- 切换确认弹窗（遮罩复用 i5-mask 视觉） ---- */
.mx-mask {
  position: fixed; inset: 0; background: rgba(30, 42, 58, .32);
  z-index: 130; display: none; align-items: center; justify-content: center; padding: 16px;
}
.mx-mask.show { display: flex; }
.mx-modal {
  background: #fff; width: min(600px, 94vw); max-height: 88vh; overflow: auto;
  border-radius: 12px; border: 1px solid #DCE6F2;
  box-shadow: 0 18px 60px rgba(40, 70, 120, .25);
}
.mx-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 0;
}
.mx-modal-head h3 { margin: 0; font-size: 16px; color: #2B3A55; }
.mx-modal-x {
  background: transparent; border: none; cursor: pointer;
  color: #8A93A5; font-size: 16px; padding: 2px 6px;
}
.mx-modal-x:hover { color: #4A5B78; }
.mx-modal-ctx { padding: 8px 18px 0; font-size: 12px; color: #606266; }

/* ---- 新旧模型对比表（模型名/供应商/单价/画质档位） ---- */
.mx-table {
  width: calc(100% - 36px); margin: 10px 18px 0;
  border-collapse: collapse; font-size: 13px;
}
.mx-table th {
  text-align: left; padding: 6px 8px; background: #F2F7FE; color: #4A5B78;
  font-weight: 600; border-bottom: 1px solid #E3ECF7;
}
.mx-table td { padding: 8px; border-bottom: 1px solid #EEF3FA; vertical-align: top; color: #2B3A55; }
.mx-row-old td { background: #ffffff; }
.mx-old-tag { font-style: normal; font-size: 12px; color: #3D6FB4; margin-left: 4px; }
tr.mx-row-new { cursor: pointer; }
tr.mx-row-new:hover td { background: #ffffff; }
.mx-pick { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.mx-pick input { margin-top: 3px; }

/* ---- 密钥组可用性/限流状态徽标 ---- */
.mx-badge {
  display: inline-block; font-size: 12px; border-radius: 4px;
  padding: 1px 6px; margin-top: 3px;
}
.mx-badge-ok { background: #E4F5E9; color: #2E7D4F; }
.mx-badge-off { background: #F0F2F6; color: #8A93A5; }
.mx-badge-trip { background: #ffece8; color: #f53f3f; }

/* ---- 明确文案：切换前后差异提示 ---- */
.mx-warn {
  margin: 12px 18px 0; padding: 8px 10px;
  background: #FFF7DB; border: 1px solid #E6D28B; border-radius: 8px;
  font-size: 13px; color: #6E5A1D; line-height: 1.5;
}
.mx-warn-extra { color: #B07A1E; }

/* ---- 弹窗底部按钮 ---- */
.mx-modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; }
.mx-btn {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid #C9D8EC; background: #fff; color: #3D5A99;
}
.mx-btn:hover { background: #F2F7FE; }
.mx-btn-primary { background: #3D6FB4; border-color: #3D6FB4; color: #fff; }
.mx-btn-primary:hover { background: #3563A4; }

/* ---- 全程模型可见：画布节点卡小字 ---- */
.mx-gn-model {
  font-size: 12px; color: #606266; margin: 2px 6px 0;
  padding: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 导出面板模型透明说明行 ---- */
.mx-exp-note {
  font-size: 12px; color: #606266; background: #ffffff;
  border: 1px dashed #C9D8EC; border-radius: 8px; padding: 6px 10px; margin-top: 8px;
}

/* ---- 成片版本卡模型行（M5） ---- */
.mx-ver-model { font-size: 12px; color: #3D6FB4; margin-top: 3px; }

/* ---- tasks 页兜底 toast（页面自带 toast 缺失时） ---- */
.mx-self-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  background: #2B3A55; color: #fff; padding: 8px 14px; border-radius: 8px;
  font-size: 13px; z-index: 200; max-width: 90vw;
}
.mx-self-toast.err { background: #f53f3f; }