.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  height: 40px;
  padding: 0 var(--spacing-20);
  min-width: 72px;
  font-family: var(--font-family-base);
  font-size: var(--text-desktop-body-sm-500-size);     
  font-weight: var(--text-desktop-body-sm-500-weight); 
  line-height: 1;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-8);        
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.38;
}

.btn--lg {
  height: 48px;
  padding: 0 var(--spacing-20);         /* Figma: button-filled-circular-asp, Size=Large → px 20 */
  font-size: var(--text-desktop-body-md-500-size);     /* 16px */
  font-weight: var(--text-desktop-body-md-500-weight);
  min-width: 72px;                      /* Figma: min-width 72 */
}

.btn--md {
  height: 40px;
  padding: 0 var(--spacing-20);
  min-width: 56px;                      /* Figma: Size=Medium → min-width 56 */
}

.btn--sm {
  height: 32px;
  padding: 0 var(--spacing-12);          /* Figma: Size=Small → px 12 */
  min-width: 52px;                       /* Figma: min-width 52 */
}

.btn--left{margin-left: auto;}

.btn--rectangular { border-radius: var(--border-radius-8); }
.btn--circular    { border-radius: var(--border-radius-full); }

.btn--filled.btn--primary {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--white);
}

.btn--filled.btn--primary:hover {
  background-color: var(--blue-sky-600);
  border-color: var(--blue-sky-600);
  color: var(--white);
}
.btn--filled.btn--primary:active {
  /* Figma: button-filled-circular-asp, Style=Primary, State=Active → background/asp/default-active #003366 */
  background-color: var(--brand-asp);
  border-color: var(--brand-asp);
  color: var(--white);
}

/* Secondary — светло-голубой фон, синий текст (Figma: Style=Secondary) */
.btn--filled.btn--secondary {
  background-color: var(--background-asp-secondary);       /* #e8f0fb */
  border-color: var(--background-asp-secondary);
  color: var(--text-asp-secondary);                          /* #0058d2 — nu --color-brand-primary (#00357e) */
}
.btn--filled.btn--secondary:hover {
  background-color: var(--background-asp-secondary-hover);  /* #ccdef6 */
  border-color: var(--background-asp-secondary-hover);
  color: var(--text-asp-secondary);
}
.btn--filled.btn--secondary:active {
  background-color: var(--background-asp-secondary-active); /* #99bced */
  border-color: var(--background-asp-secondary-active);
  color: var(--text-asp-secondary);
}

/* Strict — тёмный, почти чёрный */
.btn--filled.btn--strict {
  background-color: var(--gray-900);
  border-color: var(--gray-900);
  color: var(--white);
}
.btn--filled.btn--strict:hover {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}
.btn--filled.btn--strict:active {
  background-color: var(--black);
  border-color: var(--black);
}

/* Destructive — roșu (Figma: Style=Destructive → background/asp/danger/*) */
.btn--filled.btn--destructive {
  background-color: var(--background-asp-danger-default);        /* #d92d20 */
  border-color: var(--background-asp-danger-default);
  color: var(--white);
}
.btn--filled.btn--destructive:hover {
  background-color: var(--background-asp-danger-default-hover);  /* #b32318 */
  border-color: var(--background-asp-danger-default-hover);
}
.btn--filled.btn--destructive:active {
  background-color: var(--background-asp-danger-default-active); /* #912018 */
  border-color: var(--background-asp-danger-default-active);
}

/* Positive — verde deschis (Figma: Style=Positive) */
.btn--filled.btn--positive {
  background-color: var(--background-asp-positive-secondary);        /* #e6f5ee */
  border-color: var(--background-asp-positive-secondary);
  color: var(--color-text-base-default);                              /* #121212 */
}
.btn--filled.btn--positive:hover {
  background-color: var(--background-asp-positive-secondary-hover);  /* #cdeadd */
  border-color: var(--background-asp-positive-secondary-hover);
}
.btn--filled.btn--positive:active {
  background-color: var(--background-asp-positive-secondary-active);/* #9ad6bb */
  border-color: var(--background-asp-positive-secondary-active);
}

/* Neutral — серый фон (Figma: Style=Neutral → color-background-base-tertiary) */
.btn--filled.btn--neutral {
  background-color: var(--color-background-base-tertiary);        /* #f1f1f1 */
  border-color: var(--color-background-base-tertiary);
  color: var(--color-text-base-default);
}
.btn--filled.btn--neutral:hover {
  background-color: var(--color-background-base-tertiary-hover);  /* #d9d9d9 */
  border-color: var(--color-background-base-tertiary-hover);
}
.btn--filled.btn--neutral:active {
  background-color: var(--color-background-base-tertiary-active);/* #b2b2b2 */
  border-color: var(--color-background-base-tertiary-active);
}


/* Figma: button-outlined-circular-asp — border 1.5px (nu 1px ca la .btn de bază);
   la hover/active fundalul devine plin și textul trece pe alb (nu doar o nuanță
   deschisă de fundal, cum era înainte). */
.btn--outlined {
  border-width: var(--border-width-15);
}

.btn--outlined.btn--primary {
  background-color: transparent;
  border-color: var(--border-asp-secondary);      /* #99bced */
  color: var(--text-asp-secondary);                /* #0058d2 */
}
.btn--outlined.btn--primary:hover {
  background-color: var(--background-asp-default-hover); /* #0058d2 */
  border-color: var(--background-asp-default-hover);
  color: var(--white);
}
.btn--outlined.btn--primary:active {
  background-color: var(--brand-asp);              /* #003366 */
  border-color: var(--brand-asp);
  color: var(--white);
}

.btn--outlined.btn--strict {
  background-color: transparent;
  border-color: var(--gray-900);
  color: var(--gray-900);
}
.btn--outlined.btn--strict:hover {
  background-color: var(--gray-100);
}
.btn--outlined.btn--strict:active {
  background-color: var(--gray-200);
}

/* Positive — border verde deschis, text secundar; hover/active devin verde plin */
.btn--outlined.btn--positive {
  background-color: transparent;
  border-color: var(--background-asp-positive-secondary);      /* #e6f5ee */
  color: var(--color-text-base-secondary);                       /* #383838 */
}
.btn--outlined.btn--positive:hover {
  background-color: var(--background-asp-positive-default-hover); /* #027948 */
  border-color: var(--background-asp-positive-default-hover);
  color: var(--white);
}
.btn--outlined.btn--positive:active {
  background-color: var(--background-asp-positive-default-active);/* #35ad77 */
  border-color: var(--background-asp-positive-default-active);
  color: var(--white);
}

.btn--outlined.btn--destructive {
  background-color: transparent;
  border-color: var(--border-asp-danger-secondary);  /* #fee4e2 */
  color: var(--color-text-danger-default);             /* #d92d20 */
}
.btn--outlined.btn--destructive:hover {
  background-color: var(--background-asp-danger-default-hover); /* #b32318 */
  border-color: var(--background-asp-danger-default-hover);
  color: var(--white);
}
.btn--outlined.btn--destructive:active {
  background-color: var(--background-asp-danger-default-active);/* #912018 */
  border-color: var(--background-asp-danger-default-active);
  color: var(--white);
}


/* Figma: button-text-circular-asp — aceleași dimensiuni (h/min-width/padding)
   ca la filled/outlined pentru fiecare Size; nu un buton compact cu px-8. */
.btn--text {
  background-color: transparent;
  border-color: transparent;
}

.btn--text.btn--primary {
  color: var(--text-asp-secondary);                          /* #0058d2, nu --color-brand-primary (#00357e) */
}
.btn--text.btn--primary:hover {
  background-color: var(--background-asp-secondary-hover);   /* #ccdef6 */
}
.btn--text.btn--primary:active {
  background-color: var(--background-asp-secondary-active);  /* #99bced */
}

.btn--text.btn--strict {
  color: var(--gray-900);
}
.btn--text.btn--strict:hover {
  background-color: var(--color-background-base-tertiary-hover);  /* #d9d9d9 */
}
.btn--text.btn--strict:active {
  background-color: var(--color-background-base-tertiary-active); /* #b2b2b2 */
}

.btn--text.btn--destructive {
  color: var(--color-text-danger-default);                    /* #d92d20 */
}
.btn--text.btn--destructive:hover {
  background-color: var(--background-asp-danger-secondary);        /* #feefee */
}
.btn--text.btn--destructive:active {
  background-color: var(--background-asp-danger-secondary-active); /* #fecdc9 */
}


.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--sm .btn__icon { width: 16px; height: 16px; }
.btn--lg .btn__icon { width: 20px; height: 20px; } /* Figma: 20/plus-large în Size=Large */

.btn--icon-only {
  padding: 0;
  width: 40px;
  min-width: unset;
  border-radius: var(--border-radius-8);
}
.btn--icon-only.btn--lg  { width: 48px; height: 48px; }
.btn--icon-only.btn--sm  { width: 32px; height: 32px; }
.btn--icon-only.btn--circular { border-radius: var(--border-radius-full); }

.btn.is-loading {
  pointer-events: none;
  color: transparent;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: var(--white);
}
.btn--outlined.is-loading::after,
.btn--text.is-loading::after {
  color: var(--color-brand-primary);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


.btn-group {
  display: inline-flex;
  gap: var(--spacing-12);
  align-items: center;
  flex-wrap: wrap;
}
.btn-group--vertical {
  flex-direction: column;
  align-items: stretch;
}
.btn-group--full .btn { width: 100%; }


.btn--header-primary {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--white);
  border-radius: var(--border-radius-full);
  height: 40px;
  padding: 0 var(--spacing-20);
  font-size: var(--text-desktop-body-sm-500-size);
  font-weight: var(--text-desktop-body-sm-500-weight);
}
.btn--header-primary:hover {
  background-color: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
}

.btn--header-secondary {
  background-color: var(--blue-sky-100);
  border-color: var(--blue-sky-100);
  color: var(--color-brand-primary);
  border-radius: var(--border-radius-full);
  height: 40px;
  padding: 0 var(--spacing-20);
  font-size: var(--text-desktop-body-sm-500-size);
  font-weight: var(--text-desktop-body-sm-500-weight);
}
.btn--header-secondary:hover {
  background-color: var(--blue-sky-150);
  border-color: var(--blue-sky-150);
}

.btn--header-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--border-radius-full);
  color: var(--color-icon-primary);
}
.btn--header-icon:hover {
  background-color: var(--gray-100);
}
.btn--header-icon:active {
  background-color: var(--gray-200);
}


/* ============================================================
   Tag — outlined (Figma: tag-outlined-asp)
   Контур 1px + прозрачный фон. Size=Medium по умолчанию (h24, 14px),
   модификатор --sm → Size=Small (h20, 12px).
   ============================================================ */
.tag-outlined-asp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  min-width: 32px;
  height: 24px;
  padding: 0 var(--spacing-8);
  border: var(--border-width-1) solid var(--color-border-base-default);
  border-radius: var(--border-radius-4);
  font-family: var(--font-family-base);
  font-size: var(--text-desktop-body-sm-500-size);   /* 14px */
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  color: var(--color-text-base-tertiary);
  background-color: transparent;
}

.tag-outlined-asp--sm {
  height: 20px;
  padding: 0 var(--spacing-6);
  font-size: var(--text-desktop-caption-md-500-size); /* 12px */
  line-height: 16px;
}

.tag-outlined-asp__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Style=Muted (по умолчанию) */
.tag-outlined-asp--muted {
  color: var(--color-text-base-tertiary);
  border-color: var(--color-border-base-default);
}

/* Style=ASP */
.tag-outlined-asp--asp {
  color: var(--text-asp-default);
  border-color: var(--border-asp-default);
}

/* Style=Accent (warning) */
.tag-outlined-asp--accent {
  color: var(--color-text-warning-on-secondary);
  border-color: var(--color-border-warning-default);
}

/* Style=Success (positive) */
.tag-outlined-asp--success {
  color: var(--color-text-positive-on-secondary);
  border-color: var(--color-border-positive-default);
}

/* Style=Brand */
.tag-outlined-asp--brand {
  color: var(--color-text-brand-on-secondary);
  border-color: var(--color-text-brand-on-secondary);
}

/* Style=Danger */
.tag-outlined-asp--danger {
  color: var(--color-text-danger-on-secondary);
  border-color: var(--color-border-danger-default);
}

@media (max-width: 1399.98px) {
  .old-version-badge {
    top: auto;
    bottom: 20px;
  }
}