/* ========================
   Общие стили 
   ======================== */
/* Глобальная адаптивность медиа-элементов */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* Сохраняет пропорции картинок */
}

/* Предотвращение вылезания текста за границы на всех устройствах */
*,
*::before,
*::after {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ограничиваем максимальную ширину для всех страниц, чтобы на ПК это не выглядело растянутым */
.page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow-x: hidden;
  /* Запрещаем горизонтальный скролл */
}

body {
  background-color: #f5f0e9;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.div,
.div * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
  width: 100%;
}

button {
  border: none;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.big_height {
  min-height: 100vh;
}

/* ========================
.resurve-page  
#ucsess_payment    
#user_start   
#guest_start   
#guest_injoin 
#user_profile 
#user_help
#user_unit
#user_trand
======================== */
#guest_injoin,
#user_profile,
#user_unit,
#user_trand,
#guest_start,
#ucsess_payment,
.resurve-page {
  display: none;
  padding-left: 15px;
  padding-right: 15px;
}

#user_unit.active,
#user_profile.active,
#guest_start.active,
#guest_injoin.active,
#ucsess_payment.active,
#user_trand.active,
.resurve-page.active {
  display: block;
  width: 100%;
}

/* ===== Статичные страницы: фиксированная высота + скролл ===== */
#guest_start.active,
#guest_injoin.active,
#ucsess_payment.active,
#user_trand.active {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.resurve-page.active {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ===== Динамические страницы: растут по контенту + скролл ===== */
#user_profile.active,
#user_unit.active {
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ===== Оптимизация производительности (аппаратное ускорение для тяжелых фонов) ===== */
.gs-frame,
.uu-large-box,
.uu-action-box,
.ut-item-box,
.ut-item-long,
.up-info-box,
.up-info-box-large,
.up-nav-btn {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ========================
      Стили для текста
      ======================== */
#guest_start {
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}

#guest_injoin {
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}

#user_unit {
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}

#ucsess_payment {
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}

#user_trand {
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}



#text1_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 25px;
  font-weight: 700;
}

#text2_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 22px;
  font-weight: 700;

}

#text3_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

}

#text4_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

}

#text5_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

}

#text6_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

}

#text7_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

}

#text8_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-top: 40px;
}

#text9_guest_injoin {
  color: #434d4b;
  text-align: left;
  font-family: 'PT Serif', sans-serif;
  font-size: 16px;
  font-weight: 400;

}

#text10_guest_injoin {
  color: #f5f0e9;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}


#text1_user_help {
  color: #000000;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;

}

#text2_user_help {
  color: #f5f0e9;
  text-align: left;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;

}

#text3_user_help {
  color: #f5f0e9;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;

}

#text4_user_help {
  color: #000000;
  text-align: left;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;

}

#text18_user_trand {
  color: #f5f0e9;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight: 500;


}

#text1_sucsess_payment {
  color: #f5f0e9;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 25px;
  font-weight: 700;
  background: #1c8ea4;
  border-radius: 11px;
  padding: 15px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
}

#text2_sucsess_payment {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 40px 0;
}

#text3_sucsess_payment {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;

}

/* ========================
      Стили для картинок
      ======================== */
#image1_start_guest {
  position: relative;
  left: 45%;
  transform: translateX(-55%);
}

#image2_start_guest {
  position: relative;
  right: 0%;
  transform: translateX(-75%);
}

.image3_start_guest {
  width: 24px;
  height: 24px;
  position: relative;
  top: 5px;
  overflow: visible;
}


#btn_stoppause {
  position: relative;
  height: 80px;
  background: #78c9cf;
  border-radius: 14px;
  margin: 30px 0;
  -webkit-box-shadow: -17px -13px 7px 0px rgba(114, 194, 255, 0.2);
  -moz-box-shadow: -17px -13px 7px 0px rgba(114, 194, 255, 0.2);
  box-shadow: -17px -13px 7px 0px rgba(114, 194, 255, 0.2);
}

#stop-and-play-fill {
  width: 65px;
  height: 63px;
  position: absolute;
  z-index: 555;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#image1_guest_injoin {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
}

#image2_guest_injoin {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 27px;
}

.text_quest {
  list-style-type: none;
  padding-left: 0;
  margin-top: 25px;
}

.text_quest li {
  padding-left: 30px;
  /* Отступ для текста */
  background: url('Done.svg') no-repeat left center;
  background-size: 25px 25px;
  /* Устанавливаем размер изображения */
  margin-bottom: 10px;
}

.image3_guest_injoin {
  width: 24px;
  height: 24px;
  overflow: visible;
}

#image8_guest_injoin {
  width: 41px;
  height: 44px;

  overflow: visible;
}

/* user_start image styles removed */
#image1_user_profile {
  width: 33.51px;
  height: 29.05px;
  position: absolute;
  left: 37px;
  top: 113px;
  overflow: visible;
}

/* ========================
        Стили для графики 
        ======================== */
#graphics1_start_guest {
  background: #f5f0e9;
  border-radius: 10px;
  border-style: solid;
  border-color: #33363f;
  border-width: 1px;
  width: 319px;
  height: 166px;

}

#graphics1_guest_injoin {
  background: #f5f0e9;
  border-radius: 14px;
  border-style: solid;
  border-color: #78c9cf;
  border-width: 1px;

  position: absolute;
  top: 0;
  left: 0;
}

#graphics2_guest_injoin {
  background: #78c9cf;
  border-radius: 14px;

  position: absolute;
  top: 0;
  left: 0;
}



#kubs_prof {
  position: relative;
  height: 170px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5px;
}

#graphics5_user_profile {
  background: #9d634e;
  border-radius: 14px;
  width: 100%;
  height: 47px;

  -webkit-box-shadow: -9px -9px 7px 0px rgba(157, 99, 78, 0.2);
  -moz-box-shadow: -9px -9px 7px 0px rgba(157, 99, 78, 0.2);
  box-shadow: -9px -9px 7px 0px rgba(157, 99, 78, 0.2);
}

/* user_help absolute graphics removed — content now flows in user_profile */
.poplnyat_koshelek {
  background: #78c9cf;
  border-radius: 14px;
  padding: 15px;
  margin: 15px 0;
}

.snyatie_blok {
  background: #1c8ea4;
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 15px;
}

/* ===== Блок-заголовок раздела в user_profile ===== */
.profile-section-label {
  color: #434d4b;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 10px;
  padding-left: 4px;
  border-left: 3px solid #1c8ea4;
  padding-left: 10px;
}

/* ===== Блок "События" ===== */
.event-game-block {
  background: #78c9cf;
  border-radius: 14px;
  padding: 15px;
  margin: 15px 0 30px;
  min-height: 60px;
}

.event-game-block p {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  color: #000;
  border-left: 2px solid #1c8ea4;
  padding-left: 8px;
  margin-bottom: 8px;
}

#graphics23_user_trand {
  background: #1c8ea4;
  border-radius: 14px;
  opacity: 0.9;
  width: 195px;
  height: 186px;
  position: relative;
  left: 90px;
  top: 320px;
}

#graphics_ucsess_payment {
  background: #1c8ea4;
  border-radius: 11px;
  width: 284px;
  height: 71px;
  position: absolute;
  left: 65px;
  top: 606px;
}

/* ========================
      Стили для кнопок 
      ======================== */
#botom_next_page_start_guest {
  background: #1c8ea4;
  border-radius: 10px;
  width: 76px;
  height: 45px;
  position: absolute;
  bottom: 0;
  right: 15px;
}

#botom_btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

#botom_pay_page_guest_injoin {
  background: #1c8ea4;
  border-radius: 10px;
  width: 90%;
  height: 55px;

}

#botom_exit_page_guest_injoin {
  background: #78c9cf;
  border-radius: 12px;
  width: 10%;
  height: 55px;

}

/* user_start nav-icon button styles removed */
.btn_profile {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}

.btn_profile button {
  width: 25%;
  text-align: center;
}

#botom_text_to_user_profile,
#botom_text_to_user_profile4,
#botom_text_to_user_profile2,
#botom_text_to_user_profile3 {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;


}

#botom_text_to_user_unit,
#botom_text_to_user_unit4,
#botom_text_to_user_unit2,
#botom_text_to_user_unit3 {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;


}

#botom_text_to_user_help,
#botom_text_to_user_help4,
#botom_text_to_user_help2,
#botom_text_to_user_help3 {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;


}

#botom_text_to_user_trand,
#botom_text_to_user_trand4,
#botom_text_to_user_trand2,
#botom_text_to_user_trand3 {
  color: #434d4b;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;

}

.btn_trand {
  position: relative;
  top: 40px;
  min-height: 700px;
}

.btn_trand button {
  padding: 15px;
}


.upload-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#uploadStatus {
  margin-top: 20px;
  color: white;
  text-align: center;
  font-size: 16px;
  text-shadow: 1px 1px 2px black;
}



/*стили анкеты*/
/* Контейнер анкеты */
.resurve-page {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  min-height: 100vh;
  padding: 50px 0px 40px 0px;
  overflow-x: hidden;
  z-index: 1;
  /* Обязательно добавить */
}

.resurve-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("survey-bg.webp") center top no-repeat;
  background-color: #0b1320;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

.resurve-page.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#assessmentForm {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

/* Заголовки */
h1,
h2,
h3 {
  font-family: 'PT Sans Narrow', sans-serif;
  color: #FFFFFF;
}

h1 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 100;
}

h2 {
  font-size: 25px;
  margin: 20px 0;
}

/* Вопросы */
.question {
  position: relative;
  width: 100%;
  box-sizing: border-box;

  border-style: solid;
  border-width: 70px 80px;
  border-image-source: url("Figure.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  background-image: none !important;

  padding: 20px 5% 80px 5%;
  /* Компенсируем отступы рамки + место снизу */
  margin-bottom: 20px;
  margin-top: -40px;
  display: flex;
  flex-direction: column;
}

.question h3 {
  font-family: 'Espuma Pro', 'PT Sans Narrow', sans-serif;
  color: #FFFFFF;
  font-size: clamp(13px, 3vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;

  background-image: url("Subtitle_frame.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  /* Делаем рамку шириной с общую рамку (80px слева и 80px справа) */
  position: absolute;
  top: -65px;
  left: -80px;
  width: calc(100% + 160px);

  /* Внутренние отступы от текста до краев рамки */
  padding: 35px 40px;
}

/* 3. Контейнер с вариантами ответов */
.options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 60px auto 0 auto;
}

.option {
  display: flex;
  align-items: center;
  margin: 0;
  background: transparent;
  border: none;
  color: #ADD0DA;
  font-family: 'Espuma Pro', 'PT Sans', sans-serif;
  font-size: clamp(13px, 2.8vw, 24px);
  cursor: pointer;
  transition: color 0.2s;
  text-align: left;
  gap: 12px;
  padding: 15px 10px 35px 10px;
  /* Увеличили нижний отступ до 25px, чтобы текст не касался линии */
  line-height: 1.2;
  position: relative;
}

/* Разделительные линии между вариантами */
.option:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: url('Section_line.svg') left center no-repeat;
  background-size: 100% auto;
}

/* Стилизация радио-кнопок */
.option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #9d634e;
  /* Бронзовый ободок под дизайн Figma */
  background: radial-gradient(circle, rgba(40, 25, 20, 0.6) 0%, rgba(15, 10, 8, 0.9) 100%);
  box-shadow: inset 0 0 4px rgba(157, 99, 78, 0.6);
  position: relative;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.option input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FEF7E3;
  box-shadow: 0 0 8px #FEF7E3, 0 0 15px rgba(254, 247, 227, 0.8);
  transition: transform 0.2s ease;
}

.option input[type="radio"]:checked {
  border-color: #FEF7E3;
  box-shadow: 0 0 8px rgba(254, 247, 227, 0.6), inset 0 0 4px rgba(254, 247, 227, 0.4);
}

.option input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.option:hover input[type="radio"] {
  border-color: #FEF7E3;
  box-shadow: 0 0 6px rgba(254, 247, 227, 0.4);
}

.option:hover {
  color: #FEF7E3;
}

/* Кнопки */
button {
  border: none;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.submit-btn {
  margin-top: 170px;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(58, 150, 170, 0.4) 0%, rgba(20, 65, 85, 0.7) 100%);
  border: 2px solid #bdf1ff;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 700;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 1);
  cursor: pointer;
  box-shadow:
    0 0 8px rgba(189, 241, 255, 0.6),
    0 0 15px rgba(120, 201, 207, 0.5),
    inset 0 0 12px rgba(189, 241, 255, 0.6);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-top: 50px;
}

.submit-btn:hover {
  background: linear-gradient(180deg, rgba(78, 170, 190, 0.5) 0%, rgba(30, 85, 105, 0.8) 100%);
  box-shadow:
    0 0 12px rgba(189, 241, 255, 0.8),
    0 0 25px rgba(120, 201, 207, 0.7),
    inset 0 0 18px rgba(189, 241, 255, 0.8);
  transform: scale(1.03);
}

/* Блок результатов */
#results {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
  gap: 20px;
  position: relative;
}

#results h1 {
  color: #FFFFFF;
  font-family: 'Espuma Pro', 'PT Sans Narrow', sans-serif;
  font-size: clamp(24px, 5vw, 32px);
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  margin: 0;
  text-align: center;

  box-sizing: border-box;
  border-style: solid;
  border-width: 70px 80px;
  border-image-source: url("Figure.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  background-image: none !important;
  width: 100%;
  padding: 10px 5%;
}

#role {
  color: #FEF7E3;
  text-shadow: 0px 0px 10px rgba(254, 247, 227, 0.6);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  display: block;
  margin-top: 20px;
  line-height: 1.3;
}

#continue-survay-btn {
  max-width: 100%;
  margin-top: 0;
}

/* Адаптивность */
@media (max-width: 600px) {
  .container {
    padding: 15px;
  }

  .question {
    padding: 60px 10% 120px 10% !important;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 18px;
  }

  .submit-btn {
    font-size: 18px;
    padding: 12px;
  }



  #graphics11_user_profile {
    left: 37px;
    top: 397px;
  }

  #graphics12_user_profile {
    left: 37px;
    top: 397px;
  }

  #graphics13_user_profile {
    left: 37px;
    top: 472px;
  }

  #graphics14_user_profile {

    left: 37px;
    top: 558px;
  }

  #graphics15_user_profile {
    left: 37px;
    top: 660px;
  }

  #botom_text_to_user_profile,
  #botom_text_to_user_profile4,
  #botom_text_to_user_profile2,
  #botom_text_to_user_profile3 {
    font-size: 15px;
  }

  #botom_text_to_user_unit,
  #botom_text_to_user_unit4,
  #botom_text_to_user_unit2,
  #botom_text_to_user_unit3 {
    font-size: 15px;
  }

  #botom_text_to_user_help,
  #botom_text_to_user_help4,
  #botom_text_to_user_help2,
  #botom_text_to_user_help3 {
    font-size: 15px;
  }

  #botom_text_to_user_trand,
  #botom_text_to_user_trand4,
  #botom_text_to_user_trand2,
  #botom_text_to_user_trand3 {
    font-size: 15px;
  }

  .btn_trand div {
    font-size: 14px !important;
  }

  #graphics17_user_trand {
    width: 40px;
  }

  #button_trand5_user_trand {
    padding-left: 10px;
    padding-top: 40px;
  }

  .btn_trand button {
    padding: 5px;
  }

  #button_trand6_user_trand {
    padding-left: 10px;
    padding-top: 40px;
  }

  #text2_user_profile {
    color: #f5f0e9;
    text-align: left;
    font-family: "PtSansNarrow-Regular", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
  }

  #text3_user_profile {
    color: #f5f0e9;
    text-align: left;
    font-family: "PtSansNarrow-Regular", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
  }

  #text4_user_profile {
    color: #f5f0e9;
    text-align: left;
    font-family: "PtSansNarrow-Regular", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;

  }

  #text3_guest_injoin {
    font-size: 16px;
  }

  #text4_guest_injoin {
    font-size: 16px;
  }

  #text5_guest_injoin {
    font-size: 16px;
  }

  #text6_guest_injoin {
    font-size: 16px;
  }

  #text7_guest_injoin {
    font-size: 16px;
  }

  #text8_guest_injoin {
    font-size: 16px;
  }

  #text9_guest_injoin {
    font-size: 13px;
  }

  /* user_start media-query icon buttons removed */
  #ucsess_payment_div {
    padding: 0 15px 15px;
  }

  #text1_sucsess_payment {
    width: 100%;

  }
}


/* =========================================
   GUEST START (Figma Design)
   ========================================= */

/* Базовые настройки для первой страницы (фон, отступы) без display: flex */
#guest_start {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Убираем фон отсюда */
}

#guest_start::before {
  content: "";
  position: fixed;
  /* Фиксируем сам элемент, а не фон */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("Quest-start.webp") center center no-repeat;
  background-size: cover;
  background-color: #0b1320;
  transform: scale(1.15);
  z-index: -1;
  /* Отправляем на задний план */
  pointer-events: none;
}

/* Включаем flex-режим ТОЛЬКО когда первая страница становится активной */
#guest_start.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gs-protocol {
  font-family: 'Gotthard', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.gs-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 600px;
  margin: 0 auto 40px auto;
  /* Строго по центру, с отступом вниз */
}

.gs-title-img {
  width: 100%;
  height: auto;
  display: block;
}

.gs-title-text-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.gs-title-text {
  font-family: 'Galliard Antiqua Bold', serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.2;
  color: #E6F8FD;
  text-align: center;
  margin-top: -5px;
}

.gs-frames {
  flex-direction: column;
  width: 90%;
  max-width: 800px;
  align-items: center;
  margin: 0 auto;
}

.gs-frame {
  position: relative;
  width: 100%;
  box-sizing: border-box;

  border-style: solid;
  border-width: 70px 80px;
  border-image-source: url("Figure.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  background-image: none !important;
  padding: 20px 5%;
  /* Внутренний отступ текста от рамки */

  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -30px !important;
  margin-bottom: -30px !important;
}

.gs-frame-large {
  padding: 50px 8% 50px 8% !important;
  /* Увеличенный отступ для больших блоков */
  margin-bottom: -40px !important;
  margin-top: -40px !important;
}

.gs-frame-bg-img {
  display: none;
}

.gs-frame-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

#text2_start_guest,
#text3_start_guest,
#text4_start_guest {
  font-family: 'Espuma Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 3.5vw, 20px);
  line-height: 1.35;
  text-align: center;
}

#text2_start_guest {
  color: #FEF7E3;
}

#text3_start_guest,
#text4_start_guest {
  color: #ADD0DA;
}

#text4_start_guest-span,
#text2_start_guest-span2 {
  color: #FEF7E3;
}

#text5_start_guest {
  font-family: 'Espuma Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1.2;
  color: #FCFDFD;
  margin-bottom: 20px;
  text-align: center;
}

.gs-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gs-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

.gs-icon-wrap {
  width: clamp(55px, 12vw, 120px);
  height: clamp(55px, 12vw, 120px);
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(55px, 12vw, 120px);
  margin-top: 4px;
}

.gs-icon-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gs-item-text {
  flex: 1;
}

.gs-item span {
  font-family: 'Espuma Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 3vw, 20px);
  line-height: 1.3;
  color: #ADD0DA;
}

.gs-item span span:first-child {
  color: #FEF7E3;
}

#botom_next_page_start_guest {
  position: relative !important;
  background: transparent !important;
  bottom: auto !important;
  right: auto !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0;
  margin: 40px auto 20px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10;
}

#botom_next_page_start_guest:hover {
  transform: scale(1.03);
}

#botom_next_page_start_guest img {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  #guest_start {
    padding-top: 20px;
  }

  .gs-frame {
    border-width: 45px 40px !important;
    /* Уменьшаем толщину рамки для телефона */
    padding: 15px 5% !important;
    margin-top: -15px !important;
    margin-bottom: -15px !important;
  }

  .gs-frame-large {
    padding: 30px 5% !important;
    margin-top: -20px !important;
    margin-bottom: -20px !important;
  }

  .gs-title-wrap {
    margin-bottom: 20px;
  }

  .gs-frames {
    gap: 20px;
  }

  #guest_injoin .gi-audio-frame {
    padding: 20px 2% !important;
    margin-top: -20px !important;
    margin-bottom: -10px !important;
  }

  #guest_injoin .gi-list-frame {
    padding: 30px 5% 50px 5% !important;
    margin-bottom: -15px !important;
  }

  #guest_injoin .gi-questions-frame {
    padding: 20px 5% !important;
    margin-bottom: 15px !important;
  }

  .gi-play-icon {
    height: 100px !important;
  }

  .gi-title-bottom-wrap {
    margin-top: -15px !important;
    /* safe spacing to prevent overlapping with the top header */
  }

  /* Предотвращение выхода текста за рамки на страницах участника */
  .up-info-box {
    margin-bottom: -10px !important;
    padding: 25px 30px 45px 30px !important;
  }

  .up-info-box-large {
    margin-bottom: -15px !important;
    padding: 45px 30px 90px 30px !important;
  }



  /* Task action boxes (Download/Upload) are kept side-by-side and responsive */

  /* Task action boxes (Download/Upload) */
  .uu-action-box {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 140px !important;
    margin-bottom: 10px !important;
    padding: 20px !important;
  }

  /* Bottom navigation styling scaling */
  .up-bottom-nav {
    padding-bottom: 10px !important;
    margin-bottom: -10px !important;
    gap: 8px !important;
  }

  .up-nav-btn {
    padding: 8px 5px 35px 5px !important;
    min-height: 50px !important;
  }

  .up-nav-icon {
    height: 48px !important;
    margin-bottom: -5px !important;
  }

  .up-nav-text {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }

  /* Question box responsiveness in survey */
  .question {
    padding: 20px 5% 40px 5% !important;
    margin-top: -20px !important;
    margin-bottom: 20px !important;
  }

  .options {
    margin-top: 40px !important;
  }

  .question h3 {
    padding: 15px 20px !important;
    width: calc(100% + 160px) !important;
    left: -80px !important;
    top: -35px !important;
    font-size: clamp(14px, 3.5vw, 17px) !important;
  }
}

div[class*="quest-start"],
p[class*="quest-start"],
span[class*="quest-start"] {
  display: none !important;
}

/* Сбрасываем всплывающие подсказки для главного контейнера */
#guest_start,
#guest_start * {
  pointer-events: auto;
}

/* =========================================
   GUEST INJOIN (Figma Design 2) - ИСПРАВЛЕННОЕ
   ========================================= */

/* --- 1. ТОЧНЫЙ ФОН КАК НА ПЕРВОЙ СТРАНИЦЕ --- */
#guest_injoin {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  min-height: 100vh;
  /* Удалили background и background-attachment: fixed отсюда */
  padding-top: 40px;
  padding-bottom: 50px;
  overflow-x: hidden;
  z-index: 1;
}

/* Добавляем фон через псевдоэлемент */
#guest_injoin::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("Quest-start.webp") center center no-repeat;
  background-color: #0b1320;
  background-size: cover;
  transform: scale(1.15);
  z-index: -1;
  pointer-events: none;
}

/* Включаем отображение контента ТОЛЬКО когда страница активна */
#guest_injoin.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- 2. ЗАГОЛОВОК СТРАНИЦЫ --- */
.gi-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
  width: 90%;
  max-width: 900px;
  z-index: 2;
}

.gi-title-top {
  font-family: 'Espuma Pro', 'Galliard Antiqua Bold', serif;
  font-size: clamp(26px, 6vw, 42px);
  color: #FFFFFF;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 2px 0;
}

.gi-title-bottom-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-top: -40px;
}

.gi-title-bottom-img {
  width: 100%;
  height: auto;
  display: block;
}

.gi-title-bottom-text {
  position: absolute;
  font-family: 'Espuma Pro', 'Galliard Antiqua Bold', serif;
  font-size: clamp(13px, 4vw, 40px);
  color: #FFFFFF;
  font-weight: 400;
  white-space: nowrap;
  margin-top: -2px;
}

/* --- 3. ИСПРАВЛЕНИЕ РАМОК И ОТСТУПОВ --- */
/* Базовые настройки рамок для второй страницы */
#guest_injoin .gs-frame {
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Аудиоплеер (сплюснутая рамка) */
#guest_injoin .gi-audio-frame {
  padding: 30px 5% !important;
  margin-top: -15px !important;
  margin-bottom: -15px !important;
}

/* Блок со списком (высокая рамка) */
#guest_injoin .gi-list-frame {
  padding: 60px 5% 80px 5% !important;
  margin-bottom: 10px !important;
}

/* Блок "Остались вопросы" (средняя рамка) */
#guest_injoin .gi-questions-frame {
  padding: 30px 5% !important;
  margin-bottom: 20px !important;
}

/* Внутренности аудиоплеера */
.gi-audio-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gi-play-icon {
  height: 150px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gi-play-icon:hover {
  transform: scale(1.1);
}

/* --- 4. ИСПРАВЛЕНИЕ СПИСКА И ВЫРАВНИВАНИЯ --- */
.gi-section-header {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 10px;
  /* Вернули нормальный отступ вместо отрицательного */
  width: 100%;
}

.gi-section-title {
  font-family: 'Espuma Pro', serif;
  font-size: clamp(18px, 4vw, 34px);
  color: #E6F8FD;
}

.gi-section-line {
  flex-grow: 1;
  height: 20px;
  /* Ограничили высоту линии, чтобы она не растягивала весь заголовок по высоте */
  object-fit: contain;
  max-width: 60%;
}

.gi-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Уменьшили дыры между пунктами */
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-list li {
  position: relative;
  padding-left: 45px;
  /* Уменьшили левый отступ, чтобы подтянуть текст ближе к галочке */
  padding-bottom: 12px;
  font-family: 'Espuma Pro', sans-serif;
  font-size: clamp(14px, 3.5vw, 17px);
  color: #ADD0DA;
  line-height: 1.4;
  /* Масштабируем SVG и сдвигаем его видимую часть (галочку) влево и вверх, компенсируя пустые поля в файле */
  background: url('Check_icon.svg') no-repeat;
  background-size: 165px 165px;
  background-position: -60px -68px;
  text-align: left;
}

.gi-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Линия будет растягиваться на всю ширину текстового блока */
  height: 7px;
  /* Толщина линии */

  /* Полупрозрачный цвет линии (под цвет текста, но мягче), 
     вы можете заменить на #ADD0DA или любой другой цвет из Figma */
  background: url('Section_line.svg') left center no-repeat;
}

.gi-list li:hover {
  color: #FEF7E3;
}

.gi-questions-text {
  font-family: 'Espuma Pro', sans-serif;
  font-size: clamp(14px, 3.5vw, 17px);
  color: #ADD0DA;
  margin: 0;
  text-align: left;
}

/* --- 5. КНОПКА ОПЛАТЫ --- */
.gi-pay-btn {
  position: relative;
  background: transparent !important;
  margin-top: -10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  width: 90%;
  max-width: 700px;
  z-index: 5;
  border-radius: 0 !important;
  height: auto !important;
  padding: 0;
}

.gi-pay-btn:hover {
  transform: scale(1.03);
}

.gi-pay-bg {
  width: 100%;
  display: block;
}

/* =========================================
   СТРАНИЦА 3: УСПЕШНАЯ ОПЛАТА (ИСПРАВЛЕНО ПО МАКЕТУ)
   ========================================= */

#ucsess_payment {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  z-index: 1;
}

#ucsess_payment::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("access-fon.webp") center center no-repeat;
  background-color: #0b1320;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

#ucsess_payment.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.sp-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  /* Немного уменьшили отступы, чтобы смотрелось цельно */
  width: 100%;
  max-width: 500px;
  z-index: 2;
}

/* Верхний текст с ярким синим подчеркиванием */
.sp-text-small {
  color: #FFFFFF;
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Светящаяся линия разделитель (ярче и толще) */
.sp-divider {
  width: 90%;
  height: 7px;
  /* Белый центр с переходом в голубой и прозрачный края */
  background: linear-gradient(90deg, transparent, rgba(120, 201, 207, 0.8), #ffffff, rgba(120, 201, 207, 0.8), transparent);
  box-shadow: 0 0 12px #78c9cf, 0 0 25px #ffffff;
  margin: 5px 0 10px 0;
}

/* ПОЗДРАВЛЯЕМ! */
.sp-text-large {
  color: #FFFFFF;
  font-family: 'PT Sans Narrow', sans-serif;
  /* Используем твой Bold шрифт */
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9);
}

/* Основной текст */
.sp-text-medium {
  color: #FFFFFF;
  font-family: 'PT Sans', sans-serif;
  /* Твой основной шрифт */
  font-size: clamp(16px, 4.5vw, 21px);
  line-height: 1.4;
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.9);
}

/* --- Кнопка "Анкета" (Неоновый стиль) --- */
.sp-btn {
  margin-top: 25px;
  padding: 16px 0;

  /* Полупрозрачный фон с градиентом, чтобы фон космоса слегка просвечивал */
  background: linear-gradient(180deg, rgba(58, 150, 170, 0.4) 0%, rgba(20, 65, 85, 0.7) 100%);

  /* Яркая, почти белая неоновая окантовка */
  border: 2px solid #bdf1ff;
  border-radius: 8px;
  /* Небольшое скругление углов */

  color: #FFFFFF;
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(22px, 5vw, 26px);

  /* Жесткая черная тень у текста, как на скрине, чтобы слово "Анкета" было объемным и четким */
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 1), 0px 4px 8px rgba(0, 0, 0, 0.8);

  cursor: pointer;

  /* САМАЯ ВАЖНАЯ ЧАСТЬ: Многослойное неоновое свечение */
  box-shadow:
    0 0 8px rgba(189, 241, 255, 0.6),
    /* Ближнее внешнее свечение */
    0 0 15px rgba(120, 201, 207, 0.5),
    /* Дальнее внешнее свечение */
    inset 0 0 12px rgba(189, 241, 255, 0.6);
  /* Внутреннее свечение от рамки */

  backdrop-filter: blur(5px);
  /* Размытие фона за кнопкой */
  transition: all 0.3s ease;

  width: 90%;
  max-width: 345px;
}

/* Эффект при наведении (свечение становится ярче) */
.sp-btn:hover {
  background: linear-gradient(180deg, rgba(78, 170, 190, 0.5) 0%, rgba(30, 85, 105, 0.8) 100%);
  box-shadow:
    0 0 12px rgba(189, 241, 255, 0.8),
    0 0 25px rgba(120, 201, 207, 0.7),
    inset 0 0 18px rgba(189, 241, 255, 0.8);
  transform: scale(1.03);
}

/* =========================================
   USER PROFILE (SCI-FI DESIGN)
   ========================================= */

#user_profile,
#user_trand,
#user_unit {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  padding: 40px 15px 30px 15px;
  overflow-x: hidden;
  z-index: 1;
}

#user_profile::before,
#user_trand::before,
#user_unit::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("up_bg.webp") center top no-repeat;
  background-color: #0b1320;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

#user_profile.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.up-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  /* Ограничиваем ширину на ПК */
  height: 100%;
  gap: 15px;
}

/* --- Заголовок --- */
.up-header-box {
  border-style: solid;
  border-width: 25px 50px;
  border-image-source: url("up_frame_title.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  text-align: center;
  padding: 5px 0;
  margin-bottom: -15px;
  position: relative !important;
}

/* Свечение на левом и правом острие рамки заголовка */
.up-header-box::before,
.up-header-box::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 80px !important;
  height: 50px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  mix-blend-mode: screen !important;
}

/* Блик слева (X ≈ 13%) */
.up-header-box::before {
  left: 13% !important;
  background:
    /* Яркий центр */
    radial-gradient(circle, #ffffff 0%, #ffffff 8%, rgba(0, 229, 255, 0.8) 18%, rgba(0, 191, 255, 0) 45%),
    /* Горизонтальный луч */
    radial-gradient(ellipse at center, rgba(0, 229, 255, 1) 0%, rgba(0, 191, 255, 0) 70%) !important;
  background-size: 50px 50px, 80px 2px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 1)) drop-shadow(0 0 15px rgba(0, 191, 255, 0.6)) !important;
}

/* Блик справа (X ≈ 86.8%) */
.up-header-box::after {
  left: 86.8% !important;
  background:
    /* Яркий центр */
    radial-gradient(circle, #ffffff 0%, #ffffff 8%, rgba(0, 229, 255, 0.8) 18%, rgba(0, 191, 255, 0) 45%),
    /* Горизонтальный луч */
    radial-gradient(ellipse at center, rgba(0, 229, 255, 1) 0%, rgba(0, 191, 255, 0) 70%) !important;
  background-size: 50px 50px, 80px 2px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 1)) drop-shadow(0 0 15px rgba(0, 191, 255, 0.6)) !important;
}


.up-title {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: clamp(20px, 7vw, 28px);
  /* Исправлен порядок clamp (min, val, max) */
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 2px;
  /* Добавили расстояние между буквами */
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
}

/* --- Статистика (3 квадрата) --- */
.up-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: -10px;
}

.up-stat-box {
  flex: 1;
  border-style: solid;
  border-width: 20px 25px;
  border-image-source: url("up_frame_stat.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 80px;
  position: relative !important;
}

/* Внутренняя подложка для цвета, чтобы заливка не вылезала за пределы рамки */
.up-stat-box::before {
  content: "" !important;
  position: absolute !important;
  top: 16% !important;
  left: 12% !important;
  right: 15% !important;
  bottom: 17% !important;
  z-index: 1 !important;
  border-radius: 4px !important;
  pointer-events: none !important;
}

/* Убираем лишние заливки для тактов и флюксов */
.up-stat-box:nth-child(1)::before {
  background-color: transparent !important;
}

.up-stat-box:nth-child(2)::before {
  background-color: transparent !important;
}

.up-stat-box:nth-child(3)::before {
  background-color: transparent !important;
}

.up-stat-num {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: clamp(26px, 7vw, 36px);
  /* Цифры крупнее и массивнее */
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  position: relative !important;
  z-index: 2 !important;
}

.up-stat-label {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(10px, 2.5vw, 13px);
  color: #ADD0DA;
  margin-top: 6px;
  letter-spacing: 1px;
  /* Раздвинули буквы под цифрами */
  text-transform: uppercase;
  position: relative !important;
  z-index: 2 !important;
  /* Принудительно делаем заглавными */
}

/* --- Баланс --- */
.up-balance-box {
  border-style: solid;
  border-width: 25px 40px;
  border-image-source: url("up_frame_balance.svg");
  border-image-slice: 35 45 fill;
  border-image-repeat: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  margin-top: 0;
  margin-bottom: -20px;
  margin-left: -18px;
  margin-right: -18px;
}

.up-balance-text,
.up-balance-value {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(15px, 4vw, 19px);
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.up-balance-value {
  /* 1. Более яркий, светящийся золотистый цвет */
  color: #ffe0b2;
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 700;

  /* Обновленный неоновый свет под новый цвет */
  text-shadow:
    0 0 5px rgba(255, 224, 178, 0.9),
    0 0 10px rgba(255, 224, 178, 0.6),
    0 0 20px rgba(255, 224, 178, 0.4);

  /* 2. Эффект стекла (Glassmorphism) */
  background: rgba(255, 255, 255, 0.05);
}

.up-balance-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 15px;
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.up-balance-fill {
  width: 70%;
  /* Заполнение баланса */
  height: 100%;
  background: linear-gradient(90deg, transparent, #1c8ea4, #ffffff, #1c8ea4, transparent) !important;
  box-shadow: 0 0 10px #1c8ea4, 0 0 20px #ffffff !important;
  border-radius: 2px;
}

/* --- Информационные блоки --- */
.up-info-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.up-info-box {
  border-style: solid;
  border-width: 25px 35px;
  border-image-source: url("up_frame_info.webp");
  border-image-slice: 70 80 fill;
  border-image-repeat: stretch;
  padding: 0;
  display: flex;
  align-items: center;
  margin-bottom: -10px;
}

.up-info-box-large {
  align-items: flex-start;
  padding: 5px 0;
  margin-bottom: -10px;
}

/* Секционные блоки: Подсказки / События — такой же SVG-фрейм, но с заголовком внутри */
.up-info-box-section {
  align-items: flex-start;
  padding: 0;
  min-height: 50px;
  margin-bottom: -10px;
}

.up-info-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.up-info-title {
  font-family: 'PT Sans Narrow', sans-serif;
  /* Сделали жирнее, как на макете */
  font-size: clamp(16px, 4.5vw, 20px);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.up-info-text {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(13px, 3.8vw, 16px);
  color: #E6F8FD;
  line-height: 1.5;
  /* Сделали строки чуть свободнее друг от друга */
  margin-top: 3px;
  display: inline-block;
}

/* --- Нижнее меню --- */
.up-bottom-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  /* Прижимает меню к низу, если экран высокий */
  padding-bottom: 20px;
  margin-bottom: -20px;
}

.up-nav-btn {
  flex: 1;
  background-image: url("up_frame_nav.svg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 5px 60px 5px;
  min-height: 70px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.up-nav-btn:hover,
.up-nav-btn.active {
  transform: scale(1.05);
  /* Можно добавить дополнительный фильтр для активной кнопки */
  filter: brightness(1.2);
}

.up-nav-icon {
  height: 80px;
  margin-bottom: -10px;
  top: 40px;
}

.up-nav-text {
  font-family: 'PT Sans Narrow', sans-serif;
  /* Текст кнопок более жирный */
  font-size: clamp(12px, 3.5vw, 15px);
  color: #FFFFFF;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================
   USER TREND (ТОВАРЫ)
   ========================================= */



#user_trand.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ut-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  height: 100%;
  gap: 15px;
  padding: 0 10px;
}

/* Сетки */
.ut-grid-2 {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  gap: 15px !important;
  margin: 0 !important;
}

/* Рамки кнопок */
.ut-item-box,
.ut-item-long {
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  display: flex !important;
  cursor: pointer !important;
  transition: transform 0.2s, filter 0.2s !important;
  box-sizing: border-box !important;
}

.ut-item-box:hover,
.ut-item-long:hover {
  transform: scale(1.02) !important;
  filter: brightness(1.15) !important;
}

/* Квадратные кнопки */
.ut-item-box {
  flex: 1 !important;
  width: 50% !important;
  max-width: calc(50% - 7.5px) !important;
  background-image: url("Frame thin.webp") !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 10px !important;
  margin: 0 !important;
}

/* Длинные кнопки */
.ut-item-long {
  width: calc(100% + 32px) !important;
  background-image: url("Frame thin.webp") !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 28px !important;
  text-align: center !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Модификатор для горизонтального выравнивания контента (Иконка слева, текст справа) */
.ut-flex-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 8px 20px 8px 30px !important;
  gap: 15px !important;
  min-height: 80px !important;
}

/* Иконки */
.ut-icon-top {
  height: 42px !important;
  width: auto !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  align-self: center !important;
  transform: none !important;
}

.ut-icon-side {
  height: 44px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transform: none !important;
}

.ut-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Тексты */
.ut-item-name {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(11px, 3vw, 13px);
  color: #FFFFFF;
  font-weight: bold;
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

.ut-item-price {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: clamp(16px, 4vw, 19px);
  color: #FFFFFF;
  font-weight: 700;
  margin-top: 2px;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
}

/* Уменьшаем размер букв "Кв." чтобы цифры смотрелись массивно */
.ut-currency {
  font-family: 'PT Sans', sans-serif;
  font-size: 0.65em;
  font-weight: normal;
}

/* Сообщение об успешной заявке */
.ut-success-msg {
  display: none;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #ffe0b2;
  text-align: center;
  font-size: 18px;
  padding: 15px;
  background: rgba(120, 201, 207, 0.15);
  border: 1px solid rgba(120, 201, 207, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

/* Переопределяем высоту для горизонтальной длинной кнопки */
.ut-item-long.ut-flex-row {
  min-height: 60px !important;
}

#button_trand8_user_trand {
  justify-content: center !important;
  padding: 8px 30px !important;
}

#button_trand8_user_trand .ut-icon-side {
  height: 36px !important;
}

#button_trand8_user_trand .ut-item-name {
  text-align: center !important;
  margin: 0 !important;
  align-self: center !important;
}

/* Уменьшенный размер для 3-го ряда */
.ut-item-small {
  min-height: 80px !important;
  padding: 8px 20px !important;
}

.ut-item-small .ut-icon-side {
  height: 44px !important;
}

/* =========================================
   USER UNIT (ЗАДАНИЯ)
   ========================================= */



#user_unit.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Большой блок с текстом --- */
.uu-large-box {
  border-style: solid !important;
  border-width: 100px 100px !important;
  /* Устанавливаем 1 к 1 как в исходнике (975x441) */
  border-image-source: url("uu_frame_large.webp") !important;
  border-image-slice: 100 100 fill !important;
  border-image-repeat: stretch !important;
  background-image: none !important;
  padding: 20px 5% !important;
  /* Внутренний отступ */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: calc(100% + 86px) !important;
  max-width: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin-left: -16px !important;
  margin-right: -30px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

@media (max-width: 768px) {
  .uu-large-box {
    border-width: 50px 40px !important;
    padding: 10px 5% !important;
    width: calc(100% + 46px) !important;
    margin-left: -16px !important;
    margin-right: -30px !important;
  }
}

.uu-large-text {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: clamp(20px, 5vw, 26px);
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  display: block !important;
  width: 100% !important;
  padding: 0 45px !important;
  box-sizing: border-box !important;
}

.uu-large-text::-webkit-scrollbar {
  display: none !important;
}

/* --- Блоки Скачать/Загрузить (сетка переиспользуется из ut-grid-2) --- */
.uu-action-box {
  flex: 1;
  background-image: url("uu_frame_box.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 10px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  margin-bottom: 30px;
}

.uu-action-box:hover {
  transform: scale(1.02);
  filter: brightness(1.15);
  /* Подсветка при наведении */
}

/* Обертка для кнопки загрузки */
.uu-upload-wrap {
  padding: 0;
  cursor: default;
}

.uu-upload-wrap:hover {
  transform: none;
  /* Убираем ховер с обертки, оставляем на кнопке */
  filter: none;
}

.uu-upload-btn {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 25px 10px;
  transition: transform 0.2s, filter 0.2s;
}

.uu-upload-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.15);
}

.uu-icon-center {
  height: 55px;
  /* Размер центральных иконок */
  margin-bottom: 15px;
}

.uu-action-text {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(11px, 3vw, 13px);
  color: #FFFFFF;
  text-align: center;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Длинный нижний блок --- */
.uu-long-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 42px !important;
  box-sizing: border-box !important;
}

.uu-long-text {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(11px, 3vw, 14px);
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  flex: 1;
  margin: 0 !important;
  align-self: center !important;
}

.uu-icon-right {
  height: 38px !important;
  width: auto !important;
  margin: 0 0 0 15px !important;
  padding: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* Полное отображение фонов без обрезки для страниц участника и анкеты */
#user_profile,
#user_trand,
#user_unit,
.resurve-page {
  background-size: 100% 100vh !important;
  background-position: center top !important;
}

/* Оптимизация теней для мобильных устройств */
@media (max-width: 768px) {

  /* Упрощаем тени на главных кнопках */
  .submit-btn,
  .submit-btn:hover,
  .sp-btn,
  .sp-btn:hover {
    box-shadow: 0 0 10px rgba(120, 201, 207, 0.8) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1) !important;
  }

  /* Упрощаем неоновый разделитель */
  .sp-divider {
    box-shadow: 0 0 10px #78c9cf !important;
  }

  /* Упрощаем текст баланса */
  .up-balance-value {
    text-shadow: 0 0 5px rgba(255, 224, 178, 0.9) !important;
  }

  /* Упрощаем полосу прогресса */
  .up-balance-fill {
    box-shadow: 0 0 8px #78c9cf !important;
  }
}