/* ============================================================
   前台会员系统样式 —— 复用 tokens.css / app.css 设计语言
   仅承载本模块（登录/注册/会员中心/会员权益）专属布局
   ============================================================ */

/* —— 认证页（登录 / 注册）居中卡片 —— */
.auth-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4);
}
.auth-card { padding: var(--sp-6) var(--sp-5); }
.auth-head { text-align: center; margin-bottom: var(--sp-5); }
.auth-head .seal {
  width: 46px; height: 46px; margin: 0 auto var(--sp-3); border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--c-primary), var(--c-primary-deep));
  color: #fff; font-size: 24px; font-family: var(--font-serif);
  box-shadow: inset 0 0 0 1.5px var(--c-gold-light), var(--shadow-sm);
}
.auth-head h1 { font-size: var(--t-h1); font-family: var(--font-serif); margin: 0 0 4px; }
.auth-head p { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0; }

.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--t-sm); color: var(--c-ink-2); margin-bottom: 6px; font-weight: 500; }
.field input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-body);
  padding: 11px 13px; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  transition: border-color .16s, box-shadow .16s;
}
.field input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.field .hint { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 5px; }
.field .err { font-size: var(--t-xs); color: var(--c-danger); margin-top: 5px; }
.field.has-error input { border-color: var(--c-danger); }

.auth-alert {
  background: #fff; border: 1px solid rgba(192,57,43,.35); color: var(--c-danger);
  border-radius: var(--radius); padding: 10px 13px; font-size: var(--t-sm); margin-bottom: var(--sp-4);
}
.auth-alert ul { margin: 0; padding-left: 18px; }
.auth-ok {
  background: rgba(46,125,50,.10); border: 1px solid rgba(46,125,50,.3); color: var(--c-success);
  border-radius: var(--radius); padding: 10px 13px; font-size: var(--t-sm); margin-bottom: var(--sp-4);
}

.auth-foot { text-align: center; margin-top: var(--sp-5); font-size: var(--t-sm); color: var(--c-ink-3); }
.auth-foot a { color: var(--c-primary); font-weight: 500; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); font-size: var(--t-sm); }
.auth-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink-2); }

/* —— 会员等级徽章 —— */
.lv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: 700; font-family: var(--font-serif);
}
.lv-normal { background: #f3efe6; color: var(--c-ink-2); border: 1px solid var(--c-line); }
.lv-vip { background: rgba(201,154,46,.14); color: var(--c-gold); border: 1px solid rgba(201,154,46,.35); }
.lv-svip { background: linear-gradient(160deg, var(--c-gold-light), var(--c-gold)); color: #4a3403; border: 1px solid var(--c-gold); }

/* —— 会员中心 —— */
.mc-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.mc-avatar {
  width: 72px; height: 72px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, var(--c-primary-soft), #fff);
  color: var(--c-primary-deep); font-size: 30px; font-family: var(--font-serif); font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--c-gold-light);
}
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-id { flex: 1; min-width: 180px; }
.mc-id h1 { font-size: var(--t-h1); font-family: var(--font-serif); margin: 0 0 4px; }
.mc-id .uname { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0 0 8px; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--t-sm); color: var(--c-ink-2); margin-top: 6px; }
.mc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 640px) { .mc-grid { grid-template-columns: 1fr; } }
.mc-block-empty {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-ink-3);
  font-size: var(--t-sm); background: var(--c-paper); border: 1px dashed var(--c-line);
  border-radius: var(--radius);
}

/* —— 会员权益对比表 —— */
.vip-hero { text-align: center; margin-bottom: var(--sp-6); }
.vip-hero h1 { font-size: var(--t-hero); font-family: var(--font-serif); margin: 0 0 8px; }
.vip-hero p { color: var(--c-ink-2); margin: 0; }

.vip-table { width: 100%; border-collapse: collapse; overflow: hidden; }
.vip-table th, .vip-table td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--c-line); font-size: var(--t-sm); }
.vip-table thead th { font-family: var(--font-serif); font-size: var(--t-body); background: var(--c-paper); }
.vip-table tbody th { text-align: left; color: var(--c-ink-2); font-weight: 500; }
.vip-table .col-svip { background: rgba(201,154,46,.06); }
.vip-table .ok { color: var(--c-success); font-weight: 700; }
.vip-table .no { color: var(--c-ink-3); }
.vip-price { font-family: var(--font-serif); font-weight: 900; color: var(--c-primary); font-size: 18px; }
.vip-price small { font-weight: 400; color: var(--c-ink-3); font-size: var(--t-xs); }
.vip-note { text-align: center; color: var(--c-ink-3); font-size: var(--t-xs); margin-top: var(--sp-5); }
.vip-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }

.vip-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 760px) { .vip-perks { grid-template-columns: 1fr; } }
.vip-perk { padding: var(--sp-4); text-align: center; }
.vip-perk .ico { font-size: 26px; }
.vip-perk h3 { font-size: var(--t-h2); font-family: var(--font-serif); margin: 8px 0 6px; }
.vip-perk p { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0; }

/* —— 验证码输入行（输入框 + 获取验证码按钮）—— */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1; }
.code-row .btn { flex: none; white-space: nowrap; padding: 0 14px; font-size: var(--t-sm); }
.code-row .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* —— 第三方登录 / 社交账号按钮 —— */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-4); color: var(--c-ink-3); font-size: var(--t-xs);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--c-line);
}
.social-row { display: flex; justify-content: center; gap: var(--sp-5); }
.social-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: var(--t-xs); color: var(--c-ink-2); transition: transform .16s;
}
.social-btn:hover { transform: translateY(-2px); }
.social-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; font-family: var(--font-serif); font-weight: 700; color: #fff;
  box-shadow: var(--shadow-sm); border: 1.5px solid rgba(255,255,255,.5);
}
.social-qq     { background: linear-gradient(160deg, #4eaaff, #1e7fe0); }
.social-weixin { background: linear-gradient(160deg, #4ec27a, #1aad19); }
.social-taobao { background: linear-gradient(160deg, #ff8a3c, #ff5000); }
.social-weibo  { background: linear-gradient(160deg, #ff8aa0, #e6162d); }
.social-xhs    { background: linear-gradient(160deg, #ff6b81, #ff2442); }

/* —— 积分卡 —— */
.pts-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5);
  background: linear-gradient(150deg, var(--c-primary-soft), #fff 70%);
  border: 1px solid rgba(192,57,43,.18);
}
.pts-num { flex: none; text-align: center; min-width: 150px; }
.pts-num .n {
  font-family: var(--font-serif); font-weight: 900; color: var(--c-primary-deep);
  font-size: clamp(36px, 8vw, 52px); line-height: 1; display: block;
}
.pts-num .lbl { color: var(--c-ink-3); font-size: var(--t-sm); margin-top: 6px; display: block; }
.pts-acts { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 220px; }
.pts-acts .btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
.pts-streak { font-size: var(--t-xs); color: var(--c-gold); font-weight: 700; }

/* —— 邀请区 —— */
.invite-box { display: flex; flex-direction: column; gap: var(--sp-3); }
.invite-link {
  display: flex; gap: 8px; align-items: stretch;
}
.invite-link input {
  flex: 1; box-sizing: border-box; font: inherit; font-size: var(--t-sm);
  padding: 9px 12px; color: var(--c-ink-2);
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.invite-stat { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--c-ink-2); }
.invite-stat b { color: var(--c-primary); font-family: var(--font-serif); }

/* —— 积分明细表 —— */
.pts-log { width: 100%; border-collapse: collapse; }
.pts-log th, .pts-log td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--c-line); font-size: var(--t-sm); }
.pts-log thead th { color: var(--c-ink-3); font-weight: 500; font-size: var(--t-xs); }
.pts-log td.amt { text-align: right; font-family: var(--font-serif); font-weight: 700; }
.pts-log td.amt.plus { color: var(--c-success); }
.pts-log td.amt.minus { color: var(--c-danger); }
.pts-log td.time { color: var(--c-ink-3); text-align: right; white-space: nowrap; }

/* —— 账号设置：分区表单 —— */
.set-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.set-sec .panel-bd { padding: var(--sp-5); }
.set-sec form { max-width: 460px; }
.set-sec .field:last-of-type { margin-bottom: var(--sp-4); }
.set-sec .sub { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0 0 var(--sp-4); }

/* —— 第三方绑定列表 —— */
.bind-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bind-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-paper);
}
.bind-item .social-ico { width: 38px; height: 38px; font-size: 17px; }
.bind-item .bind-info { flex: 1; min-width: 0; }
.bind-item .bind-info .name { font-weight: 500; font-size: var(--t-body); }
.bind-item .bind-info .st { font-size: var(--t-xs); color: var(--c-ink-3); }
.unbind-form { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line, #e5e5e5); }
.unbind-form.unbind-inline { margin-top: 0; padding-top: 0; border-top: 0; }
.unbind-inline .unbind-row { flex-wrap: wrap; justify-content: flex-end; }
.unbind-inline .unbind-row input[name="code"] { max-width: 110px; }
.bind-item .bind-info .st.on { color: var(--c-success); }

/* 邀请海报 */
.ip-modal .ip-bd { background:#fff; border-radius:14px; padding:16px; max-width:360px; text-align:center; }
.ip-modal .ip-img { width:100%; max-width:320px; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.ip-modal .ip-hint { margin:10px 0 6px; font-size:13px; color:#8a7350; }
.ip-modal .ip-acts { display:flex; gap:8px; justify-content:center; margin-top:8px; }