/*
 * 账号中心样式。依据 design 仓库 v2.5（ad31e84）components.md、components/account-center.md、
 * balance.md、ledger.md、redeem.md、account-deletion.md、notice.md、footer.md。
 * 只用 tokens.css 的 var(--gl-*)；需要的尺寸由令牌换算（calc），不写裸色值、裸字号。
 * 唯一的裸值是媒体查询的断点 600px（ledger.md「桌面」的宽度界线，兑换块沿用）。
 */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gl-bg-page);
  color: var(--gl-ink);
  font-family: var(--gl-font-ui);
  font-size: var(--gl-text-body);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: calc(var(--gl-space-1) / 2) solid var(--gl-ink);
  outline-offset: calc(var(--gl-space-1) / 2);
}

.caption { font-size: var(--gl-text-caption); color: var(--gl-ink-3); }

/* 顶栏：账号中心变体（components.md「顶栏」） */
.topbar { background: var(--gl-bg-page); }
.topbar-inner {
  max-width: var(--gl-content-narrow);
  margin: 0 auto;
  padding: 0 var(--gl-space-4);
  min-height: calc(var(--gl-space-8) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gl-space-3);
}
.topbar-inner form { margin: 0; }
.brand { display: flex; align-items: center; gap: var(--gl-space-2); min-width: 0; }
.brand-mark {
  flex: none;
  width: var(--gl-space-8);
  height: var(--gl-space-8);
  border-radius: var(--gl-radius-row);
  background: var(--gl-ink);
  color: var(--gl-on-ink);
  font-family: var(--gl-font-serif);
  font-size: var(--gl-text-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-name { font-weight: 600; }
.crumb-sep { color: var(--gl-ink-faint); }
.brand-page { color: var(--gl-ink-2); }

/* 页面骨架：单栏 --gl-content-narrow，每块一张白卡 */
.page {
  max-width: var(--gl-content-narrow);
  margin: 0 auto;
  padding: 0 var(--gl-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-4);
}
.card {
  background: var(--gl-bg-card);
  border-radius: var(--gl-radius-card);
  padding: var(--gl-space-5);
  min-width: 0;
}
.card-title { margin: 0 0 var(--gl-space-3); font-size: var(--gl-text-title); font-weight: 600; }
.card-lead { margin: 0 0 var(--gl-space-2); font-size: var(--gl-text-body); font-weight: 400; color: var(--gl-ink-2); }

/* 按钮（components.md「按钮」） */
.btn {
  font: inherit;
  font-size: var(--gl-text-small);
  min-height: var(--gl-touch-min);
  border-radius: var(--gl-radius-pill);
  cursor: pointer;
}
.btn:disabled { cursor: default; }
.btn-primary {
  background: var(--gl-ink);
  color: var(--gl-on-ink);
  border: 0;
  min-height: calc(var(--gl-touch-min) + var(--gl-space-1));
  padding: 0 var(--gl-space-6);
  font-size: calc(var(--gl-text-title) - var(--gl-space-1) / 2);
}
.btn-secondary {
  background: var(--gl-bg-card);
  color: var(--gl-ink);
  border: thin solid var(--gl-line-strong);
  padding: 0 var(--gl-space-5);
}
.btn-text {
  background: none;
  border: 0;
  color: var(--gl-ink-2);
  padding: 0 var(--gl-space-2);
}

/* 提示条（notice.md）：角标用伪元素，不进文字内容，含义由文字本身说清 */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--gl-space-2);
  padding: var(--gl-space-3) var(--gl-space-4);
  border-radius: var(--gl-radius-row);
  font-size: var(--gl-text-small);
}
.notice::before {
  flex: none;
  width: var(--gl-space-5);
  height: var(--gl-space-5);
  border-radius: 50%;
  border: calc(var(--gl-space-1) * 0.375) solid currentColor;
  font-size: var(--gl-text-caption);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--gl-space-1) / 2);
}
.notice-info { background: var(--gl-bg-subtle); color: var(--gl-ink-2); }
.notice-info::before { content: "i"; }
.notice-error {
  background: var(--gl-manual-bg);
  color: var(--gl-manual);
  border: thin solid var(--gl-manual);
}
.notice-error::before { content: "!"; }
.notice-ok { background: var(--gl-ok-bg); color: var(--gl-ok); }
.notice-ok::before { content: "✓"; }
.notice-lines { display: flex; flex-direction: column; gap: calc(var(--gl-space-1) / 2); min-width: 0; }
.notice-lines strong { font-weight: 600; }
.notice-lines span { font-variant-numeric: tabular-nums; }

.section-state { color: var(--gl-ink-3); }
.section-state:empty { display: none; }
.status-error:empty, .balance-blocked:empty, .ledger-more-error:empty, .dialog-error:empty { display: none; }
.balance-blocked { margin-bottom: var(--gl-space-3); }  /* 停用提示在卡顶部、引导语之前 */

/* 登录状态 */
.status-line { display: flex; flex-wrap: wrap; gap: var(--gl-space-2); align-items: baseline; }
.status-label { color: var(--gl-ink-2); }
.status-email { color: var(--gl-ink); font-variant-numeric: tabular-nums; }
.status-error { margin-top: var(--gl-space-3); }

/* 余额（balance.md） */
.balance-product + .balance-product { margin-top: var(--gl-space-3); }
.product-name {
  margin: 0;
  padding: var(--gl-space-2) 0;
  font-size: var(--gl-text-small);
  font-weight: 600;
  color: var(--gl-ink);
}
.balance-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--gl-space-4);
  padding: var(--gl-space-3) 0;
  border-top: thin solid var(--gl-line);
}
.item-name { align-self: center; color: var(--gl-ink-2); }
.item-figures { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.item-available { font-variant-numeric: tabular-nums; }
.item-available .num { font-size: var(--gl-text-title); font-weight: 600; }
.item-expires { font-size: var(--gl-text-caption); color: var(--gl-ink-3); font-variant-numeric: tabular-nums; }
.item-batches { grid-column: 1 / -1; }
.item-batches summary {
  min-height: var(--gl-touch-min);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--gl-ink-2);
  font-size: var(--gl-text-small);
  cursor: pointer;
}
.batch-list { list-style: none; margin: 0; padding: 0; }
.batch-row {
  padding: var(--gl-space-1) 0;
  text-align: right;
  font-size: var(--gl-text-small);
  color: var(--gl-ink-2);
  font-variant-numeric: tabular-nums;
}
.balance-empty { margin-top: var(--gl-space-2); color: var(--gl-ink-2); }

/* 标签（components.md「标签」） */
.tag {
  display: inline-block;
  border-radius: var(--gl-radius-pill);
  font-size: var(--gl-text-caption);
  line-height: 1.4;
  padding: calc(var(--gl-space-1) * 1.25) var(--gl-space-3);
  white-space: nowrap;
}
.tag-neutral { color: var(--gl-ink-2); background: var(--gl-bg-subtle); }
.tag-manual { color: var(--gl-manual); background: var(--gl-manual-bg); }

/* 明细（ledger.md）：手机先排三行，宽屏一行排完 */
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "kind units"
    "item time"
    "extra extra";
  column-gap: var(--gl-space-3);
  row-gap: var(--gl-space-1);
  align-items: center;
  padding: var(--gl-space-3) 0;
  border-top: thin solid var(--gl-line);
}
.ledger-row:first-child { border-top: 0; }
.ledger-kind { grid-area: kind; justify-self: start; }
.ledger-units { grid-area: units; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-item { grid-area: item; color: var(--gl-ink-2); font-size: var(--gl-text-small); }
.ledger-time {
  grid-area: time;
  text-align: right;
  font-size: var(--gl-text-caption);
  color: var(--gl-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-extra { grid-area: extra; font-size: var(--gl-text-caption); color: var(--gl-ink-3); }
.ledger-more-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--gl-space-2); margin-top: var(--gl-space-3); }

@media (min-width: 600px) {
  .card { padding: var(--gl-space-6); }
  .ledger-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kind item extra units"
      "kind item extra time";
  }
  .ledger-kind, .ledger-item, .ledger-extra { align-self: center; }
}

/* 兑换块（redeem.md）：自上而下 标签、输入框、格式提示、说明、按钮、结果；按钮总在输入框下方 */
.redeem-form { display: flex; flex-direction: column; gap: var(--gl-space-2); margin: 0; }
.redeem-label { font-size: var(--gl-text-small); color: var(--gl-ink-2); }
.redeem-input {
  font: inherit;
  font-size: var(--gl-text-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(var(--gl-space-1) / 3);
  width: 100%;
  min-height: var(--gl-touch-min);
  padding: 0 var(--gl-space-3);
  border: thin solid var(--gl-line-strong);
  border-radius: var(--gl-radius-row);
  background: var(--gl-bg-card);
  color: var(--gl-ink);
}
.redeem-input::placeholder { color: var(--gl-ink-faint); }
.redeem-input:focus { border-color: var(--gl-ink); }
.redeem-input:disabled { color: var(--gl-ink-3); background: var(--gl-bg-subtle); }
.redeem-format { font-size: var(--gl-text-caption); color: var(--gl-manual); }
.redeem-format:empty, .redeem-feedback:empty { display: none; }
.redeem-actions { display: flex; margin-top: var(--gl-space-1); }
.redeem-actions .btn { width: 100%; }  /* 手机宽度：输入框、按钮、提示条都占满卡宽 */
.redeem-feedback { margin-top: var(--gl-space-1); }

@media (min-width: 600px) {
  .redeem-input { max-width: calc(var(--gl-space-10) * 8); }
  .redeem-actions .btn { width: auto; }
}

/* 申请注销（account-deletion.md） */
.deletion-accepted { font-size: var(--gl-text-body); color: var(--gl-ink); }
.dialog {
  width: min(calc(100% - var(--gl-space-4) * 2), calc(var(--gl-space-10) * 12));
  max-width: none;
  padding: var(--gl-space-6);
  border: 0;
  border-radius: var(--gl-radius-card);
  background: var(--gl-bg-card);
  color: var(--gl-ink);
}
.dialog::backdrop { background: color-mix(in srgb, var(--gl-ink) 45%, transparent); }
.dialog-title { margin: 0 0 var(--gl-space-4); font-size: var(--gl-text-title); font-weight: 600; }
.dialog p + p { margin-top: var(--gl-space-2); }
.dialog-error { margin-top: var(--gl-space-4); }
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gl-space-3);
  margin-top: var(--gl-space-6);
}

/* 页脚（footer.md） */
.footer {
  max-width: var(--gl-content-narrow);
  margin: 0 auto;
  padding: var(--gl-space-8) var(--gl-space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: var(--gl-text-caption);
  color: var(--gl-ink-3);
  text-align: center;
}
.footer-sep { color: var(--gl-ink-faint); margin: 0 var(--gl-space-2); }
.footer a { color: inherit; text-decoration: none; min-height: var(--gl-touch-min); display: inline-flex; align-items: center; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }