:root{
  color-scheme:dark;
  --bg:#111111;
  --surface:#1b1b1b;
  --surface2:#272727;
  --line:#404040;
  --ink:#f5f5f5;
  --muted:#b8b8b8;
  --soft:#a3a3a3;
  --accent:#e3e3e3;
  --accent-ink:#1b1b1b;
  --warn:#dddddd;
  --radius:20px;
  --safe:max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px));
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh
}
button,input,textarea,select{
  font:inherit
}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent
}
button,a{
  touch-action:manipulation
}
button{
  cursor:pointer
}
button:disabled{
  cursor:wait;
  opacity:.55
}
a{
  color:inherit;
  text-decoration:none
}
button{
  color:inherit;
  border:0
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px
}
button:active:not(:disabled){
  transform:scale(.98)
}
[hidden]{
  display:none!important
}
.app-shell{
  max-width:760px;
  margin:0 auto
}
.topbar{
  min-height:104px;
  padding:24px 24px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  background:none;
  text-align:left;
  min-height:56px;
  padding:0;
  flex-shrink:0
}
.brand-logo{
  display:block;
  width:56px;
  height:56px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:12px
}
.brand-wordmark{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:14px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:2.4px;
  color:var(--ink)
}
.brand-wordmark span:last-child{
  color:var(--muted)
}
.language-button{
  min-height:44px;
  min-width:68px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:24px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
main{
  padding:8px 24px calc(116px + var(--safe));
  outline:none
}
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--accent);
  line-height:1.6;
  margin:0 0 18px
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2,h3{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
h1{
  font-size:38px;
  letter-spacing:-1.8px;
  line-height:1.12;
  font-weight:600;
  margin-bottom:16px;
  white-space:pre-line
}
h2{
  font-size:22px;
  letter-spacing:-.6px;
  line-height:1.25;
  font-weight:600;
  margin-bottom:8px
}
h3{
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.3px;
  margin:0 0 6px
}
p{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin-bottom:20px
}
.hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(135deg,#292929,#1b1b1b 65%);
  padding:30px 26px;
  margin:8px 0 24px
}
.hero p{
  max-width:440px
}
.hero .primary{
  margin-top:6px
}
.hero-footer{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  margin-top:16px
}
.hero-footer .icon{
  width:14px;
  height:14px;
  color:var(--accent)
}
.hero.compact h1{
  font-size:32px
}
.hero.compact{
  padding:28px 24px
}
.primary,.secondary,.ghost-link{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  padding:14px 20px;
  font-weight:600;
  font-size:14px;
  line-height:1.45;
  text-align:center;
  transition:background .18s,transform .18s
}
.primary{
  background:var(--accent);
  color:var(--accent-ink)
}
.primary:hover{
  background:#ffffff
}
.secondary{
  background:var(--surface2);
  color:var(--ink);
  border:1px solid var(--line)
}
.secondary:hover{
  background:#333333
}
.wide{
  width:100%
}
.ghost-link{
  background:none;
  color:var(--accent);
  padding-left:0;
  padding-right:0;
  justify-content:flex-start
}
.icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:28px 0 14px;
  gap:12px
}
.section-head h2{
  margin:0
}
.small-link{
  background:none;
  min-height:44px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px
}
.small-link .icon{
  width:16px
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.quick-tile{
  min-height:130px;
  padding:20px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  position:relative;
  transition:border-color .2s,background .2s
}
.quick-tile:hover{
  border-color:#808080;
  background:#252525
}
.quick-tile .tile-icon{
  color:var(--accent)
}
.quick-tile strong{
  font-size:15px;
  font-weight:600;
  line-height:1.25
}
.quick-tile small{
  font-size:11px;
  color:var(--soft);
  display:block;
  margin-top:5px;
  font-weight:400
}
.quick-tile .corner-arrow{
  position:absolute;
  right:17px;
  top:19px;
  color:var(--soft);
  width:16px
}
.quick-tile.highlight{
  background:var(--accent);
  border-color:transparent;
  color:var(--accent-ink)
}
.quick-tile.highlight small{
  color:#484848
}
.quick-tile.highlight .tile-icon,.quick-tile.highlight .corner-arrow{
  color:var(--accent-ink)
}
.account-list{
  display:flex;
  flex-direction:column;
  gap:10px
}
.account-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--surface);
  min-height:84px;
  text-align:left;
  width:100%
}
.account-mark{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.8px;
  border-radius:14px;
  background:#303030;
  color:#e3e3e3
}
.account-row[data-panel="firekirin"] .account-mark{
  background:#303030;
  color:#e3e3e3
}
.account-row[data-panel="playacebook"] .account-mark{
  background:#303030;
  color:#e3e3e3
}
.account-row[data-panel="vblink"] .account-mark{
  background:#303030;
  color:#e3e3e3
}
.account-details{
  flex:1;
  min-width:0
}
.account-details strong{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:4px
}
.account-details span{
  display:block;
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere
}
.pill{
  font-size:11px;
  line-height:1.5;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  padding:5px 9px;
  border-radius:20px;
  color:var(--muted);
  white-space:nowrap
}
.pill::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent)
}
.assistant-card{
  padding:22px;
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(120deg,#252525,#1b1b1b);
  display:flex;
  gap:16px;
  align-items:flex-start
}
.assistant-orb{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#ffffff0d;
  border:1px solid #ffffff26;
  color:var(--accent);
  flex-shrink:0
}
.assistant-card p{
  font-size:12px;
  line-height:1.6;
  margin:6px 0 0
}
.assistant-card .small-link{
  color:var(--accent);
  margin-top:4px
}
.balance-card{
  margin-top:20px;
  background:#111111cc;
  border:1px solid #555555;
  border-radius:20px;
  padding:20px
}
.balance-card small{
  color:var(--muted);
  font-size:11px
}
.balance-card strong{
  display:block;
  font-size:20px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.5px;
  margin:8px 0
}
.balance-card p{
  font-size:11px;
  margin:0
}
.bottom-nav{
  position:fixed;
  z-index:20;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,760px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  padding:12px 12px calc(12px + var(--safe));
  background:#111111f5;
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line)
}
.nav-item{
  background:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:4px 2px;
  color:#b8b8b8;
  font-size:11px;
  font-weight:500;
  min-height:48px
}
.nav-item .icon{
  width:21px;
  height:21px
}
.nav-item[aria-current="page"]{
  color:var(--accent)
}
.nav-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:28px;
  border-radius:12px
}
.nav-item[aria-current="page"] .nav-icon{
  background:#ffffff15
}
.page-heading{
  padding:16px 0 8px
}
.page-heading h1{
  font-size:32px
}
.page-heading p{
  font-size:13px;
  max-width:440px
}
.empty-state{
  border:1px dashed #555555;
  border-radius:24px;
  padding:36px 24px;
  text-align:center;
  margin:20px 0
}
.empty-state .icon{
  color:var(--accent);
  width:34px;
  height:34px;
  margin-bottom:16px
}
.empty-state p{
  font-size:13px;
  margin:12px 0 0
}
.quiet-card{
  padding:22px;
  background:var(--surface);
  border-radius:20px;
  border:1px solid var(--line);
  margin-top:20px
}
.quiet-card p{
  font-size:13px;
  margin:8px 0 14px
}
.steps{
  list-style:none;
  padding:0;
  margin:22px 0
}
.steps li{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  min-height:48px
}
.step-number{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:11px
}
.steps li:first-child .step-number{
  background:var(--accent);
  color:var(--accent-ink);
  border:0
}
.steps li:first-child{
  color:var(--ink)
}
.status-note{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--warn);
  font-size:12px
}
.status-note .icon{
  width:16px
}
.sheet{
  margin:auto auto 0;
  border:1px solid var(--line);
  border-radius:30px 30px 0 0;
  background:var(--surface);
  color:var(--ink);
  width:min(100%,760px);
  max-width:760px;
  max-height:90dvh;
  padding:28px 24px calc(24px + var(--safe));
  overflow:auto
}
.sheet::backdrop{
  background:#080808c9;
  backdrop-filter:blur(4px)
}
.sheet-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px
}
.sheet-header h2{
  margin:3px 0
}
.icon-button{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--surface2);
  flex-shrink:0
}
.form-label{
  display:block;
  font-size:12px;
  font-weight:600;
  margin:22px 0 8px
}
.text-input,select,textarea{
  color:var(--ink);
  border:1px solid #777777;
  background:#161616;
  border-radius:14px;
  width:100%;
  min-height:52px;
  padding:14px 16px;
  outline-offset:3px
}
input::placeholder,textarea::placeholder{
  color:#a3a3a3
}
.field-help{
  font-size:11px;
  line-height:1.6;
  margin:8px 0 20px;
  color:var(--muted)
}
.form-error{
  color:#f5f5f5;
  font-size:12px;
  line-height:1.6;
  min-height:20px;
  margin:8px 0 14px
}
.small-note{
  font-size:11px;
  line-height:1.6;
  color:var(--soft);
  margin:14px 0 0
}
.language-options{
  display:grid;
  gap:10px;
  margin:20px 0
}
.language-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface2);
  min-height:60px
}
.language-option[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--accent)
}
.chat-intro{
  padding:14px 0 6px
}
.chat-intro h1{
  font-size:34px
}
.chat-intro p{
  font-size:13px
}
.chat-starters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0
}
.chat-starter{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--muted);
  text-align:left;
  font-size:12px;
  padding:12px 14px;
  min-height:44px
}
.chat-thread{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:22px 0
}
.chat-bubble{
  border-radius:20px;
  background:var(--surface2);
  padding:16px 18px;
  max-width:94%;
  line-height:1.65;
  font-size:14px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.chat-bubble.user{
  background:#e3e3e3;
  color:#1b1b1b;
  align-self:flex-end;
  border-bottom-right-radius:6px
}
.chat-bubble.ai{
  align-self:flex-start;
  border-bottom-left-radius:6px
}
.chat-bubble.notice{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted)
}
.chat-author{
  display:block;
  color:var(--accent);
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:700;
  margin-bottom:7px
}
.chat-compose{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:22px
}
.chat-compose textarea{
  resize:vertical;
  min-height:56px;
  max-height:160px;
  line-height:1.5;
  font-size:14px
}
.send-button{
  height:56px;
  width:56px;
  flex-shrink:0;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:16px;
  display:grid;
  place-items:center
}
.chat-footer{
  font-size:11px;
  margin:10px 0;
  color:var(--soft)
}
.chat-toolbar{
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:16px 0
}
.chat-toolbar .small-link{
  font-size:11px
}
.transaction-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.transaction-row .tx-body{
  flex:1
}
.transaction-row strong{
  display:block;
  font-size:14px;
  font-weight:500
}
.transaction-row small{
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:4px
}
.transaction-row .tx-status{
  font-size:11px;
  color:var(--muted)
}
.loading-card{
  min-height:50dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:20px
}
.loader{
  width:26px;
  height:26px;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite
}
.error-panel{
  padding:38px 0
}
.error-panel h1{
  font-size:36px
}
.error-panel p{
  margin:24px 0
}
.error-panel .assistant-orb{
  margin-bottom:26px;
  width:56px;
  height:56px;
  border-radius:19px
}
#toast{
  position:fixed;
  z-index:60;
  bottom:calc(100px + var(--safe));
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 36px);
  padding:14px 18px;
  border-radius:16px;
  border:1px solid #777777;
  background:#272727;
  color:var(--ink);
  font-size:13px;
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s
}
#toast.visible{
  opacity:1
}
@keyframes spin{
  to{
    transform:rotate(360deg)
  }

}
@media(min-width:650px){
  .topbar{
    padding-top:32px;
    min-height:112px
  }
  main{
    padding-left:32px;
    padding-right:32px
  }
  .hero{
    padding:40px
  }
  .hero h1{
    font-size:46px
  }
  .hero.compact h1{
    font-size:40px
  }
  .quick-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .quick-tile{
    padding:18px
  }
  .quick-tile strong{
    font-size:14px
  }
  .quick-tile small{
    font-size:11px
  }
  .bottom-nav{
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:26px 26px 0 0
  }
  .sheet{
    margin:auto;
    border-radius:28px;
    max-width:550px
  }
  .chat-bubble{
    max-width:80%
  }

}
@media(max-width:350px){
  .topbar{
    padding-left:16px;
    padding-right:16px
  }
  main{
    padding-left:16px;
    padding-right:16px
  }
  .hero{
    padding:24px 20px
  }
  h1{
    font-size:32px
  }
  .hero.compact h1{
    font-size:28px
  }
  .quick-tile{
    padding:16px
  }
  .pill{
    font-size:11px;
    padding:4px 7px
  }
  .account-row{
    padding:12px;
    gap:9px
  }
  .account-mark{
    width:36px;
    height:36px
  }
  .account-details strong{
    font-size:13px
  }
  .account-row .icon{
    display:none
  }

}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}



/* Short, user-triggered motion; no animated financial states. */
.topbar{
  margin-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px))
}

.quick-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))
}

button{
  transition:transform 120ms ease,background-color 160ms ease,border-color 160ms ease
}

.page-enter{
  animation:page-in 220ms ease-out both
}
.page-enter .quick-tile:nth-child(-n+4){
  animation:tile-in 220ms ease-out both
}
.page-enter .quick-tile:nth-child(2){
  animation-delay:35ms
}
.page-enter .quick-tile:nth-child(3){
  animation-delay:70ms
}
.page-enter .quick-tile:nth-child(4){
  animation-delay:105ms
}

.sheet[open]{
  animation:sheet-in 300ms cubic-bezier(.2,.8,.2,1) both
}
.request-reference{
  overflow-wrap:anywhere;
  font-family:ui-monospace,monospace;
  font-size:11px
}

.backgrounded *{
  animation-play-state:paused!important
}
.keyboard-open .bottom-nav{
  display:none
}
.low-effects .bottom-nav,.low-effects .sheet::backdrop{
  backdrop-filter:none
}

@keyframes page-in{
  from{
    opacity:0;
    translate:0 10px
  }
  to{
    opacity:1;
    translate:0 0
  }

}
@keyframes tile-in{
  from{
    opacity:0;
    translate:0 6px
  }
  to{
    opacity:1;
    translate:0 0
  }

}
@keyframes sheet-in{
  from{
    opacity:0;
    translate:0 20px
  }
  to{
    opacity:1;
    translate:0 0
  }

}

@media(prefers-reduced-motion:reduce){
  button:active:not(:disabled){
    transform:none!important
  }
  *,*::before,*::after{
    translate:none!important;
    animation:none!important;
    transition:none!important
  }
  .sheet::backdrop,.bottom-nav{
    backdrop-filter:none
  }

}

/* Deep Matrix: neutral chrome; supplied logo is the only chromatic asset. */
body{line-height:1.5;-webkit-font-smoothing:antialiased}
.app-shell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.brand:hover .brand-wordmark{color:#ffffff}
.language-button:hover,.icon-button:hover,.language-option:hover,.chat-starter:hover{background:#333333}
.small-link{min-width:44px}
.nav-item{min-width:44px;line-height:1.25}
.nav-item[aria-current="page"]{font-weight:600}
.account-row,.quick-tile,.language-option{overflow-wrap:anywhere}
button.account-row:hover{background:#252525;border-color:#808080}
.form-error:not(:empty){border-left:2px solid #e3e3e3;padding-left:12px}
.status-note{align-items:flex-start;line-height:1.6}
.text-input,select,textarea{font-size:16px}
::selection{background:#e3e3e3;color:#1b1b1b}
@media(max-width:350px){
  .topbar{gap:12px}
  .brand{gap:8px}
  .brand-wordmark{font-size:12px;letter-spacing:2px}
  .language-button{min-width:60px}
  .bottom-nav{padding-left:4px;padding-right:4px}
}

/* Primary client actions lead; account access remains explicit and nearby. */
.home-heading{padding:12px 0 20px}
.home-heading h1{font-size:24px;letter-spacing:-.6px;margin:0}
.home-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-actions .quick-tile{min-height:124px;border-radius:20px}
.home-actions .quick-tile.highlight{grid-column:1/-1;min-height:180px;padding:28px;justify-content:space-between}
.home-actions .quick-tile.highlight strong{font-size:32px;letter-spacing:-1px;line-height:1.1}
.home-actions .quick-tile.highlight .tile-icon{width:28px;height:28px}
.home-actions .quick-tile:last-child{grid-column:1/-1;min-height:100px;flex-direction:row;align-items:center;gap:16px;padding-right:44px}
.home-actions .quick-tile:last-child .corner-arrow{top:50%;translate:0 -50%}
.onboarding-card{padding:20px;margin:0 0 20px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.onboarding-card .eyebrow{margin-bottom:8px}
.onboarding-card p{margin-bottom:16px}
.onboarding-card .steps{margin:12px 0}
.onboarding-card .steps li{min-height:40px}
@media(max-width:350px){
  .home-actions .quick-tile.highlight{min-height:164px;padding:24px}
  .home-actions .quick-tile.highlight strong{font-size:28px}
  .home-actions .quick-tile{padding:16px}
}

/* Current payment flow and independently scoped real balance cards. */
.deposit-flow{display:grid;gap:16px}.deposit-flow h3{margin:8px 0}.deposit-choices{display:grid;gap:12px}
.deposit-choice{display:flex;flex-direction:column;align-items:flex-start;gap:5px;white-space:normal;text-align:left}
.deposit-choice span,.deposit-choice small{overflow-wrap:anywhere}.deposit-choice:disabled{opacity:.65;cursor:default}
.deposit-account{margin:0;display:flex;flex-direction:column;gap:4px}.deposit-flow form{display:grid;gap:12px}
.payment-destination{display:block;overflow-wrap:anywhere;word-break:break-all;font-size:14px;padding:16px;background:var(--surface2);border-radius:12px;user-select:text}
.payment-qr-wrap{padding:16px;background:#ffffff;max-width:280px;justify-self:center;border-radius:16px;width:100%}
.payment-qr-wrap svg{display:block;width:100%;height:auto;aspect-ratio:1}.payment-open{text-align:center;display:flex;justify-content:center;align-items:center;text-decoration:none;min-height:48px}
.real-balances{margin-top:24px}.balance-tools{display:flex;align-items:center;gap:8px}.real-balance-row{align-items:flex-start;gap:12px}
.real-balance-values{display:grid;gap:8px;text-align:right;min-width:90px;max-width:55%;overflow-wrap:anywhere}
.real-balance-values small{display:block;font-size:11px;color:var(--muted)}.real-balance-values strong{display:block;font-size:17px;font-variant-numeric:tabular-nums}
@media(max-width:350px){.real-balance-row{flex-wrap:wrap}.real-balance-values{max-width:100%;margin-left:auto}}