.portal-authbar {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: #191a2d;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: #f4f5fb;
  font: 500 .9rem/1.4 "Ubuntu Sans", "Noto Sans TC", sans-serif;
}
.portal-authbar * { box-sizing: border-box; }
.portal-authbar__brand { font-size: 1rem; font-weight: 750; }
.portal-authbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; }
.portal-authbar__identity { color: #bdc5d7; margin-right: .4rem; }
.portal-authbar a, .portal-authbar button {
  color: inherit; text-decoration: none; border: 0; background: none;
  font: inherit; cursor: pointer; border-radius: .55rem; padding: .45rem .55rem;
}
.portal-authbar a:hover, .portal-authbar button:hover,
.portal-authbar a:focus-visible, .portal-authbar button:focus-visible {
  background: #343653; outline: 2px solid #8ca9ff; outline-offset: 2px;
}
.portal-authbar .portal-authbar__primary { background: #cc3152; color: #fff; padding: .55rem .85rem; }
@media (max-width: 620px) {
  .portal-authbar { align-items: flex-start; }
  .portal-authbar__actions { width: 100%; }
}