/**
 * 前台会员区：/login 与 /me/*。跟在 web.css 后面加载（见 Views/web/parts/head.php）。
 *
 * 这几页的内容由 mb-user.js 填，所以这份样式要同时管两种状态：
 * **首屏那句「正在加载…」** 和 **脚本填完之后的样子**。
 * 机构卡片沿用 web.css 里的 .clinic*（JS 生成的 DOM 用的是同一批类名），
 * 这里只写会员区独有的部分。
 *
 * 规矩同 web.css：颜色/字号/圆角一律走 tokens.css 的变量，别写死值。
 */

/* ---------- 身份卡 ---------- */
/* 比页面底色深一档的一层淡紫，跟首页顶部同一套处理，不压深色块 */
.mb-me {
  background: linear-gradient(150deg, #e6ddf9 0%, #f1ebfd 58%, #faf7ff 100%);
  box-shadow: 0 4px 14px rgba(110, 78, 184, .1);
}
.mb-me__who { display: flex; align-items: center; gap: var(--mb-gap); }
/* 白圈把头像从紫底上托出来，浅色头像也不会糊进背景 */
.mb-me__avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; background: #fff; padding: 2px;
}
.mb-me__text { min-width: 0; }
.mb-me__name { font-size: var(--mb-font-xl); font-weight: 600; }
.mb-me__hint { margin-top: 3px; font-size: var(--mb-font-md); color: var(--mb-sub); line-height: 1.5; }
.mb-me .btn { margin-top: var(--mb-gap); }

/* 把菜单切成几段的小标题 */
.mb-group {
  padding: var(--mb-gap-lg) var(--mb-gap-sm) var(--mb-gap-sm);
  font-size: var(--mb-font-sm); color: var(--mb-muted); letter-spacing: .5px;
}

/* ---------- 菜单 ---------- */
.mb-menu { padding: 0 var(--mb-gap-lg); }
.mb-cell {
  display: flex; align-items: center; gap: var(--mb-gap);
  padding: 13px 0; border-bottom: 1px solid var(--mb-line);
  color: var(--mb-text); font-size: var(--mb-font-base);
}
.mb-cell:last-child { border-bottom: 0; }
.mb-cell:hover { color: var(--mb-brand-ink); }
.mb-cell__icon { flex-shrink: 0; display: flex; color: var(--mb-brand-ink); }
.mb-cell__label { flex: 1; min-width: 0; }
.mb-cell__arrow { flex-shrink: 0; color: #c9c9c2; font-size: var(--mb-font-lg); }

/* ---------- 通用行列表（预约 / 点评 / 消息）---------- */
/* 机构卡片有 .clinic* 那一套；这三样不是机构，是「一条记录」，所以另给一套 */
.mb-rows {
  margin: 0; list-style: none;
  background: var(--mb-card); border-radius: var(--mb-radius-card);
  box-shadow: var(--mb-shadow); padding: 0 var(--mb-gap-lg);
}
.mb-row { padding: var(--mb-gap) 0; border-bottom: 1px solid var(--mb-line); }
.mb-row:last-child { border-bottom: 0; }
.mb-row__head { display: flex; align-items: baseline; gap: var(--mb-gap-sm); }
.mb-row__title {
  flex: 1; min-width: 0; font-size: var(--mb-font-base); font-weight: 500;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
a.mb-row__title { color: var(--mb-text); }
a.mb-row__title:hover { color: var(--mb-brand-ink); }
/* 阶段徽标。走到底的三个阶段（完成 / 取消 / 关闭）换灰色：
   一列全是紫色徽标时，「还在处理」和「已经结束」看着一样 */
.mb-row__stage {
  flex-shrink: 0; padding: 2px 9px; border-radius: var(--mb-radius-pill);
  background: var(--mb-brand-soft); color: var(--mb-brand-ink); font-size: var(--mb-font-sm);
}
.mb-row__stage.is-done { background: var(--mb-fill); color: var(--mb-muted); }
.mb-row__meta { margin-top: 5px; font-size: var(--mb-font-sm); color: var(--mb-muted); }
.mb-row__body {
  margin-top: 5px; font-size: var(--mb-font-md); color: var(--mb-sub); line-height: 1.65;
}
/* 未读消息左边一道主色竖线。负边距让它贴到卡片边缘上 */
.mb-row.is-unread {
  margin: 0 calc(var(--mb-gap-lg) * -1); padding-left: calc(var(--mb-gap-lg) - 3px);
  padding-right: var(--mb-gap-lg); border-left: 3px solid var(--mb-brand);
}

/* ---------- 列表顶上那条（浏览记录的「共 N 家 / 清空」）---------- */
.mb-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mb-gap); margin-bottom: var(--mb-gap);
}
.mb-bar__count { font-size: var(--mb-font-md); color: var(--mb-muted); }
.mb-bar__act {
  border: 0; cursor: pointer; background: transparent;
  color: var(--mb-brand-ink); font: var(--mb-font-md)/1.4 var(--mb-font-family);
}
.mb-bar__act:hover { text-decoration: underline; }