html {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 62.5%;
  line-height: 170%;
  color: var(--black);
  background-color: var(--general-bg-col);
  box-sizing: border-box;
}

body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: initial;
}

ul li, ol li {
  list-style-type: none;
  padding: 0;
}

textarea {
  resize: none;
  border: none;
  outline: none;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}

textarea:focus {
  border: none;
  outline: none;
}

@supports (not (mask-image: url())) and (not (-webkit-mask-image: url())) {
  .bg-masked,
  .bg-masked_b::before,
  .bg-masked_a::after,
  .bg-masked_b-a::before,
  .bg-masked_b-a::after {
    background-image: var(--mask-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.bg-masked_b::before,
.bg-masked_a::after,
.bg-masked_b-a::before,
.bg-masked_b-a::after {
  content: '';
  display: block;
}

@supports (mask-image: url()) or (-webkit-mask-image: url()) {
  .bg-masked,
  .bg-masked_b::before,
  .bg-masked_a::after,
  .bg-masked_b-a::before,
  .bg-masked_b-a::after {
    background-image: none;
    background-color: currentColor;

    -webkit-mask-image: var(--mask-icon);
    mask-image: var(--mask-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}


/* Хедер */
header.header {
  --back-btn-sz: 24px;
  padding: 12px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  background-color: var(--header-bg-col);
}

.header__back {
  width: var(--back-btn-sz);
  height: auto;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background-color: #E3E5E8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__back::before {
  content: '';
  display: block;
  width: 25%;
  height: auto;
  aspect-ratio: 5.33 / 9.33;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.13823 0.195262C5.39858 0.455612 5.39858 0.877722 5.13823 1.13807L1.60964 4.66667L5.13823 8.19526C5.39858 8.45561 5.39858 8.87772 5.13823 9.13807C4.87788 9.39842 4.45577 9.39842 4.19542 9.13807L0.195425 5.13807C-0.0649249 4.87772 -0.0649249 4.45561 0.195425 4.19526L4.19542 0.195262C4.45577 -0.0650874 4.87788 -0.0650874 5.13823 0.195262Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.13823 0.195262C5.39858 0.455612 5.39858 0.877722 5.13823 1.13807L1.60964 4.66667L5.13823 8.19526C5.39858 8.45561 5.39858 8.87772 5.13823 9.13807C4.87788 9.39842 4.45577 9.39842 4.19542 9.13807L0.195425 5.13807C-0.0649249 4.87772 -0.0649249 4.45561 0.195425 4.19526L4.19542 0.195262C4.45577 -0.0650874 4.87788 -0.0650874 5.13823 0.195262Z' fill='black'/%3E%3C/svg%3E%0A");
}

.header__title-container {
  flex: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header__title-container[data-user-id] {
  cursor: pointer;
}

header:has(.header__title-container:last-child:nth-last-child(1))::after {
  content: '';
  display: block;
  width: var(--back-btn-sz);
  height: auto;
  aspect-ratio: 1;
  flex: none;
}

h1.header__title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
/* \Хедер */

/* main */

main {
  flex: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* \main */