/* 个人中心
 *
 * 取代原先的 profile.css + profile-compact.css：前者是一整套烘死的深色皮肤，
 * 后者事后叠上来把页面改浅，两张表互相覆盖，还剩 94 处硬编码颜色盖不掉。
 * 这里重写成单张表，颜色一律来自 tokens.css。
 *
 * 布局上把原来的 14 个等权重方框收敛成 5 块：身份与钱包、我的模组、
 * 并发与权益 + 模型、会员等级、折叠起来的邀请码与流水。用户高频要看的
 * 是"还有多少积分 / 我的模组怎么样 / 要不要升级"，这三件事被提到首屏。
 */

* { box-sizing: border-box; }

/* 任何显式 display 都会盖掉浏览器对 [hidden] 的默认 display:none，
   页面靠 hidden 属性切换登录态与弹窗，这里统一兜住。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶栏 ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  height: 58px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand img { width: 26px; height: 26px; image-rendering: pixelated; }
.brand span { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-head nav a {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}
.site-head nav a:hover { background: var(--surface-hover); color: var(--text); }
.site-head nav button {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
}
.site-head nav button:hover { border-color: var(--border-hover); color: var(--text); }

/* ---------- 通用 ---------- */

main { max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.panel > header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.panel > header h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.panel > header small { color: var(--text-muted); font-size: 12px; }
.panel > header > :last-child:not(h2) { margin-left: auto; }

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.primary-button:hover { background: var(--accent-hover); }
.primary-button.small { padding: 8px 14px; font-size: 13px; }

.ghost-button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ghost-button:hover { border-color: var(--border-hover); color: var(--text); }

.text-link { color: var(--accent); font-size: 13px; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.beta-tag {
  padding: 3px 9px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 身份 + 钱包 ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  /* 顶部一道极淡的强调色，给页面一个视觉锚点，不用整块染色 */
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 120px),
    var(--surface);
}
.hero-who { display: flex; align-items: flex-start; gap: 16px; }

.avatar {
  flex: none;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 26px;
  font-weight: 700;
}

.hero-name { min-width: 0; flex: 1; }
.hero-name h1 { margin: 0 0 3px; font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.hero-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.hero-meta .dot { opacity: .5; }
.hero-tier { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 11px 0 0; }
.hero-tier b { font-size: 14px; white-space: nowrap; }
.hero-tier small { color: var(--text-muted); font-size: 12px; }
.tier-icon { width: 22px; height: 22px; image-rendering: pixelated; }

.wallet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-sunken);
}
.wallet > small { color: var(--text-muted); font-size: 12px; }
.wallet > strong {
  font-size: 34px;
  font-weight: 700;
  /* 1.15 的行高在 34px 下只留 39px 行框，实测内容需要 42px，
     带下伸笔画的字符会被切到。 */
  line-height: 1.3;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.wallet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 4px 0 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.wallet-meta b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wallet .primary-button { width: 100%; }

/* ---------- 两列 ---------- */

/* 不用 align-items:start：新账号「我的模组」是空的，只有 140px 高，而右侧
   并发面板有 600 多px，start 对齐会在左下方留出一大块空洞。让两列等高，
   空态就落在一个正常尺寸的卡片里，看着是留白而不是漏排。 */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  margin-bottom: 18px;
}
.side { display: grid; gap: 18px; align-content: start; }
.projects-panel { display: flex; flex-direction: column; }
.projects-panel .project-list { flex: 1; align-content: start; }

/* ---------- 我的模组 ---------- */

.project-list { display: grid; gap: 8px; }
.project-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-sunken);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.project-item:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.project-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
}
.project-item > span:nth-child(2) { min-width: 0; flex: 1; display: block; }
.project-item b { display: block; font-size: 14px; font-weight: 600; }
.project-item small { display: block; color: var(--text-muted); font-size: 12px; }
.project-status {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-active);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}
.project-status[data-status="complete"] { background: var(--success-soft); color: var(--success); }
.project-status[data-status="running"] { background: var(--accent-soft); color: var(--accent); }
.project-status[data-status="failed"] { background: var(--danger-soft); color: var(--danger); }
.project-status[data-status="queued"] { background: var(--warn-soft); color: var(--warn); }

/* ---------- 并发计量 ---------- */

.meters { display: grid; gap: 14px; margin-bottom: 14px; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; }
.meter-head b { font-size: 13.5px; }
.meter-head span { color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.meter-head i { font-style: normal; font-weight: 700; }
.meter {
  height: 6px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: var(--surface-active);
  overflow: hidden;
}
.meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .3s; }
.meters small { color: var(--text-muted); font-size: 11.5px; }

.benefit-list { display: grid; gap: 5px; }
.benefit-list span {
  display: flex;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12.5px;
}

/* ---------- 每日签到 ---------- */

.checkin {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: linear-gradient(100deg, var(--accent-soft) 0%, var(--surface) 62%);
}
.checkin-copy { display: grid; gap: 1px; min-width: 0; }
.checkin-tag {
  justify-self: start;
  padding: 2px 9px;
  margin-bottom: 3px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
}
.checkin-copy b { font-size: 16px; }
.checkin-copy small { color: var(--text-muted); font-size: 12.5px; }

.checkin-week { display: flex; gap: 5px; margin-left: auto; }
.checkin-week i {
  width: 26px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: normal;
}
.checkin-week i.done {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.checkin-week i.today { box-shadow: 0 0 0 2px var(--focus-ring); }
/* 禁用态按钮虽然 WCAG 上可豁免，但「暂不可领 / 明天再来」是要传达状态的，
   用 --text-muted 只有 4.46:1，差一点点，换成 --text-secondary。 */
.checkin .primary-button:disabled {
  background: var(--surface-active);
  color: var(--text-secondary);
  cursor: default;
}
/* 余额到顶时收掉强调色：这不是可点的状态，绿底会一直勾人去点 */
.checkin.is-capped {
  border-color: var(--border);
  background: var(--surface);
}
.checkin.is-capped .checkin-tag { background: var(--text-muted); }

/* ---------- 模型通行证 ---------- */

.models-panel { margin-bottom: 18px; }
.models-panel .model-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.model-list { display: grid; gap: 7px; }
.model-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.model-cube {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
}
.model-cube.paid { background: var(--info); }
.model-item > div:nth-child(2) { min-width: 0; flex: 1; }
.model-item b { display: block; font-size: 13px; }
.model-item small { display: block; color: var(--text-muted); font-size: 11.5px; }
.model-status { flex: none; max-width: 76px; text-align: right; }
.model-status b { font-size: 11.5px; font-weight: 600; color: var(--accent); line-height: 1.35; }
.model-item.locked, .model-item.unavailable { opacity: .55; }
.model-item.locked .model-status b, .model-item.unavailable .model-status b { color: var(--text-muted); }

/* ---------- 会员等级 ---------- */

.tier-panel { margin-bottom: 18px; }
.tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-sunken);
  text-align: center;
}
/* 真实物品图标：等级本来就叫铁锭/金锭/钻石/下界之星，
   用原版材质比纯色块更好认，也省掉一层自造视觉语言。
   煤和下界合金本身几乎是黑的，深色底下会糊掉，所以垫一层浅底。 */
.tier-card img {
  width: 40px;
  height: 40px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-hover);
  image-rendering: pixelated;
}
.tier-card b { font-size: 13.5px; }
.tier-card small { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.tier-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tier-flag {
  position: absolute;
  top: -9px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 700;
}

/* ---------- 折叠区 ---------- */

.drawer {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.drawer > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary span { margin-left: auto; color: var(--text-muted); font-size: 12.5px; }
.drawer > summary::after { content: "▾"; color: var(--text-muted); transition: transform .2s; }
.drawer[open] > summary::after { transform: rotate(180deg); }
.drawer[open] > summary { border-bottom: 1px solid var(--border); }
.drawer-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}
.drawer-body .panel { border-color: var(--border-subtle); background: var(--surface-sunken); }

.invite-own {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px dashed var(--accent-border);
  border-radius: 10px;
  background: var(--accent-soft);
}
.invite-own span { color: var(--text-muted); font-size: 12px; }
.invite-own b { margin-left: auto; font-family: var(--font-mono); font-size: 15px; letter-spacing: 1px; color: var(--accent); }
.invite-count { display: block; margin: 9px 0 14px; color: var(--text-muted); font-size: 12px; }
.invite-count b { color: var(--text); }
#inviteBindForm label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.invite-bind-row { display: flex; gap: 8px; }
.invite-bind-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.invite-bind-row input:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); }
#inviteBindHint { display: block; margin-top: 7px; color: var(--text-muted); font-size: 11.5px; }
.invite-panel.bound .invite-bind-row { display: none; }

.ledger-list { display: grid; gap: 2px; }
.ledger-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ledger-item:last-child { border-bottom: 0; }
.ledger-item b { font-size: 13px; font-weight: 600; }
.ledger-item strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--success);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.ledger-item strong.negative { color: var(--danger); }
.ledger-item small { grid-column: 1 / -1; color: var(--text-muted); font-size: 11.5px; }

.empty-note {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 22px 16px;
  border: 1px dashed var(--border);
  border-radius: 11px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.empty-note a { justify-self: center; }

/* ---------- 页脚与空状态 ---------- */

.account-footer { display: flex; justify-content: center; }
.text-danger {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-danger:hover { color: var(--danger); }

.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 70vh;
  place-content: center;
  text-align: center;
  padding: 24px;
}
.empty-state img { width: 64px; image-rendering: pixelated; }
.empty-state h1 { margin: 0; font-size: 20px; }
.empty-state p { margin: 0 0 8px; color: var(--text-muted); }

/* ---------- 弹窗与吐司 ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--overlay);
}
.modal[hidden] { display: none; }
.dialog-card {
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}
.dialog-card header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.dialog-card header small { color: var(--text-muted); font-size: 12px; }
.dialog-card header h2 { margin: 2px 0 0; font-size: 16px; }
.dialog-card header button {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  font-size: 19px;
  cursor: pointer;
}
.dialog-card header button:hover { background: var(--surface-hover); color: var(--text); }
.dialog-card label { display: block; padding: 16px 18px 0; font-size: 12.5px; font-weight: 600; }
.dialog-card input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.dialog-card input:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); }
.dialog-card footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 18px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 11px 20px;
  border-radius: 11px;
  background: var(--text);
  color: var(--page);
  font-size: 13.5px;
  box-shadow: var(--shadow-pop);
}
.toast.bad { background: var(--danger); color: #fff; }

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  main { padding: 18px 14px 44px; }
  .checkin { gap: 12px; padding: 14px 16px; }
  .checkin-week { margin-left: 0; order: 3; }
  .checkin .primary-button { width: 100%; order: 4; }
  .site-head { padding: 0 14px; gap: 10px; }
  .site-head nav a { padding: 6px 8px; font-size: 12.5px; }
  .hero { padding: 16px; }
  .hero-who { flex-wrap: wrap; }
  .avatar { width: 52px; height: 52px; font-size: 21px; }
  .hero-name h1 { font-size: 20px; }
  .wallet > strong { font-size: 30px; }
  .ghost-button#editProfile { order: 3; }
  .drawer-body { grid-template-columns: 1fr; padding: 12px; }
  /* 标题、说明与升级按钮在窄屏挤成三列会互相压字，改为竖排 */
  .tier-panel > header { flex-wrap: wrap; }
  .tier-panel > header small { flex: 1 0 100%; order: 3; }
  .tier-panel > header > :last-child:not(h2) { margin-left: auto; }
}