/*  ┌──────────────────────────┐  */
/*  │     Globals elements     │  */
/*  └──────────────────────────┘  */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; padding: 0; font: 300 62.5% 'Avenir Next', sans-serif; }

body {
    color: #fff;

    min-height: 100dvh;

    background-image: url('../img/sod_bg.png');
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    min-width: 100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-global-background);

    overflow-x: hidden;
}

body * {
    transition:
            box-shadow 0.2s ease-in-out,
            background-color 0.2s ease-in-out,
            filter 0.2s ease-in-out;
}

a { text-decoration: none; color: var(--color-accent); }

ul { padding-inline-start: 0; }

fieldset { border: none; }

/* -- Scrollbar  -- */
{  scrollbar-width: thin;  scrollbar-color: var(--colors-scroll); }
*::-webkit-scrollbar {height: 8px;width: 8px; }
*::-webkit-scrollbar-track { border-radius: 6px; background-color: var(--scroll-track-color); }
*::-webkit-scrollbar-track:hover { background-color: var(--scroll-track-hover-color); }
*::-webkit-scrollbar-track:active { background-color: var(--scroll-track-active-color); }
*::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--scroll-thumb-color); }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover-color); }
*::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-active-color); }

/*╔══════════╗*/
/*║  Common  ║*/
/*╚══════════╝*/
.std-group {
    width: 100%;

    display: flex;

    flex-direction: column;
    gap: 18px;
}

.bg-blur-weak {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.bg-blur-medium {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.bg-blur-strong {
    backdrop-filter: blur(37px);
    -webkit-backdrop-filter: blur(37px);
}

.no-scroll { overflow: hidden }

#go-main, #go-settings {
    margin: 10px;
}

button {
    color: var(--color-accent-bright);
    background: none;
    border: none;
    outline: transparent;
    cursor: pointer;

    font-family: 'Avenir Next', sans-serif;
}

button[disabled] {
    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: 0.5;
}

button.bg-accent-heavy-cracked { position: relative }
button.bg-accent-heavy-cracked::after {
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    border: 1px solid var(--color-accent-blend);
    border-radius: var(--button-radius, 7px);

    content: '';

    background-image: url('../img/accent-highlighted-background-button.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

button.bg-fragments { position: relative }
button.bg-fragments::before {
    position: absolute;
    z-index: 0;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    content: '';

    background-image: url('../img/cracked_button_bg_2.svg');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: var(--bg-position, center);
}

button.bg-accent-heavy { position: relative }
button.bg-accent-heavy:after {
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    border: 1px solid var(--color-accent-blend);
    border-radius: var(--button-radius, 7px);

    content: '';

    background-image: url('../img/accent-highlighted-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

button.cracked-v1 { position: relative }
button.cracked-v1::after {
    content: '';
    position: absolute;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-image: url('../img/cracked_button_bg.svg');
    background-size: cover;
    background-clip: text;
    background-repeat: no-repeat;
    background-position: center;
}

a.cracked,
button.cracked { position: relative; }

a.cracked::after,
button.cracked::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../img/cracked_button_bg_2.svg');
    background-position: 25% 50%;
    background-repeat: no-repeat;
    z-index: -1;
}

a.accent,
button.accent { position: relative; }

a.accent::before,
button.accent::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom right,
    rgba(246, 203, 52, 0.60) 0,
    rgba(246, 99, 52, 0) 50%) bottom right / 120% 50% no-repeat,
    linear-gradient(to top right,
            rgba(246, 203, 52, 0.60) 0,
            rgba(246, 99, 52, 0) 50%) top right / 120% 50% no-repeat,
    linear-gradient(to bottom left,
            rgba(246, 203, 52, 0.60) 0%,
            rgba(246, 168, 52, 0.00) 50%) bottom left / 120% 50% no-repeat,
    linear-gradient(to top left,
            rgba(246, 203, 52, 0.60) 0%,
            rgba(246, 168, 52, 0.00) 50%) top left / 120% 50% no-repeat,
    rgba(47, 9, 18, .8);

    z-index: -2;
}
a.regular,
button.regular {
    padding: 10px;
    color: var(--color-accent-bright);
    border: 1px solid rgba(255, 168, 0, 0.60);
    background: rgba(255, 168, 0, 0.20);
    border-radius: var(--button-radius, 7px);
    font-family: 'Avenir Next', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

a.regular:hover,
button.regular:hover {
    box-shadow: 0 0 5px #FFA800;
}

.accent-shadow:hover {
    box-shadow: 0 0 5px #FFA800;
}

.site-main {
    min-width: 280px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "content"
        "page-separator"
        "footer";
}

address {
    font-style: normal;
}

/*┌─────────────────┐*/
/*│     Buttons     │*/
/*└─────────────────┘*/
.btn-accent-gradient-cracked {
    color: var(--color-accent-bright);
    font-family: 'Avenir Next', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    text-transform: uppercase;
    white-space: nowrap;

    background: url(../img/accent-highlighted-background-button.svg) center center / cover no-repeat;
    background-origin: border-box;

    padding: 10px;
    border-radius: var(--button-radius, 7px);
    border: 1px solid var(--color-accent-blend);
}

.btn-accent-gradient-cracked:not([disabled]):hover {
    box-shadow: 0 0 5px var(--color-accent-blend);
}

.btn-accent-bg-flat {
    color: var(--color-accent-bright);
    font-family: 'Avenir Next', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    text-transform: uppercase;
    white-space: nowrap;

    background: var(--color-accent-obscure);

    padding: 10px;
    border-radius: var(--button-radius, 7px);
    border: 1px solid var(--color-accent-blend);
}

.btn-accent-bg-flat:not([disabled]):hover {
    box-shadow: 0 0 5px var(--color-accent-blend);
}

.btn-like-accent-gradient-cracked {
    color: var(--color-accent-bright);
    font-family: 'Avenir Next', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;

    background: url(../img/accent-highlighted-background-button.svg) center center / cover no-repeat;
    background-origin: border-box;

    padding: 10px;
    border-radius: var(--button-radius, 7px);
    border: 1px solid var(--color-accent-blend);
}

.btn-like-accent-gradient-cracked:hover {
    box-shadow: 0 0 5px var(--color-accent-blend);
}

.btn-like-accent-flat {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;

    color: var(--color-accent);
    font-family: 'Avenir Next', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap;

    padding: 10px;
    border: 1px solid var(--color-accent-blend);
    border-radius: var(--button-radius, 7px);
}

.btn-like-accent-flat:hover {
    box-shadow: 0 0 5px var(--color-accent-blend);
}

.btn-like-secondary-flat {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;

    color: var(--color-secondary-blend);
    font-family: 'Avenir Next', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap;

    padding: 10px;
    border: 1px solid var(--color-secondary-blend);
    border-radius: var(--button-radius, 7px);
}

.btn-like-secondary-flat:hover {
    box-shadow: 0 0 5px var(--color-secondary-blend);
}

/*********************
    Navigation
*********************/
.site-header, .site-footer {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Firefox flex overflow chain fix */
.content { min-height: 0; }

/*
    HEADER
*/

.site-header {
    position: relative;
    grid-area: header;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            180deg, #131018 -5.38%,
            rgba(19, 16, 24, 0.00) 100%
    );
    z-index: -1;
}

/* Prevent initial animations before UI is ready */
html:not(.ui-ready) .site-header__profile-panel,
html:not(.ui-ready) .site-header__profile.show .site-header__profile-panel {
    animation: none !important;
}

.site-header__inner {
    max-height: 150px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    align-items: center;
    justify-content: space-between;
    gap: 15px 10px;

    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
        "server profile lang"
        "nav nav nav";
}

.fake-select {
    grid-area: server;
}

.site-header__profile {
    --profile-panel-width: 122px;

    min-width: 100px;

    grid-area: profile;
    justify-self: flex-end;

    position: relative;

    cursor: pointer;

    font-size: 1.2rem;
    font-weight: 500;

    color: var(--color-lightblue);
}

.site-header__profile-label {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    user-select: none;

    position: relative;
    z-index: 20;

    max-width: 110px;
}

.site-header__profile-label:hover {
    filter: drop-shadow(0 0 5px var(--color-lightblue-fade)) brightness(1.1);
}

.site-header__profile-label--active {
    color: var(--color-accent);
}

.site-header__profile-label--active .site-header__profile-icon {
    filter: var(--color-accent-filter);
}

.site-header__profile-username {
    display: inline-block;
    max-width: calc(var(--profile-panel-width, 280px) - 20px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.1;
}

.site-header__profile.show .site-header__profile-panel-inner {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;

    animation: grow-in 0.25s ease-in-out forwards;
}

/* Анимация закрытия по классу .closing */
.site-header__profile.closing .site-header__profile-panel-inner {
    animation: grow-out 0.25s ease-in-out forwards;
}

.site-header__profile-panel {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.site-header__profile.show .site-header__profile-panel,
.site-header__profile.closing .site-header__profile-panel {
    pointer-events: auto;
    z-index: 10;
}

.site-header__profile-panel-inner {
    --profile-panel-width: 132px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 232px;
    width: var(--profile-panel-width, 280px);
    padding: 10px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    border: 1px solid var(--color-lightblue-weak);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
    pointer-events: none;
    opacity: 0;
}

@keyframes grow-in {
    0% {
        transform: scale(2) translateY(-50px);
        opacity: 0;
    }
    50% {
        opacity: .25;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes grow-out {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        opacity: .25;
    }
    99% {
        transform: scale(1.25) translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(-250px);
    }
}

.site-header__profile-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-header__profile-button {
    display: flex;

    gap: 4px;
    align-items: center;
    justify-content: space-between;

    padding: 8px 10px;

    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;

    z-index: 3;

    user-select: none;
    cursor: pointer;
}

.site-header__profile-button--settings {
    color: var(--color-accent);
    border: 1px solid var(--color-accent-blend);
    border-radius: 10px;
}

.button-icon-accent {
    color: var(--color-accent);
    border-color: var(--color-accent-blend);
    background: transparent;
}

.site-header__profile-button--logout {
    color: var(--color-lightblue-fade);
    border: 1px solid var(--color-lightblue-fade);
    border-radius: 10px;
}

.site-header__nav {
    grid-area: nav;
}

.site-header__logo {
    grid-area: logo;

    display: none;
}

.site-header__server {
    grid-area: server;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    z-index: 10;
}

.fake-select {
    font-size: 1.3rem;
    color: #FFA800;
    display: inline-flex;
    gap: 4px;
    max-width: fit-content;

    padding: 8px 8px 8px 12px;

    border-radius: var(--radius-m, 10px);
    border: 1px solid rgba(255, 168, 0, 0.30);
    background: rgba(255, 168, 0, 0.20);
}

.fake-select .name {
    font-weight: 400;
}

.fake-select .rate {
    font-weight: 500;
}

.arrow {
    display: inline-block;
    border: solid #FFA800;
    border-width: 0 1px 1px 0;
    padding: 3px;
    margin: 3px 4px 0 4px;
    height: 25%;
    transition: 0.2s;
}

.arrow:hover {
    transform: rotate(225deg);
    transform-origin: 50% 75%;
    transition: 0.2s;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.site-header__separator {
    grid-area: separator;

    display: none;
    height: 1px;
    opacity: 0.6;
    background: linear-gradient(90deg, rgba(226, 229, 252, 0.00) 2.65%, #E2E5FC 49.56%, rgba(226, 229, 252, 0.00) 95.45%);
}

.site-header__nav-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
}

.site-header__nav-item {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;

    color: var(--color-lightblue);
    list-style: none;
    font-size: 1rem;
    font-weight: 500;

    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(226, 229, 252, 0.10);
    background: rgba(226, 229, 252, 0.10);
}

.site-header__nav-item:hover .site-header__nav-link {
    color: var(--color-accent);
}

.site-header__nav-item:first-child {
    justify-content: flex-start;
}

.site-header__nav-item--active {
    background-color: rgba(255, 168, 0, 0.10);
    border: 1px solid rgba(255, 168, 0, 0.20);
}

.site-header__nav-item--active .site-header__nav-link {
    color: #FFA800;
}

.site-header__nav-link {
    display: flex;
    width: 100%;
    height: 100%;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;

    color: var(--color-lightblue);
    list-style: none;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.site-header__nav-icon {
    display: block;
    width: 28px;
    height: 28px;
}

.site-header__lang,
.lang-select {
    grid-area: lang;

    gap: 4px;
    align-items: center;
    justify-self: right;
    font-size: 1.3rem;
    font-weight: 500;
}

.ru-flag, .us-flag {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;

    background-position: center;
    background-size: cover;
}

.ru-flag {
    background-image: url('../img/ru_flag.svg');
}

.us-flag {
    background-image: url('../img/us_flag.svg');
}

.site-header__nav-icon--main {
    background: url('../img/person.svg') center center no-repeat;
}
.site-header__nav-item--active .site-header__nav-icon--main,
.site-header__nav-item:hover .site-header__nav-icon--main {
    background: url('../img/active-person.svg') center center no-repeat;
}

.site-header__nav-icon--donation {
    background: url('../img/diamond.svg') center center no-repeat;
}
.site-header__nav-item--active .site-header__nav-icon--donation,
.site-header__nav-item:hover .site-header__nav-icon--donation {
    background: url('../img/active-diamond.svg') center center no-repeat;
}

.site-header__nav-icon--services {
    background: url('../img/diamond.svg') center center no-repeat;
}
.site-header__nav-item--active .site-header__nav-icon--services,
.site-header__nav-item:hover .site-header__nav-icon--services {
    background: url('../img/active-diamond.svg') center center no-repeat;
}

.site-header__nav-icon--support {
    background: url('../img/support.svg') center center no-repeat;
}
.site-header__nav-item--active .site-header__nav-icon--support,
.site-header__nav-item:hover .site-header__nav-icon--support {
    background: url('../img/active_support.svg') center center no-repeat;
}

.sep-32 {
    width: 100%;
    height: 32px;
}

.hex-btn-accent {
    position: relative;

    color: #E2E5FC;
    font-size: 1.7rem;
    text-align: center;
    text-shadow: 0 0 8px #FF8D24;
    font-weight: 600;
    line-height: 140%;
    text-transform: uppercase;

    width: 100%;
    border: none;
    padding: 20px 40px;

    background-color: transparent;
    background-image: url('../img/accent-highlighted-bg-hexagonal-button.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    outline: none;
}

.hex-btn-accent:not([disabled]):hover {
    filter: drop-shadow(0 0 5px var(--color-accent-blend));
}

.hex-btn-flat-cracked {
    width: 100%;

    position: relative;
    color: #E2E5FC;
    font-size: 1.7rem;
    text-align: center;
    text-shadow: 0 0 8px #FF8D24;
    font-weight: 600;
    line-height: 140%;
    text-transform: uppercase;

    border: none;
    padding: 20px 40px;

    background-color: transparent;
    background-image: url('../img/accent-flat-bg-cracked-hexagonal-button.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    z-index: 99;
    cursor: pointer;
}

.hex-btn-flat-cracked:not([disabled]):hover {
    filter: drop-shadow(0 0 5px var(--color-accent-blend));
}

.content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 785px;
}

/*╔════════════╗*/
/*║  Services  ║*/
/*╚════════════╝*/

.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl, 30px);

    width: 100%;
    padding: 0 10%;
    margin: 30px auto 100px;
}

.services__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    max-width: 640px;
}

.services__subtitle {
    color: rgba(226, 229, 252, 0.80);
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 150%;
}

.services__grid {
    width: 100%;
    max-width: 1400px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-l, 20px);
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 16px;

    width: 100%;
    min-height: 250px;
    max-width: 360px;
    padding: 24px 20px;
    border-radius: 20px;

    border: 1px solid rgba(226, 229, 252, 0.20);
    background: rgba(140, 136, 146, 0.10);
    backdrop-filter: blur(22px);

    cursor: pointer;
    user-select: none;
    text-align: center;

    transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

.service-card:hover {
    background: rgba(140, 136, 146, 0.20);
    box-shadow: 0 0 20px rgba(226, 229, 252, 0.25);
}

.service-card__icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 120px;
    height: 120px;
}

.service-card__icon img {
    width: 100%;
}

.service-card__title {
    color: var(--color-lightblue);
    font-family: 'Philosopher', serif;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 100%;
}

.service-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;

    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
}

.service-card__price-label {
    color: #fff;
}

.service-card__price-value,
.service-card__price-currency {
    color: var(--color-accent);
    font-weight: 400;
}

.service-card__description {
    color: #FFF;
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;
}

.services__note {
    width: 100%;
    max-width: 640px;

    padding: 16px 20px;
    border-radius: 20px;
    border: 1px solid rgba(226, 229, 252, 0.20);
    background: rgba(140, 136, 146, 0.08);

    text-align: center;
    color: #FFF;
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;
}

/*╔════════════╗*/
/*║  History   ║*/
/*╚════════════╝*/

.history {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.history__header {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "back title"
        "tabs tabs";
    align-items: center;
    gap: 12px;
}

.history__back {
    grid-area: back;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;
    cursor: pointer;
}

.history__back img {
    display: block;
}

.history__title {
    grid-area: title;
    color: var(--color-lightblue);
    text-align: right;
    font-family: 'Philosopher', serif;
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 100%;
}

.history__tabs {
    grid-area: tabs;
    display: flex;
    justify-self: center;
    gap: 5px;
    padding: 4px;
    border-radius: var(--tabs-radius);
    border: 1px solid rgba(226, 229, 252, 0.20);
    overflow: hidden;
}

.history__tab {
    position: relative;
    flex: 1 1 0;
    padding: 7px 16px;
    background: none;
    border: none;
    text-align: center;
    cursor: pointer;
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;
    transition: color var(--tabs-duration) var(--tabs-ease);
    isolation: isolate;
}

.history__tab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--tabs-radius) - 4px);
    background: var(--tabs-accent-bg);
    box-shadow: inset 0 0 0 1px var(--tabs-accent-border);
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--tabs-duration) var(--tabs-ease),
        transform var(--tabs-duration) var(--tabs-ease);
    pointer-events: none;
    z-index: -1;
}

.history__tab--active {
    color: var(--color-accent);
}

.history__tab--active::before {
    animation: grow-in var(--tabs-duration) var(--tabs-ease) forwards;
}

.history__tab:not(.history__tab--active):hover {
    text-shadow: 0 0 10px var(--color-lightblue);
}

@media (prefers-reduced-motion: reduce) {
    .history__tab,
    .history__tab::before {
        transition: none;
    }
}

.history__panels {
    position: relative;
    width: 100%;
    display: grid;
    align-items: start;
}

.history__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease-out,
        visibility 0s linear .25s;
}

.history__panel--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease-in,
        visibility 0s;
}

.history-table {
    width: 100%;
}

.history-table__header,
.history-table__row {
    display: grid;
    grid-template-columns: 2fr 2fr 3fr;
    gap: 20px;
}

.history-table__header {
    color: var(--color-lightblue);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;
    text-align: right;
    text-transform: uppercase;
    padding-bottom: 16px;
    opacity: .6;
}

.history-table__header-cell--date {
    text-align: left;
}

.history-table__body {
    width: 100%;
}

.history-table__row {
    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 153%;
    text-align: right;
    padding: 16px 0;
    border-top: 1px solid rgba(226, 229, 252, 0.20);
}

.history-table__cell--date {
    text-align: left;
}

.history-table__time {
    font-weight: 600;
    margin-left: 4px;
}

.history-table__cell--amount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.history-table__amount {
    color: var(--color-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.history-table__amount::before {
    content: "";
    margin-right: 4px;
}

.history-table__amount::after {
    content: 'CoL';
    margin-left: 3px;
    text-transform: none;
}

.history-table--credits .history-table__amount::before {
    content: '+';
}

.history-table--expenses .history-table__amount::before {
    content: '-';
}

.history-table__cell--operation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .history__panel {
        transition: none;
    }
}

/*╔═════════════════╗*/
/*║  Service Forms  ║*/
/*╚═════════════════╝*/
.service-dialog-popup {
    --backing-padding: 16px 16px 32px 16px;
}

.service-dialog-popup .inputs {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 18px;

    margin: 16px 0 32px 0;
}

.service-dialog-popup .price-line {
    width: 100%;

    text-align: center;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 153%;

    margin: 5px 0 16px 0;
}

.service-dialog-popup .price-line span {
    color: var(--color-accent);
}


.price-col-regular {
    color: var(--color-accent);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 153%;
}

.price-col-regular:after {
    content: 'CoL';
}

popup-dialog {
    ----backing-max-width: 590px;
    --backing-min-width: 280px;
}

.accent-color { color: var(--color-accent); }
.box-shadow-accent:hover { filter: brightness(1.15); }

.regular-border {
    border: 1px solid rgba(226, 229, 252, 0.20) !important;
}

/************************************/
/********* Text *********************/
.t-avenir { font-family: 'Avenir Next Cyr', sans-serif }
.t-accent { color: var(--color-accent) }
.t-bright { color: var(--color-accent-bright) }
.count-gray { color: rgba(226, 229, 252, 0.32) }

.t-nw { white-space: nowrap }

.t-upper { text-transform: uppercase }

.t-12 { font-size: 1.2rem }
.t-13 { font-size: 1.3rem }

.t-500 { font-weight: 500 }
.t-600 { font-weight: 600 }

/************************************/
/********* Paddings ****************/
.p-10 { padding: 10px }

/************************************/
/********* Backgrounds **************/
.bg-accent { background-color: var(--color-accent) }
.bg-accent-obscure { background-color: var(--color-accent-obscure) }
.bg-bright { background-color: var(--color-accent-bright) }

/************************************/
/********* Borders ******************/
.br-7 { border-radius: 7px }

.b-bright { border: 1px solid rgba(255, 168, 0, 0.60) }

/*╔══════════════╗*/
/*║  Index page  ║*/
/*╚══════════════╝*/
.site-main__content {
    width: 100%;
    max-width: 900px;
    grid-area: content;

    display: flex;

    flex-direction: column;

    padding: 0 20px;
    margin: 30px auto;
}

.site-main__section {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.site-main__section--connected {
    gap: 5px;
}

.site-main__section--connected > * {
    width: 100%;

    border: 1px solid rgba(226, 229, 252, 0.20);
    background: rgba(140, 136, 146, 0.10);
    padding: 20px;
}

.site-main__section--connected > *:first-child {
    border-radius: 30px 30px 0 0;
}

.site-main__section--connected > *:last-child {
    border-radius: 0 0 30px 30px;
}

.site-main__separator {
    width: 100%;
    height: 16px;
}

.site-main__section--stacked {
    align-items: stretch;
}

.site-main__separator--large {
    height: 32px;
}

.account-balance {
    min-height: 0;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "currency balance"
        "history balance"
        "actions actions";
    grid-gap: 2px;
}

.account-balance__currency {
    grid-area: currency;

    color: #fff;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 130%;
}

.account-balance__value {
    grid-area: balance;

    color: var(--color-accent);
    font-family: 'Philosopher', serif;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 73%;

    justify-self: flex-end;
}

.account-balance__history {
    grid-area: history;

    display: flex;

    align-items: center;
    justify-content: flex-start;
    gap: 4px;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 150%;
}

.account-balance__history-link {
    color: inherit;
}

.account-balance__history-icon {
    display: block;
}

.account-balance__actions {
    grid-area: actions;

    display: flex;

    gap: 8px;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap-reverse;

    margin-top: 20px;
}

.btn-buy-col {
    padding: 10px;
}

.btn-transfer-col {
    padding: 10px;
}

.account-items {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-template-areas:
        "title"
        "list"
        "buttons";
    grid-gap: 12px;
}

.account-items__title {
    grid-area: title;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    margin-bottom: 4px;
}

.account-items__list {
    grid-area: list;

    display: flex;

    flex-wrap: wrap;
    gap: 10px;

    list-style-type: none;
}

.account-items__item {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.account-items__item:not(:last-child):after {
    content: '•';
    padding-left: 10px;
}

.account-items__actions {
    grid-area: buttons;
}

.btn-transfer-items {
    padding: 10px;
}

.character-appearance {
    width: 100%;

    display: grid;

    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title info"
        "actions actions";
    grid-gap: 10px;

    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 168, 0, 0.10) 0%, rgba(255, 168, 0, 0.03) 100%);

    padding: 20px;
    border: 1px solid var(--color-accent-obscure);
    border-radius: 23px;
}

.character-appearance__title {
    grid-area: title;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 150%;
}

.character-appearance__info {
    grid-area: info;
}

.character-appearance__info-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 150%;
}

.character-appearance__actions {
    grid-area: actions;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.character-appearance__button {
    width: 100%;
    max-width: 200px;

    padding: 10px;

    --bg-position: 15%;
}

.referral-program-grid {
    display: grid;
}

.referral-program {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(80px, auto));
    grid-template-rows: auto auto;
    grid-template-areas:
        "title info"
        "balance balance"
        "actions actions";
    gap: 10px;

    padding: 20px;
    border: 1px solid var(--color-accent-obscure);
    border-radius: 23px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 168, 0, 0.10) 0%, rgba(255, 168, 0, 0.03) 100%);
}

.referral-program__title {
    grid-area: title;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 150%;
}

.referral-program__info {
    grid-area: info;
}

.referral-program__info-link {
    display: flex;

    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 150%;
}

.referral-program__balance {
    grid-area: balance;

    justify-self: center;

    color: var(--color-accent);
    font-family: 'Philosopher', serif;
    font-size: 2.8rem;
    font-weight: 400;
}

.referral-program__actions {
    grid-area: actions;

    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.referral-program__receive {
    width: 100%;
    max-width: 200px;

    padding: 10px;
    /*--bg-position: 15%;*/
}

.referral-program__invite {
    width: 100%;
    max-width: 200px;

    padding: 10px;
}

/*╔════════════╗*/
/*║  Settings  ║*/
/*╚════════════╝*/
.settings {
    display: flex;
    align-items: center;
    max-width: 785px;
    width: 100%;
    flex-direction: column;
    gap: 32px;
}

.settings__email,
.settings__password,
.settings__auth {
    display: flex;

    border-radius: 20px;
    background: rgba(140, 136, 146, 0.10);
    border: 1px solid rgba(226, 229, 252, 0.20);
    padding: 20px;

    width: 100%;
    max-width: 550px;
}

.settings__email,
.settings__password {
    flex-direction: column;
}

.settings__email {
    gap: 7px;
}

.settings__auth {
    gap: 10px;
    align-items: center;
}

.btn-toggle {
    width: 34px;
    height: 18px;
    background: url("../img/toggle-button.svg") no-repeat center;
}

.btn-toggle.active {
    background-image: url("../img/active-toggle-button.svg");
}

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

.settings__email-title {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 100%;
    text-align: center;
    margin: 0;
}

.settings__email-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 150%;

    border: none;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

.settings__email-value {
    color: var(--color-lightblue);

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;
    text-transform: uppercase;
}

.settings__password-title {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
    margin: 0;
}

.settings__password-form {
    display: flex;
    flex-direction: column;
}

.settings__password-inputs {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 25px;
}

.settings__password-submit {
    margin-top: 24px;
    color: var(--color-accent);
    width: 100%;

    font-size: 1.6rem;
    text-transform: unset;
}

.settings__auth-title {
    color: var(--color-lightblue);
    flex: 1;

    font-size: 1.6rem;
    font-weight: 400;
    line-height: 153%;
}

.settings__logout {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;
    text-align: center;
}

#change-ma-email-dalog {
    --backing-padding: 16px 16px 32px 16px;
}

#change-ma-email-dalog .price-line {
    color: var(--color-lightblue);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 153%;

    margin-top: 10px;
    margin-bottom: 16px;
}

#change-ma-email-dalog span {
    color: var(--color-accent);
}

#change-ma-email-dalog .inputs {
    display: flex;
    flex-direction: column;
    gap: 18px;

    margin-bottom: 32px;
}

/*╔══════════════╗*/
/*║  MA Email    ║*/
/*╚══════════════╝*/
.ma-email-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 30px 70px 30px;

    max-width: 510px;
}

.ma-email-success__title {
    color: var(--color-lightblue);
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: 3.6rem;
    font-weight: 400;
    margin: 0 0 50px 0;
}

.ma-email-success__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.ma-email-success__button {
    width: 258px;
}

/*╔═════════════════╗*/
/*║  Referral page  ║*/
/*╚═════════════════╝*/
.content-referral {
    max-width: 720px;
    width: 100%;

    display: flex;

    flex-direction: column;
    place-self: center;

    padding: 20px;
}

.content-referral .header {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "back balance"
        "title title";
    grid-row-gap: 20px;
    grid-column-gap: 10px;

    margin-bottom: 30px;
}

.content-referral .header .title {
    grid-area: title;

    width: 100%;

    color: var(--color-lightblue);
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: 3.6rem;
    font-weight: 400;
}

.content-referral .header .back {
    grid-area: back;
}

.content-referral .header .back button {
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 8px;
}

.content-referral .header .back span {
    color: var(--color-accent);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;
}


.content-referral .header .balance-box {
    grid-area: balance;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.content-referral .balance-box .title {
    color: var(--color-lightblue);
    font-family: 'Avenir Next', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 120%;
    text-align: right;
}

.content-referral .balance-box .balance {
    display: flex;

    justify-content: flex-end;
    align-items: center;
    gap: 4px;

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 120%;
}

.content-referral .balance-box img {
    width: 13px;
}

.content-referral .items-list-header {
    width: 100%;

    display: none;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;

    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(226, 229, 252, 0.20);
}

.content-referral .items-list-header > div {
    opacity: .6;
}

.content-referral .items-list-header .h-item {
    flex-grow: 1;
}

.content-referral .items-list-header .h-price {
    width: calc(35% + 28px);
}

.content-referral ul.items-list {
    width: 100%;

    display: flex;

    flex-direction: column;
    gap: 15px;

    list-style: none;
}

.content-referral ul.items-list li {
    display: flex;

    flex-wrap: wrap;
    gap: 5px 24px;

    padding-bottom: 10px;
}

.content-referral ul.items-list li:not(:last-child) {
    border-bottom: 2px solid rgba(226, 229, 252, 0.20);
}

.content-referral ul.items-list li .icon {
    width: 42px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.content-referral ul.items-list li .icon img {
    width: 100%;
}

.content-referral ul.items-list li .name {
    flex: 1 0 60%;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
}

.content-referral ul.items-list li .name span {
    font-weight: 600;
    opacity: 1;
}

.content-referral ul.items-list li .price-box {
    align-self: center;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}

.content-referral ul.items-list li .price-box span.amount {
    color: var(--color-accent);
}

.content-referral ul.items-list li .button {
    width: 25%;

    display: flex;

    flex-grow: 1;
    justify-content: flex-end;

    padding-bottom: 6px;
}


.content-referral ul.items-list li .button button {
    height: 36px;

    padding: 10px 20px;
}



/*╔═══════════╗*/
/*║  Content  ║*/
/*╚═══════════╝*/
.content {
    grid-area: content;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content .wrapper {
    margin: 0 auto;
    max-width: 955px;
}

.game-accounts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.account-storage {
    grid-area: inventory;

    display: flex;
    flex-direction: column;
    gap: var(--gap-s, 5px);

    margin-bottom: 24px;
}

.blur-bd {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.coins-info, .items-info {
    padding: 20px;

    border: 1px solid rgba(226, 229, 252, 0.20);
    background-color: rgba(140, 136, 146, 0.10);
}

.coins-info {
    display: grid;

    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-row-gap: var(--gap-l, 20px);
    grid-template-areas:
        "title   balance"
        "buttons  buttons";

    border-radius: var(--radius-xl, 30px) var(--radius-xl, 30px) 0 0;
}

.title-history {
    grid-area: title;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.title-history .content-title span {
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
}

.title-history .history a {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 150%;
}

.balance-container {
    grid-area: balance;
}

.balance-container span {
    color: var(--color-accent);
    font-family: Philosopher, sans-serif;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 100%;
}

.buttons {
    grid-area: buttons;
}

.buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-m, 10px);
}

.items-info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    border-radius: 0 0 30px 30px;
}

.items-info .content-title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
}

.items-info ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: var(--gap-m, 10px);
}

.items-info ul li {
    font-family: 'Avenir Next', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 1px;
    color: var(--color-lightblue);
    text-transform: uppercase;
}

.items-info ul li:not(:last-child)::after {
    content: '•';
    font-size: 1.3rem;
    margin: 0 5px;
}

.items-info ul li span {
    color: rgba(226, 229, 252, 0.32);
    margin: 0 5px 0 5px;
}

.items-info button {
    max-width: 150px;
}

.account-storage .controls-line {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;

    gap: 10px;
}

.ref-bonus-system {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ref-system-info {
    display: flex;
    flex-direction: column;

    padding: 14px 20px 20px 20px;
    border: 1px solid rgba(255, 168, 0, 0.20);

    border-radius: var(--radius-xl, 30px);
    backdrop-filter: blur(22px);
    background: var(--gradient-radial-accent);
}

.ref-title-info {
    display: flex;
    gap: var(--gap-s, 5px);
    align-items: flex-start;
    justify-content: space-between;
}

.ref-title {
    color: var(--color-accent);

    font-family: 'Avenir Next', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 135%;
}

.ref-info {
    display: flex;
    align-items: center;
    gap: 4px;

    color: var(--color-accent);

    font-family: 'Avenir Next', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 150%;
}

.ref-balance {
    display: flex;

    justify-content: center;

    margin-bottom: 20px;
}

.ref-info img {
    width: 12px;
    height: 12px;
    padding: 2px 1.1px 1.4px 1px
}

.ref-balance {
    color: var(--color-accent);

    font-family: 'Philosopher', serif;
    font-size: 5.2rem;
    font-weight: 400;
    line-height: 100%;
}

.ref-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;

    @media (min-width: 360px) {
        flex-direction: row;
    }
}

.bonus-system-info {
    display: flex;
    flex-direction: column;

    padding: 14px 20px 20px 20px;
    border: 1px solid rgba(255, 168, 0, 0.20);
    margin-bottom: 16px;

    border-radius: var(--radius-xl, 30px);
    backdrop-filter: blur(22px);
    background: var(--gradient-radial-accent);
}

.bonus-title-info {
    display: flex;
    gap: var(--gap-s, 5px);
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 12px;
}

.bonus-title {
    color: var(--color-accent);

    font-family: 'Avenir Next', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 135%;
}

.bonus-info {
    display: flex;
    align-items: center;
    gap: 4px;

    color: var(--color-accent);

    font-family: 'Avenir Next', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 150%;
}

.bonus-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.bonus-buttons button {
    width: 100%;
    max-width: 276px;
}

.game-accounts__counter {
    color: var(--color-lightblue);
    opacity: .5;

    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
    text-align: center;
}

.game-accounts__counter-value {
    font-weight: 600;
}

.game-accounts__create {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-l, 20px);

    padding: 20px;
    border-radius: var(--radius-m, 10px);
    border: 1px solid rgba(255, 168, 0, 0.30);
    background-color: rgba(255, 168, 0, 0.10);
}

.game-accounts__create-title {
    color: var(--color-accent);

    font-size: 1.6rem;
    font-weight: 500;
}

.game-accounts__create-button {
    padding-left: 20px;
    padding-right: 20px;
}

.game-accounts__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-account {
    color: var(--color-lightblue);

    display: flex;
    flex-direction: column;

    padding: 20px;
    border-radius: var(--radius-m, 10px);
    border: 1px solid rgba(226, 229, 252, 0.20);
    background: rgba(140, 136, 146, 0.10);
}

.game-account__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l, 20px);
    margin-bottom: 23px;
    transition: margin-bottom .25s ease;

    cursor: pointer;
}

.game-account__name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 153%;
}

.game-account__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-l, 20px);
}

.game-account__meta {
    color: rgba(226, 229, 252, 0.60);
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;
}

.game-account__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-account__toolbar {
    display: flex;
    gap: var(--gap-l, 20px);
}

.sq-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;

    cursor: pointer;
}

.sq-btn-delete {
    background-image: url('../img/action_delete.svg');
}

.sq-btn-change-pwd {
    background-image: url('../img/action_key.svg');
}

.sq-btn-lock {
    background-image: url('../img/action_lock.svg');
}

.game-account__toggle {
    display: flex;
    justify-items: center;
    align-items: center;
}

.btn-expand {
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
    background-image: url('../img/action-expand-closed.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    cursor: pointer;
    opacity: .3;
    transition: transform .25s ease, opacity .25s ease;
}

.game-account__characters {
    display: flex;
    flex-direction: column;
    gap: 23px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height .25s ease-in-out, opacity .15s ease-in-out;
    will-change: height;
}

.game-account--open .game-account__characters {
    height: auto;
    opacity: 1;
    overflow: visible;
}

.game-account:not(.game-account--open) .game-account__header {
    margin-bottom: 0;
}

.game-account--open .btn-expand {
    transform: rotate(180deg);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .game-account__characters,
    .btn-expand {
        transition: none;
    }
}

.game-account__table-header {
    display: none;

    gap: var(--gap-s, 5px);
    grid-template-columns: 5fr 3fr 2fr 2fr 2fr;
    grid-template-areas:
        "t-name t-clan t-pvppk t-login t-unstuck";

    margin-top: 30px;
}

.game-account__column-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;
    color: rgba(226, 229, 252, 0.50);
    text-transform: uppercase;
}

.game-account__column-title--name {
    grid-area: t-name;
}

.game-account__column-title--clan {
    grid-area: t-clan;
}

.game-account__column-title--pvp {
    grid-area: t-pvppk;
}

.game-account__column-title--login {
    grid-area: t-login;
}

.game-account__column-title--unstuck {
    grid-area: t-unstuck;
}

.game-account__table {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-account__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    row-gap: 23px;
    column-gap: var(--gap-s, 5px);
    grid-template-areas:
        "ch-name-class-lvl . ch-login"
        "ch-pvppk ch-unstuck ch-clan";

    border-radius: 8px;
    padding: 8px 12px;
    background-color: rgba(226, 229, 252, 0.05);
}

.game-account__character {
    grid-area: ch-name-class-lvl;
    grid-column: 1 / 5;
    gap: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.game-account__character-name,
.game-account__clan {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
}

.game-account__character-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;

    color: rgba(226, 229, 252, 0.60);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 150%;
    text-transform: uppercase;
}

.game-account__character-class,
.game-account__character-level {
    text-wrap: nowrap;
}

.game-account__column-heading {
    color: rgba(226, 229, 252, 0.50);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;
    text-transform: uppercase;
}

.game-account__clan {
    grid-area: ch-clan;
    grid-column: 8 / 13;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.game-account__pvp {
    grid-area: ch-pvppk;
    grid-column: 1 / 4;

    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
}

.game-account__pk-count {
    color: #FF003D;
}

.game-account__login {
    grid-area: ch-login;
    grid-column: 8 / 13;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;

    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;
    color: var(--color-lightblue);

    text-align: right;
    user-select: none;
}

.game-account__login-heading {
    color: rgba(226, 229, 252, 0.50);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;
    text-transform: uppercase;
}

.game-account__login-date::after {
    display: inline-block;
    content: '';
    background-image: url('../img/active-info-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-bottom: -1px;
}

.game-account__unstuck {
    grid-area: ch-unstuck;
    grid-column: 5 / 8;
}

.game-account__unstuck-link {
    color: var(--color-accent);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
}

/*╔══════════╗*/
/*║  Footer  ║*/
/*╚══════════╝*/
.site-footer {
    grid-area: footer;
    position: relative;

    width: 100%;

    padding: 80px 0 40px 0;
    margin-top: 36px;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: 0.6;
    background: linear-gradient(90deg, rgba(226, 229, 252, 0.00) 2.65%, rgba(226, 229, 252, 0.40) 49.56%, rgba(226, 229, 252, 0.00) 95.45%);
}

.site-footer__inner {
    width: 100%;

    display: grid;
    align-content: space-between;
    gap: 35px;

    grid-template-columns: 1fr;
    grid-template-rows: 80px 60px 1fr;
    grid-template-areas:
        "contact"
        "partners"
        "links";
}

.site-footer__contact {
    grid-area: contact;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.site-footer__email {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 150%;
    color: var(--color-lightblue);
}

.site-footer__social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 17px;
    max-height: 28px;
}

.site-footer__social-link {
    display: flex;
}

.site-footer__partners {
    grid-area: partners;

    display: flex;
    justify-content: center;
    gap: 15px;
}

.site-footer__partner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 17px;
    border-radius: var(--radius-m, 10px);
    height: 60px;
    max-width: 140px;
    background-color: rgba(226, 229, 252, 0.10);
}

.site-footer__links {
    grid-area: links;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.site-footer__links-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.site-footer__link {
    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 150%;
    text-align: center;
    opacity: 0.5;
}

.site-footer__link--active {
    opacity: 1;
}

/*╔═════════╗*/
/*║  Forms  ║*/
/*╚═════════╝*/
.close-btn-line {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 10px;
}

.popup-close-btn {
    width: 24px;
    height: 24px;
    padding: 7px;
    border: none;
    background-color: transparent;
}

.form-title {
    max-width: 260px;
    margin-bottom: 16px;

    color: var(--color-lightblue);
    font-size: 3rem;
    font-family: 'Philosopher', serif;
    font-weight: 300;
    line-height: 100%;
    text-align: center;
}

#create-game-account-dialog button[type="submit"] {
    margin-top: 16px;
}


/*╔════════════╗*/
/*║  Donation  ║*/
/*╚════════════╝*/
.donation {
    width: 100%;
    max-width: 445px;
}

.donation__title {
    color: var(--color-lightblue);
    font-family: 'Philosopher', serif;
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 100%;
    text-align: center;

    margin-bottom: 10px;
}

.donation__info {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 153%;
    text-align: center;
}

.donation__info-currency {
    font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
}

.donation__separator {
    width: 100%;
    height: 12px;
    background: url("../img/donation-sepapartor.svg") center/contain no-repeat;
    margin: 30px 0;
}

.donation__form {
    margin-top: 16px;
}

.donation__fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 25px;
}

.donation__primary {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.donation__amount {
    flex: 1;
}

.donation__character {
    display: block;
}

.donation__character[hidden],
.donation__character.donation__character--hidden {
    display: none;
}

.donation__bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 156, 65, 0.40);
    background: rgba(226, 229, 252, 0.00);

    color: var(--color-accent);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.donation__bonus:hover {
    background: rgba(255, 156, 65, 0.10);
    cursor: pointer;
}

.donation__rates {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 13px;
}

.donation__rate {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    color: var(--color-lightblue);
    font-family: "Avenir Next Cyr", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;

    padding: 13px 0;
}

.donation__rate + .donation__rate {
    border-top: 1px solid rgba(226, 229, 252, 0.19);
}

.donation__methods {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    margin-top: 36px;
}

.donation__method {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    border-radius: 10px;
    background: rgba(226, 229, 252, 0.10);
    padding: 14px 18px 14px 10px;
    border: 1px solid transparent;

    user-select: none;
    cursor: pointer;

    transition: border-color .5s ease-in-out,
    box-shadow .25s ease-in-out;
}

.donation__method:hover:not(.donation__method--active) {
    box-shadow: 0 0 6px var(--color-lightblue);
}

.donation__method--active {
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent);
}

.donation__method-title {
    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 153%;
    text-transform: uppercase;

    opacity: .6;
}

.donation__method-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    user-select: none;
}

.donation__cta {
    margin-top: 30px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.donation__submit {
    min-width: 250px;
}

.donation__summary {
    width: 100%;

    text-align: center;
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;

    margin-top: 10px;
}

#bonus-info .bonus-content {
    display: flex;

    flex-direction: column;
    align-items: center;
}

#bonus-info .bonus-content .description {
    color: var(--color-lightblue);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    padding: 0 20px;
}

#bonus-info .bonus-table {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 16px 10px 0 10px;
}

#bonus-info .bonus-table .bonus-row {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#bonus-info .bonus-table .separator {
    width: 100%;

    margin: 20px 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(226, 229, 252, 0.00) 2.65%, #E2E5FC 49.56%, rgba(226, 229, 252, 0.00) 95.45%);
}

#bonus-info .bonus-table .bonus-row .range,
#bonus-info .bonus-table .bonus-row .bonus {
    color: #fff;

    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
}

#bonus-info .bonus-table .bonus-row .bonus {
    color: var(--color-accent)
}

.ma-topup {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 550px;
    width: 100%;
}

.ma-topup__title {
    display: none;

    color: var(--color-lightblue);
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: 5.2rem;
    font-weight: 400;
    margin: 0;
}

.ma-topup__separator {
    display: none;
    width: 100%;
    height: 12px;
    margin: 30px 0;

    background: url('../img/donation-sepapartor.svg') center center / contain no-repeat;
}

.ma-topup__gained {
    text-align: center;
    color: var(--color-accent);
    font-family: 'Philosopher', serif;
    font-size: 5.2rem;
    font-weight: 700;
}

.ma-topup__description {
    color: var(--color-lightblue);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    margin: 30px 0;
}

.ma-topup__transfer {
    width: 258px;

    margin-bottom: 40px;
}

#transfer-cols-to-game-dialog {
    --backing-width: 320px;
    --backing-padding: 16px 16px 32px 16px;
}

#transfer-cols-to-game-dialog .inputs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 50px 0;
}

/*╔════════════════════════════════╗*/
/*║  Transfer success              ║*/
/*╚════════════════════════════════╝*/
.transfer-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 30px 70px 30px;

    max-width: 510px;
}

.transfer-success__title {
    color: var(--color-lightblue);
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: 3.6rem;
    font-weight: 400;

    margin-bottom: 50px;
}

.transfer-success__gained {
    text-align: center;
    color: var(--color-accent);
    font-family: 'Philosopher', serif;
    font-size: 5.2rem;
    font-weight: 700;

    margin-bottom: 10px;
}

.transfer-success__description {
    color: var(--color-lightblue);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    margin-bottom: 26px;
}

.transfer-success__description span {
    font-weight: 600;
}

.transfer-success__notice {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
    text-align: center;

    border-radius: 10px;
    border: 1px dashed rgba(226, 229, 252, 0.43);
    background: rgba(226, 229, 252, 0.08);
    padding: 8px 16px;
    backdrop-filter: blur(5px);

    margin-bottom: 50px;
}

.transfer-success__notice span {
    font-weight: 600;
}

.transfer-success__button {
    width: 258px;
}

/*╔═══════════╗*/
/*║  Support  ║*/
/*╚═══════════╝*/
.support-container {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-bottom: 60px;
}

/* Ensure children can shrink inside in Firefox */
.support-container { min-height: 0; }

.tickets-area {
    width: 100%;
    min-width: 280px;
    min-height: 0; /* Firefox flex overflow fix */

    display: flex;
    justify-self: center;
    flex-direction: column;
    gap: 30px;
}

.tickets-area .control-panel {
    max-height: 920px;
    position: relative;
    display: flex;
    flex-direction: column;

    border-radius: 30px;
    border: 1px solid rgba(226, 229, 252, 0.20);
    background: rgba(140, 136, 146, 0.10);
    padding: 16px 10px 20px 5px;

    overflow-x: hidden;
}

.tickets-area .chat-container {
    display: flex;
    width: 100%;
    max-height: 960px;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    border-radius: 30px;
}

.chat-container .header {
    flex: 0 0 auto; /* prevent shrinking */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "btnBack nickname"
        "subject subject";
    gap: 20px;

    border-radius: 30px 30px 0 0;
    padding: 17px 22px 10px 15px;
    border: 1px solid rgba(140, 136, 146, 0.10);
    border-bottom: none;
    backdrop-filter: blur(37px);
}

.chat-container .header .to-tickets {
    grid-area: btnBack;
}

.chat-container .header .username {
    grid-area: nickname;
}

.chat-container .header .subject {
    grid-area: subject;
}

.chat-container .header .username {
    display: flex;

    align-items: center;

    color: var(--color-lightblue);
    text-align: right;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;

    justify-content: flex-end;
}

.chat-container .header .subject {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%
}

.chat-container .header .to-tickets {
    display: flex;

    gap: 8px;

    align-items: center;

    color: var(--color-accent);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 153%;
    text-align: left;

    outline: none;
    border: none;
    padding: 0;
}

.chat-container .conversation-container {
    min-height: 0;
    padding: 5px 5px 5px 0;
    border: 1px solid rgba(226, 229, 252, 0.14);
    flex: 1 1 auto;
}

.chat-container .conversation {
    height: 100%;
    min-height: 0; /* Firefox: prevent overflow beyond container */
    overflow-y: scroll;

    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 10px;
}

.chat-container .send-panel form {
    flex: 0 0 auto; /* prevent shrinking */
    display: flex;

    justify-content: space-between;
    align-items: center;
    gap: 12px;

    border-radius: 0 0 30px 30px;
    background: rgba(226, 229, 252, 0.09);

    padding: 10px;
    border: 1px solid rgba(226, 229, 252, 0.14);
    border-top: none;
}

.chat-container .send-panel .attach {
    width: 24px;
    height: 24px;

    background: url('../img/icon-attach.svg') center center / contain no-repeat;
    border: 0;
    outline: none;

    cursor: pointer;
}

.chat-container .send-panel .attach:hover {
    filter: brightness(1.2) drop-shadow(0 0 6px var(--color-secondary-blend));
}

.chat-container .send-panel .attach input[type="file"] {
    display: none;
}

.chat-container .send-panel .msg {
    flex-grow: 1;

    background: transparent;
    border: none;
    outline: none;
    caret-color: var(--color-accent);

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 153%;

    --filed-padding-small: 16px 20px;
}

.chat-container .send-panel .btn-send {
    width: 42px;
    height: 42px;

    background: url('../img/icon-send.svg') center center / contain no-repeat;
    border: 0;
    outline: none;
}

.chat-container .send-panel .btn-send:hover {
    filter: drop-shadow(0 0 5px var(--color-accent));
}

.chat-container .conversation .message-bubble {
    display: flex;

    flex-direction: column;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    padding: 10px;
}

.conversation .message-bubble .autor {

}

.conversation .message-bubble .text {
    font-weight: 600;
}

.conversation .message-bubble .date-time {
    font-size: 1.3rem;
    opacity: .7;
}

.conversation .message-bubble.to {
    align-self: flex-end;
    align-items: flex-end;
    border-radius: 20px 20px 2px 20px;
    background: rgba(255, 168, 0, 0.30);
}

.conversation .message-bubble.from {
    align-self: flex-start;
    align-items: flex-start;
    border-radius: 20px 20px 20px 2px;
    background: rgba(226, 229, 252, 0.20);
}

.tickets-area > .no-tickets {
    display: none;
}

.tickets-area .no-tickets {
    max-width: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 46px 16px 40px 16px;

    border: 1px solid rgba(226, 229, 252, 0.20);
    border-radius: 30px;
    background: rgba(140, 136, 146, 0.10);

    padding: 46px 20px 32px 20px;
}

.no-tickets .user-guide {
    color: rgba(226, 229, 252, 0.60);
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: 3rem;
    font-weight: 400;

    padding: 0 24px;
    margin-bottom: 26px;
}

.no-tickets .user-guide span {
    color: var(--color-accent);
}

.no-tickets .lang-icons {
    display: flex;

    gap: 10px;

    margin-bottom: 10px;
}

.no-tickets .attention {
    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
    text-align: center;

    padding: 0 20px 10px 20px;
}

.no-tickets .attention span {
    font-weight: 600;
}

.tickets-area .btn-create-ticket {
    margin-bottom: 24px;
}

.tickets-area .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.tickets-area .filters::-webkit-scrollbar {
    display: none;
}

.tickets-area .filters .filter {
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-lightblue);

    flex: 0 0 auto;

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 150%;

    border-radius: 7px;
    padding: 10px;
    border: 1px solid rgba(226, 229, 252, 0.20);
}

.tickets-area .filters .filter.active {
    color: var(--color-accent-bright);
    border-radius: 7px;
    border: 1px solid rgba(255, 168, 0, 0.60);
    background: rgba(255, 168, 0, 0.20);
}

.tickets-area .ticket-list {
    position: relative;
    max-height: 960px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;
    gap: 9px;

    padding: 0 8px 0 8px;
}

.ticket-list .ticket .first-line {
    display: flex;

    justify-content: space-between;
    gap: 10px;
}

.ticket-list .ticket {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4fr 3fr 3fr;
    grid-template-areas:
        "username status"
        "subject subject"
        "dateTime dateTime";

    border-radius: 12px;
    border: 1px solid rgba(226, 229, 252, 0.19);
    background: rgba(140, 136, 146, 0.10);
    backdrop-filter: blur(37px);
    padding: 10px;

    cursor: pointer;
}

.ticket.active {
    border: 1px solid rgba(255, 168, 0, 0.70);
    background: rgba(255, 168, 0, 0.20);
}

.ticket:hover {
    border: 1px solid rgba(255, 168, 0, .15);
    background: rgba(255, 168, 0, .05);
}

.ticket .username {
    grid-area: username;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 153%;
}

.ticket .status {
    grid-area: status;

    font-size: 1.6rem;
    font-weight: 600;
    line-height: 100%;

    align-self: flex-start;
    justify-self: flex-end;
    padding: 4px 10px;
    border-radius: 4px;
}

.ticket .status.new {
    color: #1BD2A1;
    background: rgba(27, 210, 161, 0.20);
}

.ticket .subject {
    grid-area: subject;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 153%;

    padding-right: 5px;
}

.ticket .date-time {
    grid-area: dateTime;

    color: var(--color-lightblue);
    text-align: left;
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;
    white-space: nowrap;

    opacity: .6;
}

#create-ticket-dialog {
    --title-margin: 8px 0 30px 0;
    --backing-padding: 16px 16px 32px 16px;
    --backing-max-width: 568px;
}

.user-faq-attention {
    width: 100%;

    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 150%;
    text-align: center;

    margin-bottom: 30px;
}

.user-faq-attention .faq-link {
    color: var(--color-accent);
}

.user-faq-attention .faq-link::after {
    display: inline-flex;

    content: url('../img/active-external-link.svg');
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

#create-ticket-dialog form {
    display: flex;

    flex-direction: column;
}

#create-ticket-dialog .inputs {
    display: flex;

    flex-direction: column;
    gap: 10px;

    margin-bottom: 24px;
}

#create-ticket-dialog .attach-container {
    display: flex;

    gap: 16px;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 32px;
}

#create-ticket-dialog .attach-container label:hover {
    filter: drop-shadow(0 0 5px var(--color-accent));
}

#create-ticket-dialog .info {
    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 150%;

    opacity: .6;
}

#create-ticket-dialog .info.selected {
    border-radius: 4px;
    border: 1px solid var(--color-accent-obscure);
    padding: 15px 10px;
}

#create-ticket-dialog .info.selected .size {
    padding: 5px;
    margin-right: 5px;
    border-radius: 4px;
    background: var(--color-accent-obscure);

    color: var(--color-accent);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 150%;
}

#create-ticket-dialog label:has(input[type="file"]) img {
    width: 50px;

    cursor: pointer;
}

#create-ticket-dialog input[type="file"] {
    display: none;
}

#create-game-account-dialog {
    --title-margin: 0 0 30px 0;
}

#create-game-account-dialog .popup-form {
    margin: 16px 0 0 0;
}

#create-game-account-dialog .popup-form button[type="submit"] {
    margin-top: 24px;
}

#change-password-dialog {
    --backing-padding: 16px 16px 32px 16px;
}

#change-password-dialog .inputs {
    margin: 16px 0 16px 0;
}

/* Поля ввода в попап-формах */
#create-game-account-dialog .inputs,
#change-password-dialog .inputs,
#delete-account-dialog .inputs {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.regular-input {
    color: var(--input-color, var(--color-lightblue));
    font-size: var(--input-font-size, 1.6rem);
    font-weight: 500;
    line-height: 153%;
    padding: var(--input-padding, 25px 20px 5px 20px);
    border-radius: var(--input-radius, 10px);
    border: 1px solid var(--input-border-color, rgba(226, 229, 252, 0.50));
    background: var(--input-bg, rgba(226, 229, 252, 0.10));
    width: 100%;
}

.regular-input:focus {
    outline: none;
}

label:has(> input.regular-input) {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

label:has(> input.regular-input) span {
    position: absolute;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 100%;
    padding-left: 20px;
    opacity: .6;
    transition:
            margin-top .1s ease-in-out,
            font-size .1s ease-in-out;
}

label:has(> input.regular-input:focus) span,
label:has(> input.regular-input:not(:placeholder-shown)) span
{
    margin-top: -20px;
    font-size: 1.2rem;
}

label:has(> input.regular-input) button.show-pwd-btn {
    position: absolute;

    border: none;
    background-color: transparent;
    padding: 0;
    right: 20px;
    width: 14px;
    height: 14px;
    background-image: url('../img/visibility_off.svg');
}

#delete-account-dialog {
    --title-margin: 0 0 16px 0;
    --backing-padding: 16px 16px 32px 16px;
}

#delete-account-dialog .form-title, #delete-account-dialog .description {
    margin-bottom: 24px;
}

/* Delete dialog */
#delete-account-dialog .description {
    width: 100%;

    color: var(--color-lightblue);
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;
    text-align: center;
}

#delete-account-dialog .buttons {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

#transfer-items-to-game-dialog {
    --backing-padding: 16px 16px 32px 16px;
    --title-margin: 16px 0 16px 0;
}

#transfer-items-to-game-dialog .inputs {
    display: flex;

    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

#character-bonus-appearance-dialog {
    --backing-padding: 16px 16px 32px 16px;
    --title-margin: 9px 0 9px 0;
}

#character-bonus-appearance-dialog .note {
    color: var(--color-lightblue);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 150%;
    text-align: center;

    padding: 0 20px;
    margin-bottom: 16px;
}

#character-bonus-appearance-dialog .note span {
    font-weight: 600;
}

#character-bonus-appearance-dialog .inputs {
    display: flex;

    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}

#referral-invite-friend-dialog {
    --backing-max-width: 510px;
    --backing-padding: 16px 16px 32px 16px;
    --title-margin: 8px 0 16px 0;
    --title-font-size: 3rem;
    --title-padding: 0 10px;
}

#referral-invite-friend-dialog .container {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "code"
        "copyCode"
        "copyLink";

    gap: 4px;
}

#referral-invite-friend-dialog .code {
    grid-area: code;

    color: var(--color-lightblue);
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 153%;

    padding: 26px 20px;
    border-radius: 14px 14px 2px 2px;
    border: 1px solid rgba(226, 229, 252, 0.34);
    background: rgba(226, 229, 252, 0.10);
}

#referral-invite-friend-dialog .copy-code {
    grid-area: copyCode;

    display: flex;

    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 16px;
    border-radius: 2px;
    border: 1px solid rgba(255, 168, 0, 0.60);
    background: rgba(255, 168, 0, 0.20);

    color: var(--color-accent-bright);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

#referral-invite-friend-dialog .copy-link {
    grid-area: copyLink;

    display: flex;

    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 16px 8px;
    border-radius: 2px 2px 14px 14px;
    border: 1px solid rgba(226, 229, 252, 0.36);
    background: rgba(226, 229, 252, 0.28);

    color: var(--color-lightblue);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

#referral-invite-friend-dialog .copied {
    display: none;

    color: var(--color-lightblue);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 153%;

    margin-top: 16px;
}