/* Lobby visual: dark canvas, green action, blue selection, square covers.
   Public layout only. Vue methods and PHP routes stay as they are. */

#app {
    --bg: #141415;
    --bg-2: #1d1e20;
    --bg-3: #2e3035;
    --line: rgba(255, 255, 255, 0.08);
    --text: #f0f2f5;
    --muted: #9aa1b1;
    --green: #00b24b;
    --green-2: #00d95b;
    --blue: #0075ff;
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
}

body,
#app .app,
#app .app #container,
#app .lobby {
    background: var(--bg) !important;
    color: var(--text);
}

#app .AoOTG,
.AoOTG {
    display: none !important;
}

#app .app,
.app {
    margin-top: 0 !important;
}

#app .lobby {
    gap: 16px;
    padding: 16px 16px 48px;
}

#app .main-nav {
    background: var(--bg);
    border-bottom: 0;
    box-shadow: none;
}

#app .main-nav-content {
    height: 68px;
    padding: 0 16px;
    gap: 16px;
}

#app .main-nav-Logo,
#app .main-nav-Logo img {
    display: flex !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    object-fit: contain;
}

#app .win-tabs {
    display: none;
    align-items: center;
    gap: 2px;
    min-width: 0;
    height: 40px;
    padding: 2px;
    border-radius: 12px;
    background: rgba(179, 182, 189, 0.12);
}

#app .win-tab {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
}

#app .win-tab:hover {
    color: var(--text);
}

#app .win-tab.is-on {
    color: #fff;
    background: var(--blue);
}

#app .auth-section {
    gap: 8px;
}

#app .auth-section > .m-button,
#app .btnDepositar {
    height: 44px;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 20px;
}

#app .auth-section > .m-button--outline,
#app .auth-section > .m-button--secondary {
    background: rgba(179, 182, 189, 0.12) !important;
    color: #f0f2f5 !important;
}

#app .auth-section > .m-button--outline .m-button-content,
#app .auth-section > .m-button--secondary .m-button-content {
    color: #f0f2f5 !important;
    font-weight: 600;
}

#app .auth-section > .m-button--primary,
#app .btnDepositar {
    background: var(--green) !important;
    color: #fff !important;
}

#app .auth-section > .m-button--primary .m-button-content,
#app .btnDepositar .m-button-content {
    color: #fff !important;
    font-weight: 700;
}

#app .loggedInContent {
    background: var(--bg-2) !important;
    border: 1px solid var(--line);
    border-radius: 14px !important;
    overflow: hidden;
    height: 40px;
}

#app .btnNotificacao,
#app .auth-section__avatar .btnNotificacao {
    background: var(--bg-2) !important;
    border-radius: 12px !important;
    color: var(--text);
}

#app .nav-sidebar,
#app .nav-sidebar-content,
#app .nav-sidebar-header,
#app .nav-sidebar-wrapped {
    background: var(--bg-2) !important;
}

#app .nav-sidebar-content {
    border-right: 0;
}

#app .nav-sidebar-header {
    justify-content: flex-start;
    height: 68px;
    padding: 0 16px;
    background: var(--bg) !important;
}

#app .nav-sidebar-header img {
    width: 132px !important;
    height: auto;
    object-fit: contain;
}

#app .bg-arrow {
    display: none !important;
}

#app .side-nav-item,
#app .nav-link-item {
    background: transparent !important;
    border-radius: 12px !important;
    height: 44px !important;
    margin-top: 2px !important;
    color: var(--text);
}

#app .side-nav-item span,
#app .nav-link-item span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-left: 4px !important;
}

#app .side-nav-item:hover,
#app .nav-link-item:hover,
#app .game-link-item:hover,
#app .toggle-link-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#app .sidebar_bg {
    background: transparent !important;
    padding: 0 !important;
}

#app .nav-sidebar-referral-program {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 8px 12px;
    padding: 14px;
    border-radius: 16px;
    background:
        linear-gradient(120deg, rgba(0, 178, 75, 0.35), rgba(0, 117, 255, 0.18)),
        #1d1e20;
    border: 1px solid var(--line);
}

#app .nav-sidebar-referral-program__title {
    color: #fff;
    font-weight: 800;
}

#app .nav-sidebar-referral-program__description {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

#app .nav-sidebar-game-banner img,
#app .aviator-sidebar-btn-img {
    border-radius: 16px;
    width: 100%;
}

#app .nav-sidebar-socials__link {
    background: var(--bg-3);
    border-radius: 12px;
}

#app .win-chips {
    display: flex;
    gap: 0;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
    padding: 2px;
    border-radius: 12px;
    background: rgba(179, 182, 189, 0.12);
    scrollbar-width: none;
}

#app .win-chips::-webkit-scrollbar {
    display: none;
}

#app .win-chip {
    flex: 0 0 auto;
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

#app .win-chip:hover {
    color: #fff;
}

#app .win-chip.is-on {
    background: var(--blue);
    color: #fff;
}

#app .win-hero__main,
#app .win-hero__main img,
#app .win-hero__main swiper-container {
    border-radius: 24px;
}

#app .mf-lobby-banners {
    overflow: hidden;
}

#app .search-input {
    width: max-content;
    max-width: 100%;
}

#app .search-input__input-field {
    width: 168px;
    background: rgba(179, 182, 189, 0.12) !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--text);
    height: 44px;
}

#app .search-input__input-field::placeholder {
    color: var(--muted);
    font-weight: 500;
}

#app .search-input__icon {
    color: var(--muted) !important;
}

#app .DefaultGames-CategoryIcon {
    display: none !important;
}

#app .QGFJ7 {
    display: none !important;
}

#app .DefaultGames-Title,
#app .Title {
    color: var(--text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#app .m-category-slider__header {
    margin-bottom: 16px;
}

#app .GamesSection swiper-container::part(pagination) {
    display: none;
}

#app .m-prev-next-arrows .m-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px !important;
    background: var(--bg-3) !important;
    box-shadow: none !important;
    padding: 0;
}

#app .m-category-slider__content {
    gap: 12px;
}

#app .m-category-slider__content--cols6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#app .Card {
    transition: transform .3s ease-out;
}

#app .Card:hover {
    transform: translateY(-4px);
}

#app .Card:hover .Card-Thumb {
    transform: none !important;
}

#app .Card-Main,
#app .Card-ThumbWrapper,
#app .Card-ThumbWrapper:before,
#app .Card-Image,
#app .Card-Thumb img {
    border-radius: 10px !important;
}

#app .Card-Main {
    height: auto !important;
    flex-grow: 0 !important;
}

#app .Card-ThumbWrapper {
    height: 0 !important;
    padding-top: 133.33% !important;
    background: var(--bg-3) !important;
    overflow: hidden;
}

#app .Card-ThumbWrapper:before {
    display: none !important;
    padding: 0 !important;
    content: none !important;
}

#app .Card-Image,
#app .Card-Thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#app .Card-Footer {
    display: none !important;
}

#app .Card-Overlay {
    background: transparent !important;
    opacity: 1 !important;
    border-radius: 10px !important;
}

#app .Card-PlayBtn {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#app .Card-PlayBtn .m-button-content {
    display: none !important;
}

#app .Provider-Card,
#app .ProvidersSection img {
    border-radius: 14px;
    background: var(--bg-2);
}

#app .PageSectionTitle,
#app .PageSectionTitle-Content,
#app .WalletTitle {
    color: var(--text);
    font-size: 22px;
    font-weight: 750;
}

#app .WalletCard,
#app .WalletCard-Content,
#app .WalletCardFooter,
#app .RewardScale-Table,
#app .daily-bonus,
#app .bonuses-list,
#app .ReferralPageOverview,
#app .profile-card,
#app .ProfileCard,
#app .account-card {
    background: var(--bg-2) !important;
    border: 1px solid var(--line);
    border-radius: 16px !important;
    color: var(--text);
}

#app .WalletCardAmount-Balance,
#app .WalletCardAmount-Title,
#app .RewardScale-Th,
#app .mission-section-title {
    color: var(--text) !important;
}

#app .WalletCardAmount:before {
    background: var(--green) !important;
}

#app .m-button--primary:not(.Card-PlayBtn),
.modal .m-button--primary {
    background: var(--green) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
}

#app .m-button--primary:not(.Card-PlayBtn) .m-button-content,
.modal .m-button--primary .m-button-content {
    color: #fff !important;
    font-weight: 700;
}

#app .m-tabs {
    gap: 8px;
}

#app .m-tabs-item-content {
    color: var(--muted);
    padding: 10px 4px;
}

#app .m-tabs-item-content.active {
    color: #fff !important;
}

#app .m-tabs-item-content.active:after {
    background: var(--blue) !important;
    height: 2px;
}

#app .form-control,
#app .form-select,
.modal .form-control,
.modal .form-select,
.modal input.form-control,
.modal .m-input-content input {
    background: #141415 !important;
    color: #f0f2f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

#app footer.bg-gray-800 {
    background: var(--bg) !important;
    border-top: 1px solid var(--line);
}

#app footer h2 {
    color: var(--text);
    font-size: 14px;
}

#app footer a,
#app footer p {
    color: var(--muted);
}

.modal-content {
    background: #1d1e20;
    color: #f0f2f5;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.login-form-content-title,
.modal-title {
    color: #f0f2f5;
}

.modal-backdrop.show {
    opacity: 0.72;
}

#app .dropdown-menu,
#app .NavDropdown,
#app .NavDropdown-Content {
    background: #1d1e20;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: #f0f2f5;
}

#app .NavItem:hover,
#app .NavDropdown-NavLink:hover {
    background: rgba(255, 255, 255, 0.06);
}

#app .mobile-nav {
    height: 60px;
    background: rgba(20, 20, 21, 0.96);
    backdrop-filter: blur(16px);
    border: 0;
    border-top: 1px solid var(--line);
    padding-top: 6px;
}

#app .mobile-nav__item,
#app .mobile-nav__icon,
#app .mobile-nav__text {
    color: var(--muted);
}

#app .mobile-nav__text {
    font-size: 10px;
    font-weight: 650;
}

#popup {
    background: rgba(0, 0, 0, 0.72);
}

#popup .popup-content {
    background: #1d1e20;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: #f0f2f5;
}

@media (min-width: 769px) {
    .modal-content {
        border-radius: 20px;
    }

    #app .win-tabs {
        display: flex;
    }
}

@media (max-width: 768px) {
    #app .lobby {
        padding: 8px 12px 24px;
    }

    .modal-content {
        border-radius: 16px 16px 0 0 !important;
        border: 0;
    }

    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
        align-items: flex-end;
    }

    #app .main-nav-content {
        height: 60px;
    }
}

@media (min-width: 768px) {
    #app .m-category-slider__content--cols6 {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (min-width: 1024px) {
    #app .m-category-slider__content--cols6 {
        gap: 4px !important;
    }
}

@media (min-width: 1440px) {
    #app .m-category-slider__content--cols6 {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }
}

.modal-dialog {
    max-width: 440px;
}

.modal-content {
    background: #1d1e20 !important;
    color: #f0f2f5;
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.depositBannerDiv,
.loginImageBanner {
    display: none !important;
}

.modal .m-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 12px !important;
    background: rgba(179, 182, 189, 0.16) !important;
    box-shadow: none !important;
}

.modal .modal-body {
    padding: 8px 20px 24px !important;
}

.modal .m-tabs {
    display: flex;
    gap: 0;
    margin: 12px 0 16px;
    padding: 2px;
    border-radius: 12px;
    background: rgba(179, 182, 189, 0.12);
}

.modal .m-tabs-item {
    flex: 1;
}

.modal .m-tabs-item-content {
    justify-content: center;
    width: 100%;
    height: 36px;
    border-radius: 10px;
    color: #9aa1b1;
}

.modal .m-tabs-item-content.active {
    background: #0075ff !important;
    color: #fff !important;
}

.modal .m-tabs-item-content.active:after {
    display: none !important;
}

.modal .m-input,
.modal .form-control,
.modal .form-select {
    background: rgba(179, 182, 189, 0.12) !important;
    border: 0 !important;
    border-radius: 12px !important;
    min-height: 48px;
    height: 48px;
    color: #f0f2f5 !important;
    box-shadow: none !important;
}

.modal .m-input-content input,
.modal .m-input input,
.modal textarea {
    background: transparent !important;
    border: 0 !important;
    color: #f0f2f5 !important;
    box-shadow: none !important;
}

.modal .m-input-content-label,
.modal .m-input-prepend {
    color: #9aa1b1 !important;
}

.modal .login-form,
.modal .registration-form {
    width: 100%;
    padding: 0;
    align-items: stretch;
}

.modal .login-form-content,
.modal .registration-form-content {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal .login-form-actions,
.modal .login-form-actions > button,
.modal .registration-form .m-button--primary {
    width: 100%;
}

.modal .login-form-actions > button,
.modal .m-button--primary {
    height: 44px !important;
    border-radius: 12px !important;
    background: #00b24b !important;
}

.modal .registerLogin,
.modal .login-form-content-title2 {
    color: #9aa1b1;
    text-align: center;
    font-size: 13px;
}

.modal .registerLogin button {
    color: #fff;
    background: none;
    border: 0;
    font-weight: 600;
}

@media (min-width: 1280px) {
    :root {
        --nav-sidebar-width: 280px;
    }

    #app .app {
        height: 100dvh;
    }

    #app .nav-sidebar {
        align-self: stretch;
        flex: 0 0 280px;
        height: 100% !important;
        min-height: 100%;
    }

    #app .nav-sidebar-expanded {
        display: flex !important;
        height: 100% !important;
        min-height: 0;
        flex-direction: column;
    }

    #app .nav-sidebar,
    #app .nav-sidebar-content {
        height: 100% !important;
        min-height: 0;
    }

    #app .nav-sidebar-content {
        width: 280px;
        overflow: hidden;
    }

    #app .nav-sidebar-expanded-content {
        height: 100% !important;
        min-height: 0;
    }
}

@media (max-width: 1279px) {
    #app .nav-sidebar.opened {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 220;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        background: #1d1e20;
        box-shadow: 16px 0 48px rgba(0, 0, 0, 0.5);
    }

    #app .nav-sidebar.opened::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: -1;
    }

    #app .nav-sidebar.opened .nav-sidebar-content,
    #app .nav-sidebar.opened .nav-sidebar-expanded {
        width: 280px;
        height: 100%;
        display: flex;
    }

    #app .nav-sidebar.opened .nav-sidebar-expanded {
        flex-direction: column;
    }
}

#app .nav-sidebar-expanded-scrollY > :not(.win-side) {
    display: none !important;
}

#app .nav-sidebar-header {
    display: none !important;
}

#app .main-nav .main-nav-Logo {
    display: flex !important;
}

#app .nav-sidebar-expanded-scrollY {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px !important;
    gap: 8px;
}

#app .win-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-height: 100%;
}

#app .win-side-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

#app .win-ico {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex: 0 0 20px;
    display: block;
    color: #9aa1b1;
}

#app .win-side-link.is-on .win-ico,
#app .win-side-link:hover .win-ico,
#app .win-side-login .win-ico {
    color: #f0f2f5;
}

#app .win-side-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 56px;
    padding: 0 12px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(102deg, #363e35 0%, #9aaa97 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

#app .win-side-banner__copy {
    display: flex;
    flex-direction: column;
    max-width: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

#app .win-side-banner__copy small,
#app .win-side-banner__copy strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

#app .win-side-banner__art {
    width: 64px;
    height: 56px;
    flex: none;
    position: relative;
}

#app .win-side-banner__art:before,
#app .win-side-banner__art:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff4b0, #e2b83a 46%, #8d6810 78%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

#app .win-side-banner__art:before {
    width: 34px;
    height: 34px;
    right: 2px;
    top: 4px;
}

#app .win-side-banner__art:after {
    width: 24px;
    height: 24px;
    right: 26px;
    bottom: 6px;
}

#app .win-side-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#app .win-side-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    color: #f0f2f5 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

#app .win-side-link svg.win-chev,
#app .win-side-login .win-chev {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-left: auto;
    color: #9aa1b1;
    flex: 0 0 16px;
}

#app .win-side-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

#app .win-side-link.is-on {
    background: rgba(255, 255, 255, 0.16);
}

#app .win-side-link.is-on svg {
    color: #f0f2f5;
}

#app .win-side-sep {
    height: 1px;
    margin: 4px 8px;
    background: rgba(255, 255, 255, 0.08);
}

#app .win-hero__main swiper-container {
    aspect-ratio: 2.625 / 1;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#app .win-hero__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 2.625 / 1;
    display: block;
}

#app .win-hero__main swiper-container::part(button-prev),
#app .win-hero__main swiper-container::part(button-next) {
    display: none;
}

#app swiper-container.grade {
    display: block !important;
    height: auto !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
}

#app .GamesSection swiper-slide {
    height: auto;
}

#app .Card-Main {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#app .win-footer {
    background: transparent;
    color: #9aa1b1;
    border: 0;
    margin: 0;
    padding: 40px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

#app .win-footer__head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

#app .win-footer__logo {
    display: flex;
    flex: none;
}

#app .win-footer__logo img {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

#app .win-footer__line {
    flex: 1;
    height: 1px;
    background: rgba(179, 182, 189, 0.2);
}

#app .win-footer__banners {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

#app .win-fcard,
#app .win-footer__partners {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 152px;
    padding: 16px;
    border-radius: 16px;
    background: #1d1e20;
    color: #f0f2f5 !important;
    text-decoration: none;
}

#app .win-fcard strong,
#app .win-footer__partners strong {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

#app .win-fcard span,
#app .win-footer__partners span {
    color: #9aa1b1;
    font-size: 13px;
}

#app .win-fcard em {
    margin-top: auto;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}

#app .win-fcard b {
    color: #00b24b;
}

#app .win-footer__mid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

#app .win-footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

#app .win-footer__partners {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

#app .win-footer__partners a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    color: #f0f2f5 !important;
    text-decoration: none;
}

#app .win-footer__partners a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#app .win-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

#app .win-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#app .win-footer__socials a {
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    background: rgba(179, 182, 189, 0.12);
    color: #f0f2f5 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

#app .win-footer__bottom p {
    margin: 0;
    color: #9aa1b1;
    font-size: 13px;
}

#app .win-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

#app .win-footer h2 {
    margin: 0 0 10px;
    color: #f0f2f5;
    font-size: 14px;
    font-weight: 700;
}

#app .win-footer section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#app .win-footer a {
    color: #9aa1b1;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

#app .win-footer a:hover {
    color: #f0f2f5;
}

#app .win-footer__base {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#app .win-18 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    border: 2px solid #9aa1b1;
    color: #f0f2f5;
    font-size: 12px;
    font-weight: 800;
}

#app .win-footer__base p {
    margin: 0;
    color: #9aa1b1;
    font-size: 12px;
    line-height: 1.45;
}

@media (min-width: 768px) {
    #app .win-footer__nav {
        grid-template-columns: 180px 1fr;
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    #app .win-footer {
        padding: 40px 48px 32px;
        gap: 40px;
    }

    #app .win-footer__banners {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #app .win-footer__mid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    #app .win-footer__nav section:last-child {
        display: block;
        columns: 2;
        column-gap: 32px;
    }

    #app .win-footer__nav section:last-child h2,
    #app .win-footer__nav section:last-child a {
        break-inside: avoid;
    }

    #app .win-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

#app .lobby section,
#app .win-footer section {
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100%;
}

#app .win-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

#app .win-hero__main {
    min-width: 0;
    height: 220px;
    border-radius: 24px;
    overflow: hidden;
}

#app .win-hero__main swiper-container,
#app .win-hero__main swiper-slide,
#app .win-hero__main a,
#app .win-hero__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#app .win-hero__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

#app .win-mini {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 112px;
    padding: 16px;
    border-radius: 16px;
    color: #fff !important;
    text-decoration: none;
    overflow: hidden;
}

#app .win-mini span {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}

#app .win-mini strong {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

#app .win-mini--money {
    background: linear-gradient(115deg, #24362c 0%, #8ea48c 100%);
}

#app .win-mini--bonus {
    background: linear-gradient(115deg, #1a2740 0%, #3c6eae 100%);
}

#app .win-side-login {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #f0f2f5;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#app .win-side-login__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3a3d44;
    flex: 0 0 auto;
}

#app .win-chev {
    margin-left: auto;
    color: #9aa1b1;
    flex: 0 0 auto;
}

#app .win-hero__main swiper-slide,
#app .win-hero__main a {
    display: block;
    height: 100%;
}

#app .win-hero__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}

#app .win-week,
#app .win-side-promo {
    position: relative;
    flex: 1 1 0;
    min-height: 96px;
    border-radius: 16px;
    overflow: hidden;
    background: #1d1e20 center / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#app .win-side-promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#app .win-week__shade {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.72));
    color: #fff;
}

#app .win-week__shade span,
#app .win-week__shade em {
    font-size: 12px;
    font-style: normal;
    color: #d5d8de;
}

#app .win-week__shade strong {
    font-size: 16px;
    line-height: 1.2;
}

#app .win-week__shade button {
    margin-top: 8px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #00b24b;
    color: #fff;
    font-weight: 700;
    width: fit-content;
    padding: 0 16px;
}

#app .win-search {
    display: flex;
    gap: 12px;
    width: 100%;
}

#app .win-search__field {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(179, 182, 189, 0.12);
    color: #9aa1b1;
}

#app .win-search__field input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f0f2f5;
    font-size: 14px;
    font-weight: 600;
}

#app .win-search__field input::placeholder {
    color: #9aa1b1;
    font-weight: 600;
}

#app .win-search__providers {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    background: rgba(179, 182, 189, 0.12);
    color: #f0f2f5 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

#app .win-cats {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: -6px;
}

#app .win-cats::-webkit-scrollbar {
    display: none;
}

#app .win-cat {
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    color: #9aa1b1 !important;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#app .win-cat.is-on,
#app .win-cat:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f0f2f5 !important;
}

#app .win-pill {
    margin-left: auto;
    background: #ff7a1a;
    color: #fff;
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

#app .win-app {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 16px;
    text-decoration: none;
    color: #fff !important;
    background: linear-gradient(120deg, #123a66, #1d1e20 70%);
}

#app .win-app strong {
    font-size: 14px;
}

#app .win-app span,
#app .win-side-lang {
    color: #9aa1b1;
    font-size: 12px;
}

#app .win-side-lang {
    padding: 4px 8px 8px;
}

#app .win-footer__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

#app .win-footer__top p {
    margin: 0;
    flex: 1;
    color: #9aa1b1;
    font-size: 13px;
}

#app .win-lang {
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(179, 182, 189, 0.12);
    color: #f0f2f5;
    font-size: 13px;
    font-weight: 700;
}

#app .win-footer__layout {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(180px, 1fr) minmax(220px, 0.9fr);
    gap: 28px 32px;
    align-items: start;
}

#app .win-footer__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#app .win-appcard,
#app .win-supportcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    text-decoration: none;
    background: #1d1e20;
    color: #f0f2f5 !important;
}

#app .win-appcard strong,
#app .win-supportcard strong {
    font-size: 14px;
}

#app .win-appcard span,
#app .win-supportcard span {
    color: #9aa1b1;
    font-size: 12px;
}

#app .win-appcard em,
#app .win-supportcard em {
    margin-top: 8px;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}

#app .win-supportcard b {
    color: #00b24b;
}

#app .win-hub {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
}

#app .win-hub__kicker {
    margin: 0;
    color: #9aa1b1;
    font-size: 13px;
    font-weight: 600;
}

#app .win-hub h1 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.03em;
}

#app .win-hub__lead {
    margin: 0 0 8px;
    max-width: 720px;
    color: #9aa1b1;
    font-size: 15px;
}

#app .win-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#app .win-hub__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
    padding: 18px;
    border-radius: 16px;
    background: #1d1e20;
}

#app .win-hub__card h2 {
    margin: 0;
    font-size: 18px;
}

#app .win-hub__card p {
    margin: 0;
    color: #9aa1b1;
    font-size: 14px;
    flex: 1;
}

#app .win-hub__cta {
    height: 40px;
    margin-top: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: #00b24b;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1023px) {
    #app .win-hero,
    #app .win-hub__grid {
        grid-template-columns: 1fr;
    }

    #app .win-hero__side {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    #app .win-hero__side,
    #app .win-hub__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    #app .win-hero {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 335px);
    }

    #app .win-hero__side {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

@media (min-width: 1280px) {
    :root {
        --nav-sidebar-width: 280px;
    }

    #app .lobby {
        padding: 24px 48px 64px;
    }

    #app .main-nav-content {
        height: 68px;
        padding: 0 48px;
    }

    #app .nav-sidebar-content,
    #app .nav-sidebar-expanded-content {
        width: 280px;
    }

    #app .win-hero {
        grid-template-columns: minmax(0, 1fr) 335px;
        height: 272px;
    }

    #app .win-hero__main,
    #app .win-hero__side {
        height: 272px;
    }

    #app .win-mini {
        flex: 1 1 0;
        min-height: 0;
    }
}