/* The account pages (#/account/<tab>, pages/account.js + src/js/account/*.js): the header with the Steam avatar and
   name, the tabs, and the bodies of «Профиль» (the Steam account, the e-mail with its confirmation, KYC, the trade
   link, the active sessions and the history of sign-ins), «Баланс», «Транзакции» and «Реферальная программа» (the
   inventory tab has account-inventory.css). The top-up / withdrawal dialogs are styled in pages/balance.css.
   Flat CSS. Breakpoints: phone < 768, desktop ≥ 1024 (header sums, two-column profile, «Ещё фильтры» of
   «Транзакции» unfolded); the history rows switch on the width of their own container. */

/* ==========================================================================
   Page, gate, header
   ========================================================================== */
.account-page { padding-bottom: var(--space-8); }
.acc-gate { padding: 56px 24px; }
.acc-gate__title:focus { outline: none; }
.acc-gate__steam { width: 22px; height: 23px; flex: none; }

.acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 8px;
}
.acc-head__who { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 320px; }
.acc-head__text { display: grid; gap: 4px; min-width: 0; }
.acc-head__name {
  font-family: var(--font-ui);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.acc-head__name:focus { outline: none; }
.acc-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.acc-head__sep { color: var(--line-strong); }
.acc-head__steam {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
  border-radius: 4px;
}
.acc-head__steam:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.acc-head__steam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-head__tag { color: var(--ink-3); font-size: var(--fs-xs); }

/* the two sums and the actions at the right — desktop only; the balance tab shows them itself */
.acc-head__money { display: none; }
@media (min-width: 1024px) {
  .acc-head__money { display: flex; align-items: center; gap: 24px; }
  .account-page[data-tab="balance"] .acc-head__money { display: none; }
}
.acc-head__sums { display: flex; gap: 24px; margin: 0; }
.acc-head__sums div { display: grid; gap: 2px; text-align: right; }
.acc-head__sums dt { color: var(--ink-3); font-size: var(--fs-xs); }
.acc-head__sums dd { margin: 0; color: var(--ink); font-size: var(--fs-lg); }
.acc-head__actions { display: flex; gap: 8px; }

/* the Steam avatar: the monogram under the picture takes over when there is none or it fails to load */
.acc-avatar {
  --avatar-size: 56px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--surface-sunken);
  box-shadow: 0 0 0 1.5px var(--line-strong);
  overflow: hidden;
}
.acc-avatar__mono { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-2); }
.acc-avatar__letter { font-size: calc(var(--avatar-size) * .42); font-weight: 700; line-height: 1; text-transform: uppercase; }
.acc-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.acc-avatar.is-broken .acc-avatar__img { display: none; }

/* ==========================================================================
   Tabs (routes, not ARIA tabs)
   ========================================================================== */
.acc-tabs {
  margin: 12px 0 var(--space-6);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tabs__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: max-content; }
.acc-tabs__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.acc-tabs__link svg { color: var(--ink-3); transition: color var(--dur-fast) var(--ease-out); }
.acc-tabs__link:hover { color: var(--ink); }
.acc-tabs__link:hover svg { color: var(--ink-2); }
.acc-tabs__link[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.acc-tabs__link[aria-current="page"] svg { color: var(--accent-ink); }
.acc-tabs__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

.acc-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* the tab's heading: the active tab link already shows its name, so it is for screen readers and the focus after a
   tab switch only */
.acc-tab__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.acc-tab__title:focus { outline: none; }
.acc-tab-error { padding: 48px 24px; }

/* ==========================================================================
   Shared panel bits
   ========================================================================== */
.acc-panel { display: grid; align-content: start; gap: 12px; padding: 24px; }
.acc-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.acc-panel__title { color: var(--ink); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; }
.acc-panel__title:focus { outline: none; }
.acc-panel__sub { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }

.acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-sunken); }
.acc-stat__value { color: var(--ink); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.acc-stat__label { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; }

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

/* a small copy button beside an id (44 px hit target through ::before) */
.tx-copy {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 8px;
  color: var(--ink-3);
  vertical-align: middle;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tx-copy::before { content: ''; position: absolute; inset: -8px; }
.tx-copy:hover { color: var(--accent-ink); background: var(--accent-tint); }
.tx-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   «Баланс»
   ========================================================================== */
.acc-pay { line-height: 1.45; }
.acc-pay strong { font-weight: 700; }
.acc-pay .link-btn { margin-left: 6px; font-size: inherit; }

.acc-bal { display: grid; gap: 18px; padding: 28px; }

/* the two balances: «Основной баланс» and «Быстрый баланс» side by side, one column on a phone */
.acc-bals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 720px) {
  .acc-bals:has(> [data-bal="fast"]) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.acc-bal-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}
.acc-bal-card--fast { border-color: color-mix(in srgb, var(--warning) 32%, var(--line)); }
.acc-bal-card__label { color: var(--ink-3); font-size: var(--fs-sm); }
.acc-bal-card__value { color: var(--ink); font-size: clamp(2rem, 1.35rem + 1.6vw, 2.875rem); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.acc-bal-card__meta { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45; }
.acc-bal-card__meta b { color: var(--ink-2); }
.acc-bal-card--fast .acc-bal-card__meta { color: var(--ink-2); }
.acc-bal-card__about { margin: 8px 0 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.acc-bal-card .acc-parts { margin-top: 8px; }
.acc-bal-card .acc-holds { margin-top: 10px; }

.acc-bal__spend { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.acc-bal__spend b { color: var(--ink); font-size: var(--fs-lg); }
.acc-bal__spend-note { color: var(--ink-3); font-size: var(--fs-xs); }

.acc-parts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.acc-parts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.acc-parts__row dt { display: grid; gap: 1px; min-width: 0; }
.acc-parts__name { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.acc-parts__hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.acc-parts__row dd { margin: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.acc-parts__row dd.is-negative { color: var(--danger); }
.acc-holds { grid-column: 1 / -1; display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.acc-hold { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.acc-hold svg { flex: none; color: var(--warning); }
.acc-hold b { color: var(--ink); }
.acc-bal__debt { line-height: 1.45; }
.acc-bal__notice { line-height: 1.45; }
.acc-bal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-bal__actions .btn { min-width: 190px; }
.acc-bal__link { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.acc-bal__link svg { flex: none; margin-top: 2px; color: var(--success); }
.acc-bal__link[data-trade-link="none"] svg { color: var(--warning); }
.acc-bal__link a { color: var(--accent-ink); }
/* the one line to the FAQ, where the rules of the balance live */
.acc-bal__faq { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.acc-bal__faq svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.acc-bal__faq a { color: var(--accent-ink); }

.acc-recent { padding: 24px 28px 16px; }
.acc-recent .acc-panel__head { padding-bottom: 4px; }
.acc-recent__all { font-size: var(--fs-sm); }

/* ==========================================================================
   «Транзакции»: the toolbar — «Тип» chips, then «Статус» / «Период» / search,
   then «Ещё фильтры» («Платёжная система», «Сумма», «ID операции»)
   ========================================================================== */
.acc-tx { padding: 24px 28px 12px; }
/* the 2px the scrolling chip row bleeds sideways for its focus ring (components.css .chip-row--scroll) is given
   back here, so the toolbar's own box never reports a horizontal overflow at any width */
.acc-tx__bar { display: grid; gap: 12px; margin: 0 -2px; padding: 0 2px; }
.acc-tx__types { padding-bottom: 2px; }
.acc-tx__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-tx__select { display: inline-grid; min-width: 0; }
.acc-tx__select .select { min-width: 150px; font-size: var(--fs-sm); }
.acc-tx__search { flex: 1 1 260px; min-width: 180px; }
.acc-tx__reset-slot { display: contents; }
.acc-tx__reset { margin-left: auto; }
.acc-tx__count { padding: 14px 0 2px; font-size: var(--fs-sm); }
.acc-tx__count:empty { display: none; }

/* «Период» → «Свой период»: the two days, right beside the control that asked for them */
.acc-tx__dates { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.acc-tx__dates-sep { color: var(--ink-3); }
.acc-tx__date { min-width: 0; width: clamp(120px, 20vw, 150px); font-size: var(--fs-sm); }
/* the native picker glyph, quiet until the field is hovered (the site is light-only: tokens.css color-scheme) */
.acc-tx__date::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.acc-tx__date:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* «Ещё фильтры»: a disclosure, so a phone is not buried under a wall of controls */
.acc-tx__more { display: grid; }
.acc-tx__more-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 36px;
  padding: 0 10px 0 8px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.acc-tx__more-head::-webkit-details-marker { display: none; }
.acc-tx__more-head:hover { color: var(--ink); background: var(--surface-sunken); }
.acc-tx__more-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.acc-tx__more-icon, .acc-tx__more-chev { display: inline-grid; place-items: center; color: var(--ink-3); }
.acc-tx__more-chev svg { transition: transform var(--dur-fast) var(--ease-out); }
.acc-tx__more[open] .acc-tx__more-chev svg { transform: rotate(180deg); }
.acc-tx__more-slot { display: contents; }
.acc-tx__more-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.acc-tx__more-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: 12px 16px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.acc-tx__field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.acc-tx__field-label { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.acc-tx__field-input { min-width: 0; font-size: var(--fs-sm); }
.acc-tx__range { gap: 6px; }
.acc-tx__amount { min-width: 0; font-size: var(--fs-sm); }
.acc-tx__hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.acc-tx__error:empty { display: none; }

/* ==========================================================================
   History rows (balance tab and transactions): stacked by default, a grid when the list is wide enough
   ========================================================================== */
.tx-days { container-type: inline-size; display: grid; }
.tx-head { display: none; }
.tx-day__title { padding: 14px 0 4px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.tx-list { margin: 0; padding: 0; list-style: none; }
.tx-row { padding: 12px 0; }
.tx-row + .tx-row { border-top: 1px solid var(--line); }
.tx-row__main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas:
    'icon text sum'
    'icon status status'
    'icon parts parts'
    'icon time toggle';
  gap: 4px 12px;
  align-items: start;
}
.tx-row__time { grid-area: time; align-self: center; color: var(--ink-3); font-size: var(--fs-xs); }
.tx-row__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--surface-sunken);
  color: var(--ink-2);
}
.tx-row--in .tx-row__icon { background: var(--success-tint); color: var(--success); }
.tx-row--hold .tx-row__icon { background: var(--warning-tint); color: var(--warning); }
.tx-row--move .tx-row__icon { background: var(--accent-tint); color: var(--accent-ink); }
.tx-row--wait .tx-row__icon { background: var(--accent-tint); color: var(--accent-ink); }
.tx-row__text { grid-area: text; display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.tx-row__title { color: var(--ink); font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.tx-row__desc { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tx-row__desc a, .tx-detail__items a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
  border-radius: 4px;
}
.tx-row__desc a:hover, .tx-detail__items a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.tx-row__desc a:focus-visible, .tx-detail__items a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* «покупка SA-ORD-…» / «продажа SA-SELL-…» goes to the next line whole instead of breaking inside the id (it still
   wraps inside when even a line of its own is too narrow) */
.tx-ref { display: inline-block; }
.tx-more { color: var(--ink-3); }
.tx-row__status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tx-row__status:empty, .tx-row__parts:empty { display: none; }
.tx-row__badge { white-space: normal; line-height: 1.25; padding-top: 3px; padding-bottom: 3px; text-align: left; }
.tx-row__status-note { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.tx-row__parts { grid-area: parts; display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.tx-part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.tx-part--dep { background: var(--accent-tint); color: var(--accent-ink); }
.tx-part--avail { background: var(--success-tint); color: var(--success); }
.tx-part--held { background: var(--warning-tint); color: var(--warning); }
.tx-row__sum { grid-area: sum; display: grid; justify-items: end; gap: 2px; padding-top: 1px; text-align: right; }
.tx-row__amount { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; white-space: nowrap; }
.tx-row--in .tx-row__amount { color: var(--success); }
.tx-row--hold .tx-row__amount { color: var(--warning); }
.tx-row--move .tx-row__amount { color: var(--ink-2); }
.tx-row--wait .tx-row__amount, .tx-row--off .tx-row__amount { color: var(--ink-3); }
.tx-row--off .tx-row__amount { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.tx-row__rub { color: var(--ink-3); font-size: var(--fs-xs); }
.tx-row__note { max-width: 18ch; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.35; }
.tx-row__toggle {
  grid-area: toggle;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 28px;
  padding: 0 4px 0 8px;
  border-radius: 8px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tx-row__toggle::before { content: ''; position: absolute; inset: -8px 0; }
.tx-row__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }
.tx-row__toggle:hover { color: var(--ink); background: var(--surface-sunken); }
.tx-row__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tx-row__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tx-row__detail {
  margin: 10px 0 0 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-sunken);
}
.tx-detail__list { display: grid; gap: 6px; margin: 0; }
.tx-detail__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: var(--fs-sm); }
.tx-detail__row dt { color: var(--ink-3); }
.tx-detail__row dd { display: flex; align-items: center; margin: 0; color: var(--ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.tx-detail__id { font-weight: 600; }
.tx-detail__parts { flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; font-weight: 400; }
.tx-detail__parts b { font-weight: 600; }
.tx-detail__row--items { flex-direction: column; }
.tx-detail__row--items dd { display: grid; justify-content: stretch; justify-items: stretch; width: 100%; text-align: left; }
/* what a purchase, a refund or a sale covered: the name at the left, what it cost at the right */
.tx-detail__items { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-weight: 400; }
.tx-detail__items li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; min-width: 0; }
.tx-detail__item-name { min-width: 0; overflow-wrap: anywhere; }
.tx-detail__item-sum { flex: none; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.tx-detail__items-more { margin-top: 4px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.tx-detail__note { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.tx-detail__links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.tx-link { font-size: var(--fs-sm); }

@container (min-width: 760px) {
  .tx-head {
    display: grid;
    grid-template-columns: 56px 36px minmax(0, 1.6fr) minmax(150px, 1fr) minmax(130px, .9fr) minmax(104px, auto) 40px;
    gap: 0 14px;
    padding: 2px 0 6px;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 500;
  }
  .tx-head__sum { text-align: right; }
  .tx-row__main {
    grid-template-columns: 56px 36px minmax(0, 1.6fr) minmax(150px, 1fr) minmax(130px, .9fr) minmax(104px, auto) 40px;
    grid-template-areas: 'time icon text status parts sum toggle';
    gap: 0 14px;
    align-items: start;
  }
  .tx-row__time { align-self: start; padding-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
  .tx-row__status, .tx-row__parts { padding-top: 7px; align-self: start; }
  .tx-row__status { display: grid; gap: 3px; justify-items: start; }
  .tx-row__status:empty, .tx-row__parts:empty { display: block; }
  .tx-row__sum { padding-top: 8px; }
  .tx-row__toggle { width: 36px; height: 36px; justify-content: center; padding: 0; margin-left: auto; }
  .tx-row__toggle-text { display: none; }
  .tx-row__detail { margin-left: 120px; }
}

/* ==========================================================================
   «Профиль»
   ========================================================================== */
/* One column, in the order the owner laid out: Steam → E-mail → ссылка на обмен → KYC → статистика → сессии →
   история авторизации. Capped so the cards stay readable on a wide screen. */
.acc-profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1040px; }
.acc-steam__row { display: flex; align-items: flex-start; gap: 20px; }
.acc-steam__avatar { margin-top: 2px; }
.acc-steam__skel-avatar { width: 96px; height: 96px; flex: none; }
.acc-steam__body { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.acc-steam__body .skeleton--title { height: 24px; margin-top: 6px; }
.acc-steam__name { color: var(--ink); font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.acc-steam__id { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--ink-2); font-size: var(--fs-sm); }
.acc-steam__id-label { color: var(--ink-3); }
.acc-steam__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); }
.acc-steam__specs { margin-top: 4px; border-top: 1px solid var(--line); }
.acc-steam__note { font-size: var(--fs-xs); line-height: 1.5; }
.acc-steam__error { margin-top: 6px; line-height: 1.45; }
.acc-steam__error .link-btn { margin-left: 6px; font-size: inherit; }
.acc-flags { gap: 8px; }
.acc-flags .notice { line-height: 1.45; }
.acc-link__form { display: grid; gap: 12px; }
.acc-link__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.acc-link__help { font-size: var(--fs-sm); }
.acc-link__saved { display: grid; gap: 10px; }
.acc-link__value {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.acc-link__value svg { flex: none; margin-top: 1px; color: var(--success); }
.acc-link__url { min-width: 0; overflow-wrap: anywhere; }
/* The counters, inside the «Аккаунт Steam» card: a quiet row of three, the label above the number. Full width of the
   card (not of the text column), so three of them stay a tidy row on a phone instead of a wall of wrapped words. */
.acc-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px 24px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.acc-fig { display: grid; align-content: start; gap: 1px; min-width: 0; }
.acc-fig dt { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; }
.acc-fig dd { margin: 0; color: var(--ink); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

/* The sign-in of this browser, inside the «Аккаунт Steam» card */
.acc-steam__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.acc-steam__sign-text { display: grid; gap: 2px; min-width: 0; }

/* The one line about a sign-in the server has not verified, and the only way out of it */
.acc-unverified { align-items: flex-start; line-height: 1.45; }
.acc-unverified__body { display: grid; gap: 6px; min-width: 0; }
.acc-unverified__text { color: inherit; font-size: var(--fs-sm); }
.acc-unverified__btn { justify-self: start; margin-top: 2px; }

/* Email — three states: the field with «Подключить», the address not yet confirmed, the address with its green tick */
.acc-email__load { display: grid; gap: 6px; }
.acc-email__form { display: grid; gap: 6px; }
.acc-email__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-email__field { flex: 1 1 260px; min-width: 0; }
.acc-email__submit { flex: none; }
.acc-email__err:empty, .acc-email__err[hidden] { display: none; }
.acc-email__row--saved {
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-sunken);
}
.acc-email__mark { display: inline-grid; place-items: center; flex: none; }
.acc-email__mark--ok { color: var(--success); }
.acc-email__mark--wait { color: var(--warning); }
.acc-email__addr {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.acc-email__edit { flex: none; margin-left: auto; }
.acc-email__remove { flex: none; color: var(--danger); }
.acc-email__remove svg { color: currentColor; }
.acc-email__why { max-width: 72ch; }
.acc-email__meta, .acc-kyc__meta { font-size: var(--fs-xs); line-height: 1.5; }
.acc-email__sent { line-height: 1.45; }
.acc-email__code { display: grid; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-email__code-input { max-width: 10ch; letter-spacing: .3em; text-align: center; }
.acc-email__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.acc-email__actions:empty { display: none; }

/* KYC: the status beside the heading, the explanation, and — only when a provider is configured — one wide button */
.acc-kyc__btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Active sessions */
.acc-sess__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.acc-sess__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.acc-sess__row:first-child { border-top: 0; padding-top: 4px; }
.acc-sess__row[data-current="1"] { position: relative; }
.acc-sess__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
}
.acc-sess__row[data-current="1"] .acc-sess__icon { background: var(--success-tint); color: var(--success); }
.acc-sess__body { display: grid; gap: 2px; min-width: 0; }
.acc-sess__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
}
.acc-sess__name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.acc-sess__here { font-weight: 500; }
.acc-sess__meta { font-size: var(--fs-xs); line-height: 1.45; overflow-wrap: anywhere; }
.acc-sess__end { flex: none; align-self: center; }
.acc-sess__none, .acc-hist__none { font-size: var(--fs-sm); line-height: 1.5; }
/* the warning stands where the action is, not in a notice far away */
.acc-sess__warn { margin-top: 4px; line-height: 1.45; }
.acc-sess__all { justify-self: start; }

/* «История авторизации»: IP, date and time, device, result — a table on a desktop, a card per row on a phone */
.acc-hist__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.acc-hist__table th {
  padding: 6px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.acc-hist__table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.acc-hist__table tr:last-child td { border-bottom: 0; }
.acc-hist__table th:last-child, .acc-hist__table td:last-child { padding-right: 0; }
.acc-hist__ip { white-space: nowrap; }
.acc-hist__when { color: var(--ink-2); }
.acc-hist__device { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.acc-hist__status .badge { white-space: nowrap; }
.acc-hist__why { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.35; }
.acc-hist__lbl { display: none; }
.acc-hist__none { font-size: var(--fs-sm); line-height: 1.5; }
.acc-hist .acc-more { margin-top: 4px; }
@media (max-width: 639.98px) {
  .acc-hist__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .acc-hist__table, .acc-hist__table tbody { display: block; width: 100%; }
  .acc-hist__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'when status' 'device status' 'ip status';
    align-items: start;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .acc-hist__table tr:last-child { border-bottom: 0; }
  .acc-hist__table td { display: block; padding: 0; border: 0; }
  .acc-hist__when { grid-area: when; color: var(--ink); font-weight: 600; }
  .acc-hist__device { grid-area: device; font-size: var(--fs-xs); }
  .acc-hist__ip { grid-area: ip; color: var(--ink-3); font-size: var(--fs-xs); }
  .acc-hist__ip .acc-hist__lbl { display: inline; margin-right: 4px; }
  .acc-hist__status { grid-area: status; justify-self: end; text-align: right; }
}

.acc-session__line { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.acc-session__note { font-size: var(--fs-xs); line-height: 1.5; }
.acc-session__out { justify-self: start; }
.acc-profile__privacy { font-size: var(--fs-sm); padding: 0 4px; }

/* ==========================================================================
   «Реферальная программа»
   ========================================================================== */
.acc-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.acc-ref-head { gap: 14px; }
.acc-ref-head__title { color: var(--ink); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.acc-ref__terms { max-width: 72ch; color: var(--ink-2); font-size: var(--fs-base); line-height: 1.55; }
.acc-ref__off, .acc-ref__ads { line-height: 1.45; }
.acc-ref-link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.acc-ref-link__field { flex: 1 1 320px; min-width: 0; }
.acc-ref-link__input { font-variant-numeric: tabular-nums; }
.acc-ref-link__copy { flex: none; }
.acc-ref-code { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--ink-2); font-size: var(--fs-sm); }
.acc-ref-code b { color: var(--ink); }
.acc-ref-rules { display: grid; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.acc-ref-rules[role='list'] { padding-left: 18px; list-style: disc; }   /* (base.css takes both off role=list lists) */
.acc-ref-rules li::marker { color: var(--ink-3); }
.acc-ref__none { font-size: var(--fs-sm); padding: 4px 0; }
.acc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.acc-table th { padding: 6px 10px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; text-align: left; }
.acc-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.acc-table tr:last-child td { border-bottom: 0; }
.acc-table__num { text-align: right; white-space: nowrap; }
.acc-table th.acc-table__num { text-align: right; }   /* the column title over its right-aligned sums (th sets left) */
.acc-table th.acc-table__status, .acc-table td.acc-table__status { padding-left: 20px; }
.acc-table td.is-void { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.acc-table__lbl { display: none; }
/* phone: a row is a small card — what (with the bonus at the right), then the date and the status */
@media (max-width: 599.98px) {
  .acc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .acc-table, .acc-table tbody { display: block; width: 100%; }
  .acc-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'what num' 'date status';
    align-items: center;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .acc-table tr:last-child { border-bottom: 0; }
  .acc-table td { display: block; padding: 0; border: 0; }
  .acc-table td.acc-table__status { padding-left: 0; grid-area: status; justify-self: end; }
  .acc-table__what { grid-area: what; min-width: 0; }
  .acc-table__num { grid-area: num; font-weight: 600; }
  .acc-table__date { grid-area: date; color: var(--ink-3); font-size: var(--fs-xs); }
  .acc-table__lbl { display: inline; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767.98px) {
  .acc-head { gap: 12px; margin-bottom: 4px; }
  .acc-head__who { gap: 12px; }
  .acc-head__name { font-size: var(--fs-xl); }
  /* SteamID, the Steam link and the sign-in note one under another: no «·» left hanging at a line end */
  .acc-head__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .acc-head__sep { display: none; }
  .acc-steam .acc-avatar { width: 64px; height: 64px; }
  .acc-steam .acc-avatar__letter { font-size: 27px; }
  .acc-steam__skel-avatar { width: 64px; height: 64px; }
  .acc-tabs {
    margin: 8px calc(-1 * var(--main-pad-right)) var(--space-5) calc(-1 * var(--main-pad-left));
    padding: 0 var(--main-pad-right) 0 var(--main-pad-left);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 20px), transparent);
  }
  .acc-tab { gap: 14px; }
  .acc-tab__title { font-size: 2rem; }
  .acc-panel, .acc-bal, .acc-recent, .acc-tx { padding: 18px 16px; border-radius: 20px; }
  .acc-recent { padding-bottom: 10px; }
  .acc-tx { padding-bottom: 8px; }
  .acc-profile, .acc-ref { gap: 14px; }
  .acc-bals { gap: 12px; }
  .acc-bal-card { padding: 16px; border-radius: 16px; }
  .acc-bal__actions .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
  .acc-stats { gap: 8px; }
  .acc-stat { padding: 10px 12px; }
  .acc-stat__value { font-size: var(--fs-xl); }
  .acc-steam__row { gap: 14px; }
  /* a session row: the two lines first, the button under them across the full width */
  .acc-sess__row {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: 'icon body' 'end end';
    gap: 8px 12px;
    align-items: start;
  }
  .acc-sess__icon { grid-area: icon; }
  .acc-sess__body { grid-area: body; }
  .acc-sess__end { grid-area: end; justify-self: stretch; justify-content: center; }
  .acc-sess__all, .acc-unverified__btn { justify-self: stretch; }
  .acc-email__actions .btn { flex: 1 1 auto; justify-content: center; }
  .acc-email__code-input { max-width: none; }
  /* the field keeps a line of its own, «Подключить» sits under it across the full width */
  .acc-email__field { flex: 1 1 100%; }
  .acc-email__submit, .acc-email__form .btn--ghost { flex: 1 1 auto; justify-content: center; }
  .acc-email__edit { margin-left: 0; }
  .acc-steam__sign { gap: 12px; }
  .acc-steam__sign .acc-session__out { flex: 1 1 100%; justify-content: center; }
  .acc-figs { gap: 8px 14px; padding-top: 12px; }
  .acc-fig dd { font-size: var(--fs-lg); }
  .acc-tx__select .select { min-width: 0; flex: 1 1 140px; }
  .acc-tx__select { flex: 1 1 140px; }
  .acc-tx__search { flex-basis: 100%; min-width: 0; }
  .acc-tx__reset { margin-left: 0; }
  /* the two chosen days keep a line of their own, so neither ever shrinks under its own text */
  .acc-tx__dates { flex: 1 1 100%; }
  .acc-tx__date { flex: 1 1 0; width: auto; }
  .acc-tx__more-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tx-row__detail { margin-left: 0; }
}