/* Keep a real gap between the brand and wallet, including long balances. */
.app .wallet{gap:16px;padding-inline:12px}
.app .wallet .brand-group{display:flex;align-items:center;min-width:0;flex:0 0 auto}
.app .wallet .wallet-actions{min-width:0;flex:0 1 auto;gap:6px}
.app .wallet .balance{min-width:0;flex:0 1 auto;white-space:nowrap}
.app .wallet .balance b,.app .wallet .balance>span:last-child{flex:none}
.app .wallet #amount{min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.app .wallet .deposit,.app .wallet .avatar,.app .wallet #menu{flex-shrink:0}
@media(min-width:700px){.app .wallet{gap:24px;padding-inline:20px}}
@media(max-width:480px){
 .app .wallet{gap:12px;padding-inline:8px}
 .app .wallet #menu{display:none}
 .app .wallet .logo .brand-wordmark{font-size:20px;letter-spacing:-.5px}
 .app .wallet .brand-symbol{width:33px;height:31px}
 .app .wallet .balance{padding:7px 6px;gap:4px;font-size:11px}
 .app .wallet #amount{max-width:104px}
 .app .wallet .deposit{padding:11px 8px;font-size:11px}
 .app .wallet .avatar{width:28px;height:28px}
}
@media(max-width:360px){
 .app .wallet{gap:8px}
 .app .wallet .brand-group{gap:3px}
 .app .wallet .logo .brand-wordmark{font-size:16px}
 .app .wallet .brand-symbol{width:26px;height:27px}
 .app .wallet .wallet-actions{gap:4px}
 .app .wallet .balance{padding:6px 5px;font-size:10px;gap:3px}
 .app .wallet .balance b{width:18px;height:18px;font-size:15px}
 .app .wallet #amount{max-width:82px}
 .app .wallet .deposit{padding:10px 6px;font-size:10px}
 .app .wallet .avatar{width:26px;height:26px}
}