/* Базовая кнопка (опционально, если нужно) */
.btn--primary, .btn--ghost {display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:0;background:#111;color:#fff;cursor:pointer}
.btn--primary{background:#111;color:#fff}
.btn--ghost{background:#fff;color:#111;border:1px solid #e5e7eb}

/* Модалка */
.token-modal{position:fixed;inset:0;display:none;z-index:9999}
.token-modal.is-open{display:block}
.token-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.token-modal__dialog{
  position:relative;
  max-width:640px;
  margin:8vh auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  display:flex;
  flex-direction:column;
  max-height:80vh; /* важно для прокрутки body */
}
/* Контейнер бейджей уже может быть flex; оставлю на случай */
.token-modal__badges{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Каждый бейдж — горизонтально выровнен */
.token-modal__badges .badge{
  display:inline-flex;
  align-items:center;
  gap:8px; /* расстояние между текстом "У вас:" и группой (иконка+число) */
}

/* Внутри <strong> кладём иконку + число в одну линию */
.token-modal__badges .badge strong{
  display:inline-flex;
  align-items:center;
  gap:6px;       /* расстояние между иконкой и числом */
  font-weight:700;
}

/* Иконка — маленькая, без лишних отступов */
.icon-token{
  display:inline-block;   /* т.к. у вас это <div> внутри <strong> */
  width:16px;
  height:16px;
  line-height:0;          /* убираем возможные «дыры» */
}

.icon-token img{
  display:block;          /* убираем нижний «хвост» у inline-изображений */
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Верхняя часть (HEADER) */
.token-modal__head{
  padding:16px 24px;
  border-bottom:1px solid #eef0f2;
}
.token-modal__title{margin:0 0 6px;font-size:22px;font-weight:700;color:#111}
.token-modal__subtitle{margin:0;color:#586074}

/* Внутри модалки всё аккуратно считает размеры */
.token-modal, .token-modal * { box-sizing: border-box; }

/* Контейнер диалога — колонками */
.token-modal__dialog{
  position: relative;
  max-width: 640px;
  margin: 8vh auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

/* Шапка — отдельная зона с отступом под крестик справа */
.token-modal__head{
  display: flex;
  flex-direction: column;
  gap: 6px;                   /* расстояние между title и subtitle */
  padding: 16px 56px 16px 24px;  /* 56px — чтобы не упираться в крестик */
  border-bottom: 1px solid #eef0f2;
}

/* Сбрасываем возможные внешние «хаки» темы (float/absolute/line-height) */
.token-modal__title,
.token-modal__subtitle{
  margin: 0;
  position: static !important;
  float: none !important;
  clear: both;
  word-break: break-word;
}

.token-modal__title{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3 !important;
  color: #111;
}

.token-modal__subtitle{
  color: #586074;
  line-height: 1.45 !important;
}

/* Тело и футер — как раньше */
.token-modal__body{
  padding: 16px 24px;
  overflow: auto;
}
.token-modal__footer{
  padding: 14px 24px;
  border-top: 1px solid #eef0f2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Крестик — поверх, не мешает тексту */
.token-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  z-index: 2;
}
.token-modal__close:hover{ color: #111; }



/* Прокручиваемая середина (BODY) */
.token-modal__body{
  padding:16px 24px;
  overflow:auto;
}
.token-modal__badges{display:flex;gap:8px;align-items:center;margin:8px 0 14px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#f3f4f6;color:#111;font-weight:600}
.token-modal__desc{margin:0;color:#333;line-height:1.55}

/* Нижняя часть (FOOTER) */
.token-modal__footer{
  padding:14px 24px;
  border-top:1px solid #eef0f2;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Крестик */
.token-modal__close{
  position:absolute;top:10px;right:10px;border:0;background:transparent;
  font-size:22px;line-height:1;cursor:pointer;color:#6b7280
}
.token-modal__close:hover{color:#111}