/* ═══════════════════════════════════════════════════════════════
   Aqua Account · 左上角账号入口
   触发器与右侧导航同材质同高度；下拉为深色克制面板
   零外部素材，图标全部内联 SVG
   ═══════════════════════════════════════════════════════════════ */

.ac {
  /* 与 .navbar 同一光学行：top/right 对称，z 只比导航高一层 */
  position: fixed; top: 22px; left: 26px; z-index: 61;
  --ac-h: 40px;                 /* 内层高度，脚本按真实导航高度校正 */
  padding: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 12px 34px rgba(26, 73, 196, .16), var(--shadow-inset);
  animation: acIn 1s var(--e-expo) both;
}
.ac::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(148deg, rgba(255, 255, 255, .98), rgba(160, 205, 255, .5) 40%, rgba(124, 156, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@keyframes acIn {
  from { opacity: 0; transform: translate3d(0, -22px, 0) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ─────────── 触发器 ─────────── */

.ac-btn {
  display: flex; align-items: center; gap: 9px;
  height: var(--ac-h);
  padding: 0 12px 0 10px;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--e-soft), background-color .2s var(--e-soft);
}
.ac-btn:hover { color: var(--azure-deep); background: rgba(255, 255, 255, .5); }
.ac-btn[data-open="1"] { color: var(--azure-deep); background: rgba(255, 255, 255, .66); }
.ac-btn:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }

.ac-ico { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .22s var(--e-spring); }
.ac-btn:hover .ac-ico { transform: scale(1.07); }

.ac-sep { flex: 0 0 auto; width: 1px; height: 15px; background: rgba(13, 31, 60, .14); }

.ac-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .18em; line-height: 1;
  white-space: nowrap;
}
.ac-name {
  max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.ac-chev { flex: 0 0 auto; width: 9px; height: 9px; opacity: .8; transition: transform .2s var(--e-expo); }
.ac-btn[data-open="1"] .ac-chev { transform: rotate(180deg); }

/* 头像：首字母刻面，不用外部图片 */
.ac-avatar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, var(--azure) 0%, var(--peri) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(26, 73, 196, .3);
}
.ac-avatar.lg { width: 34px; height: 34px; font-size: 14px; }

/* Loading：圆形骨架 + 一条短骨，不显示任何用户名 */
.ac-skel {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(100deg, rgba(127, 151, 184, .18) 30%, rgba(127, 151, 184, .34) 50%, rgba(127, 151, 184, .18) 70%);
  background-size: 220% 100%;
  animation: acShine 1.25s var(--e-soft) infinite;
}
.ac-skelbar {
  width: 58px; height: 8px; border-radius: 4px;
  background: linear-gradient(100deg, rgba(127, 151, 184, .18) 30%, rgba(127, 151, 184, .34) 50%, rgba(127, 151, 184, .18) 70%);
  background-size: 220% 100%;
  animation: acShine 1.25s var(--e-soft) infinite;
}
@keyframes acShine {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

/* ─────────── 下拉面板（深色） ─────────── */

.ac-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 228px; padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(150, 170, 200, .16);
  background: linear-gradient(160deg, rgba(15, 21, 33, .93), rgba(9, 13, 22, .95));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 26px 62px rgba(6, 12, 24, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #d7e0ef;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, -6px, 0) scale(.985);
  transition: opacity .17s var(--e-soft), transform .2s var(--e-expo), visibility 0s linear .2s;
}
.ac-menu[data-show="1"] {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .17s var(--e-soft), transform .2s var(--e-expo), visibility 0s;
}

.ac-group {
  padding: 7px 11px 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em;
  color: #6f83a0;
}
.ac-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 11px;
  border: 0; border-radius: 10px;
  background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: #cbd6e8; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--e-soft), color .16s var(--e-soft);
}
.ac-item:hover { background: rgba(124, 156, 255, .13); color: #fff; }
.ac-item:focus-visible { background: rgba(124, 156, 255, .17); color: #fff; outline: 1px solid rgba(143, 208, 255, .55); outline-offset: -1px; }
.ac-item.danger { color: #c9a2a2; }
.ac-item.danger:hover { background: rgba(214, 120, 120, .12); color: #f0cfcf; }

.ac-tag {
  margin-left: auto; flex: 0 0 auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  color: #5f7391;
}

.ac-hr { height: 1px; margin: 6px 8px; background: rgba(150, 170, 200, .14); }

.ac-id { display: flex; align-items: center; gap: 10px; padding: 10px 11px 12px; }
.ac-idtxt { min-width: 0; display: block; }
.ac-nm {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: #f2f6ff;
}
.ac-em {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 3px; font-size: 11px; letter-spacing: .02em; color: #8296b3;
}

.ac-warn {
  padding: 9px 11px; margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(196, 138, 74, .12);
  font-size: 11.5px; line-height: 1.6; color: #d9b78c;
}

.ac-foot {
  margin: 6px 11px 3px; padding-top: 7px;
  border-top: 1px solid rgba(150, 170, 200, .12);
  font-size: 10.5px; line-height: 1.6; color: #6b7f9c;
}

.ac-load { display: flex; gap: 6px; padding: 13px 11px; }
.ac-load i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(143, 208, 255, .5);
  animation: acDot 1s var(--e-soft) infinite;
}
.ac-load i:nth-child(2) { animation-delay: .15s; }
.ac-load i:nth-child(3) { animation-delay: .3s; }
@keyframes acDot {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

.ac-toast {
  max-height: 0; overflow: hidden; padding: 0 11px;
  font-size: 11px; line-height: 1.6; color: #9fd0f5;
  transition: max-height .2s var(--e-expo), padding .2s var(--e-expo);
}
.ac-toast[data-show="1"] { max-height: 46px; padding: 7px 11px 3px; }

/* ─────────── 窄屏：只留图标 ─────────── */

@media (max-width: 768px) {
  .ac { top: 16px; left: 16px; }
  .ac-btn { padding: 0; width: var(--ac-h); justify-content: center; }
  .ac-label, .ac-name, .ac-sep, .ac-chev { display: none; }
  .ac-menu { width: min(224px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ac { animation: none; }
  .ac-btn, .ac-ico, .ac-chev, .ac-menu, .ac-item, .ac-toast { transition-duration: .01ms; }
  .ac-skel, .ac-skelbar, .ac-load i { animation: none; }
}