/* ============================================================
   会员端「家」· /m 专用样式（2026-10-31）
   ------------------------------------------------------------
   只放新布局特有的部分，基础视觉（按钮 / 卡片 / 表格 / 表单）
   全部复用 app.css，保证与老会员端同一套设计语言。

   三个新东西：
     1. 身份徽章（侧栏顶部）—— 让用户一眼看到自己是谁
     2. 权益余量条（首页 / 顾问页）—— 次数是钩子，必须看得见
     3. 接近上限提醒（.m-alert）—— 主动提示升级

   变量口径（重要）：
     会员端跑的是【前台 token 体系】（tokens.css / falv-skin.css），
     不是总后台那套（admin.css）。语义名统一在下面对齐，
     组件里一律 var(--fg)/var(--pri) 这种写法，不直接写色值。
   ============================================================ */

/* ---------- 变量桥接：语义名 → 前台 token ---------- */
/* 前台 token 一律由 tokens.css 提供；此处只做语义名映射，
   作用域限 .m-body，避免外溢到其它布局。 */
.m-body{
  --fg:var(--ink);        /* 主文字 */
  --fg2:var(--g1);        /* 次级文字 */
  --fg3:var(--g2);        /* 说明 / 最弱 */
  --pri:var(--orange);    /* 品牌色 */
  --pri-fg:#FFFFFF;       /* 品牌底上的文字（与 app.css .btn-primary 同口径） */
  --ok:var(--green);      /* 成功 */
  --warn:var(--amber);    /* 警告 */
  --bad:var(--red);       /* 危险 */
}

/* 夜间：语义色提亮（与 falv-skin 夜间段同值） */
[data-theme="dark"] .m-body{
  --ok:#4FC08D;
  --warn:#E0A94F;
  --bad:#F0857F;
}

/* ---------- 身份徽章 ---------- */
.m-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 10px 4px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--fg);
  transition: border-color .15s, background .15s;
}
.m-identity:hover { border-color: var(--pri); }

.m-id-avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: var(--pri);
  color: var(--pri-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.m-id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-id-name {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-id-role {
  font-size: 11px; color: var(--fg3); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-identity .ic { color: var(--fg3); flex: 0 0 auto; }

/* 顶栏身份标签 */
.m-top-role {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg2);
  font-size: 12px; text-decoration: none;
  white-space: nowrap;
}
.m-top-role:hover { border-color: var(--pri); color: var(--pri); }

/* P11 融合：返回主站入口 */
.m-back-portal {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg2);
  font-size: 12px; text-decoration: none;
  white-space: nowrap;
  transition: .14s;
}
.m-back-portal:hover { border-color: var(--pri); color: var(--pri); }

/* ---------- 页面头 ---------- */
.m-head { margin-bottom: 18px; }
.m-head h1 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 600; letter-spacing: -.3px;
  color: var(--fg);
}
.m-head p { margin: 0; font-size: 13px; color: var(--fg3); line-height: 1.6; }

/* ---------- 卡片 ---------- */
.m-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.m-card-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.m-card-h b { font-size: 15px; font-weight: 600; color: var(--fg); }
.m-card-h .ic { color: var(--pri); }
.m-card-h .more {
  margin-left: auto; font-size: 12.5px; color: var(--fg3);
  text-decoration: none;
}
.m-card-h .more:hover { color: var(--pri); }

/* ---------- 统计块 ---------- */
.m-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.m-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.m-stat .n {
  font-size: 26px; font-weight: 600; line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.m-stat .t { margin-top: 4px; font-size: 12.5px; color: var(--fg3); }
.m-stat.hot .n { color: var(--pri); }
.m-stat.warn .n { color: var(--warn); }

/* ---------- 权益余量条 ---------- */
.m-ents { display: flex; flex-direction: column; gap: 12px; }
.m-ent { display: flex; flex-direction: column; gap: 6px; }
.m-ent-top {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
}
.m-ent-name { font-weight: 500; color: var(--fg); }
.m-ent-left {
  margin-left: auto;
  font-size: 12.5px; color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
.m-ent-left b { color: var(--fg); font-weight: 600; }
.m-ent-bar {
  height: 6px; border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.m-ent-bar i {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--pri);
  transition: width .3s;
}
.m-ent.low .m-ent-bar i { background: var(--warn); }
.m-ent.out .m-ent-bar i { background: var(--bad); }
.m-ent.low .m-ent-left b { color: var(--warn); }
.m-ent.out .m-ent-left b { color: var(--bad); }
.m-ent.unlimited .m-ent-bar { display: none; }
.m-ent.unlimited .m-ent-left { color: var(--ok); }

/* ---------- 提醒条 ---------- */
.m-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.6;
  margin-bottom: 12px;
}
.m-alert .ic { flex: 0 0 auto; margin-top: 1px; }
.m-alert b { font-weight: 600; }
/* 底 / 边色跟随语义色：白天夜间自动一致 */
.m-alert.warn {
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-color: color-mix(in srgb, var(--warn) 24%, transparent);
  color: var(--warn);
}
.m-alert.ok {
  background: color-mix(in srgb, var(--ok) 9%, transparent);
  border-color: color-mix(in srgb, var(--ok) 24%, transparent);
  color: var(--ok);
}
.m-alert.info {
  background: color-mix(in srgb, var(--pri) 8%, transparent);
  border-color: color-mix(in srgb, var(--pri) 24%, transparent);
  color: var(--pri);
}
.m-alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ---------- 场景卡（协作广场） ---------- */
.m-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.m-scene {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.m-scene:hover { border-color: var(--pri); transform: translateY(-1px); }
.m-scene-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m-scene-h .ic { color: var(--pri); }
.m-scene-h b { font-size: 15px; font-weight: 600; color: var(--fg); }
.m-scene p { margin: 0; font-size: 12.5px; color: var(--fg3); line-height: 1.6; }

/* ---------- 身份卡（我是谁） ---------- */
.m-caps { display: flex; flex-direction: column; gap: 12px; }
.m-cap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.m-cap.primary { border-color: var(--pri); }
.m-cap-h {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.m-cap-h b { font-size: 15px; font-weight: 600; color: var(--fg); }
.m-cap-badge {
  font-size: 10.5px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--pri); color: var(--pri-fg);
}
.m-cap ul { margin: 0; padding-left: 18px; }
.m-cap li {
  font-size: 12.5px; color: var(--fg2);
  line-height: 1.85;
}

/* ---------- 徽章组 ---------- */
.m-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.m-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--side);
  border: 1px solid var(--line);
  font-size: 12px; color: var(--fg2);
}
.m-badge.on { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); }
.m-badge .ic { width: 13px; height: 13px; }

/* ---------- 列表行 ---------- */
.m-rows { display: flex; flex-direction: column; }
.m-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.m-row:last-child { border-bottom: 0; }
.m-row-main { flex: 1; min-width: 0; }
.m-row-t {
  font-size: 13.5px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-row-s {
  margin-top: 3px;
  font-size: 12px; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-row-end {
  flex: 0 0 auto; text-align: right;
  font-size: 12.5px; color: var(--fg3);
}
.m-row-end b { display: block; color: var(--fg); font-weight: 600; }

/* ---------- 状态点 ---------- */
.m-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px;
  background: var(--fg3);
  vertical-align: 1px;
}
.m-dot.ok { background: var(--ok); }
.m-dot.warn { background: var(--warn); }
.m-dot.bad { background: var(--bad); }
.m-dot.run { background: var(--pri); }

/* ---------- 空态 ---------- */
.m-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg3);
  font-size: 13px;
}
.m-empty .ic { width: 34px; height: 34px; opacity: .35; margin-bottom: 10px; }
.m-empty p { margin: 0 0 4px; }
.m-empty .sub { font-size: 12px; opacity: .8; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .m-stats { grid-template-columns: repeat(2, 1fr); }
  .m-scenes { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .m-stats { grid-template-columns: 1fr 1fr; }
  .m-stat .n { font-size: 22px; }
}

/* ---------- 明暗切换按钮（右下角圆形，口径同门户 .ptog） ---------- */
.m-tog {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(20, 30, 60, .10);
  background: rgba(255, 255, 255, .6);
  color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(20, 30, 60, .14);
  transition: .15s;
}
.m-tog:hover {
  border-color: var(--orange-200);
  color: var(--orange);
  background: rgba(255, 255, 255, .85);
}
[data-theme="dark"] .m-tog {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--ink-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
[data-theme="dark"] .m-tog:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--orange-lt);
  color: var(--orange-lt);
}
.m-tog .ic { width: 18px; height: 18px; }
.m-tog .moon { display: none; }
[data-theme="dark"] .m-tog .sun { display: none; }
[data-theme="dark"] .m-tog .moon { display: block; }