/* r56: the member identity and existing wallet form one account overview. */
#app .account-page { padding-top: 20px; }
#app .account-page-title {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 20px/1.4 var(--sans);
  letter-spacing: -.025em;
}
#app .account-page-slogan {
  margin: 0 0 16px;
  color: var(--muted);
  font: 500 15px/1.6 var(--sans);
}
#app .account-overview {
  border-radius: 20px;
  background: var(--bg-2);
  box-shadow: 0 14px 28px -22px oklch(28% .06 340 / .55);
}
#app .account-overview .account-identity { padding: 20px; }
#app .account-overview .account-person {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
}
#app .account-overview .account-person > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
#app .account-overview .account-person > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--muted);
  transition: transform .16s ease;
}
#app .account-overview .account-person:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
#app .account-overview .account-wallet {
  border-radius: 0 0 20px 20px;
  box-shadow: none;
}
@media (hover: hover) {
  #app .account-overview .account-person:hover > svg { transform: translateX(3px); }
}
@media (max-width: 359px) {
  #app .account-overview .account-identity { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .account-overview .account-person > svg { transition: none; }
}
@media (forced-colors: active) {
  #app .account-overview { outline: 1px solid CanvasText; }
}