/* 账号入口 · 右上角常驻（余额 / 个人中心 / 充值）
   冻结那套整页 sticky 试过没用（页面不长 + sticky 依赖滚动容器，感受不到），
   改成钉在顶栏右上角：任何页面、任何滚动位置都在同一处。 */

.top-account{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.top-account .pill{font-variant-numeric:tabular-nums;white-space:nowrap}
.top-account .text-button{min-height:28px;padding:0 2px;white-space:nowrap}

/* 两个独立面板：个人中心 / 充值。沿用 rb-dialog 的宽度与滚动，只补标题栏与内边距。 */
.acct-dialog{width:min(760px,95vw)}
.acct-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.acct-dialog-head h2{margin:0;font-size:19px}
.acct-dialog-head .text-button{color:var(--muted)}
.acct-dialog-body{margin-top:6px}

@media(max-width:760px){
 /* 窄屏顶栏会换行，常驻区跟着换到第二行，但依然固定在右上侧 */
 .top-account{margin-left:auto;gap:8px}
}

/* ══ 账号面板：预热容器 + 骨架屏 ══
   预热容器放在屏幕外：鼠标移到「个人中心/充值」上时面板就在这里建好、请求随之发出；
   点开时把节点搬进对话框，所以打开即有内容。骨架屏负责"立刻有反馈"。 */
.acct-prewarm{position:absolute;left:-99999px;top:0;width:660px;visibility:hidden;pointer-events:none}
.acct-skeleton{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.acct-skeleton-row{height:16px;border-radius:8px;
  background:linear-gradient(90deg,#efe9df,#f8f4ee,#efe9df);background-size:200% 100%;
  animation:acctShimmer 1.2s ease-in-out infinite}
.acct-skeleton-row:nth-child(1){width:58%}
.acct-skeleton-row:nth-child(3){width:82%}
.acct-skeleton-row:nth-child(4){width:44%}
@keyframes acctShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.acct-skeleton-row{animation:none}}

/* 个人中心面板里的快捷入口（与侧栏同一份视图，两处可进） */
.acct-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.acct-quick button{padding:7px 14px;font-size:12.5px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--ink);cursor:pointer}
.acct-quick button:hover{border-color:var(--accent);color:var(--accent)}
.rc-tabs .rc-pay-on{color:var(--accent,#7a5af8);font-weight:600}