:root{
      --bg: #0B0B0F;
      --text-logo_name: rgba(245, 246, 247, 0.788);
      --text-main_page_description: rgba(245, 246, 247, 0.788);
      --text-menu_buttons: rgba(245, 245, 245, 0.768);
      --text-card_feature_h4: #f5f6f7d6;
      --text-card_feature_main_h4: #F5F6F7;
      --text-card_feature_p: rgba(255,255,255,.5);
      --radius-card_feature: 24px;
      --radius-menu_buttons: 22px;
      --container-width: 840px;
      --page-scale: 1;
    }
    html,body{
      font-size: 16px;
      width: 100%;
      height: auto;
      min-width: 280px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    body{
      margin: 0;
      overflow-x: hidden;
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: system-ui,-apple-system,"SF Pro Text",Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
      line-height: 1.45;
    }
    .background_glare::before,
    .background_glare::after{
      content: "";
      position: absolute;
      filter: blur(50px);
      width: 380px;
      height: 380px;
      border-radius: 999px;
      opacity: .28;
      pointer-events: none;
    }
    .background_glare::before{
      right: -140px;
      top: -120px;
      background: linear-gradient(45deg,rgba(244,63,93,0.58),rgba(217,70,239,.2),rgba(56,189,248,.2));
    }
    .background_glare::after{
      left: -140px;
      bottom: -120px;
      background: linear-gradient(45deg,rgba(16,185,129,0.466),rgba(34,211,238,.15),rgba(99,102,241,.2));
      opacity: .22;
    }
    .container-main{
      min-height: 100vh; /* 5vh = 5% от высоты окна */
      /* min-height: 100dvh; /* % текущей видимой высоты окна с учётом динамических UI-панелей */
      max-width: var(--container-width);
      box-sizing: border-box; /* чтобы padding входил в ширину */
      margin: 0 auto;
      padding: 5vh 5px 20px 5px; /* 5vh = 5% от высоты окна */
    }
    main{
      position: relative;
      z-index: 1;
    }
    main.container-insert_data {
      transition: opacity .35s ease;
      opacity: 1;
    }
    main.container-insert_data.is-page_fitted {
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }
    main.container-insert_data > .container-main {
      transform: scale(var(--page-scale));
      transform-origin: top center;
    }
    main.container-insert_data.is-fading { 
      opacity: 0;
    }
    main.container-insert_data.loading::after {
      content: "Загрузка…";
      display: block;
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      font-size: .9rem;
      color: rgba(255,255,255,.6);
      pointer-events: none;
    }
    .photo_logo{
      display: block;
      filter:
        drop-shadow(0 0 10px rgba(255, 100, 149, 0.753))
        drop-shadow(0 0 30px rgba(255, 100, 149, 0.571));
    }
    .container-project_description{
      width: 275px;
      margin: 0px auto 42px auto;
      text-align: center;
    }
    .project_description-name{
      display: block;
      margin: 0;
      color: var(--text-logo_name);
      font-size: 24px;
      font-weight: 700;
    }
    .container-features{
      margin: 10px auto 5px auto;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      width: 100%;
      gap: 3%; /* только между элементами, без “полей” по краям */
    }
    .container-features p {
      margin: .4rem 5px 0;
      color: var(--text-card_feature_p);
      font-size: .65rem;
    }
    .card_feature,
    .card_feature_main{
      transform: translateY(0);
      transition: opacity .48s ease, transform .50s ease;
      border-radius: var(--radius-card_feature);
      background: rgba(18, 18, 24, 0.316);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02)
    }
    .card_feature_main{
      margin: auto 0;
      display: flex;
      flex-flow: column nowrap;
      overflow: hidden;
      width: 40%;
      height: 110px;
    }
    .card_feature_main_all_text{
      margin: 5px auto auto;
    }
    .card_feature_main h4{
      line-height: 1.15;
      margin: 0;
      font-size: .95rem;
      font-weight: 640;
      color: var(--text-card_feature_main_h4);
    }
    .card_feature{
      margin: auto 0;
      display: flex;
      overflow: hidden;
      width: 26%;
      height: 70px;
    }
    .card_feature h4{
      margin: auto;
      font-size: .7rem;
      font-weight: 600;
      color: var(--text-card_feature_h4);
    }
    .container-features.is-swapping .card_feature,
    .container-features.is-swapping .card_feature_main {
      opacity: 0;
      transform: translateY(5px);
    }
    .container-menu_buttons{
      margin: 15vh 15px auto 15px; /* 5vh = 5% от высоты окна */
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      gap: 14px;
    }
    .container-ai_assistant{
      box-sizing: border-box;
      margin: 0 15px 14px 15px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(18, 18, 24, 0.316);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02);
    }
    .ai_assistant_messages{
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      gap: 9px;
      max-height: 180px;
      overflow-y: auto;
      padding: 12px 2px 12px 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0, #000 12px, #000 calc(100% - 12px), rgba(0,0,0,.62) 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0, #000 12px, #000 calc(100% - 12px), rgba(0,0,0,.62) 100%);
    }
    .ai_assistant_messages::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    .ai_assistant_message{
      box-sizing: border-box;
      max-width: 90%;
      padding: 9px 12px;
      border-radius: 14px;
      color: rgba(245,245,245,.88);
      font-size: .86rem;
      font-weight: 560;
      line-height: 1.35;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .ai_assistant_message_link{
      color: rgba(113, 190, 255, .96);
      font-weight: 760;
      text-decoration: none;
      border-bottom: 1px solid rgba(113, 190, 255, .34);
      transition: color .18s ease, border-color .18s ease;
    }
    .ai_assistant_message_link:hover{
      color: rgba(148, 207, 255, 1);
      border-color: rgba(148, 207, 255, .62);
    }
    .ai_assistant_message_bot{
      align-self: flex-start;
      background: rgba(255,255,255,.075);
    }
    .ai_assistant_message_user{
      align-self: flex-end;
      background: rgba(68, 122, 255, .28);
    }
    .ai_assistant_message_new{
      animation: ai_assistant_message_new .22s ease-out both;
    }
    @keyframes ai_assistant_message_new{
      from{
        opacity: 0;
        transform: translateY(5px);
      }
      to{
        opacity: 1;
        transform: translateY(0);
      }
    }
    .ai_assistant_message_loading{
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-width: 148px;
      min-height: calc(1.35em + 18px);
      overflow: hidden;
      white-space: nowrap;
      overflow-wrap: normal;
    }
    .ai_assistant_message_loading::before{
      content: "";
      display: block;
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: rgba(245,245,245,.58);
      animation: ai_assistant_loading_indicator 1.8s infinite ease-in-out;
    }
    .ai_assistant_loading_text{
      display: block;
      min-height: 1.35em;
      min-width: 100px;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      transition: opacity .22s ease;
    }
    .ai_assistant_loading_text.is-changing{
      opacity: 0;
    }
    @keyframes ai_assistant_loading_indicator{
      0%, 100%{
        opacity: .42;
        box-shadow: 0 0 0 0 rgba(245,245,245,.06);
      }
      50%{
        opacity: .82;
        box-shadow: 0 0 0 4px rgba(245,245,245,.035);
      }
    }
    .ai_assistant_input_row{
      position: relative;
      display: flex;
      align-items: flex-end;
      gap: 7px;
      margin-top: 11px;
    }
    #AI_ASSISTANT_INPUT{
      box-sizing: border-box;
      flex: 1 1 auto;
      min-width: 0;
      height: 44px;
      max-height: 92px;
      resize: none;
      overflow-y: auto;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.085);
      outline: none;
      color: rgba(245,245,245,.88);
      background: rgba(10,10,15,.44);
      font: 600 .88rem/1.4 system-ui;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    #AI_ASSISTANT_INPUT::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    #AI_ASSISTANT_INPUT::placeholder{
      color: rgba(245,245,245,.42);
    }
    #AI_ASSISTANT_INPUT:focus{
      border-color: rgba(255,255,255,.15);
      background: rgba(13,13,20,.54);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .ai_assistant_send_button{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(18, 18, 24, 0.56);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02);
      transition: opacity .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
    }
    .ai_assistant_send_button img{
      width: 19px;
      height: 19px;
      transform: translateY(-4px);
      transition: opacity .2s ease, filter .2s ease;
    }
    .ai_assistant_send_button:disabled,
    .ai_assistant_send_button.inactive_button_only_inf{
      opacity: .48;
      filter: grayscale(1);
      border-color: rgba(255,255,255,.045);
      background: rgba(18, 18, 24, 0.34);
    }
    .ai_assistant_send_button:disabled img,
    .ai_assistant_send_button.inactive_button_only_inf img,
    .ai_assistant_send_button:disabled .ai_assistant_limit_text,
    .ai_assistant_send_button.inactive_button_only_inf .ai_assistant_limit_text{
      opacity: .55;
    }
    .ai_assistant_limit_text{
      position: absolute;
      left: 3px;
      right: 3px;
      bottom: 4px;
      display: block;
      margin: 0;
      color: rgba(245,245,245,.46);
      font-size: .55rem;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .container-buttons{
      padding: 0px;
      margin: 0px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap; /* одна линия без переноса */
      color: var(--text-menu_buttons);
      gap: 8px;
    }
    @keyframes start_feedback_button_show{
      from{
        opacity: 0;
        transform: translateY(-4px) scale(.985);
      }
      to{
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes start_feedback_stripes_move{
      from{
        background-position: 0 0, 0 0;
      }
      to{
        background-position: 34px 0, 0 0;
      }
    }
    .start_feedback_buttons{
      margin: 0px 15px 8px 15px;
      justify-content: center;
      gap: 10px;
    }
    .start_feedback_buttons .menu_button{
      position: relative;
      isolation: isolate;
      flex: 0 1 255px;
      height: 38px;
      padding: 0px 18px;
      min-width: 0;
      max-width: calc(50% - 5px);
      justify-content: center;
      overflow: hidden;
      border-radius: 17px;
      color: rgba(245,245,245,.70);
      font-size: .86rem;
      font-weight: 700;
      border-color: var(--feedback-border);
      background: rgba(18, 18, 24, 0.316);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 12px var(--feedback-glow);
      animation: start_feedback_button_show .34s ease both;
      transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .start_feedback_buttons .menu_button:first-child{
      --feedback-border: rgba(185,64,64,.16);
      --feedback-stripe: rgba(185,64,64,.05);
      --feedback-back: rgba(90,28,28,.09);
      --feedback-glow: rgba(120,30,30,.055);
      animation-delay: .04s;
    }
    .start_feedback_buttons .menu_button:last-child{
      --feedback-border: rgba(92,142,116,.14);
      --feedback-stripe: rgba(92,142,116,.038);
      --feedback-back: rgba(42,86,67,.065);
      --feedback-glow: rgba(58,104,82,.04);
      animation-delay: .10s;
    }
    .start_feedback_buttons .menu_button::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .58;
      background:
        repeating-linear-gradient(135deg, var(--feedback-stripe) 0 1px, rgba(255,255,255,0) 1px 12px),
        linear-gradient(180deg, var(--feedback-back), rgba(18,18,24,0));
      animation: start_feedback_stripes_move 6s linear infinite;
      transition: opacity .18s ease;
    }
    .start_feedback_buttons .menu_button a{
      position: relative;
      z-index: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .start_feedback_buttons .menu_button:active{
      transform: scale(.98);
    }
    @media (hover: hover){
      .start_feedback_buttons .menu_button:hover{
        color: rgba(245,245,245,.80);
        border-color: rgba(255,255,255,.12);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 16px var(--feedback-glow);
        transform: translateY(-1px);
      }
      .start_feedback_buttons .menu_button:hover::before{
        opacity: .82;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .start_feedback_buttons .menu_button,
      .start_feedback_buttons .menu_button::before{
        animation: none;
      }
    }
    @media (max-width: 520px){
      .start_feedback_buttons{
        flex-flow: row nowrap;
      }
      .start_feedback_buttons .menu_button{
        max-width: calc(50% - 5px);
      }
    }
    .container-with_text_input{
      position: relative;
      padding: 0px;
      margin: 0px;
      display: flex;
      flex-flow: column nowrap;
      gap: 0px;
      width: 100%;
      height: 40vh;
      flex: 1 1 auto;
      box-sizing: border-box; /* говорит браузеру считать ширину/высоту элемента вместе с его padding и border */
      overflow: hidden;
      align-items: stretch; /* это выравнивание по поперечной оси во flex-контейнере, которое заставляет все flex-элементы растянуться, заполняя доступный размер по поперечной */
      color: var(--text-menu_buttons);
      font-size: 1rem;
      font-weight: 600;
      border-radius: var(--radius-menu_buttons);
      background: rgba(18, 18, 24, 0.316);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02);
    }
    .menu_button,
    .menu_button_text_field_button{
      user-select: none;
      -webkit-user-select: none;
      flex: 1 1 0; /* каждая кнопка берёт равную долю */
      box-sizing: border-box; /* говорит браузеру считать ширину/высоту элемента вместе с его padding и border */
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      align-items: center; /* чтобы текст/иконки были по центру по вертикали */
      color: var(--text-menu_buttons);
      font-size: 1rem;
      font-weight: 600;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02);
    }
    .menu_button{
      padding: 10px;
      height: 45px;
      background: rgba(18, 18, 24, 0.316);
      border-radius: var(--radius-menu_buttons);
    }
    .attention_striped_style{
      border-color: rgba(185,64,64,.14);
      background:
        repeating-linear-gradient(135deg, rgba(185,64,64,.055) 0 1px, rgba(185,64,64,0) 1px 12px),
        linear-gradient(180deg, rgba(90,28,28,.10), rgba(18,18,24,.316));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 14px rgba(120,30,30,.06);
    }
    .rank_auto_number_input::-webkit-outer-spin-button,
    .rank_auto_number_input::-webkit-inner-spin-button{
      -webkit-appearance: none;
      margin: 0;
    }
    .rank_auto_number_input{
      -moz-appearance: textfield;
      appearance: textfield;
      outline: none;
      transition: background .2s ease, box-shadow .2s ease;
    }
    .rank_auto_number_input:focus{
      outline: none;
      background: rgba(35, 35, 46, 0.35) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.04);
    }
    .menu_button_text_field_button{
      padding: auto;
      height: 35px;
      background: rgba(49, 49, 64, 0.214);
    }
    .menu_button_text_field{
      flex: 1 1 auto;
      box-sizing: border-box; /* говорит браузеру считать ширину/высоту элемента вместе с его padding и border */
      padding: 0px 10px 0px 10px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      overflow: hidden;
      align-items: stretch; /* это выравнивание по поперечной оси во flex-контейнере, которое заставляет все flex-элементы растянуться, заполняя доступный размер по поперечной */
    }
    .menu_button_text_field a{
      padding: 6px 8px;
      scrollbar-width: none; /* убрать скролбар Firefox */
      -ms-overflow-style: none; /* убрать скролбар старый Edge */
      box-sizing: border-box; /* говорит браузеру считать ширину/высоту элемента вместе с его padding и border */
      display: block;
      width: 100%;
      height: 100%;
      overflow: auto; /* включаем прокрутку текста */
      -webkit-overflow-scrolling: touch; /* включаем инерцию на iOS */
      white-space: pre-wrap; /* сохраняет \n и множественные пробелы */
      overflow-wrap: anywhere; /* переносит длинные 'слова' */
      outline: none; /* чтобы не было второй обводки */
      caret-color: currentColor; /* задаёт цвет текстового курсора (мигающей вертикальной черты) в полях ввода */
    }
    .menu_button_text_field a:focus{ /* не даём браузеру рисовать второй outline */
      outline: none;
    }
    .menu_button_text_field:focus-within{ /* цвет рамки, когда фокус внутри блока */
      border-color: rgba(255,255,255,.28);
    }
    #messageEdit.is-instruction { /* стиль для режима инструкции в displayed_message*/
      font-size: .9rem;
      color: #bfc7d5;
      line-height: 1.45;
      white-space: pre-wrap;
    }
    .displayed_message_placeholder_row{
      display: grid;
      grid-template-columns: minmax(130px,250px) minmax(0,1fr);
      gap: 0 16px;
      align-items: start;
    }
    .displayed_message_placeholder_name,
    .displayed_message_placeholder_description{
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    @media (max-width: 560px){
      .displayed_message_placeholder_row{
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 560px){
      main.container-insert_data > .container-main.has_mobile_bottom_navigation{
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none;
      }
      .mobile_bottom_navigation{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9000;
        width: 100%;
        max-width: var(--container-width);
        box-sizing: border-box;
        margin: 0 auto !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
        background:
          linear-gradient(180deg, rgba(11,11,15,0) 0%, rgba(11,11,15,.48) 22%, rgba(11,11,15,.86) 58%, rgba(11,11,15,.98) 100%);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 -16px 34px rgba(0,0,0,.18);
        transition: opacity .18s ease, transform .18s ease;
      }
      .mobile_bottom_navigation .container-buttons{
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        gap: 7px;
      }
      .mobile_bottom_navigation .menu_button{
        height: 48px;
        padding: 6px 7px;
        flex-flow: column nowrap;
        justify-content: center;
        gap: 3px;
        border-radius: 17px;
        background: rgba(18, 18, 24, .9);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 16px rgba(0,0,0,.16);
      }
      .mobile_bottom_navigation .menu_button img{
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex: 0 0 18px;
      }
      .mobile_bottom_navigation .menu_button a{
        display: block;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .68rem;
        font-weight: 720;
        line-height: 1.18;
        padding-bottom: 1px;
      }
      main.container-insert_data.loading .mobile_bottom_navigation{
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
      }
    }
    #messageEdit:empty::before { /* показываем текст, когда внутри ничего нет (placeholder) */
        content: attr(data-placeholder);
        pointer-events: none;
        opacity: 0.6;
        font-style: italic;  /* по желанию */
    }
    .opacity_to_fade_data {
      transition: opacity .17s ease;
    }
    .opacity_to_fade {
      transition: opacity .2s ease;
    }
    .is-fade {
      opacity: .09;
    }
    .fade_and_transform_buttton {
      transition: transform .2s ease, opacity .2s ease;
    }
    .fade_button_remove {
      transform: translateY(12px); /* сдвигает элемент вниз */
      opacity: 0 
    }
    .fade_button_show {
      transform: translateY(0);
      opacity: 1
    }
    .non_touchable_elements { /* родитель даёт контекст позиционирования */
      position: relative; 
    }
    .non_touchable_right { /* логотип- полностью вне потока и "прозрачный" для событий */
      position: absolute; /* вырывает элемент из нормального потока и позиционирует его относительно ближайшего positioned-предка */
      right: 12px; /* при абсолютном позиционировании прижимает правый край элемента на 12px от правого края контейнера-ориентира */
      top: 50%; /* смещает верхний край элемента на 50% высоты контейнера-ориентира вниз, ещё не центрирование самого элемента - только отправная точка */
      transform: translateY(-50%); /* поднимает элемент вверх на 50% его собственной высоты. В связке с top: 50% даёт точное вертикальное центрирование независимо от высоты самого логотипа */
    }
    [data-need_premium] {
      border: 1px solid rgba(212,175,55,.55);
      box-shadow: inset 0 0 5px 1px rgba(212,175,55,.55);
      border-radius: var(--radius-menu_buttons);
    }
    [popup_information$="need_premium"] {
      border: 1px solid rgba(212,175,55,.55);
      box-shadow: inset 0 0 5px 1px rgba(212,175,55,.55);
      border-radius: var(--radius-menu_buttons);
    }
    .menu_button:has([data-role="premium_logo"]:not([style*="display:none"]):not([style*="display: none"])) { /* для всех menu_button у которых есть элемент с [data-role="premium_logo"] и он при этом видимый */
      border: 1px solid rgba(212,175,55,.32);
      background:
        repeating-linear-gradient(135deg, rgba(212,175,55,.075) 0 1px, rgba(212,175,55,0) 1px 10px),
        linear-gradient(180deg, rgba(120,86,22,.12), rgba(18,18,24,.316));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 14px rgba(212,175,55,.07);
      border-radius: var(--radius-menu_buttons);
    }
    .menu_button:has([data-role="premium_logo"]:not([hidden]):not([aria-hidden="true"]):not([style*="display:none"]):not([style*="display: none"])) [data-role="toggle"]{ /* для всех [data-role="toggle"] в menu_button у которых есть элемент с [data-role="premium_logo"] и он при этом видимый */
      filter: brightness(0) invert(90%);
    }
    .inactive_button {
      filter: brightness(0) invert(90%);
    }
    .text_color-Premium {
      color: rgba(255, 255, 70, 0.8);
    }
    .text_color-warn {
      color: rgba(255,90,90,.92);
    }
    .button_data_center{
      justify-content: center;
      gap: 8px;
    }
    .button_main_text_trim{
      max-width: 80%;
      min-width: 0; /* нужно в flex-раскладке */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .button_main_text_trim_several_lines{
      max-width: 80%;
      min-width: 0; /* нужно в flex-раскладке */

      white-space: normal; /* разрешаем перенос по строкам */
      overflow-wrap: anywhere; /* длинные слова без пробелов тоже переносятся */
      /* или вместо этого: word-break: break-all; */

      overflow: visible;         /* можно вообще убрать это свойство */
      text-overflow: clip;       /* троеточие больше не нужно, можно убрать */
    }
    .menu_left_img{
      margin: 0px 5% 0px 10px;
    }
    .menu_right_img{
      margin: auto 10px auto auto;
    }
    .container-main_page_description{
      width: clamp(275px, 70%, 340px);
      display: flex;
      flex-flow: column nowrap; 
      justify-content: center;
      text-align: center;
      margin: 0px auto 40px auto; /* 5vh = 5% от высоты окна */
      padding: 0px 20px;
      color: var(--text-main_page_description);
      font-size: 1.5rem;
      font-weight: 600;
    }
    .text-in_description-group_name{
      align-self: center;
      display: inline-block;
      max-width: calc(100% - 50px);
      padding: 0;
      margin: auto 25px auto 25px;
    }
    .text-in_description-group_name a{
      display: inline-block;    /* кликабельна только область текста */
      max-width: 100%;          /* важно, чтобы была ширина */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0;
      text-decoration: none;
      font-size: .9rem;
      color: rgba(245, 246, 247, 0.48);
    }
    .menu_groups_list_group_icon{
      width: 26px;
      height: 26px;
      border-radius: 50%;   /* круг */
      overflow: hidden;     /* обрезаем края */
      display: inline-block;/* на всякий */
    }
    .menu_groups_list_group_icon img{
      width: 100%;
      height: 100%;
      object-fit: cover;    /* заполнить без искажений */
      object-position: center; /* центрировать по центру */
      display: block;       /* убрать лишние пробелы */
      opacity: 1;                 /* начальное состояние */
      transition: opacity 1s ease; /* плавная смена прозрачности */
    }
    .menu_groups_list_access_text{
      width: 60px;
      margin: auto 10px auto auto;
      min-width: 0; /* нужно в flex-раскладке */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      color: rgba(245, 245, 245, 0.492);
      font-size: .7rem;
      font-weight: 600;
    }
    .menu_groups_list_groupname_text{
      max-width: 60%;
      min-width: 0; /* нужно в flex-раскладке */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .popup_message { /* всплывающее сообщение */
      position: fixed; /* фиксирует элемент относительно окна браузера (не прокручивается со страницей) */
      left: 50%; /* ставит левый край элемента на середину окна */
      bottom: 24px;
      transform: translate(-50%, 8px); /* смещает сам элемент: по X на −50% его собственной ширины, чтобы центрировать по горизонтали (в паре с left:50%), по Y на 8 px вниз (для стартовой позиции "чуть ниже", чтобы затем плавно подняться) */
      padding: 10px 14px;
      border-radius: 10px;
      font: 600 .9rem/1.2 system-ui;
      opacity: 0; /* изначально невидим */
      pointer-events: none; /* "прозрачен" для курсора: клики проходят сквозь, не блокируя элементы под ним */
      transition: opacity .2s ease, transform .2s ease;
      z-index: 9999;
    }
    .popup_message.show {
      opacity: 1;
      transform: translate(-50%, 0); /* смещает в финальную позицию (по центру и без "нижнего" сдвига) */
    }
    .confirm_popup_message{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      box-sizing:border-box;
      background:rgba(0,0,0,.52);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      z-index:10000;
    }
    .confirm_popup_message.show{
      opacity:1;
      pointer-events:auto;
    }
    .confirm_popup_message_box{
      width:360px;
      max-width:100%;
      box-sizing:border-box;
      padding:14px;
      display:flex;
      flex-flow:column nowrap;
      gap:12px;
      color:var(--text-menu_buttons);
      border:1px solid rgba(255,255,255,.1);
      border-radius:18px;
      background:rgba(18,18,24,.98);
      box-shadow:0 14px 45px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.025);
      transform:translateY(6px);
      transition:transform .18s ease;
    }
    .confirm_popup_message.show .confirm_popup_message_box{
      transform:translateY(0);
    }
    .confirm_popup_message_text{
      font-size:.92rem;
      font-weight:650;
      line-height:1.32;
      text-align:center;
      color:rgba(245,245,245,.82);
    }
    .confirm_popup_message_buttons{
      display:flex;
      gap:8px;
    }
    .confirm_popup_message_buttons .menu_button_text_field_button{
      height:36px;
      padding:0 10px;
      border-radius:15px;
      background:rgba(35,35,46,.241);
    }
    .display_scrolling_list {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      flex: 1 1 auto;   /* занять всё свободное место по вертикали */
      min-height: 0;    /* важно для корректной работы flex + скролла */
      margin: 0; /* ВАЖНО: без внешних margin, они ломают геометрию внутри 30vh */
      overflow-y: auto; /* прокрутка списка вверх/вниз */
      padding:10px 15px;
      gap:5px;
      /* прячем полоску прокрутки */
      scrollbar-width: none;      /* Firefox */
      -ms-overflow-style: none;   /* IE/старый Edge */
      /* для плавной прокрутки */
      scroll-behavior: smooth;        /* плавные scrollTo/scrollIntoView */
      -webkit-overflow-scrolling: touch; /* инерция на iOS внутри блока */
    }
    .display_scrolling_list::-webkit-scrollbar { /* прячем полоску прокрутки */
      width: 0;
      height: 0;
    }