/* 四项共用短标签，保留异常颜色与原有点击入口。 */
.topbar [data-topbar-status="service"],
.topbar button[data-topbar-status="credential"],
.topbar button[data-topbar-status="server-chrome"],
.topbar button[data-topbar-status="buyin"] {
  --status-label-size: 10px;
  --status-label-line: 12px;
  --status-value-size: 11px;
  --status-value-line: 14px;
  height: 38px;
  min-height: 38px;
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  padding: 4px 6px;
  column-gap: 5px;
  flex: none;
  border-color: #dce8e4;
  background: #fbfdfc;
  font-family: inherit;
}
.topbar button[data-topbar-status="credential"] { width: 110px; min-width: 110px; max-width: 110px; column-gap: 0; }
.topbar button[data-topbar-status="credential"] > strong { margin-left: 3px; }
.topbar button[data-topbar-status="server-chrome"] { margin-right: -12px; border-right: 0; border-radius: 0; }
.topbar button[data-topbar-status="buyin"] {
  display: grid;
  grid-template-columns: 6px max-content;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce8e4;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: inset 1px 0 #e5eeeb;
  color: #8999a9;
  cursor: pointer;
  text-align: left;
}
.topbar button[data-topbar-status="buyin"] > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 10%,transparent); }
.topbar button[data-topbar-status="buyin"] > span { display: grid; gap: 2px; white-space: nowrap; }
.topbar button[data-topbar-status="buyin"] small { color: #7a8b9d; font-size: var(--status-label-size); line-height: var(--status-label-line); font-weight: 600; }
.topbar button[data-topbar-status="buyin"] strong { font-size: var(--status-value-size); line-height: var(--status-value-line); font-weight: 730; }
.topbar button[data-topbar-status="buyin"][data-state="healthy"] { color: #14765b; }
.topbar button[data-topbar-status="buyin"][data-state="login_required"],
.topbar button[data-topbar-status="buyin"][data-state="awaiting_code"] { color: #ac7c24; }
.topbar button[data-topbar-status="buyin"]:hover { background: #f3f8f6; }
.topbar button[data-topbar-status="buyin"]:focus-visible { outline: 2px solid #458bcc; outline-offset: 2px; }
@media(max-width:900px) {
  .topbar button[data-topbar-status="buyin"] { width: 72px; min-width: 72px; max-width: 72px; }
}
@media(max-width:600px) {
  .topbar button[data-topbar-status="buyin"] { width: 30px; min-width: 30px; max-width: 30px; padding: 0; grid-template-columns: 6px; border-radius: 8px; border: 1px solid #dce8e4; margin: 0; }
  .topbar button[data-topbar-status="buyin"] > span { display: none; }
}