/* 第 12 轮 · 丁：个人中心五页（账号与偏好、积分与充值、消耗明细、生成记录、我的资源）、头像菜单。
   只写本路类名 r12a- 开头；颜色、尺寸、动效一律用 r12-system.css 的变量。 */

/* ── 1. 页面骨架：左子导航 200 + 右内容铺满 ───────────────────── */

/* 外壳已经给好位置（二稿共用约定 1）：.stage 自己留了上右下各 8、左边让出到「选中框右边 + 8」，
   所以本页最外层一点外边距都不加，padding 必须是 0，四边直接贴外壳给的位置。 */
.r12a-page {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
}

.r12a-shell {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--r12-gutter, 8px);
}

.r12a-nav {
  align-self: stretch;
  min-height: 0;
  padding: 8px;
  gap: 2px;
}

.r12a-nav-item {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease), font-weight var(--r12-dur-2) var(--r12-ease);
}

.r12a-nav-item svg { width: 16px; height: 16px; flex: none; }
.r12a-nav-item:hover { background: var(--r12-hover); color: var(--r12-ink); }
.r12a-nav-item:active { transform: scale(.99); }

.r12a-nav-item[aria-current='page'] {
  background: var(--r12-selected-bg);
  box-shadow: var(--r12-selected-shadow, none);
  color: var(--r12-ink);
  font-weight: 600;
}

.r12a-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.r12a-main.is-fill { overflow: hidden; }

/* 页面滚动由 .r12a-main 负责：面板保持自然高度，不许被压扁；明细页只让表格区吃掉剩余高度。 */
.r12a-main > * { flex: none; }
.r12a-main.is-fill > .r12a-table-panel { flex: 1 1 auto; min-height: 0; }

/* 一行里输入框、下拉、分段同高 32（清单 C4） */
.r12a-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: nowrap;
}

.r12a-toolbar .r12a-grow { margin-left: auto; }
.r12a-range { width: 132px; flex: none; }

.r12a-search {
  height: 32px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
}

.r12a-search svg { width: 16px; height: 16px; flex: none; }
.r12a-search:focus-within { border-color: var(--r12-line-strong); }

.r12a-search input {
  width: 148px;
  min-width: 0;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
}

.r12a-search input::placeholder { color: var(--r12-faint); }

/* ── 2. 账号与偏好 ───────────────────────────────────────────── */

.r12a-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 12px;
}

.r12a-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
  padding: 0;
  border: 1px solid var(--r12-line);
  border-radius: 50%;
  background: var(--r12-surface-3);
  overflow: hidden;
  cursor: pointer;
}

.r12a-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.r12a-avatar-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--r12-dur-2) var(--r12-ease);
}

.r12a-avatar-veil svg { width: 16px; height: 16px; }
.r12a-avatar:hover .r12a-avatar-veil,
.r12a-avatar:focus-visible .r12a-avatar-veil { opacity: 1; }

.r12a-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r12a-profile > .r12-btn { margin-left: auto; }

.r12a-rows { min-width: 0; }

.r12a-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r12a-name {
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12a-role {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12a-nickname {
  width: 200px;
  height: 32px;
}

.r12a-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-top: 1px solid var(--r12-line);
}

.r12a-row-label {
  width: 96px;
  flex: none;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-muted);
}

.r12a-row-value {
  min-width: 0;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-ink);
  font-variant-numeric: tabular-nums;
}

.r12a-copied {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-ok);
}

.r12a-credit {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 8px 0 16px;
  flex-wrap: wrap;
}

.r12a-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* 展示字号（例外，见结果单）：卡片上的余额大数字，G2 明确要求「当前余额（大字）」，
   和一稿定的 40/48 一致；除它以外本页没有别的展示字号。 */
.r12a-balance strong {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  color: var(--r12-ink);
  font-variant-numeric: tabular-nums;
}

.r12a-balance span {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-muted);
}

.r12a-balance-cap { font-size: var(--r12-fs-small, 12px); line-height: var(--r12-lh-small, 18px); color: var(--r12-muted); }
.r12a-sum { font-size: var(--r12-fs-ui, 13px); line-height: var(--r12-lh-ui, 20px); color: var(--r12-muted); }
.r12a-sum b { font-weight: 600; color: var(--r12-ink); font-variant-numeric: tabular-nums; }

.r12a-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.r12a-theme-seg .r12-seg-item { gap: 6px; padding: 0 14px; }
.r12a-theme-seg .r12-seg-item svg { width: 16px; height: 16px; }

.r12a-appearance {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 12px;
}

/* ── 3. 积分与充值 ───────────────────────────────────────────── */

.r12a-balance-card {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 0 8px;
}

.r12a-balance-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r12a-balance-note {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  max-width: 320px;
}

.r12a-amounts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 12px;
}

.r12a-amount {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-2);
  color: var(--r12-ink);
  text-align: left;
  transition: border-color var(--r12-dur-2) var(--r12-ease), background-color var(--r12-dur-2) var(--r12-ease);
}

.r12a-amount strong { font-size: var(--r12-fs-title, 15px); line-height: var(--r12-lh-title, 22px); font-weight: 600; font-variant-numeric: tabular-nums; }
.r12a-amount span { font-size: var(--r12-fs-small, 12px); line-height: var(--r12-lh-small, 18px); color: var(--r12-muted); font-variant-numeric: tabular-nums; }
.r12a-amount:hover { border-color: var(--r12-line-strong); }

.r12a-amount[aria-pressed='true'] {
  border-color: var(--r12-selected-border);
  box-shadow: 0 0 0 1px var(--r12-selected-border);
  background: var(--r12-selected-bg);
  color: var(--r12-ink);
}

.r12a-amount[aria-pressed='true'] strong { font-weight: 600; }

/* 八稿：充值区的付款方式与底部说明，小字；没填的项不渲染 */
.r12a-pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.r12a-pay-method {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control, 8px);
  background: var(--r12-surface-2);
  color: var(--r12-muted);
  font-family: inherit;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  cursor: pointer;
}

.r12a-pay-method[aria-checked='true'] {
  background: var(--r12-selected-bg);
  box-shadow: var(--r12-selected-shadow, none);
  border-color: transparent;
  color: var(--r12-ink);
  font-weight: 600;
}

/* 八稿 27：有加赠的档位带一个普通小标签，不用品牌色 */
.r12a-tier-bonus {
  align-self: flex-start;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

/* 八稿 25：扫码付款区，就地展开，不弹窗 */
.r12a-qr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--r12-line);
  margin-top: 8px;
}

.r12a-qr-title {
  margin: 0;
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12a-qr-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.r12a-qr-code {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12a-qr-code img {
  width: 160px;
  height: 160px;
  display: block;
  border: 1px solid var(--r12-line);
  border-radius: 8px;
  background: var(--r12-surface-2);
}

/* 八稿 27：渠道自己的收款人与说明跟码排在一张卡里，居中、不留空行 */
.r12a-qr-code .r12a-payee,
.r12a-qr-code .r12a-pay-note {
  margin: 0;
  max-width: 160px;
  text-align: center;
}

.r12a-qr-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r12a-claim-reason {
  display: block;
  margin-top: 2px;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 八稿 27：待确认行状态旁的〔撤回〕，文字按钮、普通样式 */
.r12a-claim-withdraw {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-muted);
  font-family: inherit;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  cursor: pointer;
}

.r12a-claim-withdraw:hover {
  color: var(--r12-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.r12a-pay-note {
  margin: 8px 0 0;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 白标：充值区的收款方一行，小字；没有 payee 时前端不渲染这一行 */
.r12a-payee {
  margin: 0 0 8px;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12a-recharge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
  border-top: 1px solid var(--r12-line);
  padding-top: 12px;
}

.r12a-recharge-row .r12a-grow { margin-left: auto; }

/* ── 4. 消耗明细、生成记录：表格、吸顶表头、分页 ─────────────── */

.r12a-table-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.r12a-table-plain { min-width: 0; }

.r12a-table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.r12a-table-scroll .r12-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--r12-surface);
}

.r12a-table-scroll .r12-table th:first-child,
.r12a-table-scroll .r12-table td:first-child { padding-left: 16px; }

.r12a-table-scroll .r12-table th:last-child,
.r12a-table-scroll .r12-table td:last-child { padding-right: 16px; }

.r12a-table-scroll .r12-table tbody tr:hover td { background: var(--r12-hover); }

.r12a-refund { color: var(--r12-ok); font-variant-numeric: tabular-nums; }

.r12a-strike {
  margin-left: 6px;
  color: var(--r12-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.r12a-muted { color: var(--r12-muted); }

.r12a-link {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
  white-space: nowrap;
}

.r12a-link:hover { background: var(--r12-hover); color: var(--r12-ink); text-decoration: underline; text-underline-offset: 3px; }

.r12a-thumb {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r12-r-media);
  overflow: hidden;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
}

.r12a-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.r12a-thumb svg { width: 18px; height: 18px; }

.r12a-cell-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.r12a-cell-title b {
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
  color: var(--r12-ink);
}

.r12a-pager {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--r12-line);
}

.r12a-pager-count {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  font-variant-numeric: tabular-nums;
}

.r12a-pager-pages {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.r12a-page-num {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r12-r-pill);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12a-page-num:hover { background: var(--r12-hover); color: var(--r12-ink); }

.r12a-page-num[aria-current='page'] {
  background: var(--r12-selected-bg);
  box-shadow: var(--r12-selected-shadow, none);
  color: var(--r12-ink);
  font-weight: 600;
}

.r12a-page-num:disabled,
.r12a-page-num[aria-disabled='true'] { color: var(--r12-faint); cursor: not-allowed; background: transparent; }

/* ── 5. 我的资源 ─────────────────────────────────────────────── */

.r12a-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  padding: 4px 0 8px;
}

.r12a-grid .r12-card-media svg { width: 100%; height: 100%; display: block; }

/* 生成失败的资产：图换占位、压暗，说明文字用错误色（和资产页一致） */
.r12a-grid .r12-card[data-r12a-failed] .r12-card-media { opacity: .55; }
.r12a-grid .r12-card[data-r12a-failed] .r12-card-meta { color: var(--r12-error); }

.r12a-resource-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--r12-muted);
}

.r12a-resource-icon svg { width: 24px; height: 24px; }

.r12a-resource-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

/* ── 6. 更换头像弹窗 ─────────────────────────────────────────── */

.r12a-upload {
  min-height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-3);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--r12-dur-2) var(--r12-ease), background-color var(--r12-dur-2) var(--r12-ease);
}

.r12a-upload:hover,
.r12a-upload.is-over { border-color: var(--r12-selected-border); background: var(--r12-hover); }
.r12a-upload:focus-visible { outline: 2px solid var(--r12-selected-border); outline-offset: 2px; }

.r12a-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

.r12a-upload-inner svg { width: 24px; height: 24px; color: var(--r12-faint); }
.r12a-upload-inner strong { font-size: var(--r12-fs-ui, 13px); line-height: var(--r12-lh-ui, 20px); font-weight: 500; color: var(--r12-ink); }

.r12a-upload-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--r12-line);
}

.r12a-copy-area {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.r12a-sys-title {
  margin: 16px 0 8px;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12a-sys {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.r12a-sys-item {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--r12-line);
  border-radius: 50%;
  background: var(--r12-surface-3);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--r12-dur-2) var(--r12-ease);
}

.r12a-sys-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.r12a-sys-item:hover { border-color: var(--r12-line-strong); }
.r12a-sys-item:focus-visible { outline: 2px solid var(--r12-selected-border); outline-offset: 2px; }

.r12a-sys-item[aria-pressed='true'] {
  border-color: var(--r12-selected-border);
  box-shadow: 0 0 0 1px var(--r12-selected-border);
}

/* 确认框正文（甲还没交 ZK.r12.confirm 时的兜底弹窗也用这一行说明） */
.r12a-confirm-text {
  margin: 0 0 4px;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-muted);
}

/* ── 6b. 七稿：设置页、头像面板、通知页 ──────────────────────── */

/* 设置页：内容区最宽 728，卡片圆角 14，条目 44 / 带说明 60，控件右对齐 */
.r12a-set {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 24px;
}

/* 八稿用户意见：四块排在同一页，块与块间隔 32，标题与卡片间隔 8 */
.r12a-set-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r12a-set-section + .r12a-set-section { margin-top: 32px; }

.r12a-set-title {
  margin: 0;
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12a-set-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 九稿：注销账户挪到整页最后一张卡，跟通知块隔 24；底部只留正常的 24 内边距 */
.r12a-set-close {
  margin-top: 24px;
}

.r12a-set-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--r12-line);
  border-radius: 14px;
  background: var(--r12-surface);
  overflow: hidden;
}

.r12a-set-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-top: 1px solid var(--r12-line);
}

.r12a-set-row:first-child { border-top: 0; }
.r12a-set-row.is-tall { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }

.r12a-set-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r12a-set-label b {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
  color: var(--r12-ink);
}

.r12a-set-label small {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12a-set-control {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.r12a-set-value {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-ink);
}

.r12a-set-value.is-muted { color: var(--r12-muted); }
.r12a-set-value b { font-weight: 600; font-variant-numeric: tabular-nums; }

.r12a-set-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 52px;
  padding: 8px 16px;
  border-top: 1px solid var(--r12-line);
}

.r12a-set-row.is-profile { min-height: 88px; gap: 14px; }

/* 九稿：头像那一行右边两个按钮同一行，〔退出登录〕在最右，隔 8 */
.r12a-profile-actions { flex-wrap: nowrap; gap: 8px; }

/* 开关直接用甲的 .r12-switch（32×18，圆钮 14，四周各 2），这里不再自定义 */

/* 分段（设置页）：28 高 */
.r12a-seg {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
}

.r12a-seg-item {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
  white-space: nowrap;
}

.r12a-seg-item:hover { color: var(--r12-ink); }

.r12a-seg-item[aria-pressed='true'] {
  background: var(--r12-selected-bg);
  box-shadow: var(--r12-selected-shadow, none);
  color: var(--r12-ink);
  font-weight: 600;
}

/* 模式：三张缩略图卡 80×60，选中的加 2px 强调色描边 */
.r12a-mode-cards { gap: 16px; }

.r12a-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

.r12a-mode-thumb {
  width: 80px;
  height: 60px;
  display: block;
  border: 1px solid var(--r12-line-strong);
  border-radius: 8px;
  background: var(--r12-surface-2);
}

.r12a-mode-thumb.is-light { background: #ffffff; }
.r12a-mode-thumb.is-dark { background: #141518; }
.r12a-mode-thumb.is-system { background: linear-gradient(90deg, #ffffff 0 50%, #141518 50% 100%); }

.r12a-mode-card.is-selected .r12a-mode-thumb {
  border: 2px solid var(--r12-accent-user, #3377F7);
}

.r12a-mode-card.is-selected { color: var(--r12-ink); font-weight: 600; }

/* 强调色色块 */
.r12a-swatches { display: inline-flex; align-items: center; gap: 8px; }

.r12a-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--r12-line-strong);
  border-radius: 50%;
  background: var(--swatch, var(--r12-surface-3));
  color: #fff;
}

.r12a-swatch.is-custom { background: var(--r12-surface-3); color: var(--r12-muted); }
.r12a-swatch svg { width: 14px; height: 14px; }
.r12a-swatch-check { position: absolute; display: grid; place-items: center; color: #fff; }
.r12a-swatch-check svg { width: 14px; height: 14px; }
.r12a-swatch.is-selected { box-shadow: 0 0 0 2px var(--r12-accent-user, #3377F7); }

/* 头像：8 个两行、当前打勾、上传区 */
.r12a-avatar-img { display: block; border-radius: 50%; object-fit: cover; }

.r12a-avatar-panel { display: flex; flex-direction: column; gap: 12px; padding: 4px; }

.r12a-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.r12a-avatar-option {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--r12-line);
  border-radius: 50%;
  background: var(--r12-surface-3);
  overflow: hidden;
}

.r12a-avatar-option img { width: 100%; height: 100%; display: block; object-fit: cover; }
.r12a-avatar-option:hover { border-color: var(--r12-line-strong); }
.r12a-avatar-option.is-selected { border-color: var(--r12-accent-user, #3377F7); box-shadow: 0 0 0 2px var(--r12-accent-user, #3377F7); }

.r12a-avatar-check {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--r12-accent-user, #3377F7);
  color: #fff;
}

.r12a-avatar-check svg { width: 11px; height: 11px; }
.r12a-avatar-option.is-selected .r12a-avatar-check { display: grid; }

.r12a-avatar-drop {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  cursor: pointer;
}

.r12a-avatar-drop svg { width: 16px; height: 16px; }
.r12a-avatar-drop:hover { border-color: var(--r12-selected-border); }

/* 圆形裁切预览 */
.r12a-crop {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 8px auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--r12-surface-3);
  cursor: grab;
  touch-action: none;
}

.r12a-crop:active { cursor: grabbing; }

.r12a-crop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
  user-select: none;
}

.r12a-crop-note {
  margin: 0 0 4px;
  text-align: center;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 通知页 */
.r12a-notice-list { display: flex; flex-direction: column; }

.r12a-notice-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--r12-line);
}

.r12a-notice-row:first-child { border-top: 0; }
.r12a-notice-row > :last-child { flex: 1; min-width: 0; }

.r12a-unread-dot {
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--r12-accent-user, #3377F7);
}

.r12a-notice-loading {
  margin: 0;
  padding: 24px 16px;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-muted);
}

/* ── 7. 头像菜单：圆角 18、项高 36 ────────────────────────────── */

.r12a-menu {
  position: fixed;
  /* 七稿 0.1：菜单上边不进顶栏，上沿 = 顶栏底边 + 8 */
  top: calc(var(--r12-topbar-h, 48px) + 8px);
  right: 12px;
  z-index: 12000;
  /* #account-menu-root 是铺满视口、pointer-events: none 的浮层，菜单自己要把点击收回来 */
  pointer-events: auto;
  width: 260px;
  padding: 6px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pop);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  transform-origin: top right;
  animation: r12a-menu-in var(--r12-dur-3) var(--r12-ease-enter);
}

.r12a-menu .r12-menu-item { min-height: 36px; padding: 7px 10px; }

.r12a-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--r12-line);
  margin-bottom: 4px;
}

.r12a-menu-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--r12-surface-3);
}

.r12a-menu-id { display: flex; flex-direction: column; min-width: 0; }

.r12a-menu-head b { display: block; font-size: var(--r12-fs-body, 14px); line-height: var(--r12-lh-body, 22px); font-weight: 600; color: var(--r12-ink); }
.r12a-menu-head small { display: block; font-size: var(--r12-fs-small, 12px); line-height: var(--r12-lh-small, 18px); color: var(--r12-muted); font-variant-numeric: tabular-nums; }

.r12a-menu-foot {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--r12-line);
}

.r12a-menu-foot .r12a-signout { margin-left: auto; }

@keyframes r12a-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 8. 减少动态效果 ─────────────────────────────────────────── */

:root[data-motion='reduced'] .r12a-menu { animation: none; }

:root[data-motion='reduced'] .r12a-nav-item,
:root[data-motion='reduced'] .r12a-avatar-veil,
:root[data-motion='reduced'] .r12a-amount,
:root[data-motion='reduced'] .r12a-upload,
:root[data-motion='reduced'] .r12a-sys-item,
:root[data-motion='reduced'] .r12a-page-num { transition: none; }