.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  block-size: 40px;
  padding-inline: var(--pad-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--text-btn-medium);
  cursor: pointer;
  text-decoration: none;
}

.btn--large {
  block-size: 48px;
  inline-size: 100%;
  font: var(--text-btn-large);
}

.btn--small {
  block-size: 32px;
  padding-inline: var(--pad-3);
  font: var(--text-btn-small);
}

.btn--primary {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
}

.btn--primary:hover {
  background: var(--color-primary-600);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary-500);
}

.btn--ghost:hover {
  background: var(--color-primary-o-main);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.field {
  display: grid;
  gap: var(--gap-2);
}

.field__label {
  font: var(--text-input-label);
  color: var(--color-text-primary);
}

.field__required {
  color: var(--color-error-main);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.field__input {
  inline-size: 100%;
  block-size: 48px;
  padding-inline: var(--pad-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font: var(--text-input-text);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}

.field--invalid .field__input {
  border-color: var(--color-error-main);
}

.field__error {
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--text-xs-medium);
  color: var(--color-error-main);
}

.field__help {
  font: var(--text-xs-medium);
  color: var(--color-text-secondary);
}

.field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.card {
  background: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--pad-6);
  box-shadow: 0 2px 10px 0 #2f2b3d1f;
}

.card--center {
  inline-size: 480px;
  max-inline-size: 100%;
  display: grid;
  gap: var(--gap-4);
  justify-items: center;
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-1) var(--pad-3);
  border-radius: var(--radius-round);
  font: var(--text-chip);
  background: var(--color-chip-background);
  color: var(--color-text-primary);
}

.chip--success {
  background: var(--color-secondary-100);
  color: var(--color-primary-500);
}

.chip--warning {
  background: var(--color-warning-100);
  color: var(--color-warning-600);
}

.chip--error {
  background: #fde8e8;
  color: var(--color-error-600);
}

.chip--info {
  background: var(--color-success-100);
  color: #1f7a4d;
}

.chip--neutral {
  background: var(--color-chip-background);
  color: var(--color-text-primary);
}

.container-1440 {
  inline-size: 1440px;
  max-inline-size: 100%;
  margin-inline: auto;
}

.field__toggle {
  position: absolute;
  inset-inline-end: var(--pad-2);
}

[x-cloak],
[hidden] {
  display: none !important;
}