/* Оформление проекта Digital по брендбуку 2026.
   Файл подключается после общих стилей, поэтому переопределяет всё,
   что нужно. Перезапуск сервера не требуется — достаточно обновить страницу.

   Палитра брендбука:
     Main color #02BFF9   R2   G191 B249
     Black      #1A180B   R26  G24  B11
     White 1    #FAFAFA   R250 G250 B250
     White 2    #D8D8D8   R216 G216 B216
*/

.mst {
  /* Фон нейтральный тёмно-серый: фирменный #1A180B тёплый, и на всю
     площадь экрана читается как коричневый. Его оставляем для мелких
     деталей, а основу делаем ахроматической — так голубой акцент чище. */
  --bg: #0E0E0E;
  --panel: #161616;
  --panel-2: #1E1E1E;
  --border: #2C2C2C;

  /* Текст — фирменные белые */
  --text: #FAFAFA;
  --muted: #9A9A9A;

  /* Акцент — основной цвет бренда. Им подсвечиваются кнопки,
     активные пункты меню и положительные суммы. */
  --usdt: #02BFF9;

  /* Вспомогательные метки валют */
  --rub: #D8D8D8;
  --gold: #7FDCFB;

  /* Расходы и предупреждения. В брендбуке своего красного нет,
     берём приглушённый, чтобы не спорить с голубым. */
  --warn: #FF6F5E;
}

/* Заголовки: брендбук построен на Helvetica, а не на узком гротеске.
   Bebas Neue из базовой темы заменяем, трекинг убираем. */
.mst-h1,
.mst-panel-title,
.mst-brand,
.mst-login h1,
.mst .display {
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.mst-brand {
  font-size: 20px;
  font-weight: 700;
}

.mst-h1 {
  font-weight: 700;
}

/* Логотип-капсула из базовой темы не соответствует знаку Digital.
   Делаем нейтральную метку фирменного цвета. */
.mst-logomark {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background: var(--usdt);
}
.mst-logomark::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: #0E0E0E;
  left: 5px;
}

/* Основная кнопка: фирменный голубой с тёмным текстом — как в брендбуке */
.mst-btn.primary {
  color: #0E0E0E;
}

/* Карточки и активные пункты чуть заметнее на тёплом фоне */
.mst-navbtn.active {
  border-left-color: var(--usdt);
}

.mst-card::before {
  background: var(--usdt);
}