/* 云端账户：侧栏按钮 / 登录弹层 / 账户菜单
   视觉基准：主流站点的账户入口（GitHub / Vercel / Figma 一类）——
   触发键带头像+昵称，菜单分「资料头 / 功能区 / 危险操作」三段，
   登录弹层带头部品牌区 + 整行 provider 卡片。样式对齐本站约定：
   卡片 12px 圆角 / 按钮 6px、轻量分层阴影、禁高饱和渐变。 */

/* ---------- 侧栏账户按钮（触发键） ---------- */
.wb-account {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 34px; padding: 0 10px 0 7px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text-2);
  font-size: var(--hx-t12-5); font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer; white-space: nowrap;
  max-width: 170px; overflow: hidden;
}
.wb-account svg { width: var(--hx-t15); height: var(--hx-t15); flex: none; }
.wb-account:hover {
  color: var(--accent-text); border-color: var(--accent-soft-border); background: var(--accent-soft-bg);
}
.wb-account.is-authed {
  color: var(--text); border-color: var(--accent-soft-border); background: var(--accent-soft-bg);
}
.wb-account.is-authed:hover { background: var(--accent-soft-bg); }
.wb-account-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; text-align: left; }
/* 右侧 chevron：暗示有菜单，与昵称同行不换行 */
.wb-chev { width: 13px !important; height: 13px !important; color: var(--text-3); flex: none; }
.wb-account:hover .wb-chev { color: var(--accent-text); }

/* 头像（首字色块）：sm 侧栏内 22px / lg 菜单头 38px。
   底色取主题色软底、字取深一档主题色，保证软底上对比度 */
.wb-avatar {
  display: grid; place-items: center; flex: none;
  border-radius: 50%; font-weight: 700; line-height: 1;
  background: var(--accent-soft-bg); color: var(--accent-text);
  border: 1px solid var(--accent-soft-border);
}
.wb-avatar.is-sm { width: 22px; height: 22px; font-size: var(--hx-t11-5); }
.wb-avatar.is-lg { width: 38px; height: 38px; font-size: var(--hx-t17); }

/* 侧边栏底部账户区（全局常驻，融合视图切换时也在） */
.side-account { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 768px) {
  .side-account { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- 弹层公共：挂 body 下固定定位 ---------- */
/* 无遮罩的轻浮层（挂在账户钮下方），视觉令牌与其它弹窗同一套；
   入场用 hxSugIn（自上而下展开），和搜索建议同一个方向。 */
.wb-login-pop, .wb-acct-pop {
  position: fixed; z-index: var(--hx-z-pop, 240);
  background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, var(--border));
  border-radius: var(--hx-dlg-radius, var(--r-card));
  box-shadow: var(--hx-dlg-shadow, var(--shadow-2));
  animation: hxSugIn 0.28s var(--hx-slide) both;
}
.wb-login-pop[hidden], .wb-acct-pop[hidden] { display: none; }
@keyframes wb-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-login-pop, .wb-acct-pop { animation: none; }
}

/* ---------- 登录弹层 ---------- */
.wb-login-pop { width: 288px; padding: 16px; }
/* 头部品牌区：站点标识 + 标题 + 副标题 */
.wb-login-head { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; }
.wb-login-badge {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--text); color: var(--bg);   /* 与 .brand-mark 同一套反转配色 */
}
.wb-login-badge svg { width: var(--hx-t19); height: var(--hx-t19); }
.wb-login-htx { min-width: 0; }
.wb-login-h { font-size: var(--hx-t14); font-weight: 700; letter-spacing: 0.2px; line-height: 1.3; }
.wb-login-hs { font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.4; margin-top: 1px; }

.wb-login-opts { display: flex; flex-direction: column; gap: 7px; }
/* provider 整行卡片：图标块 + 文案 + 右箭头（不是小图标+两行字的紧凑排） */
.wb-login-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.wb-login-opt:hover {
  border-color: var(--border-strong); background: var(--icon-bg);
}
.wb-opt-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
}
.wb-opt-ico svg { width: var(--hx-t20); height: var(--hx-t20); }
.wb-opt-ico.is-wechat { background: rgba(22, 163, 74, 0.09); color: var(--green-text, #15803d); }
.wb-opt-ico.is-wb { background: var(--accent-soft-bg); color: var(--accent-text); }
.wb-opt-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.wb-opt-t { font-size: var(--hx-t13); font-weight: 600; line-height: 1.35; }
.wb-opt-s { font-size: var(--hx-t11); color: var(--text-3); line-height: 1.35; }
.wb-opt-go { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.wb-login-opt:hover .wb-opt-go { color: var(--text-2); }

.wb-login-note {
  margin: 12px 2px 0; font-size: var(--hx-t11); line-height: 1.5; color: var(--text-3);
  padding-top: 11px; border-top: 1px solid var(--border);
}

/* ---------- 账户菜单（已登录） ---------- */
.wb-acct-pop { width: 244px; padding: 0; overflow: hidden; }
/* 资料头：头像 + 昵称 + 账号副行 */
.wb-acct-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 13px;
  background: var(--icon-bg);
  border-bottom: 1px solid var(--border);
}
.wb-acct-meta { min-width: 0; flex: 1 1 auto; }
.wb-acct-name {
  font-size: var(--hx-t13-5); font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-acct-sub {
  font-size: var(--hx-t11); color: var(--text-3); line-height: 1.4; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 功能区 */
.wb-acct-body { padding: 6px; }
.wb-acct-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; width: 100%;
  border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--text);
  font: inherit; font-size: var(--hx-t13); font-weight: 500; text-align: left; cursor: pointer;
}
.wb-acct-item svg { width: var(--hx-t16); height: var(--hx-t16); flex: none; color: var(--text-3); }
.wb-acct-item:hover { background: var(--icon-bg); }
/* 危险操作：退出登录，整行语义色，与普通菜单项明确区分 */
.wb-acct-item.is-danger { color: var(--danger-text); }
.wb-acct-item.is-danger svg { color: var(--danger-text); }
.wb-acct-item.is-danger:hover { background: var(--danger-soft-bg); }

/* 退出确认面板（替换菜单体，不另弹窗） */
.wb-acct-confirm { padding: 15px 14px 14px; }
.wb-acct-cf-t { font-size: var(--hx-t13-5); font-weight: 700; line-height: 1.4; }
.wb-acct-cf-s { font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.5; margin-top: 4px; }
.wb-acct-cf-btns { display: flex; gap: 8px; margin-top: 13px; }
.wb-cf-btn {
  flex: 1 1 0; height: 30px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: var(--hx-t12-5); font-weight: 600; cursor: pointer;
}
.wb-cf-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--icon-bg); }
.wb-cf-btn.is-danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.wb-cf-btn.is-danger:hover { background: var(--danger-text); border-color: var(--danger-text); color: #fff; }