/* 右上角头像（account-badge.js，2026-10-01）：头像上写是哪个账号；超级管理员换琥珀色，和自己的飞书账号一眼分开；
   同一个账号同时开着好几处时，右上角标数字。
   10-09：悬停出一张卡片（每一处：小图标 + 按 IP 查的地点 + 正在看 / 后台的圆点，能当场改名），登录弹窗顶上放同一张。 */
#key-modal-who[hidden], .acct-pop[hidden], .acct-pop [hidden], .acct-who [hidden] { display: none !important; }
button.avatar#set-api-key { position: relative; white-space: nowrap; overflow: visible; }
button.avatar#set-api-key.acct-super { background: var(--a-700); }
button.avatar#set-api-key.acct-long { font-size: 10px; letter-spacing: 0; }
button.avatar#set-api-key .acct-count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--info-fg); color: var(--text-on-accent); box-shadow: 0 0 0 2px var(--canvas);
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 18px; letter-spacing: 0; text-align: center;
}

/* 悬停卡片 */
.acct-pop {
  position: fixed; z-index: var(--z-popover); width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 80px);
  overflow-y: auto; box-sizing: border-box; padding: 14px 14px 10px; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-2);
  color: var(--text-primary); font-size: var(--fs-sm); line-height: 1.45; text-align: left;
}
/* 登录弹窗里的同一张卡片 */
.acct-who {
  margin: 0 0 12px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-sunken);
  color: var(--text-primary); font-size: var(--fs-sm); line-height: 1.45; text-align: left;
  max-height: min(52vh, 480px); overflow-y: auto;      /* 开着的地方多时弹窗别撑出屏幕，下面「退出登录」要一直点得到 */
}

.acct-head { display: flex; align-items: center; gap: 10px; }
.acct-av {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--green); color: var(--text-on-accent); font-size: 11px; font-weight: 750; white-space: nowrap;
}
.acct-av.is-super { background: var(--a-700); }
.acct-who-main { min-width: 0; flex: 1; }
.acct-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.acct-name b { font-weight: 700; }
.acct-sub { color: var(--text-secondary); font-size: var(--fs-xs); margin-top: 1px; }

.acct-sec { margin: 12px 0 6px; color: var(--text-secondary); font-size: var(--fs-xs); white-space: nowrap; }
.acct-sec b { color: var(--text-primary); }
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acct-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--surface);
}
.acct-row.is-here { border-color: var(--accent-soft-border); background: var(--accent-soft-bg); }
.acct-row.is-compact { padding: 6px 10px; }
.acct-ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--text-secondary); }
.acct-ic svg { width: 22px; height: 22px; display: block; }
.acct-row.is-here .acct-ic { color: var(--accent-soft-fg); }
.acct-body { min-width: 0; flex: 1; }
.acct-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acct-dev { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-tag {
  flex: none; padding: 0 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--text-on-accent);
  font-size: 11px; line-height: 18px; white-space: nowrap;
}
.acct-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; color: var(--text-primary); }
.acct-devtype { color: var(--text-secondary); white-space: nowrap; }
.acct-geo { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.acct-geo svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.acct-geo.acct-none { color: var(--text-muted); }
.acct-ip { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.acct-l3 { margin-top: 2px; }
.acct-state { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: var(--fs-xs); }
.acct-state.is-on { color: var(--success-fg); }
.acct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-control); flex: none; }
.acct-state.is-on .acct-dot { background: var(--success-fg); }

/* 改名：小字链接，行悬停才显眼；正在改时换成输入框 + 保存 / 取消 */
.acct-link {
  flex: none; border: 0; background: none; padding: 0 2px; margin-left: auto; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); color: var(--info-fg); opacity: .55; white-space: nowrap;
}
.acct-name .acct-link { margin-left: 0; }
.acct-row:hover .acct-link, .acct-name:hover .acct-link, .acct-link:focus-visible { opacity: 1; text-decoration: underline; }
.acct-edit { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.acct-edit input {
  flex: 1; min-width: 0; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 6px;
  border: 1px solid var(--border-control); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px;
}
.acct-edit button {
  flex: none; height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap;
  border: 1px solid var(--border-control); background: var(--surface); color: var(--text-primary);
}
.acct-edit .acct-save { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.acct-edit .acct-save:disabled { opacity: .6; cursor: default; }
.acct-err { margin: 8px 0 0; color: var(--danger-fg); font-size: var(--fs-xs); }
.acct-rule { margin: 10px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.acct-foot { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .acct-edit input { font-size: 16px; }      /* 小于 16px iPhone 一点输入框就整页放大 */
  .acct-link { opacity: 1; }
}

/* 没登录时正文的登录卡（index.html #login-gate，2026-10-17）：弹窗关掉后页面不再是一片空，飞书登录按钮跟弹窗里那个一个样 */
.login-gate[hidden] { display: none !important; }
.login-gate { display: grid; place-items: center; padding: 48px 16px; }
.login-gate-card {
  width: min(420px, 100%); box-sizing: border-box; padding: 28px 24px 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); text-align: center;
}
.login-gate-card h2 { margin: 0 0 8px; font-size: var(--fs-xl); line-height: var(--lh-xl); color: var(--text-primary); }
.login-gate-card p { margin: 0 0 18px; color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-md); }
.login-gate-card p.login-gate-alt { margin: 14px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
#login-gate-feishu {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 10px; text-decoration: none; width: 100%;
  background: var(--green); color: var(--text-on-accent); font-size: 15px; font-weight: 600;
}
#login-gate-feishu:hover { background: var(--green-2); }
#login-gate-feishu span {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 400;
}
#login-gate-admin {
  display: block; margin: 12px auto 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--text-muted); font-size: 12px; text-decoration: underline; padding: 2px;
}
#login-gate-admin:hover { color: var(--text-primary); }