:root {
    --ls-bg: #11110f;
    --ls-bg-soft: #151512;
    --ls-surface: #1a1915;
    --ls-surface-raised: #232119;
    --ls-text: #f5f1e8;
    --ls-muted: #aaa397;
    --ls-accent: #f3aa32;
    --ls-accent-strong: #ffc45d;
    --ls-accent-ink: #17130c;
    --ls-line: rgba(245, 241, 232, 0.12);
    --ls-line-strong: rgba(243, 170, 50, 0.32);
    --ls-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    --ls-radius: 18px;
    --ls-radius-small: 12px;
}

html {
    background: var(--ls-bg);
    color-scheme: dark;
    scroll-behavior: smooth;
}

body.index-page.front-page {
    background:
        radial-gradient(circle at 88% 7%, rgba(243, 170, 50, 0.09), transparent 28rem),
        radial-gradient(circle at 6% 46%, rgba(255, 255, 255, 0.035), transparent 34rem),
        var(--ls-bg);
    color: var(--ls-text);
    font-family: "Montserrat", "Arial", sans-serif;
    letter-spacing: -0.01em;
}

body.index-page.front-page::selection {
    background: var(--ls-accent);
    color: var(--ls-accent-ink);
}

.header {
    background: rgba(17, 17, 15, 0.88) !important;
    border-bottom: 1px solid var(--ls-line);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.header .header-container {
    min-height: 74px;
}

.header .header-logo {
    filter: saturate(0.72) sepia(0.1) brightness(1.16);
    transition:
        filter 180ms ease,
        transform 180ms ease;
}

.header .header-container-wrapper:hover .header-logo {
    filter: saturate(1) brightness(1.25);
    transform: translateY(-1px);
}

.header .header__link,
.header .social a,
.header .dropdown-inner {
    color: var(--ls-muted) !important;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.header .header__link:hover,
.header .social a:hover,
.header .dropdown-inner:hover {
    color: var(--ls-text) !important;
}

.header .login-button,
.header .loginButton,
.home-welcome .big-login,
.home-welcome .big-button-wrap a,
.sell-block .save,
.sell-block .sells-skins-button,
.instant-payout-access-popup-actions__link,
.instant-payout-popup__navigation-link {
    background: var(--ls-accent) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(243, 170, 50, 0.18);
    color: var(--ls-accent-ink) !important;
    font-weight: 750 !important;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}

.header .login-button:hover,
.header .loginButton:hover,
.home-welcome .big-login:hover,
.home-welcome .big-button-wrap a:hover,
.sell-block .save:hover,
.sell-block .sells-skins-button:hover,
.instant-payout-access-popup-actions__link:hover,
.instant-payout-popup__navigation-link:hover {
    background: var(--ls-accent-strong) !important;
    box-shadow: 0 16px 34px rgba(243, 170, 50, 0.26);
    transform: translateY(-2px);
}

.layout-container {
    background: transparent !important;
}

.home-welcome {
    background-color: #13120f !important;
    border-bottom: 1px solid var(--ls-line);
    min-height: min(760px, calc(100svh - 74px));
    overflow: hidden;
    position: relative;
}

.home-welcome::after {
    background:
        linear-gradient(90deg, rgba(17, 17, 15, 0.96) 0%, rgba(17, 17, 15, 0.64) 48%, rgba(17, 17, 15, 0.14) 100%),
        linear-gradient(0deg, var(--ls-bg) 0%, transparent 34%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.home-welcome .overlay {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.home-welcome .top-info {
    max-width: 760px;
}

.home-welcome .big-message,
.home-welcome .big-message .typing,
.home-welcome .title {
    color: var(--ls-text) !important;
    font-weight: 760 !important;
    letter-spacing: -0.045em;
    line-height: 0.98 !important;
    text-wrap: balance;
}

.home-welcome .game,
.home-welcome .typed-cursor {
    color: var(--ls-accent-strong) !important;
}

.home-welcome .small-message {
    color: var(--ls-muted) !important;
    font-size: clamp(16px, 1.6vw, 21px);
    line-height: 1.55;
    max-width: 650px;
}

.home-welcome .bottom-info {
    border-top: 1px solid var(--ls-line);
    margin-top: clamp(40px, 8vh, 90px);
    padding-top: 28px;
}

.home-welcome .bottom-info .item {
    border-left: 1px solid var(--ls-line);
    padding-left: 22px;
}

.home-welcome .bottom-info .item:first-child {
    border-left: 0;
    padding-left: 0;
}

.home-welcome .bottom-info .desc {
    color: var(--ls-text) !important;
}

.home-welcome .bottom-info .sub-desc {
    color: var(--ls-muted) !important;
}

.block-title {
    color: var(--ls-text) !important;
    font-size: clamp(28px, 4vw, 54px) !important;
    font-weight: 720 !important;
    letter-spacing: -0.045em;
    line-height: 1.02 !important;
    margin-bottom: clamp(24px, 4vw, 42px) !important;
}

.sell-block,
.feedback-block,
.bloggers,
.home-blog,
.subscription-block,
.footer {
    background: transparent !important;
    border-top: 1px solid var(--ls-line);
    position: relative;
}

.sell-block,
.feedback-block,
.bloggers,
.home-blog,
.subscription-block {
    padding-bottom: clamp(64px, 9vw, 126px) !important;
    padding-top: clamp(64px, 9vw, 126px) !important;
}

.sell-block .block-content,
.sell-block .inner,
.sell-block .blocks,
.sell-block .block,
.sell-block .inventory-wrapper,
.sell-block .welcome-overlay-block,
.sell-block .skins-payout-information,
.sell-block .currency-selector-menu,
.sell-block .dropdown-menu {
    border-color: var(--ls-line) !important;
}

.sell-block .block-content > .inner {
    background: var(--ls-surface) !important;
    border: 1px solid var(--ls-line) !important;
    border-radius: calc(var(--ls-radius) + 4px) !important;
    box-shadow: var(--ls-shadow);
    overflow: hidden;
}

.sell-block .trade-url-block,
.sell-block .inventory-top-controls,
.sell-block .inventory-wrapper,
.sell-block .right-block,
.sell-block .skins-payout-information {
    background-color: var(--ls-surface) !important;
}

.sell-block input,
.sell-block textarea,
.sell-block .search,
.sell-block .trade-url-field,
.sell-block .currency-selector-inner,
.sell-block .dropdown-inner {
    background: var(--ls-bg-soft) !important;
    border: 1px solid var(--ls-line) !important;
    border-radius: var(--ls-radius-small) !important;
    color: var(--ls-text) !important;
}

.sell-block input::placeholder,
.sell-block textarea::placeholder {
    color: rgba(170, 163, 151, 0.72) !important;
}

.sell-block .games-navigation__link,
.sell-block .priceorder,
.sell-block .select-all,
.sell-block .reload {
    color: var(--ls-muted) !important;
}

.sell-block .games-navigation__link_active,
.sell-block .games-navigation__link:hover,
.sell-block .priceorder:hover,
.sell-block .select-all:hover,
.sell-block .reload:hover {
    color: var(--ls-accent-strong) !important;
}

.sell-block .welcome-overlay {
    background: rgba(17, 17, 15, 0.68) !important;
    backdrop-filter: blur(7px);
}

.sell-block .welcome-overlay-block {
    background: var(--ls-surface-raised) !important;
    border: 1px solid var(--ls-line-strong) !important;
    border-radius: var(--ls-radius) !important;
    box-shadow: var(--ls-shadow);
}

.last-sales,
.stats-block,
.feedbacks,
.l-review,
.home-blog .inner,
.subscription-block .inner {
    color: var(--ls-text);
}

.last-sales .item,
.feedbacks .item,
.home-blog .blog-article,
.bloggers .blogger-item {
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.last-sales .item:hover,
.feedbacks .item:hover,
.home-blog .blog-article:hover,
.bloggers .blogger-item:hover {
    transform: translateY(-4px);
}

.feedbacks,
.l-review,
.home-blog .blog-article,
.bloggers .blogger-item {
    background-color: var(--ls-surface) !important;
    border-color: var(--ls-line) !important;
}

.feedbacks .username,
.feedbacks .text,
.feedbacks .rate,
.home-blog .name a,
.bloggers .name,
.footer-company-header__name,
.footer-links__header {
    color: var(--ls-text) !important;
}

.feedbacks .date,
.feedbacks .statistics .description,
.home-blog .date,
.bloggers .followers,
.footer-company__description,
.footer-links__item,
.footer-company-info {
    color: var(--ls-muted) !important;
}

.feedbacks .rate,
.review-body__stars,
.trustpilot-reviews__link {
    color: var(--ls-accent-strong) !important;
}

.home-blog .blog-article .image {
    filter: saturate(0.78) contrast(1.04);
    transition:
        filter 240ms ease,
        transform 320ms ease;
}

.home-blog .blog-article:hover .image {
    filter: saturate(1) contrast(1.08);
    transform: scale(1.025);
}

.show-more,
.subscribe-button,
.write-feedback,
.popup-button {
    background: transparent !important;
    border: 1px solid var(--ls-line-strong) !important;
    border-radius: 999px !important;
    color: var(--ls-text) !important;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.show-more:hover,
.subscribe-button:hover,
.write-feedback:hover,
.popup-button:hover {
    background: var(--ls-accent) !important;
    border-color: var(--ls-accent) !important;
    color: var(--ls-accent-ink) !important;
    transform: translateY(-2px);
}

.footer {
    background:
        linear-gradient(180deg, rgba(243, 170, 50, 0.045), transparent 12rem),
        #0d0d0b !important;
    border-top-color: var(--ls-line-strong);
}

.footer a {
    transition: color 180ms ease;
}

.footer a:hover {
    color: var(--ls-accent-strong) !important;
}

.footer-company-header__logo {
    filter: saturate(0.7) brightness(1.15);
}

.auth-required-overlay {
    background: rgba(9, 9, 8, 0.82) !important;
    backdrop-filter: blur(10px);
}

.auth-required-dialog {
    background: var(--ls-surface-raised) !important;
    border: 1px solid var(--ls-line-strong) !important;
    border-radius: var(--ls-radius) !important;
    box-shadow: var(--ls-shadow) !important;
}

.auth-required-login {
    background: var(--ls-accent) !important;
    border-radius: 999px !important;
    color: var(--ls-accent-ink) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ls-accent-strong) !important;
    outline-offset: 3px;
}

.ls-refresh body:not(.is-ready) .home-welcome .top-info,
.ls-refresh body:not(.is-ready) .home-welcome .bottom-info {
    opacity: 0;
    transform: translateY(18px);
}

.ls-refresh body.is-ready .home-welcome .top-info,
.ls-refresh body.is-ready .home-welcome .bottom-info {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 580ms ease,
        transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-refresh body.is-ready .home-welcome .bottom-info {
    transition-delay: 120ms;
}

@media (max-width: 900px) {
    .header .header-container {
        min-height: 64px;
    }

    .home-welcome {
        min-height: auto;
    }

    .home-welcome::after {
        background:
            linear-gradient(90deg, rgba(17, 17, 15, 0.92), rgba(17, 17, 15, 0.5)),
            linear-gradient(0deg, var(--ls-bg) 0%, transparent 42%);
    }

    .home-welcome .bottom-info .item {
        border-left: 0;
        border-top: 1px solid var(--ls-line);
        padding-left: 0;
        padding-top: 18px;
    }

    .home-welcome .bottom-info .item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .sell-block .block-content > .inner {
        border-radius: var(--ls-radius);
    }
}

@media (max-width: 600px) {
    body.index-page.front-page {
        background:
            radial-gradient(circle at 90% 4%, rgba(243, 170, 50, 0.08), transparent 20rem),
            var(--ls-bg);
    }

    .block-title {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .sell-block,
    .feedback-block,
    .bloggers,
    .home-blog,
    .subscription-block {
        padding-bottom: 68px !important;
        padding-top: 68px !important;
    }

    .sell-block .block-content > .inner {
        border-left: 0 !important;
        border-radius: 0 !important;
        border-right: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .ls-refresh body:not(.is-ready) .home-welcome .top-info,
    .ls-refresh body:not(.is-ready) .home-welcome .bottom-info {
        opacity: 1;
        transform: none;
    }
}
