/* ============================================================
 * 九桥 AI 产品超市 · 账户中心（2026-09-07 新版重设计·自包含）
 * 设计语言与 ai-product-market/index.html V2.0 对齐
 * 白底 / #2f6bff 主蓝 / 胶囊按钮 / 18·28 圆角 / eyebrow 小标
 * 覆盖：静态账户结构 + account-center.js 动态登录门(gate)
 * ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Arial,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:#202522;background:#fff;-webkit-font-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-weight:600;letter-spacing:-.05em}
::selection{background:#2f6bff;color:#fff}

.account-page{
  width:min(1320px,calc(100% - 9vw));margin:0 auto;
  padding:150px 0 110px;min-height:60vh;
}

/* ---------- 布局 ---------- */
.account-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}
.account-aside{
  position:sticky;top:104px;display:flex;flex-direction:column;gap:18px;
  border:1px solid #e8ebe8;border-radius:28px;background:#fff;padding:26px 24px;
  box-shadow:0 22px 65px rgba(35,44,38,.07);
}

/* ---------- 侧栏 · 用户卡 ---------- */
.account-user{display:flex;align-items:center;gap:14px}
.account-user-avatar{
  width:52px;height:52px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#eef4ff;color:#2458d1;font-weight:800;font-size:17px;letter-spacing:.02em;
}
.account-user-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.account-user-meta strong{font-size:15px;letter-spacing:-.02em;color:#202522;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-user-meta small{font-size:9px;font-weight:800;letter-spacing:.15em;color:#747b77;text-transform:uppercase}

/* ---------- 侧栏 · 统计 ---------- */
.account-stats{display:flex;flex-direction:column;gap:0;border-top:1px solid #eef1ee;padding-top:6px}
.account-stat{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 2px;border-bottom:1px solid #f2f4f2;
}
.account-stat:last-child{border-bottom:0}
.account-stat span{font-size:12px;color:#747b77}
.account-stat b{font-size:19px;font-weight:700;letter-spacing:-.03em;color:#202522}
.account-stat:first-child b{color:#2f6bff}
.account-stat small{font-size:10px;color:#a9b0ab;margin-left:4px}

/* ---------- 侧栏 · 导航 ---------- */
.account-nav{display:flex;flex-direction:column;gap:6px}
.account-nav a{
  display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 16px;
  border-radius:999px;font-size:12px;font-weight:650;color:#555d58;border:1px solid transparent;
  transition:.18s ease;
}
.account-nav a:after{content:"↗";font-size:12px;color:#a9b0ab;transition:.18s}
.account-nav a:hover{background:#f6f7f5;color:#202522}
.account-nav a.is-active{background:#eef4ff;border-color:rgba(47,107,255,.28);color:#2458d1}
.account-nav a.is-active:after{color:#2f6bff}

/* ---------- 侧栏 · 退出 ---------- */
.account-logout{
  min-height:44px;border-radius:999px;border:1px solid rgba(196,69,58,.35);
  background:#fff;color:#c4453a;font-size:12px;font-weight:700;transition:.18s;
}
.account-logout:hover{background:#fdf3f2;border-color:#c4453a;transform:translateY(-1px)}

/* ---------- 主区 · 标题 ---------- */
.account-main{display:flex;flex-direction:column;gap:26px;min-width:0}
.account-main-head h1{font-size:34px;letter-spacing:-.06em;color:#202522}
.account-main-head p{margin-top:10px;font-size:13px;color:#747b77;line-height:1.8}

/* ---------- 余额 Hero（新版浅蓝卡） ---------- */
.account-balance-hero{
  border:1px solid rgba(47,107,255,.16);border-radius:28px;background:#eef4ff;
  padding:34px 36px;position:relative;overflow:hidden;
}
.account-balance-hero:after{
  content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:rgba(47,107,255,.07);pointer-events:none;
}
.hero-label{font-size:10px;font-weight:800;letter-spacing:.17em;color:#2458d1;text-transform:uppercase}
.hero-value{margin-top:14px;display:flex;align-items:baseline;gap:10px}
.hero-value span{font-size:52px;line-height:1;font-weight:600;letter-spacing:-.05em;color:#2f6bff;font-variant-numeric:tabular-nums}
.hero-value em{font-style:normal;font-size:12px;font-weight:750;color:#555d58}
.hero-foot{margin-top:18px;display:flex;gap:26px;flex-wrap:wrap}
.hero-foot span{font-size:12px;color:#555d58}
.hero-foot b{color:#202522;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 通用卡片 ---------- */
.recharge-card,.chart-card,.tx-card{
  border:1px solid #e8ebe8;border-radius:28px;background:#fff;padding:28px 30px;
  box-shadow:0 22px 65px rgba(35,44,38,.05);
}
.recharge-head h2,.chart-card-head h2,.tx-card-head h2{font-size:19px;color:#202522}
.recharge-head p,.chart-card-head p{margin-top:8px;font-size:12px;color:#747b77;line-height:1.8}
.recharge-head p b{color:#2f6bff}

/* ---------- 充值档位 ---------- */
.recharge-plans{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.recharge-plan{
  position:relative;border:1px solid #e8ebe8;border-radius:18px;background:#fff;
  padding:18px 18px 16px;text-align:left;transition:.18s ease;overflow:hidden;
}
.recharge-plan:hover{transform:translateY(-3px);border-color:rgba(47,107,255,.45);box-shadow:0 14px 30px rgba(47,107,255,.12)}
.recharge-plan .plan-amount{font-size:22px;font-weight:700;letter-spacing:-.03em;color:#202522}
.recharge-plan .plan-amount small{font-size:11px;font-weight:600;color:#747b77;margin-left:2px}
.recharge-plan .plan-points{margin-top:8px;font-size:12px;color:#2458d1;font-weight:650}
.recharge-plan .plan-tag{
  position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;letter-spacing:.1em;
  color:#2458d1;background:#eef4ff;border-radius:999px;padding:4px 9px;text-transform:uppercase;
}
.recharge-custom{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.recharge-custom input{
  flex:1;min-width:220px;min-height:46px;padding:0 18px;border:1px solid #d9e1dc;border-radius:999px;
  font-size:13px;color:#202522;outline:none;font-family:inherit;transition:.18s;
}
.recharge-custom input:focus{border-color:#2f6bff;box-shadow:0 0 0 4px rgba(47,107,255,.12)}
.recharge-custom button{
  min-height:46px;padding:0 24px;border-radius:999px;border:1px solid #2f6bff;background:#2f6bff;
  color:#fff;font-size:12px;font-weight:750;transition:.18s;white-space:nowrap;
  box-shadow:0 12px 24px rgba(47,107,255,.18);
}
.recharge-custom button:hover{background:#1d4ed8;border-color:#1d4ed8;transform:translateY(-2px)}
.recharge-tip{margin-top:14px;font-size:11px;color:#a9b0ab;line-height:1.8}

/* ---------- 消耗趋势图 ---------- */
.chart-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.chart-gran{display:inline-flex;gap:6px;background:#f6f7f5;border-radius:999px;padding:4px}
.chart-gran button{
  min-height:32px;padding:0 15px;border-radius:999px;border:0;background:transparent;
  font-size:11px;font-weight:650;color:#747b77;transition:.18s;
}
.chart-gran button.is-active{background:#2f6bff;color:#fff;box-shadow:0 6px 14px rgba(47,107,255,.22)}
.chart-cols{margin-top:22px;display:flex;align-items:flex-end;gap:8px;height:170px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.chart-col i{
  display:block;width:100%;max-width:46px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#2f6bff,#2458d1);min-height:4px;transition:height .3s ease;
}
.chart-col small{font-size:9px;color:#a9b0ab;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chart-col em{font-style:normal;font-size:10px;color:#555d58;font-weight:650;font-variant-numeric:tabular-nums}
.chart-empty{width:100%;display:flex;align-items:center;justify-content:center;height:100%;color:#a9b0ab;font-size:12px}

/* ---------- 积分明细表 ---------- */
.tx-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.tx-filter{display:inline-flex;gap:6px;background:#f6f7f5;border-radius:999px;padding:4px;flex-wrap:wrap}
.tx-filter button{
  min-height:32px;padding:0 15px;border-radius:999px;border:0;background:transparent;
  font-size:11px;font-weight:650;color:#747b77;transition:.18s;white-space:nowrap;
}
.tx-filter button.is-active{background:#2f6bff;color:#fff;box-shadow:0 6px 14px rgba(47,107,255,.22)}
.tx-table{width:100%;border-collapse:collapse}
.tx-table th{
  text-align:left;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#a9b0ab;padding:10px 12px;border-bottom:1px solid #e8ebe8;white-space:nowrap;
}
.tx-table td{padding:13px 12px;border-bottom:1px solid #f2f4f2;font-size:12.5px;color:#202522;vertical-align:top}
.tx-table tr:hover td{background:#f9faf9}
.tx-table td.t-tx-source{color:#555d58;max-width:340px}
.tx-table td .tx-type-pill{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;
  background:#f6f7f5;color:#555d58;white-space:nowrap;
}
.tx-table td .tx-type-pill.is-recharge{background:#e8f5ee;color:#2e7d4f}
.tx-table td .tx-type-pill.is-consume{background:#eef4ff;color:#2458d1}
.tx-table td .tx-type-pill.is-adjust{background:#fdf3e7;color:#b0741f}
.tx-delta{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx-delta.is-plus{color:#2e7d4f}
.tx-delta.is-minus{color:#c4453a}
.tx-empty{padding:40px 0;text-align:center;color:#a9b0ab;font-size:12px}
.tx-pagination{margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.tx-pagination button{
  min-height:36px;min-width:36px;padding:0 14px;border-radius:999px;border:1px solid #e8ebe8;
  background:#fff;color:#555d58;font-size:12px;font-weight:650;transition:.18s;
}
.tx-pagination button.is-active{background:#2f6bff;border-color:#2f6bff;color:#fff}
.tx-pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 登录门（account-center.js 动态注入） ---------- */
#account-shell.gate-mode,
#account-shell:has(.gate-tabs){grid-template-columns:1fr}
#account-shell.gate-mode{justify-content:center;display:flex}
.account-login-gate{
  border:1px solid #e8ebe8;border-radius:28px;background:#fff;padding:38px 36px 34px;
  box-shadow:0 22px 65px rgba(35,44,38,.07);
}
.account-login-gate h2{
  font-size:23px;letter-spacing:-.05em;color:#202522;margin-bottom:6px;
  display:flex;align-items:center;gap:11px;
}
.account-login-gate h2:before{content:"";width:34px;height:1px;background:#2f6bff;flex:none}
.account-login-gate .gate-tabs{margin-top:18px}
#account-shell .gate-tab{
  flex:1;padding:10px 0;border:1px solid #e8ebe8;background:#fff;color:#555d58;
  border-radius:999px!important;font-size:12px;font-weight:700;cursor:pointer;transition:.18s;
}
#account-shell .gate-tab.is-active{border-color:#2f6bff!important;background:#eef4ff!important;color:#2458d1!important}
#account-shell input[type=tel],#account-shell input[type=text],#account-shell input[type=password]{
  width:100%;min-height:46px;padding:0 18px;border:1px solid #d9e1dc;border-radius:999px;
  font-size:14px;color:#202522;outline:none;font-family:inherit;transition:.18s;background:#fff;
}
#account-shell input:focus{border-color:#2f6bff;box-shadow:0 0 0 4px rgba(47,107,255,.12)}
#account-shell #gate-code-row{display:flex;gap:8px;margin-top:12px}
#account-shell #gate-code-row input{margin-top:0;flex:1}
#account-shell #gate-sendcode{
  flex:0 0 auto;min-height:46px;padding:0 18px;border:1px solid rgba(47,107,255,.35)!important;background:#eef4ff!important;
  color:#2458d1!important;border-radius:999px!important;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s;
}
#account-shell #gate-sendcode:hover{background:#2f6bff!important;border-color:#2f6bff!important;color:#fff!important}
#account-shell #gate-password{display:none;margin-top:12px}
#account-shell .gate-err{min-height:18px;margin-top:10px;font-size:12px;color:#c4453a}
#account-shell .gate-hint{font-size:12px;color:#a9b0ab;margin:6px 0 16px;line-height:1.7}
#account-shell #gate-submit{
  width:100%;min-height:48px;border:1px solid #2f6bff;background:#2f6bff;color:#fff;
  border-radius:999px;font-size:13px;font-weight:750;cursor:pointer;transition:.18s;
  box-shadow:0 12px 24px rgba(47,107,255,.18);
}
#account-shell #gate-submit:hover{background:#1d4ed8;border-color:#1d4ed8;transform:translateY(-2px)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .account-shell{grid-template-columns:1fr}
  .account-aside{position:static}
  .account-nav{flex-direction:row;flex-wrap:wrap}
  .account-nav a:after{display:none}
  .recharge-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .account-page{padding:120px 0 70px}
  .account-balance-hero{padding:26px 24px}
  .hero-value span{font-size:40px}
  .recharge-card,.chart-card,.tx-card{padding:22px 18px;border-radius:22px}
  .recharge-plans{grid-template-columns:1fr}
  .tx-table th:nth-child(5),.tx-table td:nth-child(5){display:none}
}