/* The balance: the top-up and withdrawal dialogs (components/balance-ui.js — they open from the rail on any page, so
   this file is linked globally) and the «Баланс» page (pages/balance.js). The rail / top bar chip lives in rail.css.
   Flat CSS. Breakpoints as the cart: mobile < 768, desktop >= 1100. */

/* ==========================================================================
   Dialogs
   ========================================================================== */
.bal { display: grid; }
.bal-form { display: grid; gap: 14px; }
.bal-now { font-size: var(--fs-sm); color: var(--ink-2); }
.bal-now b { color: var(--ink); }
.bal-now__approx { color: var(--ink-3); }

.bal-field .input,
.bal-field .select { min-height: 46px; }

/* the amount: roubles typed into a large field, ₽ inside it at the right — or the ₽ | ₸ switch when the country pays
   in a currency the site shows (the roubles stay the truth, the other unit is an «≈»); «Всё» beside it (withdrawal) */
.bal-amount { display: flex; align-items: stretch; gap: 8px; }
.bal-amount__box { position: relative; display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
.bal-field .bal-amount__input {
  min-height: 52px;
  padding-right: 40px;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
}
.bal-field .bal-amount__box.has-units .bal-amount__input { padding-right: 104px; }
.bal-amount__tail { position: absolute; right: 6px; display: flex; align-items: center; }
.bal-amount__cur {
  margin-right: 10px;
  color: var(--ink-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  pointer-events: none;
}
.bal-unit {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-sunken);
}
.bal-unit__item {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bal-unit__item::before { content: ''; position: absolute; inset: -6px 0; }   /* 34px visual, 46px hit height */
.bal-unit__item:hover { color: var(--ink); }
.bal-unit__item[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.bal-unit__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bal-unit__item:disabled { color: var(--ink-3); cursor: not-allowed; }
.bal-amount__all { flex: none; min-height: 52px; padding: 0 18px; }
.bal-approx { color: var(--ink-2); }

.bal-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.bal-presets__item { min-width: 76px; }

/* the summary: Способ оплаты · Комиссия · К оплате · К зачислению (top-up); Спишется · Комиссия · К получению (withdrawal) */
.bal-sum {
  display: grid;
  margin: 0;
  padding: 4px 14px;
  border-radius: 12px;
  background: var(--surface-sunken);
}
.bal-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.bal-sum__row:last-child { border-bottom: 0; }
.bal-sum dt { color: var(--ink-2); }
.bal-sum dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bal-sum__row--total dt,
.bal-sum__row--total dd { font-size: var(--fs-base); }
.bal-sum__row--total dd { font-weight: 700; }
.bal-sum__sub { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }
.bal-sum__note { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }

/* «Комиссия: 0 ₽ · К зачислению: 5 000 ₽» (one-line form) */
.bal-fee {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.bal-note { font-size: var(--fs-xs); line-height: 1.5; }
.bal-status:empty { display: none; }
.bal-status__msg { line-height: 1.45; }
.bal-status__msg strong { font-weight: 700; }
.bal-submit { margin-top: 2px; }
.bal-submit[aria-disabled='true'] { opacity: .55; pointer-events: none; }

/* --- the top-up dialog: two columns from 768px (country and methods | amount and summary), the deposit rule beside
   the consent box and the pay button; one column on phones with the rule, the box and the button pinned at the
   bottom of the scroll so they are in view without scrolling --------------------------------------------------- */
.bal-top { gap: 16px; }
.bal-top__pick,
.bal-top__sum,
.bal-top__pay { display: grid; gap: 14px; min-width: 0; }
.bal-top__pay { gap: 10px; }
.bal-top .bal-submit { margin-top: 0; }
.bal-top .bal-submit svg { flex: none; }
.bal-methods__none { align-items: center; }
.bal-methods__none .link-btn { min-height: 32px; font-size: var(--fs-sm); }
.bal-pending { align-items: center; }
.bal-pending .link-btn { min-height: 32px; font-size: var(--fs-sm); }
/* the rule of the deposits (SPEC §3.2): always visible, never collapsible */
.bal-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: #1B4FB5;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
}
.bal-rule svg { flex: none; margin-top: 2px; }
.bal-rule p { margin: 0; }
.bal-consent { display: grid; gap: 4px; }
.bal-consent__box { align-items: flex-start; min-height: 0; }
.bal-consent__box input { flex: none; margin-top: 1px; }
.bal-consent__text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.bal-consent__box input[aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.bal-fine { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.bal-safe { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.bal-safe svg { flex: none; margin-top: 2px; }
.bal-crypto { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; }
.bal-crypto.is-unavailable { color: var(--ink-3); }
.bal-crypto-warn { display: grid; gap: 4px; margin: 0; padding: 0 0 0 16px; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; list-style: disc; }

@media (min-width: 768px) {
  .bal-dialog--wide { width: min(840px, calc(100vw - 32px)); }
  .bal-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'pick sum' 'rule pay' 'fine safe';
    align-items: start;
    column-gap: 28px;
  }
  .bal-top__pick { grid-area: pick; }
  .bal-top__sum { grid-area: sum; }
  .bal-top__foot { display: contents; }
  .bal-top .bal-rule { grid-area: rule; align-self: end; }
  .bal-top__pay { grid-area: pay; align-self: end; }
  .bal-top .bal-fine { grid-area: fine; }
  .bal-top .bal-safe { grid-area: safe; }
}
@media (max-width: 767.98px) {
  /* a field scrolled into view (focus, an error) stops above the pinned rule, box and button */
  .bal-dialog--topup .dialog__body { padding-bottom: 0; scroll-padding-bottom: 280px; }
  .bal-top { padding-bottom: 16px; }
  .bal-top__foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin: 0 -20px;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -10px 18px -14px rgba(25, 27, 32, .22);
  }
}

/* withdrawal: the parts of the balance that cannot leave it (SPEC §5) */
.bal-avail__rule { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45; }
.bal-avail__lines { grid-column: 1 / -1; }
.bal-avail__lines:empty { display: none; }
.bal-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45; }
.bal-lines li { display: flex; gap: 8px; }
.bal-lines li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--warning); }
.bal-done .bal-lines { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--surface-sunken); text-align: left; }

.bal-warn { font-size: var(--fs-xs); line-height: 1.5; border-radius: 14px; }
.bal-warn__list { display: grid; gap: 4px; margin: 0; padding-left: 16px; list-style: disc; }

/* withdrawal: what can leave the balance */
.bal-avail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-sunken);
}
.bal-avail__label { font-size: var(--fs-sm); color: var(--ink-2); }
.bal-avail__value { font-size: var(--fs-xl); color: var(--ink); }
.bal-avail__held { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.bal-avail__held svg { flex: none; color: var(--warning); }

/* payout methods (as the «Продать» payout cards): icon · name and note · fee and time */
.bal-methods { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.bal-methods legend { margin-bottom: 8px; padding: 0; }
.bal-methods__list { display: grid; gap: 8px; }
.bal-method {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.bal-method:hover { border-color: var(--line-strong); }
.bal-method.is-checked { border-color: var(--accent); background: var(--accent-tint); }
.bal-method input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bal-method:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.bal-method__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bal-method__text { display: grid; gap: 1px; min-width: 0; }
.bal-method__label { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.bal-method__note { color: var(--ink-3); font-size: var(--fs-xs); }
.bal-method__terms { display: grid; justify-items: end; gap: 1px; color: var(--ink-3); font-size: var(--fs-xs); text-align: right; }
.bal-method__terms span:first-child { color: var(--ink); font-weight: 600; }
.bal-fields { display: grid; gap: 12px; }
.bal-fields:empty { display: none; }

/* done / request accepted */
.bal-done { display: grid; justify-items: center; gap: 10px; padding: 6px 0 2px; text-align: center; }
.bal-done__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--success-tint);
  color: var(--success);
}
.bal-done__icon.is-info { background: var(--accent-tint); color: var(--accent-ink); }
.bal-done__icon.is-danger { background: var(--danger-tint); color: var(--danger); }
.bal-done__icon.is-neutral { background: var(--surface-sunken); color: var(--ink-2); }
.bal-done__title { color: var(--ink); font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; }
.bal-done__title:focus { outline: none; }
.bal-done__sum { color: var(--success); font-size: var(--fs-2xl); line-height: 1.1; }
.bal-done__sum--plain { color: var(--ink); }
.bal-done__text { color: var(--ink-2); overflow-wrap: anywhere; }
.bal-done__text b { color: var(--ink); }
.bal-done__id { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bal-wait .bal-done__text { max-width: 46ch; }
.bal-done__rows { width: 100%; margin-top: 2px; border-top: 1px solid var(--line); text-align: left; }
.bal-done__note { max-width: 46ch; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.bal-done > .btn--block { margin-top: 6px; }
.bal-done__actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 6px; }
.bal-done__actions .btn { flex: 1 1 160px; }
/* «Ждём оплату»: the two long labels («Открыть страницу оплаты», «Закрыть — оплата продолжится») stack full width */
.bal-wait .bal-done__actions .btn { flex-basis: 100%; }

.bal-gate { display: grid; gap: 16px; }
.bal-gate__text { color: var(--ink-2); line-height: 1.5; }
.bal-gate__steam,
.balance-gate__steam { width: 22px; height: 23px; flex: none; }

@media (max-width: 767.98px) {
  .bal-method { grid-template-columns: 40px minmax(0, 1fr); }
  .bal-method__terms { grid-column: 2; justify-items: start; text-align: left; }
  .bal-method__terms { display: flex; flex-wrap: wrap; gap: 0 8px; }
}

/* ==========================================================================
   Page (#/balance)
   ========================================================================== */
.balance-page { padding-bottom: var(--space-6); }
.balance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-bottom: var(--space-6);
}
.balance-head__title { padding-left: 4px; }   /* the skew leans the first letter left */
.balance-head__title:focus { outline: none; }
.balance-head__account { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--fs-sm); }
.balance-head__steam { width: 18px; height: 19px; flex: none; color: var(--ink-2); }

/* two independent columns on desktop (the money and its history | the trade link and the rules), one below 1100px */
.balance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* minmax(0, 1fr): the history filter's strip scrolls inside its panel instead of widening the column */
.balance-main,
.balance-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }

/* --- the money ---------------------------------------------------------------- */
.balance-card { display: grid; gap: 20px; padding: 28px; }
.balance-card__sums {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px 32px;
  align-items: start;
}
.balance-sum { display: grid; align-content: start; gap: 6px; min-width: 0; }
.balance-sum__label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); }
.balance-sum__label svg { color: var(--warning); }
.balance-sum__value { color: var(--ink); font-size: var(--fs-2xl); line-height: 1.05; overflow-wrap: anywhere; }
.balance-sum--main .balance-sum__value { font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem); letter-spacing: -.02em; }
.balance-sum__value.is-negative { color: var(--danger); }
.balance-sum__rub,
.balance-sum__hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.balance-sum--held { padding-left: 28px; border-left: 1px solid var(--line); }
.balance-holds { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.balance-hold { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.balance-hold svg { flex: none; color: var(--warning); }
.balance-hold b { color: var(--ink); }
.balance-debt { line-height: 1.45; }
.balance-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.balance-card__actions .btn { min-width: 190px; }

/* --- the history ---------------------------------------------------------------- */
.balance-history { padding: 24px 28px 12px; }
.balance-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 14px;
}
.balance-panel__title { color: var(--ink); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; }
.balance-history .balance-panel__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.015em; }
.balance-panel__title:focus { outline: none; }
.balance-filter { overflow-x: auto; scrollbar-width: none; }
.balance-filter::-webkit-scrollbar { display: none; }
.balance-filter .segmented__item { padding: 0 14px; }

.balance-day__title {
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.balance-ops { margin: 0; padding: 0; list-style: none; }
.balance-op {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  padding: 12px 0;
}
.balance-op + .balance-op { border-top: 1px solid var(--line); }
.balance-op__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
}
.balance-op--in .balance-op__icon { background: var(--success-tint); color: var(--success); }
.balance-op--hold .balance-op__icon { background: var(--warning-tint); color: var(--warning); }
.balance-op--move .balance-op__icon { background: var(--accent-tint); color: var(--accent-ink); }
.balance-op__body { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.balance-op__title { color: var(--ink); font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.balance-op__meta { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.balance-op__meta a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
  border-radius: 4px;
}
.balance-op__meta a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.balance-op__meta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.balance-op__status { display: flex; align-items: baseline; gap: 6px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; }
.balance-op__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.balance-op__status.is-success { color: var(--success); }
.balance-op__status.is-info { color: var(--accent-ink); }
.balance-op__status.is-warning { color: var(--warning); }
.balance-op__status.is-danger { color: var(--danger); }
.balance-op__status.is-neutral { color: var(--ink-3); }
.balance-op__side { display: grid; justify-items: end; gap: 2px; padding-top: 1px; text-align: right; }
.balance-op__amount { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; }
.balance-op--in .balance-op__amount { color: var(--success); }
.balance-op--hold .balance-op__amount { color: var(--warning); }
.balance-op--move .balance-op__amount { color: var(--ink-2); }
.balance-op__note { max-width: 18ch; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.35; }

.balance-empty {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--line);
}
.balance-empty__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.balance-empty__title { color: var(--ink); font-weight: 600; }
.balance-empty__text { max-width: 58ch; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.balance-none { padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); }
.balance-more { display: flex; justify-content: center; padding: 14px 0 10px; border-top: 1px solid var(--line); }
.balance-more__count { color: var(--ink-3); font-weight: 500; }

/* --- side panels: the trade link, the rules ---------------------------------------- */
.balance-panel { display: grid; align-content: start; gap: 12px; padding: 24px; }
.balance-panel__sub { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.balance-link__form { display: grid; gap: 12px; }
.balance-link__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.balance-link__help { justify-self: start; font-size: var(--fs-sm); }
.balance-link__saved { display: grid; justify-items: start; gap: 10px; }
.balance-link__value {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.balance-link__value svg { flex: none; margin-top: 1px; color: var(--success); }
.balance-link__url { min-width: 0; overflow-wrap: anywhere; }

.balance-rules { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.balance-rule {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.balance-rule b { color: var(--ink); font-weight: 600; }
.balance-rule__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.balance-fees { display: grid; margin: -4px 0 0 44px; }
.balance-fees__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.balance-fees__row:last-child { border-bottom: 0; }
.balance-fees dt { display: grid; gap: 1px; min-width: 0; }
.balance-fees__name { color: var(--ink); font-weight: 500; }
.balance-fees__note { color: var(--ink-3); font-size: var(--fs-xs); }
.balance-fees dd { margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }

.balance-gate { padding: 56px 24px; }

/* --- layout breakpoints ------------------------------------------------------------ */
@media (min-width: 1100px) {
  .balance-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); }
}

@media (max-width: 767.98px) {
  .balance-head { margin-bottom: var(--space-4); gap: 4px 14px; }
  .balance-layout,
  .balance-main,
  .balance-side { gap: 14px; }
  .balance-card { gap: 16px; padding: 18px 16px; border-radius: 20px; }
  .balance-history { padding: 18px 16px 6px; border-radius: 20px; }
  .balance-panel { padding: 18px 16px; border-radius: 20px; }
  .balance-history .balance-panel__title { font-size: var(--fs-xl); }
  .balance-card__actions .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
  .balance-op { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; }
  .balance-op__icon { width: 36px; height: 36px; border-radius: 11px; }
  .balance-fees { margin-left: 0; }
  .balance-gate { padding: 40px 16px; }
}
@media (max-width: 599.98px) {
  .balance-card__sums { grid-template-columns: minmax(0, 1fr); }
  .balance-sum--held { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}