/* 会员中心新板块样式（账户余额 / 会员等级 / 我的店铺 / 个人信息 / 安全设置） */
.acct-badge.tier { background: #2a6b4a; color: #fff; }
.acct-badge.wallet { background: #e3c573; color: #123f2b; }
.acct-badge.shop { background: #46b39a; color: #fff; }

.acct-panel { background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; padding: 18px; }
.acct-panel + .acct-panel { margin-top: 14px; }
.acct-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.acct-sec-head h3 { margin: 0; font-size: 15px; color: #12241a; }
.acct-sec-head h3.danger { color: #b3402f; }
.acct-note { font-size: 12.5px; color: #6b7d72; line-height: 1.6; margin: 8px 0 0; }
.acct-note.danger { color: #b3402f; }

/* 余额 */
.acct-wallet-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.acct-wallet-bal { flex: 1 1 180px; background: #f4f9f5; border-radius: 12px; padding: 16px; }
.acct-wallet-bal span { display: block; font-size: 12.5px; color: #6b7d72; }
.acct-wallet-bal b { display: block; font-size: 30px; color: #2a6b4a; margin-top: 4px; }
.acct-topup { flex: 1 1 240px; }
.acct-topup label { display: block; font-size: 12.5px; color: #6b7d72; margin-bottom: 6px; }
.acct-quick { display: flex; gap: 8px; margin-top: 8px; }
.acct-amt { font-weight: 600; white-space: nowrap; }
.acct-amt.plus { color: #2a6b4a; }
.acct-amt.minus { color: #b3402f; }

/* 会员等级 */
.acct-member-top { display: flex; flex-wrap: wrap; gap: 18px; }
.acct-member-card { flex: 0 0 190px; border-radius: 12px; padding: 16px; background: #f4f9f5; border: 1px solid #dfe9e1; }
.acct-member-card.lv2 { background: #eef2f6; }
.acct-member-card.lv3 { background: #fdf6e3; }
.acct-member-card.lv4 { background: #f3ecf7; }
.acct-member-card span { font-size: 12.5px; color: #6b7d72; }
.acct-member-card b { display: block; font-size: 19px; color: #12241a; margin: 4px 0; }
.acct-member-card small { color: #2a6b4a; font-weight: 600; }
.acct-member-pts { flex: 1 1 220px; }
.acct-member-pts > span { font-size: 12.5px; color: #6b7d72; }
.acct-member-pts > b { display: block; font-size: 26px; color: #2a6b4a; }
.acct-bar { height: 8px; background: #e8f2ea; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.acct-bar i { display: block; height: 100%; background: #3f8b63; }
.acct-perks { margin: 0; padding-left: 18px; color: #12241a; font-size: 13.5px; line-height: 1.9; }
.acct-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.acct-tier { border: 1px solid #dfe9e1; border-radius: 10px; padding: 10px 12px; }
.acct-tier.cur { border-color: #3f8b63; background: #f4f9f5; }
.acct-tier b { display: block; font-size: 13.5px; color: #12241a; }
.acct-tier small { color: #6b7d72; font-size: 12px; }

/* 店铺 */
.acct-shop-card { background: #f4f9f5; border: 1px solid #dfe9e1; border-radius: 12px; padding: 14px; }
.acct-shop-card b { display: block; font-size: 17px; color: #12241a; }
.acct-shop-card small { display: block; color: #6b7d72; margin-top: 2px; }
.acct-shop-meta { margin-top: 8px; font-size: 12.5px; color: #6b7d72; }

/* 表单 */
.acct-form .field { margin-bottom: 12px; }
.acct-form .btn { width: auto; }
.btn.cream.danger, .btn-cream.danger { color: #b3402f; }

/* #register 锚点滚动补偿（吸顶栏高度） */
.acct-guest { scroll-margin-top: 84px; }

/* ---- 密码框「显示/隐藏」眼睛图标（pw-eye.js） ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input[type="password"],
.pw-wrap > input[type="text"] { padding-right: 42px !important; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: #6b6359; cursor: pointer; transition: color .15s, background .15s;
}
.pw-eye:hover { color: #0d3221; background: rgba(13,50,33,.07); }
.pw-eye:focus-visible { outline: 2px solid rgba(63,139,99,.5); outline-offset: 1px; }
.pw-eye svg { display: block; pointer-events: none; }

/* ============ 新增：顶栏登录态 + 演示验证码 + 新增会员模块 ============ */
/* 顶栏 Membership 入口：登录后显示昵称 + 头像 */
.acct-ava-mini { width: 22px; height: 22px; border-radius: 999px; background: #0d3221; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 6px; line-height: 1; }
.acct-btn.is-in { color: #2a6b4a; }
.acct-btn.is-in svg { display: none; }

/* 演示验证码高亮（Resend 测试模式无法投递，直接展示） */
.auth-dev { color: #8a6a17; font-size: 13px; font-weight: 600; margin: 4px 0 12px; background: #fdf6e7;
  border: 1px dashed #e8d7a8; border-radius: 10px; padding: 8px 12px; letter-spacing: .04em; }
.auth-dev::before { content: "🔑 "; }

/* 未登录引导 */
.acct-guest-intro { margin: -6px 0 14px; color: #6b7d72; font-size: 14px; line-height: 1.6; }

/* 卡片操作行 */
.acct-card-acts { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.acct-card-acts .btn { flex: 0 0 auto; }

/* 收藏 / 心愿单 / 最近浏览网格细化 */
.acct-grid .acct-card { display: flex; flex-direction: column; }
.acct-grid .acct-card-body { display: flex; flex-direction: column; flex: 1; }

/* 邀请有礼 */
.acct-refer-card { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #f4f9f5, #eaf3ee);
  border: 1px solid #dfe9e1; border-radius: 16px; padding: 18px 20px; margin-bottom: 6px; }
.acct-refer-ico { font-size: 30px; }
.acct-refer-card b { display: block; font-size: 17px; color: #12241a; }
.acct-refer-card small { display: block; color: #6b7d72; margin-top: 3px; line-height: 1.5; }

/* 成就徽章 */
.acct-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.acct-badge-cell { background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; padding: 16px 14px; text-align: center; }
.acct-badge-ico { font-size: 30px; display: block; margin-bottom: 8px; }
.acct-badge-cell b { display: block; font-size: 14.5px; color: #12241a; }
.acct-badge-cell small { display: block; color: #6b7d72; font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* 成长值时间线 */
.acct-timeline { position: relative; padding-left: 22px; }
.acct-tl-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e8f0ea; }
.acct-tl-row:last-child { border-bottom: 0; }
.acct-tl-dot { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 999px; background: #cfe3d8; }
.acct-tl-dot.plus { background: #3f8b63; }
.acct-tl-dot.minus { background: #b3402f; }
.acct-tl-body { flex: 1; min-width: 0; }
.acct-tl-body b { display: block; font-size: 14px; color: #12241a; }
.acct-tl-body small { color: #6b7d72; font-size: 12px; }
.acct-tl-amt { font-weight: 700; white-space: nowrap; }
.acct-tl-amt.plus { color: #2a6b4a; } .acct-tl-amt.minus { color: #b3402f; }

/* 优惠券 */
.acct-coupons { display: grid; gap: 12px; }
.acct-coupon { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; padding: 14px 16px; position: relative; }
.acct-coupon::before, .acct-coupon::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 999px; background: #f4f9f5; }
.acct-coupon::before { left: -7px; } .acct-coupon::after { right: -7px; }
.acct-coupon-amt { flex: 0 0 72px; text-align: center; font-size: 20px; font-weight: 700; color: #0d3221; border-right: 1px dashed #e0e8e2; padding-right: 12px; }
.acct-coupon-body { flex: 1; min-width: 0; }
.acct-coupon-body b { display: block; font-size: 14.5px; color: #12241a; }
.acct-coupon-body small { display: block; color: #6b7d72; font-size: 12px; margin-top: 2px; }
.acct-coupon.used { opacity: .6; }
.acct-coupon.used .acct-coupon-amt { color: #6b7d72; }

/* 通知中心 */
.acct-notifs { display: grid; gap: 10px; }
.acct-notif { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #dfe9e1; border-radius: 12px; padding: 13px 15px; }
.acct-notif.read { opacity: .62; }
.acct-notif-ico { font-size: 20px; line-height: 1; }
.acct-notif-body { flex: 1; min-width: 0; }
.acct-notif-body b { display: block; font-size: 13.5px; color: #12241a; font-weight: 500; line-height: 1.55; }
.acct-notif-body small { color: #6b7d72; font-size: 12px; }

/* fav.js 收藏提示 & 顶栏收藏按钮样式 */
.fav-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: #12241a; color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: .25s; z-index: 999; }
.fav-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-fav] { cursor: pointer; }
.acct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* =========================================================================
 * 会员区 2.0（2026-10-20）：15 个平铺标签 → 侧边分组导航 + 主面板
 * ======================================================================= */
.acct-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.acct-side { position: sticky; top: 16px; }
.acct-main { min-width: 0; }

/* 侧边导航 */
.acct-nav { display: grid; gap: 16px; background: #fff; border: 1px solid #dfe9e1; border-radius: 16px; padding: 16px 12px; }
.acct-navgrp { display: grid; gap: 2px; }
.acct-navlabel { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #9aa8a0; font-weight: 600; padding: 0 10px 6px; }
.acct-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 13.5px; color: #44564c; cursor: pointer; transition: background .15s, color .15s; }
.acct-tab:hover { background: #f4f9f5; color: #2a6b4a; }
.acct-tab.active { background: #2a6b4a; color: #fff; font-weight: 600; }
.acct-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #b3402f; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; }
.acct-tab.active .acct-dot { background: #fff; color: #2a6b4a; }

/* 统计卡 */
.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.acct-stat { background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.acct-stat-label { font-size: 11.5px; letter-spacing: .6px; color: #9aa8a0; text-transform: uppercase; }
.acct-stat-val { font-size: 21px; color: #12241a; font-weight: 600; line-height: 1.2; }
.acct-stat-sub { font-size: 12px; color: #6b7d72; }
.acct-stat.warn { border-color: #e3c573; }
.acct-stat.warn .acct-stat-val { color: #8a6a2f; }

/* 卡片面板 */
.acct-card-panel { background: #fff; border: 1px solid #dfe9e1; border-radius: 16px; padding: 20px; margin-bottom: 14px; }
.acct-sec-sub { margin: 4px 0 0; font-size: 12.5px; color: #6b7d72; line-height: 1.6; }

/* 空状态 / 骨架 */
.acct-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; text-align: center; color: #6b7d72; }
.acct-empty-ico { font-size: 26px; opacity: .55; }
.acct-empty p { margin: 0; font-size: 13.5px; line-height: 1.7; max-width: 420px; }
.acct-skel { display: grid; gap: 12px; padding: 6px 0; }
.acct-skel-line { height: 14px; border-radius: 6px; background: #eaf1ec; }
.acct-skel-line.w60 { width: 60%; } .acct-skel-line.w40 { width: 40%; }
.acct-skel-box { height: 96px; border-radius: 14px; background: #eaf1ec; }

/* 等级进度 */
.acct-tier.big { padding: 16px; background: #f4f9f5; border: 1px solid #dfe9e1; border-radius: 14px; }
.acct-tier-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acct-tier-top b { font-size: 20px; color: #2a6b4a; }
.acct-tier-top span { font-size: 13px; color: #44564c; }
.acct-tier-top small { font-size: 12px; color: #6b7d72; }
.acct-bar { height: 8px; border-radius: 999px; background: #e4ede7; overflow: hidden; margin-top: 10px; }
.acct-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3f8b63, #2a6b4a); transition: width .4s ease; }
.acct-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.acct-perk { font-size: 11.5px; background: #f4f9f5; border: 1px solid #dfe9e1; color: #2a6b4a; border-radius: 999px; padding: 4px 10px; }
.acct-off { font-size: 13px; color: #2a6b4a; margin: 10px 0 0; }

/* 时间线 */
.acct-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-timeline li { display: flex; gap: 10px; align-items: flex-start; }
.acct-timeline .acct-tl-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #cfdcd4; margin-top: 6px; }
.acct-timeline li.unread .acct-tl-dot { background: #2a6b4a; box-shadow: 0 0 0 3px rgba(42,107,74,.15); }
.acct-timeline b { font-size: 13.5px; color: #12241a; font-weight: 500; }
.acct-timeline small { display: block; font-size: 11.5px; color: #9aa8a0; margin-top: 2px; }

/* 快捷入口 */
.acct-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.acct-quick-btn { display: grid; gap: 4px; justify-items: center; padding: 14px 10px; border-radius: 14px;
  background: #fff; border: 1px solid #dfe9e1; cursor: pointer; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.acct-quick-btn:hover { box-shadow: 0 6px 18px rgba(18,36,26,.08); transform: translateY(-1px); }
.acct-quick-btn b { font-size: 18px; color: #2a6b4a; }
.acct-quick-btn span { font-size: 12px; color: #6b7d72; text-align: center; }

/* 订单 */
.acct-orders { display: grid; gap: 12px; }
.acct-order { background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; overflow: hidden; }
.acct-order > header { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: #f4f9f5; border-bottom: 1px solid #dfe9e1; }
.acct-order > header b { font-size: 13px; color: #12241a; }
.acct-status { font-size: 11px; font-weight: 600; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px;
  background: #e4ede7; color: #44564c; text-transform: uppercase; }
.acct-status.paid { background: #2a6b4a; color: #fff; }
.acct-status.await_payment { background: #fdf6e3; color: #8a6a2f; }
.acct-status.refunded, .acct-status.cancelled { background: #fbe9e6; color: #b3402f; }
.acct-order-body { padding: 14px 16px; }
.acct-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #12241a; }
.acct-items small { color: #6b7d72; font-size: 12px; }
.acct-order-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4ede7; }
.acct-total { font-size: 17px; font-weight: 600; color: #2a6b4a; }
.acct-order-foot small { font-size: 11.5px; color: #9aa8a0; }

/* 等级阶梯 */
.acct-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-ladder li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #dfe9e1; border-radius: 12px; background: #fff; }
.acct-ladder li.cur { border-color: #3f8b63; background: #f4f9f5; }
.acct-ladder li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acct-ladder li b { font-size: 13.5px; color: #12241a; }
.acct-ladder li.cur b { color: #2a6b4a; }
.acct-ladder li small { display: flex; flex-wrap: wrap; gap: 6px; color: #6b7d72; font-size: 11.5px; }
.acct-ladder li small + small { color: #9aa8a0; }

/* 小按钮（作品 / 消息里的行内操作） */
.btn.acct-mini { padding: 5px 12px; font-size: 12px; border-radius: 999px; }

/* 列表（流水 / 登录记录 / 成长值） */
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acct-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef3f0; }
.acct-list li:last-child { border-bottom: 0; }
.acct-list b { font-size: 13.5px; color: #12241a; font-weight: 500; }
.acct-list small { display: block; font-size: 11.5px; color: #9aa8a0; margin-top: 2px; }
.acct-list .pos { color: #2a6b4a; font-weight: 600; } .acct-list .neg { color: #b3402f; font-weight: 600; }

/* 等级阶梯 */
.acct-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.acct-ladder li { background: #f4f9f5; border: 1px solid #dfe9e1; border-radius: 12px; padding: 12px; display: grid; gap: 3px; }
.acct-ladder li.on { background: #2a6b4a; border-color: #2a6b4a; }
.acct-ladder li.on b, .acct-ladder li.on span, .acct-ladder li.on small { color: #fff; }
.acct-ladder b { font-size: 14px; color: #12241a; }
.acct-ladder span { font-size: 11.5px; color: #6b7d72; }
.acct-ladder small { font-size: 11px; color: #44564c; }

/* 卡片栅格（作品 / 收藏） */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.acct-card { background: #fff; border: 1px solid #dfe9e1; border-radius: 14px; overflow: hidden; display: grid; }
.acct-card-thumb { display: grid; place-items: center; height: 116px; background: #f4f9f5; color: #2a6b4a; font-size: 24px; overflow: hidden; }
.acct-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acct-card-body { padding: 12px; display: grid; gap: 4px; }
.acct-card-body b { font-size: 13.5px; color: #12241a; }
.acct-card-body small { font-size: 11.5px; color: #9aa8a0; }
.acct-card-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.acct-mini { padding: 5px 12px; font-size: 12px; }

/* 消息 */
.acct-notif { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-notif li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid #dfe9e1; border-radius: 12px; padding: 12px 14px; }
.acct-notif li.unread { border-color: #3f8b63; background: #f4f9f5; }
.acct-notif-main b { font-size: 13.5px; color: #12241a; }
.acct-notif-main p { margin: 4px 0 0; font-size: 13px; color: #44564c; line-height: 1.7; }
.acct-notif-main small { display: block; font-size: 11.5px; color: #9aa8a0; margin-top: 4px; }
.acct-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.acct-cta.right { justify-content: flex-end; }

/* 表单 */
.acct-form { display: grid; gap: 12px; }
.acct-field { display: grid; gap: 5px; }
.acct-field label { font-size: 12px; color: #6b7d72; }
.acct-field input, .acct-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #dfe9e1; border-radius: 10px; font-family: inherit; font-size: 13.5px; color: #12241a; background: #fff; }
.acct-field input:focus, .acct-field textarea:focus { outline: none; border-color: #3f8b63; box-shadow: 0 0 0 3px rgba(63,139,99,.12); }
.acct-field input[disabled] { background: #f4f9f5; color: #6b7d72; }
.acct-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 钱包 */
.acct-bal-num { display: block; font-size: 32px; color: #2a6b4a; font-weight: 600; margin: 4px 0 8px; }
.acct-topup { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-topup input { width: 120px; padding: 9px 12px; border: 1px solid #dfe9e1; border-radius: 10px; font-size: 13.5px; }

.acct-muted { font-size: 12.5px; color: #6b7d72; line-height: 1.6; margin: 0; }
.link.danger { background: none; border: 0; color: #b3402f; font-size: 12.5px; cursor: pointer; padding: 0; font-family: inherit; }

/* 移动端：侧栏收起为横向分组条 */
@media (max-width: 860px) {
  .acct-shell { grid-template-columns: 1fr; }
  .acct-side { position: static; }
  .acct-nav { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 12px; }
  .acct-stats { grid-template-columns: repeat(2, 1fr); }
  .acct-badges-grid { grid-template-columns: repeat(2, 1fr); }
}