.tg-button,
.telegram-button,
.btn {
  background-color: var(--tg-button-color);
  color: var(--tg-button-text-color);
  border: none;
  border-radius: var(--tg-radius);
  padding: var(--tg-spacing-md) var(--tg-spacing-lg);
  cursor: pointer;
  font-family: var(--tg-font-family);
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.tg-button:hover,
.telegram-button:hover,
.btn:hover {
  opacity: 0.8;
}

.tg-button.primary,
.telegram-button.primary,
.btn-primary {
  background-color: var(--tg-button-color);
  color: var(--tg-button-text-color);
}

.tg-button.secondary,
.telegram-button.secondary,
.btn-secondary {
  background-color: var(--tg-secondary-bg-color);
  color: var(--tg-text-color);
  border: 1px solid var(--tg-border-color);
}

.tg-button.success,
.telegram-button.success,
.btn-success {
  background-color: #28a745;
  color: white;
}

.tg-button.danger,
.telegram-button.danger,
.btn-danger,
.btn-outline-danger {
  background-color: #dc3545;
  color: white;
}

.tg-button.outline,
.telegram-button.outline,
.btn-outline-primary {
  background-color: transparent;
  color: var(--tg-button-color);
  border: 1px solid var(--tg-button-color);
}

.tg-button.sm,
.telegram-button.sm,
.btn-sm {
  padding: var(--tg-spacing-sm) var(--tg-spacing-md);
  font-size: 12px;
}

.tg-button.lg,
.telegram-button.lg,
.btn-lg {
  padding: var(--tg-spacing-lg) var(--tg-spacing-lg) * 2;
  font-size: 16px;
}

.tg-badge,
.badge {
  background-color: var(--tg-secondary-bg-color);
  color: var(--tg-text-color);
  padding: var(--tg-spacing-xs) var(--tg-spacing-sm);
  border-radius: var(--tg-radius);
  font-size: 12px;
  font-weight: 500;
}

.tg-badge-primary,
.badge.bg-success {
  background-color: #28a745;
  color: white;
}

.tg-badge-secondary,
.badge.bg-secondary {
  background-color: var(--tg-secondary-bg-color);
  color: var(--tg-text-color);
}

.tg-alert,
.alert {
  padding: var(--tg-spacing-md);
  border-radius: var(--tg-radius);
  margin-bottom: var(--tg-spacing-md);
}

.tg-alert-danger,
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.tg-alert-success,
.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.tg-alert-info,
.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.tg-alert-warning,
.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.empty-state {
  text-align: center;
  padding: var(--tg-spacing-lg) * 2;
  color: var(--tg-hint-color);
}