/* Состояния блоков. Цвета и размеры — из токенов и макета.
   Текст ошибки заданием не дан и здесь не сочиняется.
   Серые блоки загрузки статичны: мерцание в комплекте не задано. */

.load-block {
  display: block;
  height: 12px;
  width: 100%;
  border-radius: 8px;
  background: var(--surface-3);
}

.load-block.lg {
  height: 32px;
  width: 52%;
}

.load-block.md {
  width: 70%;
  margin-top: var(--sp-3);
}

.load-block.sm {
  width: 38%;
  height: 10px;
  margin-top: var(--sp-2);
}

.load-block.avatar {
  width: 34px;
  height: 34px;
  margin-top: 0;
  border-radius: var(--r-full);
}

.is-loading .money,
.is-loading .total-number,
.is-loading .live-number {
  display: none;
}

.empty-state {
  text-align: center;
  padding: 36px 15px;
}

.empty-state .icon {
  width: 30px;
  height: 30px;
  margin: 0 auto var(--sp-3);
  color: var(--text-3);
}

.empty-state p {
  margin: 0;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.8;
}

.state-panel {
  padding: var(--sp-5) 0 var(--sp-4);
}

.state-kicker {
  margin: 0 0 10px;
  color: var(--text-3);
  font: 8px var(--font-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.state-name {
  margin: 3px 0 7px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.9px;
  line-height: 1.15;
}

.state-note {
  margin: 13px 0 0;
  font-size: 9px;
  line-height: 1.8;
  color: var(--text-3);
}

.state-error .state-name {
  margin-bottom: 0;
}

.stamp {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.state-offline .money,
.state-offline .total-number,
.state-offline .live-number,
.state-offline .account-total {
  display: none;
}

.is-session-expired .navbar,
.state-session .navbar {
  display: none;
}

.state-session .money,
.state-session .total-number,
.state-session .live-number,
.state-session .account-total,
.state-session .balance-breakdown {
  display: none;
}