:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  margin: 0;
  font-weight: inherit;
  line-height: inherit;
  font-size: inherit;
}

p {
  margin: 0;
}

html body :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: inherit;
  line-height: inherit;
  font-size: inherit;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-primary:disabled, .btn-primary.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-primary svg,
.btn-primary i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-primary.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-primary.btn-icon {
  padding: 10px;
}
.btn-primary {
  background-color: var(--bg-primary-base);
  color: var(--static-white);
  border-color: var(--bg-primary-base);
}
.btn-primary svg,
.btn-primary i {
  color: var(--icon-white-0);
}
.btn-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-primary-dark);
  color: var(--static-white);
  border-color: var(--bg-primary-dark);
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--bg-primary-base);
  outline-offset: 2px;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--bg-primary-alpha-10);
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-primary:disabled svg,
.btn-primary:disabled i, .btn-primary.disabled svg,
.btn-primary.disabled i {
  color: var(--icon-disabled-300);
}

.btn-outline-primary,
.btn-primary-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-primary-outlined:disabled,
.btn-primary-outlined.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-outline-primary svg,
.btn-outline-primary i,
.btn-primary-outlined svg,
.btn-primary-outlined i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-outline-primary.btn-icon-only,
.btn-primary-outlined.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-outline-primary.btn-icon,
.btn-primary-outlined.btn-icon {
  padding: 10px;
}
.btn-outline-primary,
.btn-primary-outlined {
  background-color: transparent;
  color: var(--stroke-primary-base);
  border-color: var(--stroke-primary-base);
}
.btn-outline-primary svg,
.btn-outline-primary i,
.btn-primary-outlined svg,
.btn-primary-outlined i {
  color: var(--icon-primary-base);
}
.btn-outline-primary:hover:not(:disabled):not(.disabled):not(:focus),
.btn-primary-outlined:hover:not(:disabled):not(.disabled):not(:focus) {
  background-color: var(--bg-primary-base);
  color: var(--stroke-primary-dark);
  border-color: var(--stroke-primary-dark);
}
.btn-outline-primary:focus,
.btn-primary-outlined:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-white-0, #fff), 0 0 0 4px var(--alpha-neutral-alpha-16, rgba(153, 160, 174, 0.16));
  border-color: var(--stroke-strong-950);
}
.btn-outline-primary:focus-visible,
.btn-primary-outlined:focus-visible {
  outline: 2px solid var(--stroke-primary-base);
  outline-offset: 2px;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-primary-outlined:disabled,
.btn-primary-outlined.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-outline-primary:disabled svg,
.btn-outline-primary:disabled i, .btn-outline-primary.disabled svg,
.btn-outline-primary.disabled i,
.btn-primary-outlined:disabled svg,
.btn-primary-outlined:disabled i,
.btn-primary-outlined.disabled svg,
.btn-primary-outlined.disabled i {
  color: var(--icon-disabled-300);
}

.btn-lighter-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-lighter-primary:disabled, .btn-lighter-primary.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-lighter-primary svg,
.btn-lighter-primary i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-lighter-primary.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-lighter-primary.btn-icon {
  padding: 10px;
}
.btn-lighter-primary {
  background-color: var(--bg-primary-alpha-10);
  color: var(--text-primary-base);
  border-color: transparent;
}
.btn-lighter-primary svg,
.btn-lighter-primary i {
  color: var(--icon-primary-base);
}
.btn-lighter-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-primary-alpha-16);
  color: var(--text-primary-base);
  border-color: transparent;
}
.btn-lighter-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-lighter-primary:focus-visible {
  outline: 2px solid var(--text-primary-base);
  outline-offset: 2px;
}
.btn-lighter-primary:disabled, .btn-lighter-primary.disabled {
  background-color: var(--bg-primary-alpha-10);
  color: var(--text-disabled-300);
}
.btn-lighter-primary:disabled svg,
.btn-lighter-primary:disabled i, .btn-lighter-primary.disabled svg,
.btn-lighter-primary.disabled i {
  color: var(--icon-disabled-300);
}

.btn-ghost-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-ghost-primary:disabled, .btn-ghost-primary.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-ghost-primary svg,
.btn-ghost-primary i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-ghost-primary.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-ghost-primary.btn-icon {
  padding: 10px;
}
.btn-ghost-primary {
  background-color: transparent;
  color: var(--text-primary-base);
  border-color: transparent;
}
.btn-ghost-primary svg,
.btn-ghost-primary i {
  color: var(--icon-primary-base);
}
.btn-ghost-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-soft-200);
  color: var(--text-primary-dark);
  border-color: transparent;
}
.btn-ghost-primary:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--stroke-strong-950);
}
.btn-ghost-primary:focus-visible {
  outline: 2px solid var(--text-primary-base);
  outline-offset: 2px;
}
.btn-ghost-primary:disabled, .btn-ghost-primary.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
}
.btn-ghost-primary:disabled svg,
.btn-ghost-primary:disabled i, .btn-ghost-primary.disabled svg,
.btn-ghost-primary.disabled i {
  color: var(--icon-disabled-300);
}

.btn-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-error:disabled, .btn-error.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-error svg,
.btn-error i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-error.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-error.btn-icon {
  padding: 10px;
}
.btn-error {
  background-color: var(--state-error-base);
  color: var(--text-white-0);
  border-color: var(--state-error-base);
}
.btn-error svg,
.btn-error i {
  color: var(--icon-white-0);
}
.btn-error:hover:not(:disabled):not(.disabled) {
  background-color: var(--state-error-dark);
  color: var(--text-white-0);
  border-color: var(--state-error-dark);
}
.btn-error:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-error:focus-visible {
  outline: 2px solid var(--state-error-base);
  outline-offset: 2px;
}
.btn-error:disabled, .btn-error.disabled {
  background-color: var(--state-error-lighter);
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-error:disabled svg,
.btn-error:disabled i, .btn-error.disabled svg,
.btn-error.disabled i {
  color: var(--icon-disabled-300);
}

.btn-outline-error,
.btn-error-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-outline-error:disabled, .btn-outline-error.disabled,
.btn-error-outlined:disabled,
.btn-error-outlined.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-outline-error svg,
.btn-outline-error i,
.btn-error-outlined svg,
.btn-error-outlined i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-outline-error.btn-icon-only,
.btn-error-outlined.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-outline-error.btn-icon,
.btn-error-outlined.btn-icon {
  padding: 10px;
}
.btn-outline-error,
.btn-error-outlined {
  background-color: transparent;
  color: var(--state-error-base);
  border-color: var(--state-error-base);
}
.btn-outline-error svg,
.btn-outline-error i,
.btn-error-outlined svg,
.btn-error-outlined i {
  color: var(--state-error-base);
}
.btn-outline-error:hover:not(:disabled):not(.disabled):not(:focus),
.btn-error-outlined:hover:not(:disabled):not(.disabled):not(:focus) {
  background-color: var(--state-error-base);
  color: var(--state-error-dark);
  border-color: var(--state-error-dark);
}
.btn-outline-error:focus,
.btn-error-outlined:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-white-0, #fff), 0 0 0 4px var(--alpha-neutral-alpha-16, rgba(153, 160, 174, 0.16));
  border-color: var(--stroke-strong-950);
}
.btn-outline-error:focus-visible,
.btn-error-outlined:focus-visible {
  outline: 2px solid var(--state-error-base);
  outline-offset: 2px;
}
.btn-outline-error:disabled, .btn-outline-error.disabled,
.btn-error-outlined:disabled,
.btn-error-outlined.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-outline-error:disabled svg,
.btn-outline-error:disabled i, .btn-outline-error.disabled svg,
.btn-outline-error.disabled i,
.btn-error-outlined:disabled svg,
.btn-error-outlined:disabled i,
.btn-error-outlined.disabled svg,
.btn-error-outlined.disabled i {
  color: var(--icon-disabled-300);
}

.btn-lighter-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-lighter-error:disabled, .btn-lighter-error.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-lighter-error svg,
.btn-lighter-error i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-lighter-error.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-lighter-error.btn-icon {
  padding: 10px;
}
.btn-lighter-error {
  background-color: var(--state-error-lighter);
  color: var(--state-error-dark);
  border-color: transparent;
}
.btn-lighter-error svg,
.btn-lighter-error i {
  color: var(--state-error-dark);
}
.btn-lighter-error:hover:not(:disabled):not(.disabled) {
  background-color: var(--state-error-light);
  color: var(--state-error-dark);
  border-color: transparent;
}
.btn-lighter-error:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-lighter-error:focus-visible {
  outline: 2px solid var(--state-error-dark);
  outline-offset: 2px;
}
.btn-lighter-error:disabled, .btn-lighter-error.disabled {
  background-color: var(--state-error-lighter);
  color: var(--text-disabled-300);
}
.btn-lighter-error:disabled svg,
.btn-lighter-error:disabled i, .btn-lighter-error.disabled svg,
.btn-lighter-error.disabled i {
  color: var(--icon-disabled-300);
}

.btn-ghost-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-ghost-error:disabled, .btn-ghost-error.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-ghost-error svg,
.btn-ghost-error i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-ghost-error.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-ghost-error.btn-icon {
  padding: 10px;
}
.btn-ghost-error {
  background-color: transparent;
  color: var(--state-error-dark);
  border-color: transparent;
}
.btn-ghost-error svg,
.btn-ghost-error i {
  color: var(--state-error-dark);
}
.btn-ghost-error:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-soft-200);
  color: var(--state-error-base);
  border-color: transparent;
}
.btn-ghost-error:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--stroke-strong-950);
}
.btn-ghost-error:focus-visible {
  outline: 2px solid var(--state-error-dark);
  outline-offset: 2px;
}
.btn-ghost-error:disabled, .btn-ghost-error.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
}
.btn-ghost-error:disabled svg,
.btn-ghost-error:disabled i, .btn-ghost-error.disabled svg,
.btn-ghost-error.disabled i {
  color: var(--icon-disabled-300);
}

.btn-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-neutral:disabled, .btn-neutral.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-neutral svg,
.btn-neutral i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-neutral.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-neutral.btn-icon {
  padding: 10px;
}
.btn-neutral {
  background-color: var(--bg-strong-950);
  color: var(--text-white-0);
  border-color: var(--stroke-strong-950);
}
.btn-neutral svg,
.btn-neutral i {
  color: var(--icon-white-0);
}
.btn-neutral:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-surface-800);
  color: var(--text-white-0);
  border-color: var(--bg-surface-800);
}
.btn-neutral:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-neutral:focus-visible {
  outline: 2px solid var(--bg-strong-950);
  outline-offset: 2px;
}
.btn-neutral:disabled, .btn-neutral.disabled {
  background-color: var(--bg-soft-200);
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-neutral:disabled svg,
.btn-neutral:disabled i, .btn-neutral.disabled svg,
.btn-neutral.disabled i {
  color: var(--icon-disabled-300);
}

.btn-outline-neutral,
.btn-neutral-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-outline-neutral:disabled, .btn-outline-neutral.disabled,
.btn-neutral-outlined:disabled,
.btn-neutral-outlined.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-outline-neutral svg,
.btn-outline-neutral i,
.btn-neutral-outlined svg,
.btn-neutral-outlined i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-outline-neutral.btn-icon-only,
.btn-neutral-outlined.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-outline-neutral.btn-icon,
.btn-neutral-outlined.btn-icon {
  padding: 10px;
}
.btn-outline-neutral,
.btn-neutral-outlined {
  background-color: transparent;
  color: var(--text-sub-600);
  border-color: var(--stroke-soft-200);
}
.btn-outline-neutral svg,
.btn-outline-neutral i,
.btn-neutral-outlined svg,
.btn-neutral-outlined i {
  color: var(--icon-sub-600);
}
.btn-outline-neutral:hover:not(:disabled):not(.disabled):not(:focus),
.btn-neutral-outlined:hover:not(:disabled):not(.disabled):not(:focus) {
  background-color: var(--bg-weak-50);
  color: var(--text-strong-950);
  border-color: var(--bg-weak-50);
}
.btn-outline-neutral:focus,
.btn-neutral-outlined:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-white-0, #fff), 0 0 0 4px var(--alpha-neutral-alpha-16, rgba(153, 160, 174, 0.16));
  border-color: var(--stroke-strong-950);
}
.btn-outline-neutral:focus-visible,
.btn-neutral-outlined:focus-visible {
  outline: 2px solid var(--stroke-soft-200);
  outline-offset: 2px;
}
.btn-outline-neutral:disabled, .btn-outline-neutral.disabled,
.btn-neutral-outlined:disabled,
.btn-neutral-outlined.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
  border-color: var(--stroke-soft-200);
}
.btn-outline-neutral:disabled svg,
.btn-outline-neutral:disabled i, .btn-outline-neutral.disabled svg,
.btn-outline-neutral.disabled i,
.btn-neutral-outlined:disabled svg,
.btn-neutral-outlined:disabled i,
.btn-neutral-outlined.disabled svg,
.btn-neutral-outlined.disabled i {
  color: var(--icon-disabled-300);
}

.btn-lighter-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-lighter-neutral:disabled, .btn-lighter-neutral.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-lighter-neutral svg,
.btn-lighter-neutral i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-lighter-neutral.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-lighter-neutral.btn-icon {
  padding: 10px;
}
.btn-lighter-neutral {
  background-color: var(--bg-soft-200);
  color: var(--text-strong-950);
  border-color: transparent;
}
.btn-lighter-neutral svg,
.btn-lighter-neutral i {
  color: var(--icon-strong-950);
}
.btn-lighter-neutral:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-sub-300);
  color: var(--text-strong-950);
  border-color: transparent;
}
.btn-lighter-neutral:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 90, 219, 0.2);
}
.btn-lighter-neutral:focus-visible {
  outline: 2px solid var(--text-strong-950);
  outline-offset: 2px;
}
.btn-lighter-neutral:disabled, .btn-lighter-neutral.disabled {
  background-color: var(--bg-soft-200);
  color: var(--text-disabled-300);
}
.btn-lighter-neutral:disabled svg,
.btn-lighter-neutral:disabled i, .btn-lighter-neutral.disabled svg,
.btn-lighter-neutral.disabled i {
  color: var(--icon-disabled-300);
}

.btn-ghost-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-ghost-neutral:disabled, .btn-ghost-neutral.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-ghost-neutral svg,
.btn-ghost-neutral i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-ghost-neutral.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-ghost-neutral.btn-icon {
  padding: 10px;
}
.btn-ghost-neutral {
  background-color: transparent;
  color: var(--text-strong-950);
  border-color: transparent;
}
.btn-ghost-neutral svg,
.btn-ghost-neutral i {
  color: var(--icon-strong-950);
}
.btn-ghost-neutral:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-soft-200);
  color: var(--text-sub-600);
  border-color: transparent;
}
.btn-ghost-neutral:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--stroke-strong-950);
}
.btn-ghost-neutral:focus-visible {
  outline: 2px solid var(--text-strong-950);
  outline-offset: 2px;
}
.btn-ghost-neutral:disabled, .btn-ghost-neutral.disabled {
  background-color: transparent;
  color: var(--text-disabled-300);
}
.btn-ghost-neutral:disabled svg,
.btn-ghost-neutral:disabled i, .btn-ghost-neutral.disabled svg,
.btn-ghost-neutral.disabled i {
  color: var(--icon-disabled-300);
}

.btn-size-medium {
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  gap: 8px;
}
.btn-size-medium svg,
.btn-size-medium i {
  width: 20px;
  height: 20px;
}
.btn-size-medium.btn-icon-only {
  width: 40px;
  padding: 0;
}

.btn-size-small {
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  gap: 8px;
}
.btn-size-small svg,
.btn-size-small i {
  width: 20px;
  height: 20px;
}
.btn-size-small.btn-icon-only {
  width: 36px;
  padding: 0;
}

.btn-size-x-small {
  height: 32px;
  padding: 7px 14px;
  font-size: 13px;
  gap: 6px;
}
.btn-size-x-small svg,
.btn-size-x-small i {
  width: 18px;
  height: 18px;
}
.btn-size-x-small.btn-icon-only {
  width: 32px;
  padding: 0;
}

.btn-size-2x-small {
  height: 28px;
  padding: 4px 6px;
  font-size: 12px;
  gap: 4px;
}
.btn-size-2x-small svg,
.btn-size-2x-small i {
  width: 16px;
  height: 16px;
}
.btn-size-2x-small.btn-icon-only {
  width: 28px;
  padding: 0;
}

.comments {
  max-width: 808px;
  margin: 32px auto;
  direction: rtl;
  padding: 24px 0;
}

/* =======================
   COMMENT BASE
   ======================= */
.comment {
  position: relative;
  width: 100%;
}
.comment:not(:last-child) {
  margin-bottom: 24px;
}
.comment {
  /* elbow default (for level 2+) */
}
.comment__container {
  background-color: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: 12px;
  padding: 24px 32px;
}
.comment__container > .comment:not(:has(.comment__children)) > .comment__body::after {
  display: none;
}
.comment__avatar {
  position: relative;
  z-index: 2;
}
.comment__avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.comment__body {
  display: flex;
  align-items: start;
  gap: 8px;
  position: relative;
}
.comment__body::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 16px;
  width: 1px;
  height: calc(100% - 32px + 24px);
  background: var(--stroke-soft-200);
}
.comment__content {
  flex: 1;
  position: relative;
}
.comment__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.comment__author {
  color: var(--text-strong-950);
  font-size: var(--typography-body-m-font-size);
  line-height: var(--typography-body-m-line-height);
  font-weight: var(--typography-body-m-font-weight);
  letter-spacing: var(--typography-body-m-letter-spacing);
  text-transform: var(--typography-body-m-text-transform, none);
}
.comment__date {
  color: var(--text-soft-400);
  font-size: var(--typography-body-m-font-size);
  line-height: var(--typography-body-m-line-height);
  font-weight: var(--typography-body-m-font-weight);
  letter-spacing: var(--typography-body-m-letter-spacing);
  text-transform: var(--typography-body-m-text-transform, none);
}
.comment__title {
  color: var(--text-strong-950);
  margin-bottom: 6px;
  font-size: var(--typography-body-l-font-size);
  line-height: var(--typography-body-l-line-height);
  font-weight: var(--typography-body-l-font-weight);
  letter-spacing: var(--typography-body-l-letter-spacing);
  text-transform: var(--typography-body-l-text-transform, none);
  font-weight: 600;
}
.comment__text {
  margin-bottom: 12px;
  color: var(--text-sub-600);
  font-size: var(--typography-body-l-font-size);
  line-height: var(--typography-body-l-line-height);
  font-weight: var(--typography-body-l-font-weight);
  letter-spacing: var(--typography-body-l-letter-spacing);
  text-transform: var(--typography-body-l-text-transform, none);
}
.comment__attachment {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px);
  grid-auto-rows: 40px;
  gap: 10px;
  margin-bottom: 12px;
}
.comment__attachment-item {
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--stroke-soft-200);
}
.comment__attachment-item img {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment__vote {
  display: flex;
  align-items: center;
  color: var(--text-sub-600);
}
.comment__vote .btn {
  font-size: var(--typography-body-m-font-size);
  line-height: var(--typography-body-m-line-height);
  font-weight: var(--typography-body-m-font-weight);
  letter-spacing: var(--typography-body-m-letter-spacing);
  text-transform: var(--typography-body-m-text-transform, none);
}
.comment__vote .btn svg {
  color: var(--text-sub-600);
  width: 20px;
  height: 20px;
}
.comment__info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment__replay svg {
  width: 20px;
  height: 20px;
  color: var(--icon-sub-600);
}
.comment {
  /* =======================
     CHILDREN
     ======================= */
}
.comment__children {
  position: relative;
  margin-top: 24px;
  padding-right: 24px;
  margin-bottom: 24px;
}
.comment__children::before {
  content: "";
  position: absolute;
  top: 32px;
  right: 16px;
  width: 1px;
  height: calc(100% - 32px + 24px);
  background: var(--stroke-soft-200);
  top: 10px;
}
.comment__children:last-child::before {
  display: none;
}
.comment__children:last-child::after {
  display: none;
}
.comment__children > .comment:has(.comment__children)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 16px;
  width: 1px;
  height: calc(100% - 32px + 24px);
  background: var(--stroke-soft-200);
}
.comment__children > .comment:not(:has(.comment__children)):not(:first-child)::before {
  display: none;
}
.comment__children > .comment:not(:has(.comment__children)):last-child .comment__body::after {
  display: none;
}
.comment__children > .comment::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -8px;
  width: 8px;
  height: 64px;
  border-right: 1px solid var(--stroke-soft-200);
  border-bottom: 1px solid var(--stroke-soft-200);
  border-bottom-right-radius: 4px;
}
.comment__admin > .comment__body .comment__content {
  padding: 4px 12px 8px 12px;
  border-radius: 14px;
  border: 1px solid;
  border-color: #ffebe0;
  background: #fffcfa;
}
.comment__admin > .comment__body .comment__header .comment__author {
  font-size: var(--typography-body-l-font-size);
  line-height: var(--typography-body-l-line-height);
  font-weight: var(--typography-body-l-font-weight);
  letter-spacing: var(--typography-body-l-letter-spacing);
  text-transform: var(--typography-body-l-text-transform, none);
  font-weight: 600;
}
.comment__admin--iranbroker > .comment__body .comment__content {
  border-color: var(--stroke-primary-alpha-16);
  background: var(--bg-primary-lightest);
}
.comment__admin--iranbroker > .comment__body .comment__header .comment__author {
  color: var(--text-primary-dark);
  font-size: var(--typography-body-l-font-size);
  line-height: var(--typography-body-l-line-height);
  font-weight: var(--typography-body-l-font-weight);
  letter-spacing: var(--typography-body-l-letter-spacing);
  text-transform: var(--typography-body-l-text-transform, none);
  font-weight: 600;
}
.comment__form {
  position: relative;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stroke-soft-200);
}
.comment__form-terms {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-sub-600);
  font-size: var(--typography-body-s-font-size);
  line-height: var(--typography-body-s-line-height);
  font-weight: var(--typography-body-s-font-weight);
  letter-spacing: var(--typography-body-s-letter-spacing);
  text-transform: var(--typography-body-s-text-transform, none);
}
.comment__form-terms a {
  color: var(--text-primary-base);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.comment__form-terms svg {
  color: var(--icon-soft-400);
}
.comment__form-content {
  position: relative;
}
.comment__form-content-container {
  position: relative;
}
.comment__form-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment__setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comment__setting-count {
  color: var(--text-sub-600);
  font-size: var(--typography-body-l-font-size);
  line-height: var(--typography-body-l-line-height);
  font-weight: var(--typography-body-l-font-weight);
  letter-spacing: var(--typography-body-l-letter-spacing);
  text-transform: var(--typography-body-l-text-transform, none);
}
.comment__setting-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.comment-rating-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-rating-filter--title {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text-strong-950);
  font-size: var(--typography-body-m-font-size);
  line-height: var(--typography-body-m-line-height);
  font-weight: var(--typography-body-m-font-weight);
  letter-spacing: var(--typography-body-m-letter-spacing);
  text-transform: var(--typography-body-m-text-transform, none);
}
.comment-rating-filter--title svg {
  width: 20px;
  height: 20px;
  color: var(--icon-disabled-300);
}
.comment-rating-filter--buttons {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.comment-rating-filter--buttons .comment-rate {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: all 0.3s ease-out;
}
.comment-rating-filter--buttons .comment-rate svg {
  color: var(--stroke-sub-300);
  width: 32px;
  height: 32px;
  transition: all 0.3s ease-out;
}
.comment-rating-filter--buttons .comment-rate:hover, .comment-rating-filter--buttons .comment-rate:has(~ .comment-rate:hover), .comment-rating-filter--buttons .comment-rate.comment-rate--selected, .comment-rating-filter--buttons .comment-rate:has(~ .comment-rate.comment-rate--selected) {
  background-color: var(--bg-weak-50);
}
.comment-rating-filter--buttons .comment-rate:hover svg, .comment-rating-filter--buttons .comment-rate:has(~ .comment-rate:hover) svg, .comment-rating-filter--buttons .comment-rate.comment-rate--selected svg, .comment-rating-filter--buttons .comment-rate:has(~ .comment-rate.comment-rate--selected) svg {
  color: #f6b51e;
}
.comment-report-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-report .modal-footer {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px !important;
}
.comment-replay-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: calc(1440px - 1px)) {
  .comments {
    margin: 16px 0;
    padding: 0 0 24px 0;
  }
  .comment__container {
    border: none;
    padding: 12px 0;
  }
  .comment__avatar img {
    width: 24px;
    height: 24px;
  }
  .comment__body::after {
    right: 12px;
    top: 24px;
    height: calc(100% - 24px + 24px);
  }
  .comment__author {
    font-size: var(--typography-body-m-font-size);
    line-height: var(--typography-body-m-line-height);
    font-weight: var(--typography-body-m-font-weight);
    letter-spacing: var(--typography-body-m-letter-spacing);
    text-transform: var(--typography-body-m-text-transform, none);
  }
  .comment__title {
    font-size: var(--typography-body-m-font-size);
    line-height: var(--typography-body-m-line-height);
    font-weight: var(--typography-body-m-font-weight);
    letter-spacing: var(--typography-body-m-letter-spacing);
    text-transform: var(--typography-body-m-text-transform, none);
    font-weight: 600;
  }
  .comment__text {
    font-size: var(--typography-body-m-font-size);
    line-height: var(--typography-body-m-line-height);
    font-weight: var(--typography-body-m-font-weight);
    letter-spacing: var(--typography-body-m-letter-spacing);
    text-transform: var(--typography-body-m-text-transform, none);
  }
  .comment__children {
    padding-right: 20px;
  }
  .comment__children::before {
    right: 12px;
  }
  .comment__children > .comment:has(.comment__children)::after {
    right: 12px;
    top: 24px;
    height: calc(100% - 24px + 24px);
  }
  .comment__admin > .comment__body .comment__content {
    padding: 6px 12px 12px 12px;
  }
  .comment__form-content .btn {
    gap: 6px;
    height: 32px;
    font-size: 13px;
  }
  .comment__setting {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--stroke-soft-200);
  }
  .comment__setting-actions .btn {
    gap: 6px;
    height: 32px;
    font-size: 13px;
  }
}

/*# sourceMappingURL=comments.css.map */