.but_4cnct_5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;

  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  font-weight: 400; /* font-normal */

  height: 2.5rem; /* h-10 */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border: none;
  border-radius: 0; /* rounded-none */

  background-color: #226FCE; /* primary */
  color: #ffffff; /* text-primary-foreground */

  transition: background-color 0.3s ease, color 0.3s ease;
}

.but_4cnct_5:hover {
  background-color: #226FCE; /* hover:bg-primary/90 */
}

.but_4cnct_5:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FA9F72, 0 0 0 4px #191816; /* focus ring */
}

.but_4cnct_5:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* --- 📱 Медиа-запрос для мобильных --- */
@media (max-width: 640px) {
  .but_4cnct_5 {
    height: 2.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem; /* чуть меньше текста */
  }
}






.but_4cnct_6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 0; /* rounded-none */

  font-family: monospace;
  font-size: 1rem; /* text-base */
  font-weight: 400; /* font-normal */

  height: 3rem; /* h-12 */
  padding: 0 2rem; /* px-8 */

  color: #ffffff; /* text-primary-foreground */
  background-color: #226FCE; /* primary */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Hover эффект --- */
.but_4cnct_6:hover {
  background-color: #226FCE; /* hover:bg-primary/90 */
}

/* --- Focus стиль --- */
.but_4cnct_6:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FA9F72, 0 0 0 4px #191816;
}

/* --- Disabled состояние --- */
.but_4cnct_6:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* --- 📱 Медиа-запрос для мобильных --- */
@media (max-width: 640px) {
  .but_4cnct_6 {
    height: 2.75rem;
    padding: 0 1.25rem;
    font-size: 0.875rem; /* text-sm */
  }
}