/* 首页上的账户面板：导航栏原地不动，面板从积分胶囊下方展开，铺满导航栏以下的整个视口。
   面板里嵌入同源的 /account/panel；平时“停靠”在原位（不可见、不可点），所以展开前就已经加载好了。 */
.acct-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--acct-top, 60px);
  z-index: 40;
  background: var(--paper);
  color: var(--ink);
  visibility: hidden;
  pointer-events: none;
  overscroll-behavior: contain;
}
.acct-layer.is-open { visibility: visible; pointer-events: auto; }
.acct-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .22s var(--ease, ease-out);
}
.acct-layer.is-ready .acct-frame { opacity: 1; }
.acct-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
  transition: opacity .2s var(--ease, ease-out);
}
.acct-layer.is-ready .acct-loading { opacity: 0; }

/* 面板展开时，导航栏上的积分胶囊变成“收起”按钮：文字不变，只在后面多一个 ✕，位置完全不动。 */
html.acct-open .sh-account::after { content: "✕"; margin-left: 8px; font-size: 11px; color: var(--ink-3); }
html.acct-open .sh-account { color: var(--clay-deep); background: var(--clay-soft); }
/* 展开期间导航栏吸顶，面板顶边始终贴着它；两侧用阴影把底色铺满整行。 */
html.acct-open #siteHeader {
  position: sticky;
  top: 0;
  z-index: 41;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}