/**
 * 会员中心 / 我的案例 SPA 专属样式
 * 仅新增布局类，复用 style.css 的设计变量与 .form-input/.btn-paipan/.form-card 等组件类。
 * 不修改 style.css（冻结）。
 */
.mem-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 8px;
}
.mem-sidebar {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 14px 10px;
  position: sticky;
  top: 16px;
}
.mem-sidebar .mem-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.mem-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; overflow: hidden; flex-shrink: 0;
}
.mem-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mem-user .mem-uname { color: var(--text); font-weight: 600; font-size: 14px; }
.mem-user .mem-ulevel { color: var(--gold); font-size: 12px; }
.mem-nav-item {
  display: block;
  padding: 11px 14px;
  margin: 4px 0;
  border-radius: 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.mem-nav-item:hover { color: var(--text); background: rgba(201,168,76,0.06); }
.mem-nav-item.active {
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border-color: var(--gold-dim);
  font-weight: 600;
}
.mem-nav-item.logout { color: var(--danger); }

.mem-main { min-width: 0; }
.mem-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 22px;
  margin-bottom: 16px;
}
.mem-card-title {
  font-size: 16px; font-weight: 700; color: var(--gold);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: "STKaiti","KaiTi",serif; letter-spacing: 2px;
}
.cs-limit-tip { font-size: 12px; color: var(--text-muted); margin: -6px 0 12px; }

/* 套餐卡片 */
.mem-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mem-plan {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  position: relative;
  transition: all 0.2s;
}
.mem-plan.featured { border-color: var(--gold); box-shadow: 0 0 20px rgba(201,168,76,0.15); }
.mem-plan .plan-name { font-size: 18px; color: var(--text); font-weight: 700; }
.mem-plan .plan-price { font-size: 30px; color: var(--gold); font-weight: 700; margin: 12px 0 4px; font-family: "Consolas",monospace; }
.mem-plan .plan-price small { font-size: 13px; color: var(--text-dim); font-weight: 400; }
.mem-plan .plan-tag { position:absolute; top:12px; right:12px; font-size:11px; color:#1a1a1a; background:var(--gold); padding:2px 8px; border-radius:10px; }
.mem-plan ul { list-style: none; margin: 12px 0 18px; flex: 1; }
.mem-plan li { font-size: 13px; color: var(--text-dim); padding: 6px 0; border-bottom: 1px dashed var(--border); }
.mem-plan li::before { content: "·"; color: var(--gold); margin-right: 8px; font-weight: 700; }

/* 我的案例列表 */
.mem-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.mem-toolbar .form-input { margin-bottom: 0; flex: 1; min-width: 180px; }
.mem-case-list { display: flex; flex-direction: column; gap: 12px; }
.mem-case-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: all 0.15s;
}
.mem-case-item:hover { border-color: var(--gold-dim); }
.mem-case-main { min-width: 0; }
.mem-case-title { font-size: 16px; color: var(--text); font-weight: 600; }
.mem-case-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.mem-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.mem-tag { font-size: 11px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 10px; padding: 1px 8px; }
.mem-case-ops { display: flex; gap: 8px; flex-shrink: 0; }
.mem-btn {
  padding: 7px 14px; font-size: 13px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.mem-btn:hover { border-color: var(--gold); color: var(--gold); }
.mem-btn.primary { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; }
.mem-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.mem-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; }
.mem-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.mem-empty .ic { font-size: 40px; opacity: 0.4; margin-bottom: 10px; }

/* 订单 */
.mem-order-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; display:flex; justify-content: space-between; align-items:center; gap:12px; flex-wrap: wrap;}
.mem-order-item .o-plan { color: var(--text); font-weight: 600; }
.mem-order-item .o-meta { font-size: 12px; color: var(--text-dim); }
.mem-badge { font-size: 11px; padding: 2px 10px; border-radius: 10px; }
.mem-badge.paid { color: var(--success); border: 1px solid var(--success); }
.mem-badge.pending { color: var(--gold); border: 1px solid var(--gold-dim); }
.mem-badge.expired { color: var(--text-muted); border: 1px solid var(--border); }

/* 资料表单 */
.mem-form-row { max-width: 420px; }
.mem-level-box { display:flex; align-items:center; gap:12px; }
.mem-level-pill { font-size:13px; color:var(--gold); border:1px solid var(--gold); border-radius:12px; padding:3px 14px; }
.mem-hint { font-size:12px; color: var(--text-muted); margin-top:8px; }
.mem-row2 { display:flex; gap:10px; flex-wrap:wrap; }
.mem-row2 .form-input { flex:1; min-width:160px; }

/* 我的案例 — 卡片视图（参考图风格：浅色卡 + 金色圆 + 生肖大圆 + 三点菜单） */
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.case-card {
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
  background: #ffffff;
  border: 1px solid #e7e2d4;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: box-shadow 0.18s, transform 0.18s;
}
.case-card:hover { box-shadow: 0 6px 18px rgba(201,168,76,0.25); transform: translateY(-1px); }
.case-card-info { flex: 1; min-width: 0; cursor: pointer; }
.case-head { display: flex; align-items: baseline; gap: 8px; }
.case-name { font-size: 18px; font-weight: 700; color: #1f1f1f; font-family: "STKaiti","KaiTi",serif; }
.case-gender { font-size: 13px; color: #999; }
.case-meta-line { font-size: 13px; color: #888; margin-top: 4px; }
.case-sizhu { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.case-sizhu-row { display: flex; gap: 8px; }
.case-pill {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(145deg, #d8b658, #b8893b);
  color: #2a1d05; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.2);
  flex: 0 0 auto;
}
.case-card-right { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.case-sx {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2f1a, #15110a);
  color: #f2d27a; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.case-ops { position: relative; }
.case-dots {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: transparent; color: #bbb; font-size: 20px; line-height: 1; cursor: pointer;
}
.case-dots:hover { background: #f0ede4; color: #888; }
.case-menu {
  position: absolute; right: 0; top: 34px; z-index: 20;
  background: #fff; border: 1px solid #e7e2d4; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2); overflow: hidden; min-width: 96px;
}
.case-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 14px;
  background: transparent; border: none; cursor: pointer; font-size: 13px; color: #555;
  font-family: inherit;
}
.case-menu-item:hover { background: #f7f3e8; color: #b8893b; }
.case-menu-item.danger:hover { color: #c0392b; }

@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mem-layout { grid-template-columns: 1fr; }
  .mem-sidebar { position: static; }
  .mem-plans { grid-template-columns: 1fr; }
  .case-pill { width: 34px; height: 34px; font-size: 15px; }
  .case-sx { width: 54px; height: 54px; font-size: 28px; }
}