@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

@font-face {
    font-family: 'ByteBounce';     /* Имя, которым будешь пользоваться */
    src: url('fonts/ByteBounce.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;              /* важно для производительности */
}

@font-face {
    font-family: 'Jersey10-Regular';     /* Имя, которым будешь пользоваться */
    src: url('fonts/Jersey10-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;              /* важно для производительности */
}

html {
    scrollbar-width: thin;
    scrollbar-color: #322b97 #1a1625;
}

::-webkit-scrollbar {
    width: 10px;
}

/* дорожка */
::-webkit-scrollbar-track {
    background: #1a1625; /* тёмно-фиолетовый фон */
}

/* ползунок */
::-webkit-scrollbar-thumb {
    background: #2d2b97;
    border-radius: 80px;
    border: 2px solid #171625;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background: #493fcf;
    box-shadow: 0 0 8px rgba(63, 65, 207, 0.6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

button {
    font-family: "Jost", sans-serif;
}

body {
    font-family: "JetBrains Mono", monospace;
    font-weight: 400;
    /*background:*/
    /*        !*repeating-conic-gradient(*!*/
    /*        !*        rgba(16, 18, 32, 0.1) 0% 25%,*!*/
    /*        !*        transparent 0% 50%*!*/
    /*        !*) 50% / 200px 200px fixed,*!*/

    /*        radial-gradient(farthest-corner at center, #19194c 0%, #111121 60%, #08080e 100%) fixed;*/

    --colorB: #111027;
    background-color: #0d0c1e;
    background-image: linear-gradient(
            0deg,
            transparent 24%,
            var(--colorB) 25%,
            var(--colorB) 26%,
            transparent 27%,
            transparent 74%,
            var(--colorB) 75%,
            var(--colorB) 76%,
            transparent 77%,
            transparent
    ),
    linear-gradient(
            90deg,
            transparent 24%,
            var(--colorB) 25%,
            var(--colorB) 26%,
            transparent 27%,
            transparent 74%,
            var(--colorB) 75%,
            var(--colorB) 76%,
            transparent 77%,
            transparent
    );
    background-size: 100px 100px;

    overflow-x: hidden;

    --sc: 1;
    --dx: 0;
    --dy: 0;
    --dz: 0;
    --rot: 0;
    --color: #ffffff;
}

.bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    filter: blur(1px);
    background: radial-gradient(farthest-corner at center, #0f0f39 0%, #0a0a25 60%, #000000 100%, #000000 100%);
    height: 100vh;
}

#bg span {
    position: absolute;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    animation: float linear infinite alternate;
}

@keyframes float {
    to {
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    }
}

a {
    text-decoration: none;
}

.wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 40px auto;
}

.loginButton:hover .avatar {
    border: 3px solid #6572d8;
    border-right: none;
}

header .avatar {
    width: auto;
    height: 36px;
    position: absolute;
    border: 3px solid transparent;
    border-right: none;
    padding: 0;
    border-radius: 90px;
    cursor: pointer;
    transform: translate(-40px, -2px);
    transition: border 0.4s;
}

.header-margin {
    margin-bottom: 120px;
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 3000;
}


.header-container {
    z-index: 3000;
    justify-self: center;
    width: 80%;
    margin: auto;
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 7px 25px;
    background: rgba(23, 32, 42, 50%);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 20px;
    /*translate: 0 -380px ;*/
    border-radius: 40px;
    border: solid 2px rgba(156, 152, 209, 0.5);
}

header .logo {
    font-size: 32px;
    font-family: Jost, serif;
    font-weight: 900;
    color: white;
    margin-left: 25px;
}

header nav {
    font-size: 24px;
}

header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

header nav ul a {
    color: #fff;
}

.menu {
    display: flex;
    gap: 20px;
}

.menu-btn {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.title-text#mobile {
    display: none;
}

.title-text-back {
    position: absolute;
    font-size: 500px;
    letter-spacing: -30px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    font-family: "Jost", sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    filter: blur(7px);
    z-index: -1;
    top: 13%;
    text-align: center;
    width: 100%;
}

.title-text#pc {
    font-size: 150px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.title-text span {
    margin: 0;
    padding: 0;
    transition: all 0.4s ease-in-out;
    font-weight: 900;
    font-family: "Jost", sans-serif;
}

.title-text .ip {
    position: absolute;
    font-size: 60px;
    transform: translate(0, 100px);
    opacity: 0;
    scale: 0.5;
}

.title-text .ip.label {
    font-size: 40px;
    transform: translate(0, 90px);
}

.title-text .ip.label2 {
    font-size: 30px;
    transform: translate(0, 90px);
}

/*.title-text#pc:hover span {*/
/*    transform: translate(var(--dx),var(--dy)) rotate(var(--rot));*/
/*    scale: var(--sc);*/
/*}*/

.title-text#pc:hover span.heart {
    transform: translate(var(--dx),var(--dy)) rotate(var(--rot));
    scale: var(--sc);
}

.title-text#pc span.heart {
    opacity: 0;
    position: absolute;
    font-family: system-ui;
}
.title-text#pc:hover span.heart {
    opacity: 0.7;
}

/*.title-text#pc:hover span.ip {*/
/*    transform: translate(0, 100px);*/
/*    opacity: 1;*/
/*    scale: 1;*/
/*}*/

/*.title-text#pc:hover span.ip.label {*/
/*    transform: translate(0, 60px);*/
/*}*/

/*.title-text#pc:hover span.ip.label2 {*/
/*    transform: translate(0, 170px);*/
/*}*/

.subtitle-text {
    margin-top: 0;
    margin-bottom: 50px;
}

/* мобильная версия */
@media (max-width: 700px) {

    .title-text-back {
        display: none;
    }
    header nav ul {
        list-style: none;
        display: flex;
        flex-direction: column-reverse;
        text-align: left;
        align-items: flex-start;
        gap: 10px;
    }

    header nav li {
        margin: 0 0;
    }

    header .avatar {
        display: none;
    }

    .menu {
        position: absolute;
        top: 80px;
        right: 0;
        background: rgba(23, 32, 42, 80%);
        backdrop-filter: blur(5px);
        flex-direction: column;
        padding: 20px 10px;
        display: none;
        border-radius: 10px;
    }

    .menu.open {
        display: flex;
    }

    .menu-btn {
        display: block;
        color: white;
        font-size: 30px;
    }

    .title-text {
        font-size: 20vw;
    }

    .title-text#pc {
        display: none;
    }

    .title-text#mobile {
        display: block;
        font-family: "Jost", sans-serif;
        font-weight: 900;
    }

    .header-container {
        width: 90%;
        padding: 10px 40px 10px 40px;
    }

}


header nav ul li a {
    margin: 10px;
    padding: 0 5px;
    border: 3px #6a3eac00;
    border-style: none none solid none;
    transition: all 0.4s;
    font-weight: 500;
}

header nav ul li a:hover {
    border-color: rgba(156, 152, 209, 0.5);
    transition: background 0.4s;
}

.loginButton {
    border: none;
    margin-left: 10px;
    padding: 5px 25px;
    border-radius: 20px;
    /*border: 3px solid #6572d8;*/
    transition: background 0.4s;
    cursor: pointer;
    isolation: isolate;
}

.ip-copy.copied {
    background: rgb(135 162 191 / 50%);
    border: solid 1px #9ebed9;
    padding: 0 15px;
    margin: 2px;
}
.ip-copy {
    font-size: 35px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    background: transparent;
    border-radius: 20px;
    padding: 2px 17px;
    margin: 0;
}

.balance:hover {
    color: rgba(255, 255, 255, 1);
}
.balance {
    color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    background: transparent;
    width: 70px;
    text-align: right;
    margin-right: 13px;
    font-size: 24px;
    margin-left: -105px;
    cursor: pointer;
    transition: color 0.4s ease-in-out;
}


.loginButton .balance {
    isolation: isolate;
    position: absolute;
    color: rgba(255, 255, 255, 0.7);
    font-size: 23px;
    transition: background 0.4s;
    transform: translate(115px, -45px);
    padding: 5px 5px 5px 20px;
    border-radius: 20px;
    background: transparent;
}
.loginButton:hover .balance {
    background: linear-gradient(to right, transparent, #6572d8 40%);
}

.loginButton:hover {
    border: none;
    /*border: 3px solid #6572d8;*/
    background: #6572d8;
}

.price.bit {
    font-size: 32px;
    background: transparent;
}

.name.bit {
    font-size: 36px;
}

.bit {
    font-family: "Jersey10-Regular", 'Jost', serif;
    font-optical-sizing: auto;
    font-weight: 1500;
    font-style: normal;
}

.title {
    align-content: center;
    text-align: center;
    color: #eaeaea;
}


/* Контейнер для всех карточек */
.requests-container {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr); !* 3 колонки *!*/
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    justify-items: center;
    gap: 20px;
    margin: 20px auto;        /* центрируем на странице */
}

.block-2 .requests-container::-webkit-scrollbar {
    display: none;
}
.block-2 .requests-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    border-radius: 20px;
    background: rgba(30, 31, 34, 0.5);
    padding: 10px;
    max-height: 820px;
    overflow: scroll;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.request-info-wrapper p{
    margin-bottom: 10px;
}

.request-info-wrapper ul{
    margin: 20px;
}

.req-btn:hover {
    transform: translate(0, -5px);
}
.req-btn {
    cursor: pointer;
    transition: transform 0.2s;
    transform: translate(0, 0);
    width: 900px;
    border-radius: 14px;
    color: white;
    padding: 20px 60px 20px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    border: 5px solid transparent;
    background:
            linear-gradient(#1b1b29, #1b1b29) padding-box,
            linear-gradient(to bottom left, #6572d8, #24242b) border-box;
}

.request-info-wrapper {
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    width: 40%;
    height: fit-content;
    background: #27272e;
    padding: 30px;
    border-radius: 10px;
    color: white;
}

.req-blocks-container {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.request-form-container {
    max-width: 600px;
    margin: 20px;
    padding: 15px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
}
/* Контейнер формы */
.request-form {
    background-color: #27272e;       /* тёмный фон */
    padding: 25px 30px;
    border-radius: 14px;
    max-width: 500px;
    width: 90%;
    margin: 20px auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    color: #a6a5bc;
    text-align: left;
}

/* Группы полей */
.request-form .form-group {
    margin-bottom: 15px;
}

/* Метки полей */
.request-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #f0f0f0;
}

/* Поля ввода и текстовые поля */
.request-form input,
.request-form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #555;
    background-color: #3a3a47;
    color: #f0f0f0;
    font-size: 14px;
    box-sizing: border-box;
    transition: border 0.2s, box-shadow 0.2s, background 0.2s;
    resize: none; /* запретить изменение размера textarea */
}

.request-form input:focus,
.request-form textarea:focus {
    border-color: #75e24a; /* зелёный акцент как у кнопки accept */
    box-shadow: 0 0 5px rgba(117,226,74,0.4);
    outline: none;
}

/* Кнопка отправки */
.kc .request-form button:hover {
    background-color: #df9e5b;
}
.kc .request-form button {
    background-color: #d37e25;   /* зелёная кнопка */
}
.request-form button {
    width: 100%;
    padding: 10px 0;
    background-color: #75e24a;   /* зелёная кнопка */
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.request-form button:hover {
    background-color: #5bc33d;
}

.request-form button:active {
    transform: scale(0.98);
}
.request-form .form-instruction {
    font-size: 13px;
    color: #b0afc5;  /* немного светлее основного текста */
    margin-bottom: 5px;
    line-height: 1.4;
}



/* Контейнер формы */
.request-form {
    background-color: #27272e;       /* тёмный фон */
    padding: 25px 30px;
    border-radius: 14px;
    max-width: 500px;
    width: 90%;
    margin: 20px auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    color: #a6a5bc;
    text-align: left;
}

/* Группы полей */
.request-form .form-group {
    margin-bottom: 15px;
}

/* Метки полей */
.request-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #f0f0f0;
}


.request-form input:focus,
.request-form textarea:focus {
    border-color: #75e24a; /* зелёный акцент как у кнопки accept */
    box-shadow: 0 0 5px rgba(117,226,74,0.4);
    outline: none;
}

/* Кнопка отправки */
.request-form button {
    width: 100%;
    padding: 10px 0;
    background-color: #75e24a;   /* зелёная кнопка */
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.request-form button:hover {
    background-color: #5bc33d;
}

.request-form button:active {
    transform: scale(0.98);
}
.request-form .form-instruction {
    font-size: 13px;
    color: #b0afc5;  /* немного светлее основного текста */
    margin-bottom: 5px;
    line-height: 1.4;
}


.request-card {
    width: 500px;
    height: fit-content;
    background: #24242b;
    border-radius: 14px;
    padding: 18px;
    color: #cfcfe6;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s, box-shadow .2s;
    z-index: 2;
}

.request-card .age {
    font-size: 16px;
}

.request-card:hover {
    z-index: 2;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.request-card.status-approved {
    border: 5px solid transparent;
    border-radius: 14px;

    background:
            linear-gradient(#24242b, #24242b) padding-box,
            linear-gradient(to bottom left, #3a8e3c, #24242b) border-box;
}

.request-card.status-denied {
    border: 5px solid transparent;
    border-radius: 14px;

    background:
            linear-gradient(#24242b, #24242b) padding-box,
            linear-gradient(to bottom left, #a83c3c, #24242b) border-box;
}

.request-card.status-waiting {
    border: 5px solid transparent;
    border-radius: 14px;

    background:
            linear-gradient(#24242b, #24242b) padding-box,
            linear-gradient(to bottom left, #4a4a55, #24242b) border-box;
}
/* HEADER */

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.request-user {
    font-weight: 600;
    cursor: pointer;
    color: #8ab4ff;
}

.request-user:hover {
    text-decoration: underline;
}

/* STATUS */

.request-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.status-waiting {
    background: #4a4a55;
}

.status-approved {
    background: #3a8e3c;
}

.status-denied {
    background: #a83c3c;
}

/* TEXT */

.request-body {
    background: #2f2f38;
    padding: 12px;
    border-radius: 10px;
}

.request-text {
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 16px;
    overflow: auto;
}

/* META */

.request-meta {
    font-size: 13px;
    color: #a6a5bc;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin {
    font-weight: 600;
    cursor: pointer;
    color: #8ab4ff;
    text-decoration: underline;
}

/* REASON */

.request-reason {
    background: #2f2f38;
    padding: 10px;
    border-radius: 10px;
}

/* ACTIONS */

.request-actions {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.request-actions button {
    flex: 1;
}

.request-card .accept,
.request-card .decline {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;          /* скругление под стиль карточки */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Одобрить */
.request-card .accept {
    background-color: #3a8e3c;   /* более тёмный зелёный */
}
.request-card .accept:hover {
    background-color: #4fc04f;   /* ярче на hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Отклонить */
.request-card .decline {
    background-color: #a83c3c;   /* тёмно-красный */
}
.request-card .decline:hover {
    background-color: #e04f4f;   /* ярче на hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}


.decline-form-wrapper .command{
    font-size: 14px;
    background: #363642;
    border-radius: 5px;
    padding: 1px 5px;
}
.decline-form-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none; /* показываешь через JS */
    justify-content: center;
    align-items: center;

    background: radial-gradient(farthest-corner at center, rgba(129, 0, 0, 0.75) 0%, rgba(255, 163, 163, 0.11) 60%, transparent 100%);
    backdrop-filter: blur(10px);

    z-index: 2000;
}

.decline-form-wrapper.name-change {
    background: radial-gradient(farthest-corner at center, rgba(0, 37, 129, 0.75) 0%, rgba(163, 168, 255, 0.11) 60%, transparent 100%);

}

.decline-form-wrapper.request.kc {
    background: radial-gradient(farthest-corner at center, rgba(174, 103, 0, 0.75) 0%, rgba(163, 168, 255, 0.11) 60%, transparent 100%);
}
.decline-form-wrapper.request {
    background: radial-gradient(farthest-corner at center, rgba(43, 129, 0, 0.75) 0%, rgba(163, 168, 255, 0.11) 60%, transparent 100%);
}

.decline-form {
    background: #2c2c36;             /* тёмный фон */
    padding: 25px 30px;
    border-radius: 14px;
    width: 420px;
    max-width: 90%;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* более тёмная тень */
    animation: fadeInScale 0.2s ease;
    text-align: left;
    color: #e0e0e0;                  /* светлый текст */
}

.name-change-refuse {
    background: #2c2c36;             /* тёмный фон */
    padding: 25px 30px;
    border-radius: 14px;
    width: 520px;
    max-width: 90%;

    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* более тёмная тень */
    animation: fadeInScale 0.2s ease;
    color: #e0e0e0;
}

.profile-card.premium .id {
    background:
        /* Внутренний фон (padding-box) — теперь цвета как во втором градиенте */
            linear-gradient(145deg,
            color-mix(in srgb, 20% var(--color), rgba(46, 46, 56, 0.8) 80%),
            color-mix(in srgb, 20% var(--color), rgba(46, 46, 56, 0.8) 80%)
            ) padding-box;


    background-blend-mode: multiply;

}
.profile-card .id {
    background: rgba(46, 46, 56, 0.8);
    padding: 4px 8px;
    border-radius: 8px;
    white-space: pre-wrap;
    font-size: 15px;
    position: absolute;
}

.decline-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #f0f0f0;
}

.decline-form textarea {
    width: 100%;
    min-height: 120px;
    resize: none;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #555;          /* тёмная рамка */
    background: #3a3a47;             /* тёмный фон поля */
    color: #f0f0f0;
    font-size: 14px;

    transition: border 0.2s, box-shadow 0.2s, background 0.2s;
}

.decline-form textarea:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.4);
    outline: none;
    background: #444454;
}

.decline-form button {
    margin-top: 15px;
    width: 100%;
    padding: 10px;

    background: #c0392b;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;

    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.name-change .decline-form button {
    background: #2b8cc0;
}

.decline-form button:hover {
    background: #a93226;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.name-change .decline-form button:hover {
    background: #2677a9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.decline-form button:active {
    transform: scale(0.98);
}

.decline-form input[type="text"],input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #555;          /* тёмная рамка */
    background: #3a3a47;             /* тёмный фон поля */
    color: #f0f0f0;
    font-size: 14px;

    transition: border 0.2s, box-shadow 0.2s, background 0.2s;
}

.decline-form input[type="text"]:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.4);
    outline: none;
    background: #444454;
}

.name-change .decline-form input[type="text"]:focus {
    border-color: #2b6cc0;
    box-shadow: 0 0 0 3px rgba(43, 147, 192, 0.4);
}

.name-change .decline-form textarea:focus {
    border-color: #2b6cc0;
    box-shadow: 0 0 0 3px rgba(43, 147, 192, 0.4);
    outline: none;
    background: #444454;
}

.decline-form #reasons p {
    background: #3a3a47;              /* тёмный блок для причин */
    color: #e0e0e0;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 3px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.decline-form #reasons p:hover {
    transform: translate(0, -2px);
    background: #50505f;              /* чуть светлее на hover */
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


.players-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.user-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 30, 47, 0.5), rgba(24, 24, 36, 0.5));
    backdrop-filter: blur(1px);
    color: #f0f0f0;
    border-radius: 14px;
    padding: 22px;
    width: 260px;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

.user-card:hover {
    transform: translateY(-4px) scale(1.01);
}

.user-card.user-card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
            0 0 1px var(--color),
            0 0 5px var(--color);
}

.card-glow {
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 50% 0%, rgba(120,150,255,0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.user-card:hover .card-glow {
    opacity: 1;
}

.user-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.players-head {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(40px, 60px) rotate(10deg);
    transition: 0.3s all;
}


.user-card:hover .players-head {
    transform: translate(40px, 60px) rotate(0deg) scale(1.1);
}

.user-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid #5a5a80;
    transition: transform 0.3s;
}

.user-card-premium .user-avatar img {
    border: 3px solid var(--color);
}

.user-card:hover .user-avatar img {
    /*transform: rotate(4deg) scale(1.05);*/
    transform: scale(1.05);
}

.user-main {
    text-align: center;
    margin-bottom: 12px;
}

.user-name {
    font-size: 18px;
    width: 100%;
    white-space: break-spaces;
}

.user-subname {
    font-size: 12px;
    color: #9aa0c6;
}

.user-info {
    margin-top: 12px;
    font-size: 13px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #8c90b3;
}

.user-stats {
    display: flex;
    gap: 1px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    border-radius: 90px;
}

.skins .pin {
    width: 60px;
    height: 60px;
}

.user-card .pin img {
    width: 40px;
    height: auto;
}

.user-card .pin:hover {
    scale: 1;
}
.user-card .pin {
    /*position: absolute;*/
    /*transform: translate(-10px, -40px);*/
}
.pins {
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translate(-14px, -39px);
}


.profile-card .pins {
    flex-direction: row;
    justify-content: start;
    align-items: center;
    position: static;
    transform: translate(0, 0);
    gap: 5px;
}


.profile-left .user-stats {
    justify-content: center;
}

.profile-left .user-stats.marquee-active {
    justify-content: flex-start;
}

.user-stats.marquee-active:hover > div {
    animation: marquee-scroll 12s linear infinite;
}
.user-stats.marquee-active > div {
    display: flex;
    gap: 1px;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


.pnt-access.kc {
    background: linear-gradient(90deg, #ff8c3a, #ffaa6d);
}

.pnt-access {
    padding: 5px 10px;
    width: fit-content;
    font-size: 11px;
    background: linear-gradient(90deg,#3a4fff,#6d7cff);
    border-radius: 20px;
    color: white;
    letter-spacing: 1px;
}

.role {
    --color: white;
    padding: 5px 10px;
    width: fit-content;
    font-size: 11px;
    /*background: linear-gradient(90deg, #4a4a4a, #aaaaaa);*/
    background: linear-gradient(90deg, color-mix(var(--color), white 40%), var(--color));
    border-radius: 20px;
    color: color-mix(var(--color), white 90%);
    letter-spacing: 1px;
}

/* обычный пользователь */
.role-user {
    background: #2b2b3f;
    color: #a0a6d6;
}

.role-tester {
    background: #2b2b3f;
    color: #a0a6d6;
}

/* админ */
.role-admin {
    background: linear-gradient(90deg, #ff2c41, #ff5c6c);
    color: #fff;
}

.role-arter {
    border: rgba(119, 119, 119, 0.3);
    background: none;
    color: rgba(255, 255, 255, 0.26);
}


/* владелец */
.role-owner {
    background: linear-gradient(90deg,#ff7b00,#ffb347);
    color: #fff;
}

.role-manager {
    background: linear-gradient(90deg,#4383c0,#56adcc);
    color: #fff;
}

.user-card-premium {
    position: relative;
    border-radius: 14px;
    padding: 16px;
    color: #fff8dc;
    /*overflow: hidden;*/

    border: 2px solid transparent;

    backdrop-filter: blur(1px);
    background:
        /* Внутренний фон (padding-box) — теперь цвета как во втором градиенте */
            linear-gradient(145deg,
            color-mix(in srgb, 20% var(--color), #303030 80%),
            color-mix(in srgb, 20% var(--color), #535353 80%)
            ) padding-box,

                /* Рамка с градиентом (border-box) */
            linear-gradient(135deg,
            color-mix(in srgb, 60% var(--color), #303030),
            color-mix(in srgb, 60% var(--color), #535353),
            color-mix(in srgb, 60% var(--color), #888888),
            color-mix(in srgb, 60% var(--color), #ffffff)
            ) border-box;


    background-blend-mode: multiply;
}


html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

/* Стили футера */
.site-footer {
    background: linear-gradient(135deg, #1a1b1d 0%, #2b2c2f 100%);
    color: #eee;
    padding: 20px 20px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 100px;
}

.footer-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 0 10%;
}

.footer-left, .footer-center, .footer-right {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10px;
}

.footer-container a {
    color: #bba0ff;
    text-decoration: none;
}

a.fancy {
    color: #bba0ff;
    text-decoration: underline;
}

.footer-container a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
    .footer-left, .footer-center, .footer-right {
        flex: unset;
    }
}

.page-container {
    flex: 1;
}

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

.shop-container h2 {
    margin-top: 50px;
    margin-bottom: 10px;
    color: white;
    font-size: 45px;
}

.shop.selected {
    opacity: 1;;
    transform: scaleY(1);
    pointer-events: auto;
    position: static;
}

.shop {
    width: 90%;
    position: absolute;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 30px;
    pointer-events: none;

    border-radius: 20px;

    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: scaleY(0);
}

.sub-shop {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.shop.pnt {
    border: #6572d8 solid 10px;
}

.shop.kc {
    /*background: radial-gradient(farthest-corner at center, rgba(34, 76, 25, 0.5) 0%, rgba(20, 33, 17, 0.5) 60%, rgba(9, 14, 8, 0.5) 100%) fixed;*/
    /*border: #ed8a44 solid 10px;*/
}


.product-card {
    /*background:*/
    /*        linear-gradient(to left bottom, rgba(27, 27, 41, 0.5), rgba(27, 27, 41, 0.5)) padding-box,*/
    /*        linear-gradient(to left bottom, rgba(101, 114, 216, 0.5), rgba(36, 36, 43, 0.5)) border-box;*/
    background: linear-gradient(to left bottom, rgba(101, 114, 216, 0.4), rgba(36, 36, 43, 0.4) 60%);
    border: solid 1px #42487d;
    color: white;
    padding: 15px;
    border-radius: 12px;

    /*width: 320px;*/
    /*height: 425px;*/
    width: 240px;
    height: 314px;

    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(1px);
}

.product-card.sponsor {
    background: linear-gradient(to left bottom, rgba(236, 189, 80, 0.4), rgba(36, 36, 43, 0.4) 60%);
    border: solid 1px #9e7a39;
}


.product-card.sponsor .etc {
    background: #9e7a39;
}


.product-card.subscription {
    background: linear-gradient(to left bottom, rgba(53, 193, 244, 0.4), rgba(36, 36, 43, 0.4) 60%);
    border: solid 1px rgba(53, 191, 214, 0.5);
}


.product-card.subscription .etc {
    background: #35BFD680;
}


.product-card.sponsor .icon {
    background: radial-gradient(rgba(158, 122, 57, 0.5), rgba(36, 36, 43, 0.13) 57%);
}

.product-card.subscription .icon {
    background: radial-gradient(rgba(53, 191, 214, 0.5), rgba(36, 36, 43, 0.13) 57%);
}

.bit .product-card .icon {
    background: radial-gradient(rgba(28, 120, 122, 0.4), rgba(36, 36, 43, 0.13) 57%);
}

#pnt .product-card .icon {
    background:  radial-gradient(rgba(181, 29, 219, 0.4), rgba(36, 36, 43, 0.13) 57%);
}

.product-card .icon {
    --url: url("https://itsnone.ru/images/icons/question.svg");

    width: 260px;
    height: 260px;
    position: absolute;
    z-index: -1;
    transform: translate(-60px, 30px);
    background: radial-gradient(rgb(103 85 255 / 40%), rgba(36, 36, 43, 0.13) 57%);

    -webkit-mask: var(--url) no-repeat center / contain;
    mask: var(--url) no-repeat center / contain;
}

.product-card .economy {
    position: absolute;
    background: #e04f4f;
    padding: 10px;
    width: 300px;
    transform: rotate(45deg) translate(70px, -50px);
}

#bit .product-card {
    border: solid 1px #1d4345;
    background:
            linear-gradient(to left bottom, rgba(55, 247, 251, 0.4), rgba(36, 36, 43, 0.4) 60%);
}

#pnt .product-card {
    border: solid 1px #43154e;
    background:
            linear-gradient(to left bottom, rgba(129, 40, 150, 0.4), rgba(36, 36, 43, 0.4) 60%);
}


.sub-shop-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#btl .product-card {
    border: solid 10px #131313;
    border-radius: 0;
    padding: 0;
    z-index: 10;
    background-color: aliceblue;
    background-image: url('https://itsnone.ru/images/shop/games/botalo/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#btl .product-card .name {
    font-family: "Tiny5", sans-serif;
    color: #131313;
    font-weight: 700;
    text-align: center;
    font-size: 25px;
    height: 35px;
}

#btl .product-card .image {
    z-index: -1;
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
}

.btl .modal-content #modalBtn {
    font-family: "Tiny5", sans-serif;
    color: #131313;
    font-weight: 700;
    border: solid 5px #131313;
    border-radius: 0;
    background-color: aliceblue;
}

.btl .close:hover {
    color: #191919;
}

.btl #modalImage {
    --url: url('https://itsnone.ru/images/icons/question.svg');
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(-3%, -11%);

    /* Совмещаем картинку и градиент в одном свойстве */
    background: var(--url) no-repeat center / contain,
    radial-gradient(rgb(103 85 255 / 40%), rgba(36, 36, 43, 0.13) 57%);
}

.btl .modal-content .modal-price {
    color: #131313;
}
.btl .modal-content #modalTitle {
    font-family: "Tiny5", sans-serif;
    color: #131313;
    font-weight: 700;

}

.btl #modalDescription {
    color: #131313;
}

.btl .modal-content {
    width: 800px;
    max-width: 95%;
    position: relative;
    color: #131313;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 460;

    border: solid 10px #131313;
    border-radius: 0;
    /*padding: 0;*/
    background-color: aliceblue;
    background-image: url('https://itsnone.ru/images/shop/games/botalo/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}


#btl .product-card.color .image {
    --url: url("https://itsnone.ru/images/shop/games/botalo/particles/question.png");

    z-index: 1; /* Поднимаем слой выше, чтобы картинка не исчезала */
    width: 100%;
    height: 200px;

    /* Задаем цвет, в который окрасится белый знак вопроса */
    background-color: var(--color);

    /* Используем маску: она оставит цвет только там, где есть белые пиксели */
    -webkit-mask-image: var(--url);
    mask-image: var(--url);

    /* Центрирование и масштабирование маски (вместо background-size) */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-clip: no-clip;
    mask-clip: no-clip;
    -webkit-mask-composite: source-over;
    mask-composite: add;

}

#btl .product-card .etc {
    color: aliceblue;
    font-family: "Tiny5", sans-serif;
    font-weight: 500;
    background: transparent;
    font-size: 18px;
}

#btl h2 {
    color: aliceblue;
    font-family: "Tiny5", sans-serif;
    font-weight: 500;
}

#btl .product-card .price-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    align-items: center;
    background-color: #131313;
}

.green .product-card {
    background:
            linear-gradient(#1b1b29, #1b1b29) padding-box,
            linear-gradient(to bottom, #4fed44, #252b24) border-box;
}
.green .product-card:hover {
    background:
            linear-gradient(#1b4e17, #1b1b29) padding-box,
            linear-gradient(to bottom, #4fed44, #24242b) border-box;
}

.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.product-card:hover {
    transform: translateY(-5px);
    /*background:*/
    /*        linear-gradient(to bottom, #313768, #18181c) padding-box,*/
    /*        linear-gradient(to bottom, #6572d8, #24242b) border-box;*/
}

/*.bit .product-card:hover {*/
/*    background:*/
/*            linear-gradient(#196a6c, #1b1b29) padding-box,*/
/*            linear-gradient(to bottom, #37f7fb, #24242b) border-box;*/
/*}*/

.price {
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
}

.price-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 15px 5px 5px 5px;
    align-items: center;
}

.bit .product-card .name {
    font-size: 60px;
    font-family: "Jersey10-Regular", 'Jost', serif;
    font-weight: 100;
    margin-top: -10px;
}
.product-card .name {
    width: 100%;
    text-align: left;
    font-size: 27px;
    color: #d1d7ff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
}

.product-card .etc {
    font-size: 16px;
    text-align: center;
    background: rgba(101, 114, 216, 0.5);
    border-radius: 5px;
    padding: 5px 20px 5px 20px;
}

.bit .product-card .etc {
    background: rgba(44, 129, 131, 0.5);
}

#pnt .product-card .etc {
    background: rgba(91, 28, 106, 0.5);
}

.bit .price {
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}

.modal a {
    color: white;
    text-decoration: underline;
}

.modal-content-wrapper {
    display: flex;
    align-items: center;
}

.modal-content {
    background: linear-gradient(to left bottom, rgba(101, 114, 216, 0.4), rgba(36, 36, 43, 0.4) 60%);
    border: solid 1px #42487d;
    backdrop-filter: blur(2px);
    padding-right: 40px;
    border-radius: 14px;
    width: 800px;
    max-width: 95%;
    position: relative;
    color: #e6e6e6;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
    z-index: 460;
}

#modalImage {
    --url: url('https://itsnone.ru/images/icons/question.svg');
    position: absolute;
    width: 170%;
    height: 140%;
    transform: translate(-31%, -18%);
    background: radial-gradient(rgb(103 85 255 / 40%), rgba(36, 36, 43, 0.13) 57%);
    -webkit-mask: var(--url) no-repeat center / contain;
    mask: var(--url) no-repeat center / contain;
}

#modalPrice.bit {
    font-size: 32px;
}

.modal-error {
    margin: 5px;
    text-align: center;
    box-shadow: 0 0 5px #321313;
    border: 2px solid #e04f4f;
    color: #9f8787;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
    background: #321313;
}

.close {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 40px;
    cursor: pointer;
    color: #888;
    transition: 0.2s;
}

@media (max-width: 700px) {

    .close {
        position: absolute;
        top: -10px;
        right: 11px;
        font-size: 10vw;
    }

    .modal-content {
        padding: 10px;
        border-radius: 14px;
        width: 90vw;
        height: auto;
        max-width: 95%;
        position: relative;
        color: #e6e6e6;
        overflow: auto;
    }
    .modal-content-wrapper {
        justify-content: center;
    }
}


.close:hover {
    color: #dfdfdf;
}

.modal-body {
    display: flex;
    white-space: pre-line;
}

.modal-left {
    flex: 0 0 280px;
    overflow: hidden;
    min-height: 100%;
    position: relative;
}

.modal-left img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-left: 20px;
}

.modal-right h2 {
    color: #ffffff;
    margin-bottom: 15px;
}

.modal-right p {
    color: #b9b9b9;
    flex-grow: 1;
    line-height: 1.6;
}

.modal-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.modal-price {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.buy-btn {
    background: rgba(101, 114, 216, 0.5);
    border: none;
    color: white;
    padding: 10px 22px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.buy-btn:hover {
    background: rgba(101, 116, 230, 0.5);
    box-shadow: 0 0 15px rgba(101, 116, 230, 0.5);
}

@media (max-width: 700px) {
    .modal-body {
        flex-direction: column;
        align-items: center;
    }

    .modal-bottom {
        justify-content: center;
    }
}

.names-history {
    background: rgba(30, 31, 34, 0.4);
    border-radius: 10px;
    width: fit-content;
    padding: 10px 20px 10px 20px;
    margin: 0;
}

.names-history h3{
    color: white;
    margin-bottom: 10px;
}
.names-history p{
    color: white;
    text-align: left;
}
.names-history .name-data{
    color: #aeaeae;
    font-size: 10px;
    padding: 10px;
}

/* Скрываем стандартный input */
#file {
    display: none;
}

/* Кнопка загрузки файла */
.select-file {
    display: inline-block;
    padding: 8px 16px;
    margin: 10px;
    width: 50%;
    align-self: center;
    background: #6b5cff;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold;
}

.select-file:hover {
    background: #8578ff;
}

/* Превью изображения */
#file-result img {
    margin-top: 10px;
    width: 30%;
    height: 30%;
    border-radius: 8px;
    border: 2px solid #c6c6c6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.skins {
    color: #efeff1;
    background: rgba(30, 31, 34, 0.5);
    backdrop-filter: blur(2px);
    width: 900px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Контейнер карточек */
.skins-container {
    /*background: #141827;*/
    max-height: 370px;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    border-radius: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6b5cff #141827;
    justify-content: center;
}

/* Скроллбар для Webkit */
.skins-container::-webkit-scrollbar {
    width: 8px;
}

.skin-card .delete svg {
    width: 20px;
    height: 20px;
}
.skin-card .delete:hover {
    background: #602020;
}

.delete-date {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.skin-card .delete {
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
    background: #391a1e;
    transition: background-color 0.5s;
    display: flex;
    align-items: center;

}

.skins-container::-webkit-scrollbar-track {
    background: #141827;
    border-radius: 8px;
}
.skins-container::-webkit-scrollbar-thumb {
    background-color: #6b5cff;
    border-radius: 8px;
}


.skin-card canvas {
    cursor: pointer;
}

.skin-card {
    width: 150px;
    height: 170px;
    background: #1e1e2f;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    text-align: center;
    color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s, border 0.3s;
    border: 2px solid transparent;
}

/* Выбранный скин */
.skin-card.selected {
    border: 2px solid #6b5cff;
}

/* Hover эффект */
.skin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}


.skin-card p:first-child {
    font-size: 0.85rem;
    font-weight: bold;
    margin: 2px 0;
}



/* Дата */
.skin-card p:last-child {
    font-size: 0.7rem;
    color: #c0c0c0;
    margin: 5px;
}
.skin-head {
    width: 70%;
}

/*PROFILE*/

.block-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.blocks-container {
    justify-content: center;
    display: flex;
    padding: 20px;
    gap: 20px;
}


.profile-card {
    width: 900px;
    background: rgba(36, 36, 43, 0.5);
    backdrop-filter: blur(2px);
    border-radius: 16px;
    padding: 25px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 25px;
    color: #d0d0e0;
    margin-top: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.45);
}

.profile-card.premium {
    border: 2px solid transparent;
    background:
        /* Внутренний фон (padding-box) — теперь цвета как во втором градиенте */
            linear-gradient(145deg,
            color-mix(in srgb, 20% var(--color), #303030 80%),
            color-mix(in srgb, 20% var(--color), #535353 80%)
            ) padding-box,

                /* Рамка с градиентом (border-box) */
            linear-gradient(135deg,
            color-mix(in srgb, 60% var(--color), #303030),
            color-mix(in srgb, 60% var(--color), #535353),
            color-mix(in srgb, 60% var(--color), #888888),
            color-mix(in srgb, 60% var(--color), #ffffff)
            ) border-box;


    background-blend-mode: multiply;
    /*border: 2px solid var(--color);*/
    /*background: var(--color) linear-gradient(135deg, #303030, #535353, #888888, #ffffff);*/
    /*background-blend-mode: multiply;*/


    /*background: var(--color) linear-gradient(135deg, #303030, #535353, #888888, #ffffff);*/
    /*background-blend-mode: multiply;*/
    /*border: 2px solid var(--color);*/
    /*box-shadow:*/
    /*        0 0 10px var(--color),*/
    /*        0 0 25px var(--color);*/


    transition: box-shadow 0.5s, border 0.5s, background 0.5s, box-shadow 0.5s;
}

/* левая колонка */

.profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    background: rgba(31, 31, 38, 0.5);
    padding: 10px;
    height: fit-content;
    min-height: 310px;
    width: 100%;
}

.premium .profile-left {
    background: color-mix(in srgb, var(--color) 50%, white 50%) linear-gradient(135deg, #303030, #535353, #888888, #ffffff);
    background-blend-mode: multiply;

    transition: box-shadow 0.5s, border 0.5s, background 0.5s, box-shadow 0.5s;
}

.profile-avatar {
    width: 128px;
    height: 128px;
    border-radius: 90px;
    object-fit: cover;
    border: 5px solid var(--color);
    margin: 10px;
    scale: 1;
    opacity: 1;
    transition: 0.7s;
    transform: rotate(0) translate(0px, 0px);
}

.avatar-head {
    width: 128px;
    height: 128px;
    position: absolute;
    transform: rotate(-45deg) translate(-138px, 22px);
    scale: 0;
    opacity: 0;
    transition: 0.7s;
}

.avatar-container:hover .avatar-head {
    transform: rotate(0) translate(-138px, 22px);
    scale: 1;
    opacity: 1;
}

.avatar-container:hover .profile-avatar{
    scale: 0;
    opacity: 0;
    transform: rotate(45deg) translate(-150px, -20px);
}

.profile-role {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    background: #3a3a47;
}

/* правая колонка */

.profile-right {
    display: flex;
    flex-direction: column;
}
.profile-right h2 {
    margin-top: 0;
}

.profile-field {
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

.profile-field span {
    color: #ffffff;
}

/* BIO */

.premium .profile-bio {
    background:
        /* Внутренний фон (padding-box) — теперь цвета как во втором градиенте */
            linear-gradient(145deg,
            color-mix(in srgb, 20% var(--color), rgba(46, 46, 56, 0.8) 80%),
            color-mix(in srgb, 20% var(--color), rgba(46, 46, 56, 0.8) 80%)
            ) padding-box;


    background-blend-mode: multiply;

}
.profile-bio {
    background: rgba(46, 46, 56, 0.8);
    padding: 8px 8px 16px;
    border-radius: 0 9px 9px;
    margin: 0px 79px 30px 0px;
    white-space: pre-wrap;
}

/* кнопки */

.profile-btn.red {
    background: #ff5c5c;
}
.profile-btn {
    /*margin: 6px;*/
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: #6b5cff;
    color: white;
    transition: background .2s;
}

.profile-btn:hover {
    background: #8578ff;
}

.profile-btn.red {
    background: #ff4747;
}


/* реакции */

.reactions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.reactions button {
    font-family: "Jost", sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    padding: 3px 7px;
    border-radius: 10px;
    border: 1px solid #3a3a47;
    background: #2e2e38;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.reactions button.clicked {
    background: #6f6f80;
    border: 2px solid #9c9cc1;
}

.reactions .reputation{
    margin: 0 20px 0 20px;
}
.reactions button svg {
    fill: #555555;
    width: 14px;
    height: 14px;
}
.reactions button.clicked svg {
    fill: var(--color);
}

.reactions button:hover {
    background: #3a3a47;
    transform: translateY(-1px);
}

/* иконка лайка в кнопке */
.reactions button img {
    width: 25px;
    height: 25px;
    filter: invert();
}

.reactions button img.dislike {
    transform: rotate(180deg);
}

.logoutButton {
    padding: 10px 25px;
    border-radius: 10px;
    border: 3px solid #ac3e42;
    color: #ac3e42;
    transition: background 0.4s, color 0.4s;
    cursor: pointer;
    justify-self: right;
    background: #24242b;
}

.logoutButton:hover {
    background: #ac3e42;
    color: #ffffff;
}

.logoutButton-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}
.user-card-premium .server {
    background: color-mix(in srgb, var(--color) 50%, black 50%);
    border: 2px solid color-mix(in srgb, var(--color) 40%, black 60%);
}

.server:hover .tooltip{
    opacity: 1;
    transform: translate(-150px, -10px);
}

.user-card-premium .server .tooltip{
    background: color-mix(in srgb, var(--color) 50%, black 50%);
}

.premium .server .tooltip{
    background: color-mix(in srgb, var(--color) 50%, black 50%);
}

.server .tooltip{
    padding: 5px 25px 5px 5px;
    width: 200px;
    position: absolute;
    background: rgb(25, 25, 39);
    opacity: 0;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    transition: all 0.2s;
    transform: translate(-120px, 0px);
    z-index: 700;
}
.server {
    padding: 5px 10px;
    width: fit-content;
    font-size: 11px;
    /*background: #4a4a4a;*/
    /*background: color-mix(in srgb, #686871 70%, white 30%);*/
    border: 2px solid color-mix(in srgb, #686871 40%, black 60%);
    border-radius: 5px;
    color: white;
    letter-spacing: 1px;
}

/*.server-kc {*/
/*    background: #ff8107 !important;*/
/*    border: 2px white solid !important;*/
/*}*/
/*.server-pnt {*/
/*    background: #9976c6 !important;*/
/*    border: 2px white solid !important;*/
/*}*/

/*.server-hub {*/
/*    background: #5aaa63 !important;*/
/*    border: 2px white solid !important;*/
/*}*/

.color-picker input[type="color"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.color-picker input[type="color"] {
    display: none;
}

.color-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #24242b;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #3a3a47;
    transition: 0.2s;
}

.color-button:hover {
    border-color: #6a6a80;
}

#colorPreview, #colorPreview2 {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #5865f2;
    border: 1px solid #00000040;
}

.color-text {
    font-size: 14px;
    color: #ddd;
}

.submit-btn {
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: #3a3a47;
    color: white;
    cursor: pointer;
}

.new-post-container .color-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.color-container {
    background: var(--color) #5a5a5a;
    background-blend-mode: multiply;
    padding: 10px;
    width: fit-content;
    border-radius: 15px;
}

.color-container p {
    padding: 5px;
}


#editor {
    width: 99%;
    margin: 5px;
    padding: 10px;
    background: #2b2d31;
    color: #eee;
    border-radius: 8px;
    border: none;
    resize: none;
    min-height: 300px;
    outline: none;
}

.new-post-container #title {
    width: 99%;
    margin: 5px;
    padding: 10px;
    background: #2b2d31;
    color: #eee;
    border-radius: 8px;
    border: none;
    resize: none;
    outline: none;
}

#post-image-result img {
    width: 98%;
    margin: 20px;
}

.post-image {
    width: 99%;
    border-radius: 8px 8px 0 0;
    margin: 5px 5px 0 5px;
}

.post-text.has-img {
    margin-top: 0;
    border-radius: 0 0 8px 8px;
}

.toolbar {
    padding: 5px;
    color: white;
    margin-top: 6px;
    display: flex;
    gap: 6px;
}

.toolbar button {
    color: white;
    padding: 5px 8px;
    background: #3a3c42;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.news-container .post-text {

    border-bottom: solid 5px #242429;

    background: linear-gradient(to bottom, #ffffff, #1b1b29);
    -webkit-background-clip: text;
    color: transparent;
    border-radius: 0;
    height: 170px;
    transition: all 0.5s;
    overflow: clip;
}

.news-container .post-text.show {
    border-bottom: none;
    background: transparent;
    color: #efeff1;
    -webkit-background-clip: unset;
    height: auto;
    cursor: auto;
    margin-bottom: 0;
    padding-bottom: 0;
}

.post-text-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    transform: rotate(180deg);
}

.post-text-btn.show {
    transform: rotate(0deg);
}

.post-text-btn svg {
    height: 25px;
    width: 25px;
    fill: #cdcdcd;
}

.news-container h1.title {
    font-size: 65px;
}

.post-text {
    margin: 5px;
    padding: 10px;
    background: #242429;
    /*border-radius: 8px;*/
    color: #efeff1;
    min-height: 100px;
    white-space: pre-wrap;
    font-weight: 0;
    overflow-wrap: break-word;
    cursor: pointer;
}

.new-post-container {
    color: #efeff1;
    background: #1e1f22;
    border-radius: 20px;
    padding: 15px;
    width: 900px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.channel-box {
    width: 400px;
    margin: 10px;
}

.channel-box select {
    width: 100%;
    padding: 8px;
    background: #1e1f22;
    color: #efeff1;
    border: 1px solid #535353;
    border-radius: 0;
    cursor: pointer;
    outline: none;
}

.channel-box option {
    background: #242429;
    color: #efeff1;
}

.new-post-container .post:hover {
    transform: translate(0, -2px);
    background: #3e4145;
}
.post {
    align-self: center;
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    background: #2b2d31;
    color: #eee;
    border-radius: 8px;
    transition: background, transform 0.2s;
    border: none;
}

.post-title-container {
    width: 60%;
    display: flex;
    justify-content: flex-start;
}

.post-title {
    margin-top: 10px;
    border-radius: 8px 8px 0 0;
    padding: 10px 30px 10px 30px;
    background: linear-gradient(180deg, rgba(43, 45, 49, 0.5));
    backdrop-filter: blur(2px);
}

.post.hidden {
    background: #56575e;
    color: #acacac;
    border: solid #4b4b4c;
}

#news-form {
    width: 100%;
}

.spoiler {
    background: #7b7b83;
    color: transparent;
    border-radius: 4px;
    padding: 0 3px;
    cursor: pointer;
    transition: 0.15s;
}

.spoiler.revealed {
    color: #efeff1;
    background: rgba(123, 123, 131, 0.16);
}

pre {
    background: #1f202f;
    border: #9a9a9a 1px solid;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
}

blockquote p {
    border-color: #474851;
    color: #7b7c80;
    padding-left: 10px;
}

blockquote p {
    border-left: solid 5px #474851;
    border-radius: 5px;
}

.reputation-info svg {
    fill: #efeff1;
    height: 14px;
    width: 14px;
}
.reputation-info span {
    align-items: center;
}
.reputation-info {
    gap: 5px;
    display: flex;
    color: #efeff1;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    background: #373737;
    transform: translate(-55px, -20px);
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 0 4px rgba(142, 142, 142, 0.6);
    opacity: 0;
}


.reputation:hover .reputation-info {
    transform: translate(-55px, -25px);
    opacity: 1;
}

.skin-link-container p {
    margin: 10px;
}


.skin-link-container {
    width: 100%;
    color: #efeff1;
}

.skin-link {
    margin: 5px;
    background: #24242b;
    border-radius: 10px;
    color: #efeff1;
    padding: 10px 20px 10px 20px;
}

.before-news-container .down {
    height: 50px;
    width: 50px;
    fill: rgba(205, 205, 205, 0.5);
    transform: rotate(180deg);
    animation: up-down 2s ease-in-out infinite;
}

@keyframes up-down {
    0% { transform: rotate(180deg) translateY(-10px); }
    50% { transform: rotate(180deg) translateY(10px); }
    100% { transform: rotate(180deg) translateY(-10px); }
}

.before-news-container {
    background: linear-gradient(0deg, transparent, #07071b 50%, transparent 100%);

    width: 100vw;
    min-height: 19vh;
    margin: 3vh 0;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.news-container {
    /*margin-top: 100px;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    color: white;

    /*background:*/
    /*        radial-gradient(ellipse at 20% 80%, #1a0a2e 0%, transparent 50%),*/
    /*        radial-gradient(ellipse at 80% 20%, #0f1b3d 0%, transparent 50%),*/
    /*        radial-gradient(ellipse at 50% 50%, #1e1b4b 0%, #0a0a1a 100%),*/
    /*        linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 30%, #0f1b3d 70%, #0a0a1a 100%);*/

    background: transparent;

    padding-top: 0;
    padding-bottom: 120px;
    margin-bottom: -100px;
}


.auth-title {
    display: flex;
    width: 100vw;
    min-height: 77vh;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    color: #fff;
}

.index-page-container {
    display: flex;
    width: 100vw;
    min-height: 77vh;
    align-items: center;
    justify-content: center;
}

.news-container .post {
    width: 60%;
    border-radius: 0 8px 8px 8px;

    background:
            linear-gradient(rgba(27, 27, 41, 0.5), rgba(27, 27, 41, 0.5)) padding-box,
            linear-gradient(to bottom left, rgba(106, 62, 172, 0.5), rgba(36, 36, 43, 0.5)) border-box;

    backdrop-filter: blur(2px);

    border: 2px solid transparent;
}

.news-container .post-text {
    text-align: left;
}

@media (max-width: 700px) {


    .shop.selected {
        display: flex;
    }

    .modal-left {
        display: none;
    }
    .shop {
        display: none;
        transition: none;
    }

    .news-container {
        margin-top: 30px;
        font-size: 70%;
    }
    .news-container h1.title {
        font-size: 30px;
    }

    #bg span {
        scale: 0.5;
    }

    .post-title {
        font-size: 20px;
    }

    .news-container .post {
        width: 90%;
    }

    .post-title-container {
        width: 90%;
    }

}

hr {
    margin-bottom: 30px;
    background: white;
    height: 5px;
    width: 90%;
    border-radius: 10px;
}

.faq {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.faq-item {
    width: 70%;
    margin: 8px;

    background:
            linear-gradient(rgba(27, 27, 41, 0.5), rgba(27, 27, 41, 0.5)) padding-box,
            linear-gradient(to right, rgba(106, 62, 172, 0.2), rgba(36, 36, 43, 0.2)) border-box;

    border: 2px solid transparent;
    border-radius: 15px;
    backdrop-filter: blur(2px);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 24px;
    color: white;
    border-radius: 15px;
    outline: none;
    border: none;
    background: transparent;

    cursor: pointer;
    white-space: pre-wrap;
}

.pnt .faq-item {
    background:
            linear-gradient(rgb(27, 27, 41, 0.5), rgb(27, 27, 41, 0.5)) padding-box,
            linear-gradient(to right, rgba(101, 114, 216, 0.2), rgba(36, 36, 43, 0.2)) border-box;
}

.kc .faq-item {
    background:
            linear-gradient(rgb(27, 27, 41, 0.5), rgb(27, 27, 41, 0.5)) padding-box,
            linear-gradient(to right, rgba(237, 138, 68, 0.2), rgba(36, 36, 43, 0.2)) border-box;
}

.faq-answer {
    display: block;
    padding: 0 15px;
    font-size: 20px;
    color: #c5c5c5;
    border-radius: 0 0 10px 10px;
    outline: none;
    /*background:*/
    /*        linear-gradient(rgb(30, 30, 39), rgb(30, 30, 39)) padding-box,*/
    /*        linear-gradient(to right, rgba(98, 135, 152, 0.5), rgba(30, 30, 39)) border-box;*/

    /*border: 2px solid transparent;*/
    border: none;
    /*border-top: none;*/
    white-space: pre-wrap;
    max-height: 0;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    overflow: clip;
}

.pnt .faq-item hr {
    background: linear-gradient(to right, rgba(101, 114, 216, 0.5), rgba(36, 36, 43, 0.5));
}
.kc .faq-item hr {
    background: linear-gradient(to right, rgba(237, 138, 68, 0.5), rgba(36, 36, 43, 0.5));
}

.btl .faq-item {
    background:
            linear-gradient(rgb(27, 27, 41, 0.5), rgb(27, 27, 41, 0.5)) padding-box,
            linear-gradient(to right, rgba(46, 87, 128, 0.2), rgba(36, 36, 43, 0.2)) border-box;
}
.btl .faq-item hr {
    background: linear-gradient(to right, rgba(88, 167, 245, 0.5), rgba(36, 36, 43, 0.5));
}

.faq-item hr {
    display: block;
    width: 98%;
    height: 1px;
    background: linear-gradient(to right, rgba(106, 62, 172, 0.5), rgba(36, 36, 43, 0.5));
    outline: none;
    border: none;
    margin-bottom: 15px;
}

.faq-item.active .faq-answer {
    display: block;
    max-height: 1000px;
    padding: 0 15px 15px;
}

.faq-item.active .faq-question {
    border-bottom: none;
    border-radius: 15px 15px 0 0;
}

.glass-slim label {
    margin: 0;
}
.glass-slim {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.glass-slim input {
    width: 48px;
    height: 26px;
    appearance: none;
    background: rgba(0,0,0,0.3);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
}

.glass-slim input::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.glass-slim input:checked {
    background: rgba(99, 102, 241, 0.6);
}

.glass-slim input:checked::after {
    transform: translateX(22px);
}


.bans {
    color: #efeff1;
    background: rgba(30, 31, 34, 0.5);
    backdrop-filter: blur(2px);
    width: 900px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Контейнер карточек */
.bans-container {
    width: 100%;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    border-radius: 20px;
}


.ban-card .reason {
    background: #2f2f35;
    border-radius: 14px;
    padding: 5px 10px 5px 10px;
}

.ban-card .date{
    margin-left: 20px;
    display: flex;
    gap: 10px;
}
.ban-card {
    width: 100%;
    background: #24242b;
    border-radius: 5px;
    padding: 18px;
    color: #cfcfe6;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s, box-shadow .2s;
    z-index: 2;
}

.ban-card.status-true {
    border: 5px solid transparent;
    border-radius: 14px;

    background:
            linear-gradient(#24242b, #24242b) padding-box,
            linear-gradient(to bottom right, #a83c3c, #24242b) border-box;
}

.ban-card.status-false {
    border: 5px solid transparent;
    border-radius: 14px;

    background:
            linear-gradient(#24242b, #24242b) padding-box,
            linear-gradient(to bottom right, #4a4a55, #24242b) border-box;
}

.ban-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.ban-false {
    background: #4a4a55;
}

.ban-true {
    background: #a83c3c;
}

.bans-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


.rules-btn-container {
    width: 70%;
    margin: 10px;
    display: flex;
    justify-content: center;
}

.rules-btn {
    text-align: left;
    width: 100%;
    padding: 10px 15px 10px 15px;
    font-size: 24px;
    color: white;
    border-radius: 15px;
    outline: none;

    background:
            linear-gradient(rgb(27, 27, 41), rgb(27, 27, 41)) padding-box,
            linear-gradient(to bottom right, rgba(106, 62, 172, 0.5), rgba(36, 36, 43, 0.5)) border-box;

    border: 5px solid transparent;

    cursor: pointer;
    white-space: pre-wrap;
}

.pnt .rules-btn {
    background:
            linear-gradient(rgb(27, 27, 41), rgb(27, 27, 41)) padding-box,
            linear-gradient(to bottom right, rgba(101, 114, 216, 0.5), rgba(36, 36, 43, 0.5)) border-box;
}

.dogovor-content p {
    margin: 15px;
}

.dogovor-content ul {
    margin: 15px 40px;
}

.dogovor-content {
    font-size: 20px;
    /*background-color: #0d0d11;*/
    color: #cccccc;
    padding: 0 10%;
}

.rules-container .warning-box{
    padding: 15px 50px 15px 50px;
    background: rgba(64, 17, 17, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    margin: 20px;
    border: solid 2px rgba(228, 106, 111, 0.5);
}

.rules-container ul{
    list-style-type: none;
    padding: 14px;
    margin: 10px 0 50px 0;
    background: rgba(23, 32, 42, 50%);
    border-left: solid 5px rgba(156, 152, 209, 0.5);
}

.rules-container li{
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;        /* выравнивает по верхнему краю */
    gap: 0;
}

.rules-container .number {
    font-size: 16px;
    color: #5490e3;
    font-weight: 600;
    /*width: 52px;                    !* фиксированная ширина для выравнивания *!*/
    text-align: right;              /* выравниваем номер по правому краю */
    padding: 0 14px 0 0;
    margin-right: 14px;
    border-right: 3px solid #5490e3;   /* цвет линии такой же, как текст */
    flex-shrink: 0;                 /* чтобы не сжимался */
    align-self: stretch;            /* важная строка! */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.rules-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 15%;
    text-align: left;
    font-size: 20px;
}
.hello span{
    color: var(--color);
}
.hello {
    font-size: 54px;
}

@media (max-width: 700px) {

    .rules-container {
        padding: 0 5%;
        font-size: 15px;
    }

    .rules-container .warning-box{
        padding: 15px;
        margin: 20px 10px;
    }


    .hello {
        margin: 0;
        font-size: 29px;
    }

}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75); /* тёмный полупрозрачный фон */
    display: none;                    /* по умолчанию скрыт */
    align-items: center;
    justify-content: center;
    z-index: 999999;                  /* выше всего */
}

.loader img{
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}
.loader {
    text-align: center;
    color: white;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255,255,255,0.3);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.linesContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 10px;
    height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6b5cff #141827;
}
.linesContainer .userLine.rub-line {
    background: #505e5b;
}

.linesContainer .userLine .bit {
    font-size: 25px;
}

.linesContainer .userLine.active-ban {
    background: #804949;
}

.linesContainer .userLine {
    display: flex;
    justify-content: flex-start;
    padding: 5px 20px;
    border-radius: 5px;
    background: #3f4148;
    width: 100%;
    align-items: center;
    gap: 20px;
}
.linesContainer .userLine .user-avatar {
    display: flex;
    justify-content: center;
    margin: 0;
}

.linesContainer .userLine .user-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #5a5a80;
    transition: transform 0.3s;
}

.online {
    color: white;
    font-size: 30px;
    margin: 0 0 50px 0;
}


.about-container.grid {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
    justify-items: center;
    gap: 45px;
    margin: 20px auto;
    padding: 45px;
    align-items: center;
}
.about-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-container.alchemy .row {
    justify-content: space-around;
    margin-bottom: 0;
}

.about-symbol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.about-symbol img{
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.about-container .row h2 {
    padding: 0 10%;
    margin-bottom: 10px;
}


.about-container .row {
    display: flex;
    justify-content: flex-start;
    padding: 20px 5%;
    margin-bottom: -200px;
}

/*.about-container .row.right h2{*/
/*    text-align: right;*/
/*}*/
.about-container .row.right{
    justify-content: flex-end;
}

.about-container .block p {
    margin: 10px;
}

.about-container .block li {
    margin-bottom: 5px;
}
.about-container .block ul {
    margin: 20px;
}

.about-container .block a.command{
    text-decoration: none;
    color: white;
    margin: 0;
}
.about-container .block .command{
    background-color: #66669b;
    padding: 1px 5px;
    border-radius: 5px;
    z-index: 500;
    position: relative;
}

.about-container .block .command.red{
    background-color: #834242;
}


.about-container .block .command.lime{
    background-color: #495c4b;
}

.about-container .block .command.yellow{
    background-color: #61522d;
}

.about-container .block .command.blue{
    background-color: #237e85;
}


.about-container.grid .block {
    width: 90%;
    height: auto;
}
.about-container .block {
    width: 45%;
    border-radius: 20px;
    background: rgba(27, 27, 41, 0.5);
    backdrop-filter: blur(2px);
    padding: 20px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    font-size: 18px;
}

[id] {
    scroll-margin-top: 130px;     /* отступ сверху */
}

.about-container .navigation-bar {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.about-container .navigation-bar a:hover {
    transform: translate(0, -5px);
    background: #292940;
}
.about-container.sh .navigation-bar a {
    background: rgba(27, 27, 41, 0.5);
    font-size: 18px;
}
.about-container .navigation-bar a {
    text-decoration: none;
    background: #1b1b29;
    padding: 10px 20px;
    color: #d8d8d8;
    margin: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    cursor: pointer;
    transition: all 0.4s;
    font-size: 16px;
    border-radius: 5px;
}

@media (max-width: 700px) {

    .about-container .row {
        display: flex;
        justify-content: center;
        padding: 0;
        margin-bottom: 10px;
    }
    .about-container .row.right{
        justify-content: center;
    }

    .about-container .block {
        width: 90%;
        padding: 10px;
        font-size: 14px;
    }
}

.scroll-top-btn svg{
    fill: #555;
}
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;                    /* скрыта по умолчанию */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.scroll-top-btn:hover svg{
    fill: #fff;
}
.scroll-top-btn:hover {
    transform: scale(1.1);
}

.scroll-top-btn.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.controls .sort-btn:hover {
    transform: translateY(-3px);
}

.controls .sort-btn.active {
    border: solid 2px #6969bc;
    background: #1b1b29;
}
.sort-btn {
    text-decoration: none;
    background: #1b1b29;
    padding: 10px 20px;
    color: white;
    margin: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    cursor: pointer;
    transition: all 0.4s;
    font-size: 16px;
    border-radius: 5px;
    border: solid 2px #1b1b29;
}

.controls {
    color: white;
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pagination .arrow:hover {
    scale: 1.2;
}
.pagination .arrow {
    scale: 1;
    transition: all 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    gap: 10px;
}

.search-container {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin: 10px 0;
}

.search-container #search-input {
    text-decoration: none;
    background: #1b1b29;
    padding: 10px;
    color: white;
    margin: 0;
    cursor: text;
    transition: all 0.4s;
    font-size: 16px;
    border-radius: 5px 0 0 5px;
    outline: none;
    height: 50px;
    width: min(400px, 60%);
    border: none;
    align-items: center;
}
.search-container #search-button svg {
    align-items: center;
    display: flex;
}
.search-container #search-button:hover {
    background: #5f5f85;
}
.search-container #search-button {
    text-decoration: none;
    background: #2d2d42;
    padding: 10px 20px;
    color: white;
    margin: 0;
    cursor: pointer;
    transition: all 0.4s;
    font-size: 16px;
    border-radius: 0 5px 5px 0;
    outline: none;
    height: 50px;
    border: none;
    align-items: center;
}

.search-container #search-clear svg{
    fill: #919191;
    transition: all 0.4s;
}
.search-container #search-clear:hover svg{
    fill: #ffffff;
}
.search-container #search-clear {
    width: fit-content;
    position: relative;
    background: #1b1b29;
    padding: 10px 5px;
    outline: none;
    border: none;
    cursor: pointer;
    align-items: center;
    display: flex;
}

.login-container {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
}

.payment-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 50px;
}

.pay-c {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
}

.pay-card:hover {
    background: rgba(101, 114, 216, 0.5);
    transform: translateY(-1px);
}

.pay-card.gray {
    cursor: auto;
    background: rgba(147, 151, 182, 0.5);
}
.pay-card {
    font-size: 20px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(101, 114, 216, 0.5);
    transition: all 0.3s;
}

.pay-c1.active {
    transform: translateX(-25px);
}
.pay-c1-hide {
    overflow: hidden;
    position: absolute;
    transform: translateX(762px);
}
.pay-c1 {
    background: linear-gradient(to left bottom, rgba(101, 114, 216, 0.4), rgba(36, 36, 43, 0.4) 60%);
    border: solid 1px #42487d;
    backdrop-filter: blur(2px);
    color: white;
    padding: 20px 20px 20px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    text-align: center;
    transform: translateX(-1000px);
    position: relative;
    transition: all 0.4s ease-in-out;
    z-index: 450;
}


@media (max-width: 700px) {

    .pay-c1-hide {
        transform: translateX(200vh);
        overflow: visible;
        z-index: 500;
    }

    .pay-c1 {
        transform: translateX(0px);
        backdrop-filter: blur(10px);
        padding: 20px;
    }

    .pay-c1.active {
        z-index: 500;
        transform: translateX(-200vh);
    }

}
.word {
    position: absolute;
    font-size: 32px;
    white-space: nowrap;
    user-select: none;
    opacity: 0.2;
}

.skins .pin {
    margin: 2px;
    padding: 2px;
}

.pin {
    cursor: pointer;
    transition: all 0.1s ease-out;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin.selected {
    background: #6572d8;
}

.pin:hover {
    scale: 1.07;
}

.pin img{
    width: 100%;
    height: 100%;
    /*image-rendering: pixelated;*/
    /*filter: saturate(0.7);*/
}

#tooltip {
    position: fixed;
    z-index: 9999;

    background: linear-gradient(145deg, rgba(30, 30, 47, 0.5), rgba(24, 24, 36, 0.65));
    backdrop-filter: blur(4px);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(113, 113, 113, 0.45);

    font-size: 16px;
    pointer-events: none;

    opacity: 0;
    transition: all 0.1s ease;

    white-space: normal;
    max-width: 350px;
}

#tooltip.show {
    opacity: 1;
}

.tooltip-title {
    font-size: 20px;
    font-weight: bold;
}

.tooltip-desc {
    opacity: 0.8;
    width: fit-content;
    white-space: normal;
}


#cookie-banner .profile-btn{
    font-size: 20px;
}
#cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;

    background: linear-gradient(145deg, rgba(30, 30, 47, 0.5), rgba(24, 24, 36, 0.5));
    backdrop-filter: blur(1px);
    color: #f0f0f0;
    border-radius: 14px;
    padding: 22px;
    width: 40%;
    cursor: pointer;
    overflow: hidden;
    font-size: 20px;
}

.hideDesktop {
    display: none;
}


.serversContainer {
    gap: 5vh;
    padding: 4vh 3vh 15vh 3vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.serverCard.pnt {
    background: linear-gradient(to bottom left, rgba(141, 81, 231, 0.5), rgba(27, 28, 39, 0.5) 40%);
    border: solid 2px rgba(141, 81, 231, 0.5);
}

.serverCard a {
    color: #d6d6d6;
}
.serverCard {
    transition: all 0.1s ease-in-out;
    background: linear-gradient(to bottom left, rgba(250, 179, 68, 0.5), rgba(27, 28, 39, 0.5) 40%);
    border: solid 2px rgba(250, 179, 68, 0.5);
    border-radius: 20px;
    width: 50vh;
    padding: 2vh;
    backdrop-filter: blur(1px);
}

.serverCard.btl {
    background: linear-gradient(to bottom left, rgba(88, 167, 245, 0.5), rgba(27, 28, 39, 0.5) 40%);
    border: solid 2px rgba(88, 167, 245, 0.5);
}

.serverCard:hover {
    transform: translateY(-3px);
}

.serverCard .serverHeader {
    display: flex;
    justify-content: flex-start;
gap: 5px;
}

.serverCard .serverHeader img {
width: 80px;
height: 80px;
}

.serverCard .serverInfo p {
text-align: left;
}

.serverCard .serverInfo .title {
font-size: 25px;
font-weight: 700;
}

.serverCard .serverBody {
padding: 0.5vh 0.5vh 0;
}

.serverCard .serverFooter {
display: flex;
justify-content: flex-end;
}
.serverCard .serverIp svg{
width: 15px;
height: 15px;
}
.serverCard .serverIp.copied{
border-color: rgba(255, 255, 255, 0.71);
}
.serverCard .serverIp {
display: flex;
align-items: center;
background: #1b1c27;
border-radius: 9px;
border: 1px transparent solid;
transition: all 0.2s ease-in-out;
padding: 5px 10px;
gap: 5px;
cursor: pointer;
}

.serverCard .serverOnline span {
padding: 5px 10px;
background: #1b1c27;
border-radius: 9px;
}
.serverCard .serverOnline {
display: flex;
justify-content: flex-end;
position: absolute;
width: 92%;
}

@media (max-width: 700px) {

.block-1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    display: flex;
    flex-direction: column;
    width: 98%;
}

.skins, .bans, .requests-container, .req-btn {
    width: 98%;
}

.requests-container {
    display: flex;
}

.bans .date {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin: 0;
    gap: 0;
}

.bans .date p {
    font-size: 11px;
}

.bans-header {
    display: flex;
    flex-direction: column;
}

.skin-card {
    width: 125px;
    height: 152px;
}

.hideMobile {
    display: none;
}

.hideDesktop {
    display: block;
}


#cookie-banner {
    background: linear-gradient(145deg, rgba(30, 30, 47, 0.8), rgba(24, 24, 36, 0.8));
    width: 90%;
}

.before-news-container {
    margin: -4vh 0;
}

.ip-copy {
    font-size: 27px;
}
}


/* ==========================================
   СТРАНИЦА АКТИВАЦИИ ПРОМОКОДА
   ========================================== */

.promo-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 20px;
    flex: 1; /* Обеспечивает растяжение контейнера между хедером и футером */
}

/* Окно без фоновой карточки — элементы по центру */
.promo-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

/* Крупный заголовок в стиле .title-text */
.promo-title {
    font-family: "Jost", sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* Форма активации */
.promo-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Метка над инпутом */
.promo-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    color: #a6a5bc;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    width: 100%;
    text-align: left;
}

/* Тёмное поле ввода */
.promo-input {
    width: 100%;
    max-width: 520px;
    padding: 16px 20px;
    border-radius: 5px;
    background-color: rgba(58, 58, 71, 0.5);
    backdrop-filter: blur(2px);
    color: #f0f0f0;
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border: 1px #9b98c5 solid;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: border 0.2s, box-shadow 0.2s, background 0.2s;
}

.promo-input::placeholder {
    color: #6c6b8e;
    font-weight: 400;
}

.promo-input:focus {
    border-color: #6572d8;
    background-color: rgba(77, 77, 94, 0.5);
    outline: none;
}

/* Кнопка активации строго по центру */
.promo-submit-btn {
    margin-top: 30px;
    width: 100%;
    max-width: 280px;
    padding: 14px 0;
    background-color: #6572d8;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.promo-submit-btn:hover {
    background-color: #493fcf;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.promo-submit-btn:active {
    transform: scale(0.98) translateY(0);
}

/* Мобильная адаптивность */
@media (max-width: 700px) {
    .promo-title {
        font-size: 36px;
    }

    .promo-input {
        font-size: 18px;
        padding: 12px 15px;
    }

    .promo-submit-btn {
        max-width: 100%;
    }
}

/* ==========================================
   БЛОКИ СТАТУСА (УСПЕХ / ОШИБКА)
   ========================================== */

.promo-status {
    width: 100%;
    max-width: 520px;
    margin-top: 25px;
    padding: 16px 20px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    animation: statusFadeIn 0.3s ease-out;
}

.promo-status-title {
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.promo-status-text {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    display: block;
}

/* Стиль при успехе */
.promo-status-success {
    background-color: rgba(46, 125, 50, 0.25);
    border: 1px solid #4caf50;
    color: #81c784;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.15);
}

.promo-status-success .promo-status-title {
    color: #4caf50;
}

/* Стиль при ошибке */
.promo-status-error {
    background-color: rgba(198, 40, 40, 0.25);
    border: 1px solid #e53935;
    color: #ef9a9a;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.15);
}

.promo-status-error .promo-status-title {
    color: #e53935;
}

/* Плавное появление плашки */
@keyframes statusFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}