:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;        /* занимаем всю высоту окна */
  background: #1a2026;
}

.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}



input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #40285c;
  overflow: hidden;
}

/* Медиа-запросы для iPhone */
@media screen and (min-width: 1px) {
  .main-container {
    /* Новые строки для центрирования */
    display: flex;
    flex-direction: column;
    justify-content: center; /* по вертикали */


    width: 100%;
    height: auto;  /* или min-height: 100vh, если нужно растянуть на весь экран */
    margin: 0;     
    background: #40285c;
  }

  .flex-row {
    position: relative;
    width: auto;
    height: 840px;  
    margin: 100px 0; /* пусть чуть отступит сверху/снизу */
    z-index: 9;
  }
  .tele-stars {
    position: absolute;
    top: 0%; /* Сохранение текущего значения или измените для вертикального расположения */
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 36px;
    font-weight: 800;
    line-height: 39.436px;
    white-space: nowrap;
    z-index: 5;
  }

  #ton-connect {
    position: relative;
    top: 50%;
    margin-left: 50px;
    transform: translate(-50%, -50%);
  }
  .vector {
    display: block;
    position: relative;
    width: 25px;
    height: 25px;
    top: 1%;
    left: 50%;
    margin-left: 30px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 31' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.7287 1.08913C14.5655 1.30354 13.5655 3.31994 12.5065 5.57008C10.3251 10.2053 10.8724 9.80607 5.89622 10.3935C1.28178 10.9386 -0.289244 12.5689 1.92622 14.5139C2.35076 14.8866 3.03161 15.5221 3.43941 15.9263C5.71713 18.1849 7.27905 18.2883 15.9075 16.7531C17.4835 16.4726 16.6688 17.1536 13.1184 19.0843C7.86096 21.9428 7.38709 22.5299 6.7312 26.9931C6.10056 31.2852 7.26525 31.7156 12.2082 29.017C15.8397 27.0343 15.8397 27.0343 19.3226 28.9821C23.7562 31.4616 25.9458 31.2675 25.4238 28.4417C24.1672 21.6408 24.4009 20.4447 27.6663 16.9676C32.3759 11.9531 32.1736 11.1985 25.8953 10.3608C20.8244 9.68422 21.4494 10.1573 19.1741 5.27245C18.1259 3.02262 17.1107 1.07541 16.9181 0.945454C16.3679 0.573963 15.0552 0.659979 14.7287 1.08913Z' fill='%23FFBC00'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 6;
  }
  
  .hidden {
    display: none; 
  }

  .search-icon img {
    width: 20px;
    height: 20px;
    object-fit: cover; /* При желании сохраняем пропорции внутри заданных размеров */
  }
  
  .menubtn {
    position: absolute;
    width: 25px;
    height: 4px;
    top: 14.002px;
    left: 50%;
    margin-left: 35%;
    background: none;
    z-index: 9999;
    border-radius: 25px;
  }
  .rectangle-1 {
    position: absolute;
    width: 25px;
    height: 4px;
    top: 22.002px;
    left: 229.29px;
    background: #d9d9d9;
    z-index: 8;
    border-radius: 25px;
  }

  .flex-row-e {
    position: absolute;
    width: auto;
    height: auto;
    top: 200px;
    left: 50%;
    z-index: 9;
  }

  .rectangle-4 {
    position: absolute;
    width: 280px;
    height: 300px;
    top: 0px;
    left: -140px;
    z-index: 10;
    border-radius: 2px;
  }
  
  
  .rectangle-4 .blur-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    background: #613A8D;
    filter: blur(15px);
    z-index: 1;
    border-radius: 25px;
  }
  
  .vector-5 {
    position: relative;
    width: 115px;
    height: 115px;
    margin: 12px 0 12px 80px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 116' width='116' height='116'><path fill-rule='evenodd' clip-rule='evenodd' d='M52.9245 2.18592C52.2988 3.00786 48.4655 10.7374 44.406 19.3629C36.0439 37.1313 38.1417 35.6009 19.0665 37.8528C1.37786 39.9423 -4.64441 46.1916 3.84822 53.6476C5.47561 55.0764 8.08553 57.5124 9.64878 59.0618C18.38 67.7196 24.3674 68.1163 57.4432 62.2313C63.4846 61.1561 60.3615 63.7665 46.7514 71.1674C26.598 82.125 24.7816 84.3757 22.2673 101.485C19.8498 117.938 24.3145 119.587 43.2625 109.243C57.1832 101.642 57.1832 101.642 70.5344 109.109C87.5298 118.614 95.9234 117.87 93.9223 107.037C89.1054 80.9673 90.0013 76.3822 102.519 63.0532C120.572 43.831 119.796 40.9387 95.7298 37.7274C76.2911 35.1338 78.6871 36.9473 69.9649 18.222C65.9471 9.59767 62.0553 2.13336 61.317 1.63518C59.2079 0.211132 54.176 0.540862 52.9245 2.18592Z' fill='%23694296'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 20;
  }
  .telegram-stars {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 180px;
    height: 29px;
    margin: 0 0 0 51.604px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 21;
  }
  .top-up-stars-balance {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 166.725px;
    height: 41.123px;
    margin: 2.792px 0 0 58.241px;
    color: rgba(255, 255, 255, 0.5);
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    line-height: 12.102px;
    text-align: center;
    z-index: 22;
  }
  .rectangle-6 {
    position: relative;
    width: 176.349px;
    height: 42.316px;
    margin: 0 0 0 53.955px;
    cursor: pointer;
    border: none;
    filter: blur(0px);
    background: none; 
    z-index: 9999;
    border-radius: 15px;
  }
  
  
  .rectangle-6 .blur-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #694296; 
    filter: blur(3px); 
    z-index: 1;
    border-radius: 15px;
  }
  
  
  .buy-stars {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 67px;
    height: 17px;
    top: 11.497px;
    left: 30%;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 14px;
    font-weight: 800;
    line-height: 16.943px;
    text-align: center;
    white-space: nowrap;
    z-index: 19;
  }
  .flex-row-aa {
    position: absolute;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    z-index: 3;
  }
  .trace {
    position: absolute;
    width: 100%;
    height: 112px;
    top: 45%;
    left: 0%;
    z-index: 2;
    overflow: hidden;
     
    background-image: url("data:image/svg+xml;utf8,<svg width='805' height='182' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M401.27 0.636281L0.0200195 0.888281L0.0230195 44.1373L0.0260195 87.3863H5.44302C11.955 87.3863 15.021 89.7293 17.745 96.7873C19.727 101.921 20.101 115.162 18.681 129.886C17.926 137.719 18.044 138.739 20.191 142.886C23.124 148.552 27.498 150.882 35.205 150.884C41.967 150.886 45.559 149.676 49.258 146.147C52.999 142.578 53.538 138.499 51.354 130.283C49.134 121.936 48.929 104.772 50.96 97.3863C56.2 78.3273 71.749 65.6713 84.68 69.9393C87.027 70.7133 91.651 74.2233 96.72 79.0773C106.66 88.5973 110.029 90.2013 120.02 90.1713C128.881 90.1443 131.324 89.3023 140.242 83.1983C149.065 77.1613 153.809 76.5913 164.505 80.2853C171.484 82.6953 173.284 82.9003 185.332 82.6543C201.534 82.3253 206.258 83.4963 212.937 89.5013C221.72 97.3983 223.263 103.968 222.005 128.118C221.662 134.709 221.901 136.249 223.623 138.556C226.97 143.04 230.603 145.139 235.889 145.647C242.763 146.308 247.408 145.272 250.957 142.286C255.294 138.636 255.76 134.39 253.042 123.265C248.823 105.991 251.351 89.3473 259.024 83.8833C263.869 80.4333 272.04 80.5353 278.162 84.1233C284.499 87.8373 291.708 96.0913 295.423 103.886C298.293 109.909 298.516 111.157 298.469 120.886C298.434 128.041 297.694 134.572 296.147 141.386C292.973 155.36 293.05 166.555 296.359 172.202C297.802 174.664 300.55 177.378 302.987 178.748C311.045 183.276 324.806 182.565 331.771 177.259C338.781 171.92 339.517 165.862 335.422 147.216C331.948 131.396 331.08 112.063 333.431 102.886C335.975 92.9563 338.786 87.9963 345.956 80.7833C358.927 67.7363 369.842 65.5103 379.57 73.9293C383.954 77.7233 384.428 77.8863 391.12 77.8863C397.816 77.8863 398.256 77.7353 402.036 74.1363C404.917 71.3933 406.287 69.0433 407.136 65.3863C410.921 49.0913 412.774 45.8763 419.443 44.0353C424.829 42.5483 427.955 44.0833 434.405 51.3833C438.51 56.0303 441.886 58.6793 446.764 61.0813C452.732 64.0203 454.364 64.3783 461.498 64.3173C465.91 64.2793 473.153 63.8823 477.593 63.4363C487.699 62.4203 491.847 64.0293 495.59 70.4153C499.459 77.0183 500.067 83.5583 498.59 102.716C496.622 128.237 497.877 132.96 508 138.136C512.544 140.459 514.621 140.886 521.384 140.886C530.757 140.886 536.669 138.589 540.263 133.55C543.57 128.915 543.821 117.675 540.993 100.949C538.529 86.3763 538.71 81.2233 541.922 74.5883C547.728 62.5953 566.207 59.9093 570.599 70.4203C571.46 72.4813 572.021 77.2843 572.024 82.6043C572.028 93.4973 573.695 96.8333 580.417 99.4003C589.747 102.963 601.412 98.9793 604.701 91.1063C605.99 88.0233 606.043 86.3283 605.047 80.1543C603.648 71.4813 604.244 67.9633 607.655 64.7623C609.78 62.7673 611.175 62.3993 616.353 62.4643C621.764 62.5333 623.918 63.2383 633.918 68.2143C643.782 73.1233 646.087 73.8863 651.042 73.8863C654.192 73.8863 658.682 73.2113 661.02 72.3863C669.813 69.2843 678.41 70.9963 683.317 76.8273C686.869 81.0493 686.933 87.8333 683.52 98.2893C678.932 112.343 680.813 120 689.99 124.636C698.117 128.742 708.05 127.143 714.76 120.649C719.374 116.184 719.76 112.49 716.577 103.274C713.711 94.9743 713.807 91.7423 717.078 86.3483C719.565 82.2493 724.374 79.7663 738.029 75.5343C745.855 73.1093 751.857 70.4843 756.782 67.3333C763.556 62.9993 764.333 62.7413 768.773 63.3543C771.384 63.7143 775.545 65.0103 778.02 66.2343C782.54 68.4703 783.146 69.3403 789.276 82.3863C790.859 85.7573 796.443 88.1783 801.492 87.6833L804.52 87.3863L804.781 43.6363C804.988 8.86628 804.782 -0.0627194 803.781 0.135281C803.087 0.272281 621.958 0.497281 401.27 0.636281ZM0.47902 44.3863C0.48002 68.5863 0.61002 78.3433 0.76902 66.0683C0.92802 53.7933 0.92802 33.9933 0.76902 22.0683C0.60902 10.1433 0.47902 20.1863 0.47902 44.3863Z' fill='%2341285D'/></svg>");
    background-repeat: repeat-x;   /* repeat-x, repeat-y или repeat */
    background-position: 0 0;      /* можно менять на center, если хотите */
    background-size: auto 100%;    /* SVG растягиваем ровно по высоте .trace */    
}

  .rectangle-8 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 46%;
    background: #1a2026;
    z-index: 1;
  }
  
  
  
  
  .rectangle-9 {
    position: relative;
    width: 280px;
    height: 300px;
    background: none;
    filter: blur(0px);
    z-index: 2;
    border-radius: 25px;
  }
  
  
  .rectangle-9 .blur-layer {
    position: absolute;
    top: 0;
    left: -140px;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    right: 100px;
    background: #303D4A;
    filter: blur(25px);
    z-index: 1;
    border-radius: 15px;
  }
  
  
  .vector-a {
    position: relative;
    width: 115px;
    height: 115px;
    left: -140px;
    margin: 22.908px 0 0 80.701px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 115' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M53.4748 1.45347C52.8491 2.27541 49.0158 10.0049 44.9563 18.6305C36.5942 36.3988 38.692 34.8684 19.6168 37.1204C1.92815 39.2099 -4.09412 45.4592 4.39851 52.9151C6.02591 54.344 8.63582 56.7799 10.1991 58.3294C18.9303 66.9872 24.9177 67.3838 57.9935 61.4989C64.0349 60.4236 60.9118 63.034 47.3017 70.435C27.1483 81.3925 25.3318 83.6433 22.8176 100.752C20.4001 117.205 24.8648 118.855 43.8128 108.51C57.7335 100.91 57.7335 100.91 71.0847 108.377C88.0801 117.881 96.4737 117.137 94.4726 106.305C89.6557 80.2349 90.5516 75.6497 103.069 62.3208C121.122 43.0985 120.347 40.2062 96.2801 36.9949C76.8414 34.4013 79.2374 36.2148 70.5152 17.4895C66.4974 8.86521 62.6056 1.40091 61.8673 0.902728C59.7582 -0.52132 54.7263 -0.191591 53.4748 1.45347Z' fill='%230098EA'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 30;
  }
  .telegram-premium {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 223px;
    left: -140px;
    height: 29px;
    margin: 9.96px 0 0 31.13px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 13;
  }
  .cryptowallet-acquire {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 166.725px;
    left: -140px;
    height: 41.123px;
    margin: 2.792px 0 0 58.768px;
    color: rgba(255, 255, 255, 0.5);
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    line-height: 12.102px;
    text-align: center;
    z-index: 14;
  }
  .rectangle-button {
    position: relative;
    width: 176.349px;
    height: 42.316px;
    cursor: pointer;
    margin-top: 15px;
    right: 83px;
    background: #0098ea;
    border: none;
    z-index: 10;
    border-radius: 15px;
  }
  .buy-premium {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 92px;
    height: 17px;
    top: 13px;
    left: 41.675px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 20px;
    font-weight: 800;
    line-height: 16.943px;
    text-align: center;
    white-space: nowrap;
    z-index: 11;
  }
  
  /* Меню */
  .menu {
    display: none;
  
  }
  .menu.show {
    display: block; /* показываем меню */
    position: fixed; /* фиксируем меню относительно окна */
    top: 5%;
    left: 0;
    width: 100vw; /* на всю ширину окна */
    height: 100vh; /* на всю высоту окна */
    z-index: 9999; /* высокий слой, чтобы перекрывать остальные элементы */
    overflow: hidden; /* предотвращает прокрутку внутри меню */
    animation: slideDown 0.5s ease forwards;
  }
  
  .home {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 70px;
    height: 29px;
    left: 50%; /* Смещение на 40% */
    transform: translateX(-35px); /* Центрирует элемент относительно самого себя */        
    margin: 249.208px 0 0 0;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 5;
  }
  
  .blog {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 54px;
    height: 29px;
    left: 50%; /* Смещение на 40% */
    transform: translateX(-27px); /* Центрирует элемент относительно самого себя */    
    margin-top: 30px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
  }
  
  .support {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 100px;
    height: 29px;
    margin-top: 10px;
    left: 50%; /* Смещение на 40% */
    transform: translateX(-50px); /* Центрирует элемент относительно самого себя */
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 4;
  }
  
  .referral-program {
    display: flex;
    position: relative;
    width: 200px;
    height: 29px;
    margin-top: 30px;
    left: 50%; /* Смещение на 40% */
    transform: translateX(-100px); /* Центрирует элемент относительно самого себя */
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
    z-index: 5;
  }
  
  .rectangle-menu {
    position: absolute;
    width: 100%;
    height: 50%;
    margin-right: 200px;
    top: 15%;
    background: linear-gradient(to bottom, #41285D, #1E2337);
    background-size: cover;
    border-radius: 10px;
  }
  
  .vector-menu {
    position: absolute;
    width: auto;
    height: auto;
    top: 59.83%;
    left: 0.2%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 92'><path fill-rule='evenodd' clip-rule='evenodd' d='M-2.13075 45.0861L-2.13086 89.2856L-1.57632 89.2591C-1.27136 89.2445 -0.948821 89.2214 -0.859572 89.2077C-0.770323 89.1941 -0.495436 89.1541 -0.248729 89.1188C-0.00202298 89.0834 0.212392 89.0397 0.227753 89.0215C0.243115 89.0033 0.308997 88.9884 0.374176 88.9883C0.498422 88.9883 0.973822 88.867 1.04014 88.8185C1.06134 88.8029 1.11262 88.7902 1.15416 88.7902C1.28576 88.7902 1.82894 88.5868 2.30472 88.3593C2.74393 88.1493 3.49471 87.6325 3.49471 87.54C3.49471 87.5159 3.55556 87.4543 3.62993 87.4031C3.70431 87.3519 3.76516 87.2941 3.76516 87.2747C3.76516 87.2552 3.82601 87.1809 3.90038 87.1094C3.97476 87.0379 4.03561 86.9681 4.03561 86.9543C4.03561 86.9404 4.1208 86.8315 4.22493 86.7122C4.32905 86.5929 4.41424 86.4814 4.41424 86.4643C4.41424 86.4383 4.57257 86.1797 4.73797 85.9354C4.76058 85.902 4.79628 85.8175 4.81722 85.7476C4.83815 85.6778 4.87774 85.6104 4.90522 85.5979C4.9327 85.5855 4.95515 85.524 4.95515 85.4611C4.95515 85.3983 4.97949 85.3359 5.00924 85.3224C5.03899 85.309 5.06333 85.2533 5.06333 85.1987C5.06333 85.1442 5.09708 85.0159 5.13835 84.9137C5.32388 84.4545 5.34357 84.2962 5.3426 83.2744C5.34168 82.302 5.31604 82.0562 5.16123 81.5376C5.13192 81.4395 5.08718 81.2611 5.06181 81.1413C5.00085 80.8533 4.80083 80.2145 4.72672 80.0712C4.70985 80.0385 4.65554 79.9047 4.60605 79.7739C4.55656 79.6432 4.49316 79.5052 4.46514 79.4674C4.43718 79.4295 4.41424 79.3458 4.41424 79.2814C4.41424 79.217 4.3899 79.1533 4.36015 79.1398C4.3304 79.1264 4.30606 79.07 4.30606 79.0147C4.30606 78.9593 4.27291 78.8578 4.23245 78.7891C4.19193 78.7205 4.09235 78.5037 4.01116 78.3076C3.92997 78.1114 3.84137 77.9199 3.81433 77.8821C3.78728 77.8442 3.76516 77.7818 3.7651 77.7434...' fill='%231E2337'/></svg>");
    background-size: 100% 100%;
    z-index: 1;
  }

  tc-root {
    position: relative;
    z-index: 999999; /* или любое другое большое число */
  }
  
  .buystars-overlay {
    display: none;         /* пока скрыто */
    position: fixed;       /* или absolute, если "вписываетесь" в .main-container */
    top: 0; 
    left: 0;
    width: 100vw;          /* на весь экран */
    height: 100vh;  
    background: rgba(65, 40, 93, 0.5); /* или прозрачный, если хотите */
    backdrop-filter: blur(15px);       /* размытие */
    -webkit-backdrop-filter: blur(10px); /* для Safari */
    z-index: 5000;         /* чтобы было поверх всего */
  }
  /* Когда оверлей показываем: */
  .buystars-overlay.show {
    display: block;
    animation: slideDown 0.5s ease forwards;
  }
  
  /* Внутренний блок – бывшая .buystars-bgn */
  .buystars-content {
    position: absolute;   /* или fixed, если нужно */
    width: 327.614px;     /* ваши размеры */
    height: 464.667px;
    top: 50%;             /* центрируем (пример) */
    left: 50%;
    transform: translate(-50%, -50%);
    background: #482c67;
    border-radius: 25px;
    z-index: 1;
    /* Остальные стили, которые были у .buystars-bgn */
  }

  .enter-username-error {
    display: none;
    position: relative;
    height: 12px;
    margin: 1.359px 0 0 85.562px;
    color: #ff5e5e;
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
    text-align: left;
    white-space: nowrap;
    z-index: 15;
  }

  .enter-amount-error{
    display: none;
    position: relative;
    height: 12px;
    margin: 1.359px 0 0 91.562px;
    color: #ff5e5e;
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
    text-align: left;
    white-space: nowrap;
    z-index: 16;
  }

  .buystars-bgn {
    display: block;
    position: absolute;
    width: 327.614px;
    height: 464.667px;
    top: 238.972px;
    left: 34.438px;
    font-size: 0px;
    background: #482c67;
    z-index: 1;
    border-radius: 25px;
  }
  
  /* Верхний текст */
  .top-up-balance {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 241.81px;
    height: 29.366px;
    margin: 89.315px 0 0 44.704px;
    color: rgba(255, 255, 255, 0.5);
    font-family: Inter, var(--default-font-family);
    font-size: 14px;
    font-weight: 800;
    line-height: 16.943px;
    text-align: center;
    z-index: 4;
  }
  .choose-recipient {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 102px;
    height: 15px;
    margin: 51.878px 0 0 40.55px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 12px;
    font-weight: 800;
    line-height: 14.523px;
    text-align: center;
    white-space: nowrap;
    z-index: 8;
  }
  
  .choose {
    position: relative;
    width: 273.928px;
    height: 48.349px;
    margin: 3.432px 0 0 29.985px;
    background: #65448c;
    z-index: 6;
    overflow: hidden;
    border-radius: 15px;
  }
  
  /* Иконка */
  .search-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 29%;
    left: 9%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.43987 2.42673C5.69059 4.16717 5.14188 5.4353 5.15054 7.71386C5.15763 9.36266 5.49851 11.2402 5.90945 11.8864C6.46919 12.7676 5.85907 13.8681 3.46188 16.2986C1.56539 18.2208 0.490525 19.9646 1.13563 19.9646C1.22577 20.6513 3.32018 19.1787 5.01671 17.4907C7.17221 15.3461 8.4263 14.6255 9.17891 15.1002C9.77093 15.473 11.6115 15.784 13.2687 15.791C20.1839 15.8184 23.5455 7.36452 18.5827 2.42673C16.7775 0.631456 15.5761 0.137207 13.0113 0.137207C10.4464 0.137207 9.24504 0.631456 7.43987 2.42673ZM11.0156 2.45649C5.01907 4.84784 6.59043 13.7138 13.0113 13.7138C16.2012 13.7138 18.7842 11.1438 18.7842 7.96999C18.7842 4.04498 14.5566 1.04424 11.0156 2.45649Z' fill='white' fill-opacity='0.5'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 12;
  }


  .profile-icon {
    position: absolute;
    width: 7.3%;
    height: 41.37%;
    top: 14%;
    left: 4%;
    background-size: 100% 100%;
    z-index: 12;
  }
  
  /* ВАЖНО: Инпут вместо span */
  .enter-telegram-username {
    position: absolute;
    /* Прежние координаты span */
    width: 137px;
    height: 16px;
    top: 16px;
    left: 53.559px;
  
    /* Набор шрифтов, цветов */
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: transparent;
    border: none;
  
    /* Чтобы текст placeholder красиво исчезал */
    transition: 0.2s ease all;
  }
  
  /* При фокусе placeholder становится прозрачным */
  .enter-telegram-username::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  .enter-telegram-username:focus::placeholder {
    opacity: 0;
  }
  
  /* Выбор количества звёзд */
  .choose-quantity-telegram-stars {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 206px;
    height: 15px;
    margin: 32.893px 0 0 40.55px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 12px;
    font-weight: 800;
    line-height: 14.523px;
    text-align: center;
    white-space: nowrap;
    z-index: 7;
  }
  
  .amount {
    position: relative;
    width: 273.928px;
    height: 48.349px;
    margin: 3.432px 0 0 29.985px;
    cursor: pointer;
    background: #65448c;
    border: none;
    z-index: 5;
    border-radius: 15px;
  }
  .amount-star {
    position: absolute;
    width: 6.09%;
    height: 35.16%;
    top: 29%;
    left: 9.32%;
    background: url("data:image/svg+xml;utf8,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.28406 0.903631C8.1933 1.02512 7.63733 2.16764 7.04854 3.4426C5.83572 6.06898 6.13999 5.84278 3.37334 6.17564C0.807791 6.48449 -0.0656735 7.40822 1.16609 8.5103C1.40212 8.7215 1.78066 9.08156 2.0074 9.31059C3.27376 10.5903 4.14217 10.6489 8.93945 9.77908C9.81568 9.62015 9.36271 10.006 7.38872 11.1C4.4657 12.7196 4.20224 13.0523 3.83757 15.5812C3.48695 18.0132 4.1345 18.257 6.8827 16.728C8.90174 15.6045 8.90174 15.6045 10.8382 16.7082C13.3032 18.1131 14.5206 18.0031 14.2303 16.402C13.5317 12.5485 13.6616 11.8708 15.4771 9.90057C18.0956 7.05928 17.9831 6.63177 14.4925 6.1571C11.6731 5.77373 12.0206 6.04179 10.7556 3.27396C10.1728 1.99918 9.60838 0.895861 9.5013 0.822224C9.1954 0.611732 8.46558 0.66047 8.28406 0.903631Z' fill='%23FFBC00'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 13;
  }

  .amount-ton {
    position: absolute;
    top: 17px;
    left: 45%;
    z-index: 1;
  }
  .amount-ton-span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 206px;
    height: 15px;
    color: #ffffff;
    margin-right: 500px;
    font-family: Inter, var(--default-font-family);
    font-size: 14px;
    font-weight: 800;
    line-height: 14.523px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
  }
  
  /* Инпут для суммы */
  .enter-amount {
    position: absolute;
    /* Прежние координаты span */
    width: 70%;
    height: 24.82%;
    top: 50%;
    transform: translate( 0 ,-50%);  
    left: 19.55%;  
  
    font-family: Inter, var(--default-font-family);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: transparent;
    border: none;
  
    transition: 0.2s ease all;
    z-index: 100;
  }
  
  /* Placeholder исчезает при фокусе */
  .enter-amount::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  .enter-amount:focus::placeholder {
    opacity: 0;
  }
  
  .buystars-btn {
    position: relative;
    width: 241.81px;
    height: 42.316px;
    margin: 30px 0 0 44.704px;
    cursor: pointer;
    background: #694195;
    border: none;
    z-index: 9;
    border-radius: 15px;
  }
  .buy-telegram-star {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 135px;
    height: 17px;
    top: 12.658px;
    left: 51.603px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 14px;
    font-weight: 800;
    line-height: 16.943px;
    text-align: center;
    white-space: nowrap;
    z-index: 10;
  }
  
  .buy-telegram-stars-5 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 193px;
    height: 24px;
    top: 58.217px;
    left: 58.544px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
  }
  .star {
    position: absolute;
    width: 5.09%;
    height: 3.66%;
    top: 13.28%;
    left: 79.11%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.61707 0.216009C8.52631 0.337501 7.97034 1.48002 7.38155 2.75498C6.16873 5.38136 6.47299 5.15515 3.70634 5.48802C1.1408 5.79687 0.267334 6.7206 1.4991 7.82268C1.73513 8.03388 2.11367 8.39394 2.3404 8.62297C3.60677 9.9027 4.47518 9.96133 9.27245 9.09146C10.1487 8.93253 9.69572 9.31837 7.72173 10.4123C4.7987 12.032 4.53524 12.3647 4.17058 14.8936C3.81995 17.3255 4.4675 17.5694 7.21571 16.0403C9.23475 14.9169 9.23475 14.9169 11.1712 16.0206C13.6362 17.4255 14.8536 17.3155 14.5633 15.7144C13.8647 11.8609 13.9946 11.1831 15.8101 9.21295C18.4286 6.37166 18.3161 5.94414 14.8255 5.46948C12.0061 5.08611 12.3537 5.35417 11.0886 2.58634C10.5058 1.31156 9.94139 0.208239 9.8343 0.134602C9.5284 -0.0758899 8.79859 -0.0271518 8.61707 0.216009Z' fill='%23FFBC00'/></svg>") no-repeat center;
    background-size: 100% 100%;
    z-index: 3;
  }
  
  .buystarstrace {
    position: absolute;
    width: 311px;
    height: 166px;
    top: 90%;
    left: 2%;
    background: url(./assets/images/178beda2-f421-4619-bba1-5bf243389d0b.png)
      no-repeat center;
    background-size: cover;
    overflow: hidden;
  }
  .buystarstrace svg {
    display: block;
    width: 100%;
    height: auto;
  }
}


.referral-program-container {
  display: none;
}

.referral-program-container.hide {
  display: block;
}

.referral-program-container.show {
  display: block;
  position: absolute;     
  top: 0; 
  left: 0;
  width: 100vw;          /* на весь экран */
  height: 100vh;    
  border-radius: 25px;
  z-index: 9999;
  animation: slideDown 0.5s ease forwards;
}
.referral-program-content {
  position: relative;
  width: 327px;
  height: 638.792px;
  font-size: 0px;
  top: 55%;            
  left: 50%;
  transform: translate( -164px, -50%);  
  background: #1e2337;
  overflow: visible auto;
  border-radius: 25px;
}
.referral-program-1 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 168px;
  height: 24px;
  margin: 30.293px 0 0 78.658px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}
.ref-link {
  position: relative;
  width: 250.754px;
  height: 32.365px;
  margin: 12.63px 0 0 41.21px;
  background: #384858;
  z-index: 1;
  border-radius: 10px;
}
.success-copied {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 95.71%;
  height: 37.08%;
  top: 59%;
  left: 2.14%;
  color: #0098ea;
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}

.tg-bot-link {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 95.71%;
  height: 37.08%;
  top: 30%;
  left: 2.14%;
  color: rgba(255, 255, 255, 0.5);
  font-family: Inter, var(--default-font-family);
  font-size: 8px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}
.linkbtn {
  position: relative;
  width: 103.889px;
  height: 31.379px;
  margin: 41.592px 0 0 111.862px;
  cursor: pointer;
  background: #0098ea;
  border: none;
  z-index: 5;
  border-radius: 10px;
}
.copy-link {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 64px;
  height: 16px;
  top: 7.095px;
  left: 19.444px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 800;
  line-height: 15.733px;
  text-align: center;
  white-space: nowrap;
  z-index: 6;
}
.earn-referral-fee {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 216.652px;
  height: 48px;
  margin: 68.785px 0 0 53.832px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 800;
  line-height: 24.205px;
  text-align: center;
  z-index: 7;
}
.forever {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 181px;
  height: 44px;
  margin: 0 0 0 71.658px;
  font-family: Inter, var(--default-font-family);
  font-size: 36px;
  font-weight: 800;
  line-height: 43.568px;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #2d83ec, #1ac9ff);
  z-index: 8;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.successfully-overlay {
  display: none;         /* пока скрыто */
  position: fixed;       /* или absolute, если "вписываетесь" в .main-container */
  top: 0; 
  left: 0;
  width: 100vw;          /* на весь экран */
  height: 100vh;  
  background: rgba(65, 40, 93, 0.5); /* или прозрачный, если хотите */
  backdrop-filter: blur(15px);       /* размытие */
  -webkit-backdrop-filter: blur(10px); /* для Safari */
  z-index: 5000;         /* чтобы было поверх всего */
}
/* Когда оверлей показываем: */
.successfully-overlay.show {
  display: block;
  animation: slideDown 0.5s ease forwards;
}

/* Внутренний блок – бывшая .buystars-bgn */
.successfully-content{
  position: absolute;   /* или fixed, если нужно */
  width: 327.614px;     /* ваши размеры */
  height: 464.667px;
  top: 50%;             /* центрируем (пример) */
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  z-index: 1;
  opacity: 1;
  /* Остальные стили, которые были у .buystars-bgn */
}

.successfully1-content.show{
  position: absolute;   /* или fixed, если нужно */
  width: 327.614px;     /* ваши размеры */
  height: 464.667px;
  top: 50%;             /* центрируем (пример) */
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  z-index: 1;
  opacity: 1;
  /* Остальные стили, которые были у .buystars-bgn */
}

.successfully1-content {
  position: absolute;   /* или fixed, если нужно */
  width: 327.614px;     /* ваши размеры */
  height: 464.667px;
  top: 50%;             /* центрируем (пример) */
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s, margin-top 0.5s;
  z-index: 1;
  /* Остальные стили, которые были у .buystars-bgn */
}
.continue1-button {
  position: relative;
  width: 158.646px;
  height: 48.533px;
  left:50%;
  top:5%; 
  transform: translateX(-50%);
  cursor: pointer;
  background: #0098ea;
  border: none;
  z-index: 3;
  border-radius: 15px;
}
.continue-button {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 64px;
  height: 35.03%;
  top: 30.43%;
  left:50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 800;
  line-height: 16.943px;
  text-align: center;
  white-space: nowrap;
  z-index: 4;
}
.purchased-stars {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 359.549px;
  height: 8.92%;
  top: 50%;
  left:50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 800;
  line-height: 38.727px;
  text-align: center;
  z-index: 1;
}

#animation-container {
  display: flex;
  top: 40%; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#lottie-animation {
  width: 400px;
  height: 400px;
}

.stars-delivery-message {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 286.703px;
  height: 64.415px; 
  left:50%;
  transform: translateX(-50%);
  top:70%;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 800;
  line-height: 16.943px;
  text-align: center;
  z-index: 2;
}


.search-overlay {
  display: none;         /* пока скрыто */
  position: fixed;       /* или absolute, если "вписываетесь" в .main-container */
  top: 0; 
  left: 0;
  width: 100vw;          /* на весь экран */
  height: 100vh;  
  background: rgba(65, 40, 93, 0.5); /* или прозрачный, если хотите */
  backdrop-filter: blur(15px);       /* размытие */
  -webkit-backdrop-filter: blur(10px); /* для Safari */
  z-index: 5000;         /* чтобы было поверх всего */
}
/* Когда оверлей показываем: */
.search-overlay.show {
  display: block;
  animation: slideDown 0.5s ease forwards;
}

/* Внутренний блок – бывшая .buystars-bgn */
.search-content{
  position: absolute;   /* или fixed, если нужно */
  width: 327.614px;     /* ваши размеры */
  height: 464.667px;
  top: 50%;             /* центрируем (пример) */
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  z-index: 1;
}


.search1-content {
  position: absolute;   /* или fixed, если нужно */
  width: 327.614px;     /* ваши размеры */
  height: 464.667px;
  top: 50%;             /* центрируем (пример) */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* Остальные стили, которые были у .buystars-bgn */
}

.search-stars {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 359.549px;
  height: 8.92%;
  top: 90%;
  left:50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 800;
  line-height: 38.727px;
  text-align: center;
  z-index: 1;
}

#animation-search {
  display: flex;
  top: 40%; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#search-animation {
  width: 400px;
  height: 400px;
}


.dots {
  display: inline-block;
  width: 30px; /* Фиксированная ширина для трех точек */
  top: 61px;
  right: 70px;
  text-align: left;
  position: relative; /* Чтобы точки не смещались */
}

.dot {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  position: absolute; /* Позиционируем точки внутри контейнера */
  animation: blink 1.5s infinite;
}

.dot:nth-child(1) {
  left: 0; /* Первая точка */
  animation-delay: 0s;
}

.dot:nth-child(2) {
  left: 10px; /* Вторая точка */
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  left: 20px; /* Третья точка */
  animation-delay: 0.6s;
}

#referral-animation {
  margin-top: 15px;
  width: 250x;
  height: 250px;
}

@keyframes slideDown {
  0% {
    transform: translateY(-5%); /* Исходное положение сверху */
    opacity: 0; /* Прозрачное состояние */
  }
  100% {
    transform: translateY(0); /* Конечное положение */
    opacity: 1; /* Полностью видимое состояние */
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0); /* Исходное положение сверху */
    opacity: 1; /* Прозрачное состояние */
  }
  100% {
    transform: translateY(-5%); /* Конечное положение */
    opacity: 0; /* Полностью видимое состояние */
  }
}

@keyframes blink {
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}