/* ==========================================================
   v2.1 S6 · 会员中心样式
   ========================================================== */
.member-app { max-width: 1080px; margin: 0 auto; padding: 20px 20px 36px; position: relative; z-index: 1; }
.member-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.member-top h1 { font-size: 20px; font-weight: 900; letter-spacing: 1px; margin: 0; }
.member-top .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.back-btn {
  width: 40px; height: 40px; border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  display: grid; place-items: center; color: var(--text);
}
.back-btn:hover { background: #fff; }
.toolbar { display: flex; gap: 8px; }

.guest-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.guest-cta-left { display: flex; align-items: center; gap: 18px; }
.big-avatar {
  width: 72px; height: 72px; border-radius: 24px;
  background: linear-gradient(135deg, #ffd6ec, #d3dcff);
  display: grid; place-items: center;
  font-size: 32px; font-weight: 900; color: #6f529c;
}
.guest-cta h2 { font-size: 18px; font-weight: 800; }

/* ---- Profile Card ---- */
.profile-card { padding: 24px; margin-bottom: 24px; }
.profile-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar-big {
  width: 88px; height: 88px; border-radius: 28px;
  background: linear-gradient(135deg, #ffe29c, #ff9faa 55%, #b79dff);
  display: grid; place-items: center;
  color: #fff; font-size: 34px; font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(255, 159, 170, .25);
  flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 260px; }
.uname-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uname-row h2 { font-size: 22px; font-weight: 900; margin: 0; }
.lv-badge {
  padding: 4px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .3px;
}
.lv-badge.lvl-1 { background: linear-gradient(135deg, #e5e7ee, #cfd3de); color: #424658; }
.lv-badge.lvl-2 { background: linear-gradient(135deg, #e5eefb, #cfdbf0); color: #1f4477; }
.lv-badge.lvl-3 { background: linear-gradient(135deg, #fff4c9, #ffd770); color: #6a4300; }
.lv-badge.lvl-4 { background: linear-gradient(135deg, #ffe2f3, #e5c8ff); color: #7239b6; }
.lv-badge.lvl-5 { background: linear-gradient(135deg, #ffe29c, #ff9faa 50%, #b79dff); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.hist { background: rgba(183,157,255,.15); color: #6340b5; border: 1px solid rgba(183,157,255,.3); }

.points-row {
  display: flex; align-items: baseline; gap: 16px; margin: 10px 0 8px; flex-wrap: wrap;
}
.pts-big { font-size: 30px; font-weight: 900; color: var(--accent); line-height: 1; }
.pts-big small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.next-thr { font-size: 12.5px; color: var(--muted); }
.progress-bar {
  height: 10px; width: 100%;
  background: rgba(138, 143, 163, .12);
  border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

/* ---- 特权矩阵 ---- */
.privs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-top: 22px;
}
.priv-card {
  padding: 14px 16px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.priv-card .icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(138, 143, 163, .1);
  display: grid; place-items: center; font-size: 18px;
}
.priv-card .body b { font-size: 13px; font-weight: 800; display: block; }
.priv-card .body span { font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; }
.priv-card.unlocked {
  border-color: rgba(53, 199, 118, .35);
  background: rgba(216, 246, 225, .55);
}
.priv-card.unlocked .icon { background: #cff4da; color: #1f7a42; }
.priv-card.locked { opacity: .78; filter: saturate(.6); }
.priv-card.locked .icon { color: var(--muted); }

/* ---- 等级对照表 ---- */
.levels-card, .tx-card { padding: 20px 22px; margin-bottom: 24px; }
.level-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.level-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255,255,255,.45);
}
.level-item.cur {
  background: linear-gradient(135deg, rgba(255, 190, 92, .2), rgba(183,157,255,.18));
  border: 1px solid rgba(255, 190, 92, .38);
}
.lv-chip-lg {
  min-width: 92px; text-align: center;
  padding: 7px 10px; border-radius: 14px; font-weight: 900; font-size: 14px;
}
.lv-chip-lg.lvl-1 { background: #eef0f6; color: #44485a; }
.lv-chip-lg.lvl-2 { background: #dfe9fc; color: #1e4780; }
.lv-chip-lg.lvl-3 { background: #fff2c9; color: #6f4500; }
.lv-chip-lg.lvl-4 { background: #ffe5f2; color: #7a319f; }
.lv-chip-lg.lvl-5 { background: linear-gradient(135deg,#ffe29c,#ff9faa 60%,#b79dff); color: #fff; }
.level-item .lv-name { font-weight: 800; font-size: 14.5px; min-width: 64px; }
.level-item .lv-thr { color: var(--muted); font-size: 12.5px; min-width: 100px; }
.level-item .lv-priv { font-size: 12px; color: #4c516a; flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.level-item .lv-priv span {
  background: rgba(95,124,255,.12);
  color: #29427a;
  padding: 2.5px 9px; border-radius: 999px;
  font-weight: 700; font-size: 11.5px;
}
.level-item .lv-status {
  font-size: 11.5px; font-weight: 800; color: #fff;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(138, 143, 163, .35);
}
.level-item.cur .lv-status { background: #35c776; }
.level-item.past .lv-status { background: rgba(138, 143, 163, .25); color: #5a5f73; }

/* ---- 流水表 ---- */
.tx-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mini-select {
  border: 1px solid rgba(138,143,163,.22);
  background: rgba(255,255,255,.6);
  border-radius: 12px; padding: 6px 10px; font-size: 12.5px;
  font-weight: 700; color: var(--text);
}
.tx-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.tx-table th, .tx-table td { padding: 10px 12px; text-align: left; border-bottom: 1px dashed rgba(138,143,163,.15); }
.tx-table th { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.tx-table td.loading, .tx-table td.empty { text-align: center; color: var(--muted); padding: 18px 0; }
.delta-pos { color: #1f7a42; font-weight: 800; }
.delta-neg { color: #9a2d2d; font-weight: 800; }
.bal { font-weight: 700; color: #4a4e68; }
.reason-tag {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  background: rgba(95,124,255,.12); color: #29427a;
  font-weight: 700; font-size: 11.5px;
}
.tx-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.mini-btn[disabled] { opacity: .4; cursor: not-allowed; }

.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }