/* =========================================================
   1XBETWIN BLUE THEME
   ========================================================= */

:root {
    --text_color_black: #FFFFFF !important;

    --main-color: #168BFF !important;

    --main_gradient-color:
        linear-gradient(90deg, #087FF5, #00B7FF) !important;

    --main_gradient-color2:
        linear-gradient(145deg, #12395E, #071421) !important;

    --bg_color_L1: #050A12 !important;
    --bg_color_L2: #0B1828 !important;
    --bg_color_L3: #102A45 !important;

    --text_color_L1: #FFFFFF !important;
    --text_color_L2: #D1DCE8 !important;
    --text_color_L3: #8293A7 !important;
    --text_color_L4: #FFFFFF !important;
}


/* BODY */

html,
body {
    background: #000 !important;
    color: #fff !important;
}

#app {
    background: #050A12 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.navbar {
    background: #07111D !important;
}

.navbar__content {
    background: #07111D !important;
    border-bottom: 1px solid #12385D !important;
}

.navbar__content-center,
.navbar__content-center span {
    color: #fff !important;
}

.navbar__content-right svg {
    color: #168BFF !important;
}


/* =========================================================
   BANNER
   ========================================================= */

.swiper_box {
    background: #050A12 !important;
}

.swiper_box .my-swipe img {
    border-radius: .26667rem !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) !important;
}


/* =========================================================
   NOTICE BAR
   ========================================================= */

.noticeBar__container {
    background:
        linear-gradient(90deg,#0B1C30,#0A2138) !important;

    border: 1px solid #1768A8 !important;

    border-radius: .16rem !important;

    color: #fff !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.5),
        0 0 8px rgba(0,132,255,.12) !important;
}

.noticeBar__container * {
    color: #fff !important;
}


/* =========================================================
   HOME CATEGORY CARDS
   ========================================================= */

/* THIS IS THE IMPORTANT PART */

.hot_container .platform .list .item,
.hot_container .popular .list .item {

    background:
        linear-gradient(
            145deg,
            #12395E 0%,
            #081522 65%,
            #06101B 100%
        ) !important;

    border: 1px solid #1768A8 !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.55),
        inset 0 0 10px rgba(0,132,255,.10) !important;

    border-radius: .18rem !important;
}


/* Images */

.hot_container .platform .list .item img,
.hot_container .popular .list .item img {
    border-radius: .16rem !important;
}


/* =========================================================
   CATEGORY TITLE
   ========================================================= */

.hot_container .title {
    color: #fff !important;
}

.hot_container .title span {
    color: #fff !important;
}

.hot_container .title:before {
    background: #168BFF !important;

    box-shadow:
        0 0 7px rgba(22,139,255,.6) !important;
}


/* =========================================================
   ODDS
   ========================================================= */

.hot_container .platform .list .win-odds,
.hot_container .popular .list .win-odds {

    background:
        linear-gradient(90deg,#081522,#102A45) !important;

    color: #fff !important;

    border: 1px solid #173D63 !important;
}

.hot_container .platform .list .win-odds span,
.hot_container .popular .list .win-odds span {
    color: #fff !important;
}

.hot_container .platform .list .win-odds .win-p,
.hot_container .popular .list .win-odds .win-p {

    background:
        linear-gradient(
            90deg,
            #087FF5,
            #00B7FF
        ) !important;
}


/* =========================================================
   OTHER GAME CARDS
   ========================================================= */

.onlineGamesItem {
    background:
        linear-gradient(
            145deg,
            #12395E,
            #071421
        ) !important;

    border: 1px solid #1768A8 !important;
}


/* =========================================================
   GAME LIST
   ========================================================= */

.gamesList__container-title {
    color: #fff !important;
}

.gamesList__container-title:before {
    background: #168BFF !important;
}

.gamesList__container-list__item {
    background:
        linear-gradient(
            145deg,
            #12395E,
            #071421
        ) !important;

    border: 1px solid #1768A8 !important;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.tabbar__container {
    background: #07111D !important;

    border-top: 1px solid #173D63 !important;

    box-shadow:
        0 -5px 20px rgba(0,0,0,.7) !important;
}

.tabbar__container-item {
    color: #9AA8B7 !important;
}

.tabbar__container-item.active {
    color: #168BFF !important;
}

.tabbar__container-item.active svg {
    color: #168BFF !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.van-button--primary {
    background:
        linear-gradient(
            90deg,
            #087FF5,
            #00B7FF
        ) !important;

    border-color: #168BFF !important;

    color: #fff !important;
}


/* =========================================================
   POPUPS
   ========================================================= */

.van-popup,
.van-dialog {
    background: #081522 !important;
    color: #fff !important;
}

.van-cell {
    background: #0B1828 !important;
    color: #fff !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 500px) {

    .hot_container .platform .list,
    .hot_container .popular .list {
        grid-template-columns: repeat(3,1fr) !important;
        gap: .12rem !important;
    }

    .hot_container .platform .list .item,
    .hot_container .popular .list .item {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* =========================================================
   BLUE THEME - GAME MENU
   Remove old GOLD background images
   ========================================================= */

.game_menu .menu_box1 div[data-v-36804f75]:nth-child(1),
.game_menu .menu_box1 div[data-v-36804f75]:nth-child(2),
.game_menu .menu_box1 div[data-v-36804f75]:nth-child(3) {
    background-image: none !important;

    background:
        linear-gradient(
            145deg,
            #123F6A 0%,
            #0A2038 55%,
            #06121F 100%
        ) !important;

    border: 1px solid #1768A8 !important;

    box-shadow:
        inset 0 0 15px rgba(0, 145, 255, .12),
        0 4px 12px rgba(0, 0, 0, .55) !important;
}


/* SECOND ROW - SPORTS / CASINO / RUMMY */

.game_menu .menu_box2[data-v-36804f75] {
    background-image: none !important;

    background:
        linear-gradient(
            145deg,
            #123F6A 0%,
            #0A2038 55%,
            #06121F 100%
        ) !important;

    border: 1px solid #1768A8 !important;

    box-shadow:
        inset 0 0 15px rgba(0, 145, 255, .12),
        0 4px 12px rgba(0, 0, 0, .55) !important;
}


/* FISHING / ORIGINAL */

.game_menu .menu_box3 div[data-v-36804f75]:nth-child(1),
.game_menu .menu_box3 div[data-v-36804f75]:nth-child(2) {
    background-image: none !important;

    background:
        linear-gradient(
            145deg,
            #123F6A 0%,
            #0A2038 55%,
            #06121F 100%
        ) !important;

    border: 1px solid #1768A8 !important;

    box-shadow:
        inset 0 0 15px rgba(0, 145, 255, .12),
        0 4px 12px rgba(0, 0, 0, .55) !important;
}


/* TEXT */

.game_menu .menu_box1 div span,
.game_menu .menu_box2 div span,
.game_menu .menu_box3 div span {
    color: #FFFFFF !important;
}

/* =========================================================
   LOTTERY TEXT
   ========================================================= */

.lotterySlotItem span,
.lotterySlotItem h4 {
    color: #FFFFFF !important;
}

.lotterySlotItem__container,
.lotterySlotItem__container .title,
.lotterySlotItem__container .title .tit,
.lotterySlotItem__container .title .desc {
    color: #FFFFFF !important;
}

/* =========================================================
   WINNING INFORMATION
   ========================================================= */

.luckyWinners__container-wrapper__item-winAmount h1,
.luckyWinners__container-wrapper__item-winAmount span,
.luckyWinners__container-wrapper__item-winAmount {
    color: #FFFFFF !important;
}

/* =========================================================
   DAILY PROFIT RANK - AMOUNT
   ========================================================= */

body #app .dailyProfitRank__content-topThree__item > span:last-of-type {
    background: linear-gradient(
        180deg,
        #168BFF 0%,
        #0755A0 100%
    ) !important;

    color: #FFFFFF !important;

    border: 1px solid #35B6FF !important;

    box-shadow:
        0 0 8px rgba(22, 139, 255, 0.35) !important;
}

body #app .dailyProfitRank__content-list__item span.right-box {
    background: linear-gradient(
        180deg,
        #168BFF 0%,
        #0755A0 100%
    ) !important;

    color: #FFFFFF !important;

    border: 1px solid #35B6FF !important;

    box-shadow:
        0 0 8px rgba(22, 139, 255, 0.35) !important;
}

/* =========================================================
   PREMIUM CENTER PROMOTION BUTTON
   ========================================================= */

.tabbar__container-item:nth-child(3) {
    position: relative !important;
    z-index: 10 !important;
}


/* Main SVG */

.tabbar__container-item:nth-child(3) svg {
    width: 72px !important;
    height: 72px !important;

    filter:
        drop-shadow(0 5px 8px rgba(0, 0, 0, .65))
        drop-shadow(0 0 12px rgba(22, 139, 255, .45))
        !important;
}


/* Main diamond / shield */

.tabbar__container-item:nth-child(3) svg path {
    fill: #0A2947 !important;

    stroke: #168BFF !important;
    stroke-width: 2.5px !important;

    filter:
        drop-shadow(0 0 5px rgba(22, 139, 255, .45))
        !important;
}


/* Hover / active */

.tabbar__container-item:nth-child(3):active svg path {
    fill: #168BFF !important;
}


/* Keep promotion text blue */

.tabbar__container-item:nth-child(3) {
    color: #168BFF !important;
}

/* =========================================================
   NEW 1XBETWIN LOGO
   ========================================================= */

.navbar__content-left img {
    content: url("/assets/images/logo.png") !important;

    width: 120px !important;
    height: auto !important;

    object-fit: contain !important;
}

/* =========================================================
   HOME GAME MENU - CARD LAYOUT
   Row 1: Lottery / Original / Slots
   Row 2: Sports / Casino
   Row 3: Rummy / Fishing
   Artwork: /assets/png/home-menu/<type>.png
   (lottery, flash, slot, sport, video, chess, fish)
   ========================================================= */

.game_menu.gm-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .16rem;
    padding-top: .32rem;
}

.gm-cards .gm-card {
    --c1: #2A8CFF;
    --c2: #0B3C9C;
    --edge: #4FB2FF;
    --glow: rgba(64, 160, 255, .55);

    grid-column: span 3;
    position: relative;
    height: 2.34667rem;
    overflow: hidden;
    isolation: isolate;
    border-radius: .26667rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background:
        radial-gradient(110% 80% at 80% 10%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
    border: 1px solid var(--edge);
    box-shadow:
        inset 0 0 .21333rem rgba(255, 255, 255, .12),
        0 0 .21333rem var(--glow);
    transition: transform .15s ease-out;
}

/* Row 1 */
.gm-cards .gm-card--lottery,
.gm-cards .gm-card--flash,
.gm-cards .gm-card--slot {
    grid-column: span 2;
    height: 2.8rem;
}

/* Row 3 (shorter) */
.gm-cards .gm-card--chess,
.gm-cards .gm-card--fish {
    height: 1.92rem;
}

/* Card colours + glowing edge */
.gm-cards .gm-card--lottery { --c1: #2D8BFF; --c2: #0A2F86; --edge: #5DB8FF; --glow: rgba(64, 160, 255, .6); }
.gm-cards .gm-card--flash   { --c1: #FF4B32; --c2: #7E0B12; --edge: #FF7A5C; --glow: rgba(255, 80, 60, .55); }
.gm-cards .gm-card--slot    { --c1: #A84BFF; --c2: #3A0C82; --edge: #C98BFF; --glow: rgba(170, 90, 255, .55); }
.gm-cards .gm-card--sport   { --c1: #2B7BE6; --c2: #0A2560; --edge: #5DA8FF; --glow: rgba(64, 150, 255, .5); }
.gm-cards .gm-card--video   { --c1: #D92A3A; --c2: #560913; --edge: #FF6B78; --glow: rgba(240, 60, 80, .5); }
.gm-cards .gm-card--chess   { --c1: #E8452A; --c2: #6E0F0F; --edge: #FF7F5E; --glow: rgba(255, 90, 60, .5); }
.gm-cards .gm-card--fish    { --c1: #1E9BFF; --c2: #073B7C; --edge: #5CC4FF; --glow: rgba(50, 170, 255, .55); }

.gm-cards .gm-card:active {
    transform: scale(.97);
}

/* Dark fade at the bottom so the text stays readable */
.gm-cards .gm-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    pointer-events: none;
    z-index: 1;
}

/* New artwork: fills the whole card */
.gm-cards .gm-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Old category image (used until the new artwork is added) */
.gm-cards .gm-card__img.is-fallback {
    top: .05333rem;
    left: auto;
    right: .05333rem;
    width: 58%;
    height: 86%;
    object-fit: contain;
    object-position: right center;
    filter: drop-shadow(0 .08rem .13333rem rgba(0, 0, 0, .45));
}

.gm-cards .gm-card--lottery .gm-card__img.is-fallback,
.gm-cards .gm-card--flash .gm-card__img.is-fallback,
.gm-cards .gm-card--slot .gm-card__img.is-fallback {
    top: .08rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92%;
    height: 62%;
    object-position: center top;
}

/* Title + subtitle */
.gm-cards .gm-card__text {
    position: absolute;
    left: .21333rem;
    right: .21333rem;
    bottom: .16rem;
    z-index: 2;
    text-align: left;
}

html:lang(ar) .gm-cards .gm-card__text {
    text-align: right;
}

.gm-cards .gm-card__text h3 {
    margin: 0;
    font-size: .45333rem;
    line-height: 1.1;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 .02667rem .08rem rgba(0, 0, 0, .7);
}

.gm-cards .gm-card__text p {
    margin: .02667rem 0 0;
    font-size: .21333rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .01333rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 .02667rem .06667rem rgba(0, 0, 0, .7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cards with artwork: the image already has its title, subtitle and border,
   so show the image at its own shape and hide the code-drawn extras. */
.gm-cards .gm-card.has-art {
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: .26667rem;
}

.gm-cards .gm-card--lottery.has-art,
.gm-cards .gm-card--flash.has-art,
.gm-cards .gm-card--slot.has-art {
    aspect-ratio: 250 / 244;
}

.gm-cards .gm-card--sport.has-art,
.gm-cards .gm-card--video.has-art {
    aspect-ratio: 392 / 198;
}

.gm-cards .gm-card--chess.has-art,
.gm-cards .gm-card--fish.has-art {
    aspect-ratio: 392 / 152;
}

.gm-cards .gm-card.has-art::after {
    display: none;
}

/* Kept for screen readers, hidden visually */
.gm-cards .gm-card.has-art .gm-card__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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


/* =========================================================
   LOTTERY CARDS (Win Go / K3 / 5D / Trx Win)
   Markup: __lsiCard() in assets/js/page-home-*.js
   Art:    /assets/png/lottery-cards/<game>-icon.png, <game>-art.png
   ========================================================= */

.lsi-card {
    --edge: #5DB8FF;
    --glow: rgba(64, 160, 255, .45);
    --bg1: #0B2350;
    --bg2: #0A1638;
    position: relative;
    width: 100%;
    height: 3.2rem;
    margin-bottom: .32rem;
    border-radius: .4rem;
    border: .03rem solid var(--edge);
    background: linear-gradient(120deg, var(--bg1) 0%, var(--bg2) 70%);
    box-shadow: 0 0 .26667rem var(--glow), inset 0 0 .4rem rgba(255, 255, 255, .06);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}

.lsi-card:active {
    transform: scale(.98);
}

.lsi-card--wingo { --edge: #FF4D7A; --glow: rgba(255, 70, 120, .45); --bg1: #3A0F33; --bg2: #141238; }
.lsi-card--k3    { --edge: #3A8EFF; --glow: rgba(58, 142, 255, .45); --bg1: #0C2A5E; --bg2: #0A1638; }
.lsi-card--5d    { --edge: #A85BFF; --glow: rgba(168, 91, 255, .45); --bg1: #33106A; --bg2: #170C40; }
.lsi-card--trx   { --edge: #22D6B0; --glow: rgba(34, 214, 176, .4);  --bg1: #0B3D3C; --bg2: #071F27; }

/* Left icon tile */
.lsi-card__icon {
    position: absolute;
    top: .3rem;
    left: .3rem;
    width: 1.17333rem;
    height: 1.17333rem;
    border-radius: .26667rem;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 .05333rem .16rem rgba(0, 0, 0, .45);
}

.lsi-card__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Text block */
.lsi-card__body {
    padding: .26667rem 0 0 1.69333rem;
    max-width: 66%;
}

.lsi-card__title,
.lsi-card__sub,
.lsi-card__hint {
    position: relative;
    z-index: 2;
}

.lsi-card__title {
    font-size: .53333rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    white-space: nowrap;
}

.lsi-card__title em {
    font-style: normal;
}

.lsi-card--wingo .lsi-card__title em { color: #FF4B4B; }
.lsi-card--k3    .lsi-card__title em { color: #3AA0FF; }
.lsi-card--5d    .lsi-card__title em { color: #D3A6FF; }
.lsi-card--trx   .lsi-card__title em { color: #22E07A; }

.lsi-card__sub {
    margin-top: .04rem;
    font-size: .32rem;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
}

.lsi-card__hint {
    margin-top: .04rem;
    font-size: .32rem;
    font-weight: 600;
    white-space: nowrap;
}

.lsi-card__hint b,
.lsi-card__hint i {
    font-style: normal;
    font-weight: 600;
}

.lsi-card__hint .lsi-sep {
    color: #FFFFFF;
    margin: 0 .05333rem;
}

.lsi-card__hint .lsi-suffix { color: #FFFFFF; }
.lsi-c-g { color: #2EE06B; }
.lsi-c-r { color: #FF4545; }
.lsi-c-v { color: #B46BFF; }
.lsi-c-b { color: #3AA0FF; }
.lsi-c-o { color: #FFB020; }

/* Tag pills along the bottom */
.lsi-card__tags {
    position: absolute;
    left: .3rem;
    bottom: .24rem;
    z-index: 2;
    display: flex;
    gap: .10667rem;
    white-space: nowrap;
}

.lsi-tag {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
    height: .53333rem;
    padding: 0 .16rem;
    border-radius: .26667rem;
    border: .02667rem solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    font-size: .25333rem;
    color: #E6ECFF;
}

.lsi-tag i {
    font-style: normal;
    font-size: .26667rem;
}

/* Right artwork, edges faded into the card */
.lsi-card__art {
    position: absolute;
    top: 0;
    right: .5rem;
    height: 100%;
    width: auto;
    max-width: 4.4rem;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 55% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 62% at 55% 50%, #000 62%, transparent 100%);
}

/* Yellow round arrow button */
.lsi-card__go {
    position: absolute;
    right: .2rem;
    top: 50%;
    width: .8rem;
    height: .8rem;
    margin-top: -.4rem;
    border-radius: 50%;
    z-index: 3;
    background: radial-gradient(circle at 35% 30%, #FFE680 0%, #FFC21A 55%, #E09200 100%);
    box-shadow: 0 .05333rem .16rem rgba(0, 0, 0, .5), inset 0 -.04rem .08rem rgba(150, 80, 0, .45);
}

.lsi-card__go::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .21333rem;
    height: .21333rem;
    margin: -.10667rem 0 0 -.16rem;
    border-top: .05333rem solid #1A1A2E;
    border-right: .05333rem solid #1A1A2E;
    transform: rotate(45deg);
}

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


/* =========================================================
   WIN GO GAME PAGE (CSS only - markup/JS untouched)
   Scoped to .WinGo__C so K3 / 5D / TRX pages are not affected.
   Icons: /assets/png/wingo-ui/
   ========================================================= */

#app .WinGo__C {
    background: linear-gradient(180deg, #071334 0%, #050B22 100%);
}

/* ---------- Wallet card ---------- */
#app .WinGo__C .Wallet__C {
    padding: .32rem .32rem 0;
}

#app .WinGo__C .Wallet__C::before {
    display: none;
}

#app .WinGo__C .Wallet__C-balance {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: .18667rem;
    align-items: center;
    padding: .37333rem .26667rem .32rem .21333rem;
    border-radius: .32rem;
    border: .02667rem solid #3D8BFF;
    background: linear-gradient(135deg, #143E92 0%, #0B2058 48%, #081438 100%);
    box-shadow: 0 0 .26667rem rgba(61, 139, 255, .55), inset 0 0 .4rem rgba(80, 160, 255, .15);
    overflow: visible;
}

/* wallet picture (left) */
#app .WinGo__C .Wallet__C-balance::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 1.4rem;
    height: 1.46667rem;
    background: url(/assets/png/wingo-ui/wallet.png) center / contain no-repeat;
}

/* crown + coins (decoration, top right) */
#app .WinGo__C .Wallet__C-balance::after {
    content: "";
    position: absolute;
    top: -.53333rem;
    right: .13333rem;
    width: 3.46667rem;
    height: .86667rem;
    background: url(/assets/png/wingo-ui/crown.png) right top / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

#app .WinGo__C .Wallet__C-balance-l2 {
    display: contents;
}

#app .WinGo__C .Wallet__C-balance-l2 > svg {
    display: none;
}

#app .WinGo__C .Wallet__C-balance-l2 > div {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: .32rem;
    color: #B9C8EA;
    white-space: nowrap;
}

#app .WinGo__C .Wallet__C-balance-l1 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: left;
    min-height: .72rem;
    line-height: .72rem;
    font-size: .53333rem;
    font-weight: 800;
    color: #FFFFFF;
    overflow: visible;
}

#app .WinGo__C .Wallet__C-balance-l1 > div {
    margin: 0;
}

#app .WinGo__C .Wallet__C-balance-l1 > div::after {
    right: -.64rem;
    top: .12rem;
}

#app .WinGo__C .Wallet__C-balance-l3 {
    grid-column: 3;
    grid-row: 1 / 3;
    margin-top: 0;
    gap: .13333rem;
    position: relative;
    z-index: 2;
}

#app .WinGo__C .Wallet__C-balance-l3 > div {
    width: auto;
    min-width: 1.92rem;
    height: .90667rem;
    line-height: .85333rem;
    padding: 0 .18667rem;
    border-radius: .21333rem;
    font-size: .34667rem;
    font-weight: 700;
    border: .02667rem solid #FF6B7D;
    background: linear-gradient(180deg, #F2384F 0%, #B5122B 100%);
    box-shadow: 0 0 .21333rem rgba(255, 60, 90, .55), inset 0 .02667rem 0 rgba(255, 255, 255, .35);
}

#app .WinGo__C .Wallet__C-balance-l3 > div + div {
    border-color: #6DFF9B;
    background: linear-gradient(180deg, #2CD866 0%, #0E8F3B 100%);
    box-shadow: 0 0 .21333rem rgba(44, 216, 102, .55), inset 0 .02667rem 0 rgba(255, 255, 255, .35);
}

/* ---------- Notice bar ---------- */
body #app .WinGo__C .noticeBar__container {
    margin: .26667rem .32rem 0 !important;
    width: auto !important;
    min-height: 1.06667rem;
    padding: .13333rem .21333rem !important;
    background: linear-gradient(90deg, #0C1D46, #0A1838) !important;
    border: .02667rem solid rgba(80, 150, 255, .45) !important;
    border-radius: .26667rem !important;
}

body #app .WinGo__C .noticeBar__container button {
    height: .66667rem;
    padding: 0 .26667rem;
    width: auto;
    border: 0;
    border-radius: .33333rem;
    background: linear-gradient(180deg, #3D95FF 0%, #1659E0 100%);
    box-shadow: 0 0 .16rem rgba(64, 150, 255, .6);
    font-weight: 600;
}

/* ---------- Game interval tabs ---------- */
#app .WinGo__C .GameList__C {
    width: auto;
    height: auto;
    margin: .26667rem .32rem 0;
    gap: .16rem;
    background: transparent;
}

#app .WinGo__C .GameList__C-item {
    flex: 1;
    width: auto;
    height: 2.29333rem;
    border-radius: .26667rem;
    border: .02667rem solid rgba(80, 140, 255, .35);
    background: linear-gradient(180deg, #13295C 0%, #0B1A40 100%);
    box-shadow: inset 0 0 .32rem rgba(60, 120, 255, .15);
}

#app .WinGo__C .GameList__C-item > div {
    padding-top: 1.36rem;
    line-height: .42667rem;
    font-size: .32rem;
    font-weight: 600;
    color: #C9D6F5;
    background-image: url(/assets/png/wingo-ui/watch.png);
    background-size: 1.06667rem;
    background-position: center .2rem;
}

#app .WinGo__C .GameList__C-item.active {
    border-color: #7CC0FF;
    background: linear-gradient(160deg, #2F8CFF 0%, #1450D8 60%, #0D3AA8 100%);
    box-shadow: 0 0 .32rem rgba(64, 150, 255, .75), inset 0 0 .26667rem rgba(255, 255, 255, .25);
}

#app .WinGo__C .GameList__C-item.active > div {
    color: #FFFFFF;
    background-image: url(/assets/png/wingo-ui/watch.png);
    filter: brightness(1.6) drop-shadow(0 0 .08rem rgba(255, 255, 255, .5));
}

/* ---------- Period / timer panel ---------- */
#app .WinGo__C .TimeLeft__C {
    width: auto;
    height: auto;
    margin: .26667rem .32rem 0;
    padding: .26667rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas:
        "name rule"
        "num  text"
        "num  time"
        "num  id";
    column-gap: .2rem;
    align-items: stretch;
    background: linear-gradient(160deg, #10285E 0%, #0A1840 100%);
    border: .02667rem solid #3D7DFF;
    border-radius: .32rem;
    box-shadow: 0 0 .26667rem rgba(61, 125, 255, .45);
    color: #FFFFFF;
}

#app .WinGo__C .TimeLeft__C > div {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

#app .WinGo__C .TimeLeft__C-name {
    grid-area: name;
    align-self: center;
    height: .66667rem;
    line-height: .66667rem;
    padding: 0 0 0 .66667rem;
    font-size: .42667rem;
    font-weight: 700;
    white-space: nowrap;
    background: url(/assets/png/wingo-ui/chart.png) left center / .53333rem no-repeat;
}

#app .WinGo__C .TimeLeft__C-rule {
    grid-area: rule;
    justify-self: end;
    align-self: center;
    width: auto;
    height: .64rem;
    padding: 0 .24rem;
    font-size: .29333rem;
    color: #FFFFFF;
    border: .02667rem solid #4F9BFF;
    background: linear-gradient(180deg, #1D4FB8 0%, #11338A 100%);
    box-shadow: 0 0 .16rem rgba(79, 155, 255, .5);
}

#app .WinGo__C .TimeLeft__C-rule svg {
    color: #FFFFFF;
}

/* Recent results box */
#app .WinGo__C .TimeLeft__C > .TimeLeft__C-num {
    grid-area: num;
    position: relative;
    height: auto;
    margin-top: .2rem;
    padding: .72rem .16rem .2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: .08rem;
    border: .02667rem solid rgba(80, 150, 255, .45);
    border-radius: .21333rem;
    background: rgba(8, 20, 55, .7);
}

#app .WinGo__C .TimeLeft__C-num::before {
    content: "Recent Results";
    position: absolute;
    top: .16rem;
    left: .18667rem;
    font-size: .30667rem;
    font-weight: 600;
    color: #52B6FF;
}

#app .WinGo__C .TimeLeft__C-num > div {
    width: .66667rem;
    height: .66667rem;
    background-size: .66667rem;
    filter: drop-shadow(0 0 .05333rem rgba(255, 255, 255, .25));
}

#app .WinGo__C .TimeLeft__C-num > div + div {
    margin-left: 0;
}

/* Timer box (3 stacked cells look like one box) */
#app .WinGo__C .TimeLeft__C-text,
#app .WinGo__C .TimeLeft__C-time,
#app .WinGo__C .TimeLeft__C-id {
    background: rgba(8, 20, 55, .7);
    border-left: .02667rem solid rgba(80, 150, 255, .45);
    border-right: .02667rem solid rgba(80, 150, 255, .45);
    text-align: center;
}

#app .WinGo__C .TimeLeft__C-text {
    grid-area: text;
    height: auto;
    margin-top: .2rem;
    padding-top: .13333rem;
    line-height: .4rem;
    font-size: .29333rem;
    font-weight: 600;
    color: #FF8A8A;
    border-top: .02667rem solid rgba(80, 150, 255, .45);
    border-radius: .21333rem .21333rem 0 0;
}

#app .WinGo__C .TimeLeft__C-time {
    grid-area: time;
    height: auto;
    line-height: normal;
    padding: .08rem 0;
    justify-content: center;
    align-items: center;
    gap: .08rem;
}

#app .WinGo__C .TimeLeft__C-time > div,
#app .WinGo__C .TimeLeft__C-time > div:first-child,
#app .WinGo__C .TimeLeft__C-time > div:last-child {
    width: .58667rem;
    height: .8rem;
    line-height: .8rem;
    padding: 0;
    font-size: .53333rem;
    font-weight: 800;
    color: #FFFFFF;
    border-radius: .10667rem;
    border: .02667rem solid #3D7DFF;
    background: linear-gradient(180deg, #17357A 0%, #0A1A45 100%);
}

#app .WinGo__C .TimeLeft__C-time > div + div {
    margin-left: 0;
}

#app .WinGo__C .TimeLeft__C-time > div:nth-child(3) {
    width: auto;
    border: 0;
    background: none;
}

#app .WinGo__C .TimeLeft__C-time > div:nth-child(4),
#app .WinGo__C .TimeLeft__C-time > div:last-child {
    color: #FF6B6B;
    border-color: #FF4D5E;
    background: linear-gradient(180deg, #5A0F1D 0%, #2E0710 100%);
}

#app .WinGo__C .TimeLeft__C-id {
    grid-area: id;
    height: auto;
    line-height: .4rem;
    padding: .02667rem 0 .16rem;
    font-size: .30667rem;
    font-weight: 700;
    color: #FFFFFF;
    border-bottom: .02667rem solid rgba(80, 150, 255, .45);
    border-radius: 0 0 .21333rem .21333rem;
}

/* ---------- Betting panel ---------- */
#app .WinGo__C .Betting__C {
    width: auto;
    height: auto;
    margin: .26667rem .32rem 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* Green / Violet / Red */
#app .WinGo__C .Betting__C-head {
    height: auto;
    gap: .16rem;
}

#app .WinGo__C .Betting__C-head > div {
    flex: 1;
    width: auto;
    height: 1.25333rem;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .05333rem;
    font-size: .45333rem;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 .02667rem .08rem rgba(0, 0, 0, .45);
    border-radius: .21333rem;
    border: .04rem solid transparent;
    background-repeat: no-repeat;
    background-position: center bottom, center top, center;
    background-size: 100% 78%, 100% 100%, 100% 100%;
}

#app .WinGo__C .Betting__C-head > div::after {
    font-size: .30667rem;
    font-weight: 600;
}

/* layers: graph (svg) + glossy top highlight + base colour */
#app .WinGo__C .Betting__C-head > .Betting__C-head-g {
    border-color: #8DFFAA;
    background-image:
        url(/assets/png/wingo-ui/graph-green.svg),
        linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(160deg, #4CFF7A 0%, #17C449 40%, #0B8F33 75%, #066B24 100%);
    box-shadow: 0 0 .32rem rgba(60, 255, 110, .65), inset 0 0 .26667rem rgba(220, 255, 120, .35);
}

#app .WinGo__C .Betting__C-head-g::after { content: "1,3,7,9"; }

#app .WinGo__C .Betting__C-head > .Betting__C-head-p {
    border-color: #E2B3FF;
    background-image:
        url(/assets/png/wingo-ui/graph-violet.svg),
        linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(160deg, #C46BFF 0%, #9634F5 40%, #6A1BD0 75%, #4A0E99 100%);
    box-shadow: 0 0 .32rem rgba(190, 90, 255, .65), inset 0 0 .26667rem rgba(255, 190, 255, .35);
}

#app .WinGo__C .Betting__C-head-p::after { content: "0,5"; }

#app .WinGo__C .Betting__C-head > .Betting__C-head-r {
    border-color: #FF9EAA;
    background-image:
        url(/assets/png/wingo-ui/graph-red.svg),
        linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(160deg, #FF5A6B 0%, #F0263D 40%, #B8102A 75%, #8A0A1E 100%);
    box-shadow: 0 0 .32rem rgba(255, 70, 95, .65), inset 0 0 .26667rem rgba(255, 180, 190, .35);
}

#app .WinGo__C .Betting__C-head-r::after { content: "2,4,6,8"; }

/* Number balls */
#app .WinGo__C .Betting__C-numC {
    height: auto;
    margin-top: .26667rem;
    padding: .26667rem .21333rem .32rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    row-gap: .29333rem;
    background: linear-gradient(180deg, #0F2558 0%, #0A1A42 100%);
    border: .02667rem solid rgba(80, 150, 255, .45);
    border-radius: .26667rem;
    box-shadow: inset 0 0 .4rem rgba(40, 100, 255, .2);
}

#app .WinGo__C .Betting__C-numC > div {
    position: relative;
    height: 1.46667rem;
}

#app .WinGo__C .Betting__C-numC > div::after {
    content: "";
    position: absolute;
    left: .13333rem;
    right: .13333rem;
    bottom: -.13333rem;
    height: .26667rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(90, 170, 255, .55) 0%, rgba(90, 170, 255, 0) 70%);
    pointer-events: none;
}

/* Random + multipliers */
#app .WinGo__C .Betting__C-multiple {
    height: auto;
    margin-top: .26667rem;
    gap: .10667rem;
}

#app .WinGo__C .Betting__C-multiple-l {
    flex: 1.5;
    width: auto;
    height: .82667rem;
    line-height: .77333rem;
    font-size: .34667rem;
    font-weight: 700;
    color: #FFCF5A;
    border: .02667rem solid #E0A92E;
    border-radius: .16rem;
    background: linear-gradient(180deg, #3A2A08 0%, #1E1504 100%);
}

#app .WinGo__C .Betting__C-multiple-r {
    flex: 1;
    width: auto;
    height: .82667rem;
    line-height: .77333rem;
    font-size: .32rem;
    font-weight: 700;
    color: #DFE8FF;
    border: .02667rem solid rgba(80, 140, 255, .4);
    border-radius: .16rem;
    background: linear-gradient(180deg, #13295C 0%, #0B1A40 100%);
}

#app .WinGo__C .Betting__C-multiple-r.active {
    color: #FFFFFF;
    border-color: #8CC8FF;
    background: linear-gradient(180deg, #3D95FF 0%, #1659E0 100%);
    box-shadow: 0 0 .21333rem rgba(64, 150, 255, .8);
}

/* Big / Small */
#app .WinGo__C .Betting__C-foot {
    height: auto;
    margin-top: .26667rem;
}

#app .WinGo__C .Betting__C-foot-b,
#app .WinGo__C .Betting__C-foot-s {
    flex: 1;
    width: auto;
    height: .98667rem;
    line-height: .98667rem;
    font-size: .42667rem;
    font-weight: 700;
}

#app .WinGo__C .Betting__C-foot-b {
    background: linear-gradient(180deg, #FFB547 0%, #E07A00 100%);
    box-shadow: 0 0 .21333rem rgba(255, 160, 40, .5);
}

#app .WinGo__C .Betting__C-foot-s {
    background: linear-gradient(180deg, #4AA6FF 0%, #1A5FE0 100%);
    box-shadow: 0 0 .21333rem rgba(64, 150, 255, .5);
}


/* =========================================================
   ACCOUNT PAGE (#/main)  (CSS only - markup/JS untouched)
   Components: UserInformation, TotalSavings, FinancialServices,
   SettingPanel, ServiceCenter. Icons: /assets/png/account-ui/
   The profile header is also used on the Settings page
   (.setting-page-container) - that variant is excluded.
   ========================================================= */

/* deep blue page background (only the Account page has .userinfo-content) */
#app div:has(> .userinfo-content) {
    background:
        radial-gradient(ellipse 120% 45% at 50% 0%, rgba(40, 100, 255, .2) 0%, rgba(40, 100, 255, 0) 70%),
        linear-gradient(180deg, #081650 0%, #061040 45%, #040A2A 100%);
}

/* ---------- Profile header card ---------- */
body #app .userInfo__container:not(.setting-page-container) {
    height: auto;
    padding: 0;
    display: block;
    border-radius: 0;
    background: transparent;
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content {
    position: relative;
    width: auto;
    margin: .32rem .32rem 0;
    padding: .37333rem .32rem;
    border-radius: .37333rem;
    border: .04rem solid #6AAEFF;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(120deg, #2360E0 0%, #1744B8 40%, #113496 70%, #0C2672 100%);
    box-shadow: 0 0 .4rem rgba(70, 140, 255, .7), inset 0 0 .48rem rgba(150, 205, 255, .3);
    overflow: hidden;
}

/* crown decoration, bottom right */
#app .userInfo__container:not(.setting-page-container) .userInfo__container-content::after {
    content: "";
    position: absolute;
    right: .05333rem;
    bottom: 0;
    width: 2.4rem;
    height: 1.46667rem;
    background: url(/assets/png/account-ui/deco-crown.png) center / contain no-repeat;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    pointer-events: none;
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content-wrapper {
    position: relative;
    z-index: 1;
    align-items: center;
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content__avatar {
    width: 1.92rem;
    height: 1.92rem;
    min-width: 1.92rem;
    margin-right: .29333rem;
    border: .08rem solid #59B4FF;
    box-shadow: 0 0 .32rem rgba(90, 180, 255, .95), 0 0 0 .05333rem rgba(20, 60, 170, .9);
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content-nickname h3 {
    font-size: .46667rem;
    text-shadow: 0 .02667rem .10667rem rgba(0, 20, 80, .6);
    font-weight: 700;
    letter-spacing: .01333rem;
    color: #FFFFFF;
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content-uid {
    width: fit-content;
    margin: .13333rem 0;
    padding: .06667rem .29333rem;
    gap: .16rem;
    justify-content: flex-start;
    font-size: .32rem;
    color: #FFFFFF;
    border-radius: .53333rem;
    border: .02667rem solid rgba(160, 205, 255, .75);
    background: rgba(8, 28, 95, .6);
}

#app .userInfo__container:not(.setting-page-container) .userInfo__container-content-logintime {
    font-size: .30667rem;
    color: #D4E3FF;
}

/* page body no longer overlaps the header */
#app .userinfo-content {
    top: 0;
    margin-top: .32rem;
    gap: .32rem;
}

/* ---------- Total balance card ---------- */
#app .totalSavings__container {
    position: relative;
    height: auto;
    border-radius: .37333rem;
    border: .04rem solid #5C9DFF;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 35%),
        linear-gradient(160deg, #153E9E 0%, #0F2D80 40%, #0B2262 75%, #08194A 100%);
    box-shadow: 0 0 .37333rem rgba(70, 140, 255, .6), inset 0 0 .48rem rgba(130, 190, 255, .2);
}

/* wallet + coins decoration, top right */
#app .totalSavings__container::before {
    content: "";
    position: absolute;
    top: .05333rem;
    right: .05333rem;
    width: 2.56rem;
    height: 2.13333rem;
    background: url(/assets/png/account-ui/deco-wallet.png) center / contain no-repeat;
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    pointer-events: none;
}

#app .totalSavings__container-header,
#app .totalSavings__container-content {
    position: relative;
    z-index: 1;
}

#app .totalSavings__container-header-box.ar-1px-b::after {
    display: none;
}

#app .totalSavings__container-header__title span {
    font-size: .42667rem;
    font-weight: 500;
    color: #E6EEFF;
}

#app .totalSavings__container-header__subtitle {
    margin-top: .10667rem;
    font-size: .72rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 0 .21333rem rgba(120, 190, 255, .55);
}

#app .totalSavings__container-header__subtitle svg {
    color: #DCE7FF;
}

#app .totalSavings__container-content {
    gap: .18667rem;
    padding: .05333rem .26667rem .32rem;
}

#app .totalSavings__container-content-item {
    padding: .21333rem 0 .18667rem;
    border-radius: .26667rem;
    border: .02667rem solid rgba(140, 195, 255, .6);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, rgba(35, 80, 190, .45) 0%, rgba(10, 32, 95, .7) 100%);
    box-shadow: 0 0 .16rem rgba(80, 150, 255, .4), inset 0 0 .26667rem rgba(150, 205, 255, .2);
}

#app .totalSavings__container-content-item div span {
    margin: .08rem 0 0;
    font-size: .37333rem;
    font-weight: 700;
    color: #FFFFFF;
}

#app .totalSavings__container-content-item > div::after {
    font-size: .26667rem;
    color: #BFD2F8;
    white-space: nowrap;
}

#app .totalSavings__container-content-item:has(.icon-wallets) > div::after { content: "My wallet"; }
#app .totalSavings__container-content-item:has(.icon-rechargeIcon) > div::after { content: "Add money"; }
#app .totalSavings__container-content-item:has(.icon-widthdrawBlue) > div::after { content: "Get money"; }
#app .totalSavings__container-content-item:has(.icon-VipIcon) > div::after { content: "View benefits"; }

#app .totalSavings__container-content-item svg {
    width: 1.17333rem;
    height: 1.17333rem;
    min-width: 1.17333rem;
    min-height: 1.17333rem;
    background: center / contain no-repeat;
}

#app .totalSavings__container-content-item svg.icon-wallets { background-image: url(/assets/png/account-ui/tile-wallet.png); }
#app .totalSavings__container-content-item svg.icon-rechargeIcon { background-image: url(/assets/png/account-ui/tile-deposit.png); }
#app .totalSavings__container-content-item svg.icon-widthdrawBlue { background-image: url(/assets/png/account-ui/tile-withdraw.png); }
#app .totalSavings__container-content-item svg.icon-VipIcon { background-image: url(/assets/png/account-ui/tile-vip.png); }

#app .totalSavings__container-content-item svg.icon-wallets use,
#app .totalSavings__container-content-item svg.icon-rechargeIcon use,
#app .totalSavings__container-content-item svg.icon-widthdrawBlue use,
#app .totalSavings__container-content-item svg.icon-VipIcon use {
    display: none;
}

/* ---------- History cards (Game / Transaction / Deposit / Withdraw) ---------- */
#app .financialServices__container-box {
    gap: .24rem;
}

#app .financialServices__container-box > div {
    position: relative;
    width: calc((100% - .24rem) / 2);
    min-height: 1.86667rem;
    padding: .26667rem .53333rem .26667rem .21333rem;
    border-radius: .26667rem;
    border: .03333rem solid rgba(110, 175, 255, .75);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(160deg, #133C9A 0%, #0D2A74 45%, #0A1F5C 80%, #08184A 100%);
    box-shadow: 0 0 .29333rem rgba(70, 140, 255, .5), inset 0 0 .32rem rgba(130, 190, 255, .18);
}

/* chevron */
#app .financialServices__container-box > div::after {
    content: "";
    position: absolute;
    right: .26667rem;
    top: 50%;
    width: .18667rem;
    height: .18667rem;
    margin-top: -.09333rem;
    border-top: .04rem solid #CFE0FF;
    border-right: .04rem solid #CFE0FF;
    transform: rotate(45deg);
}

#app .financialServices__container-box > div > svg {
    width: 1.12rem;
    height: 1.12rem;
    min-width: 1.12rem;
    min-height: 1.12rem;
    border-radius: .26667rem;
    background: center / cover no-repeat;
}

#app .financialServices__container-box svg.icon-betHistory { background-image: url(/assets/png/account-ui/fin-game.png); }
#app .financialServices__container-box svg.icon-tradeHistory { background-image: url(/assets/png/account-ui/fin-trans.png); }
#app .financialServices__container-box svg.icon-rechargeHistory { background-image: url(/assets/png/account-ui/fin-deposit.png); }
#app .financialServices__container-box svg.icon-myWithdrawHistory { background-image: url(/assets/png/account-ui/fin-withdraw.png); }

#app .financialServices__container-box svg.icon-betHistory use,
#app .financialServices__container-box svg.icon-tradeHistory use,
#app .financialServices__container-box svg.icon-rechargeHistory use,
#app .financialServices__container-box svg.icon-myWithdrawHistory use {
    display: none;
}

#app .financialServices__container-box-para {
    padding: 0 0 0 .21333rem;
}

#app .financialServices__container-box-para h3 {
    font-size: .37333rem;
    font-weight: 600;
    color: #FFFFFF;
}

#app .financialServices__container-box > div span {
    font-size: .29333rem;
    color: #BFD2F8;
}

#app .financialServices__container-box > div > svg {
    box-shadow: 0 0 .16rem rgba(0, 10, 40, .5), inset 0 0 0 .02667rem rgba(160, 205, 255, .35);
}

/* lighter row dividers in the settings list */
#app .settingPanel__container-items__item.ar-1px-b::after {
    border-color: rgba(140, 190, 255, .22) !important;
    background-color: rgba(140, 190, 255, .22) !important;
}

/* vault / points (only shown when enabled) */
#app .financialServices__container-footer > div {
    border-radius: .26667rem;
    border: .03333rem solid rgba(110, 175, 255, .75);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(160deg, #133C9A 0%, #0D2A74 45%, #0A1F5C 80%, #08184A 100%);
    box-shadow: 0 0 .29333rem rgba(70, 140, 255, .5), inset 0 0 .32rem rgba(130, 190, 255, .18);
}

/* ---------- Settings list (Notification / Gifts / Game statistics / Language) ---------- */
#app .settingPanel__container {
    padding: 0 .32rem;
    border-radius: .32rem;
    border: .03333rem solid rgba(110, 175, 255, .75);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 25%),
        linear-gradient(170deg, #113584 0%, #0C2770 40%, #091E58 80%, #08184A 100%);
    box-shadow: 0 0 .32rem rgba(70, 140, 255, .5), inset 0 0 .4rem rgba(130, 190, 255, .16);
}

#app .settingPanel__container-items {
    padding-bottom: 0;
}

#app .settingPanel__container-items__item {
    padding: .29333rem 0;
}

#app .settingPanel__container-items__title {
    gap: .26667rem;
}

#app .settingPanel__container-items__item svg {
    width: 1.06667rem;
    height: 1.06667rem;
    min-width: 1.06667rem;
    padding: .2rem;
    box-sizing: border-box;
    border-radius: .26667rem;
    color: #6FB6FF;
    background: rgba(40, 90, 210, .45) center / cover no-repeat;
    box-shadow: 0 0 .16rem rgba(0, 10, 40, .5), inset 0 0 0 .02667rem rgba(160, 205, 255, .35);
}

#app .settingPanel__container-items__item svg.icon-notification { background-image: url(/assets/png/account-ui/set-bell.png); }
#app .settingPanel__container-items__item svg.icon-gifts { background-image: url(/assets/png/account-ui/set-gift.png); }
#app .settingPanel__container-items__item svg.icon-statsIcon { background-image: url(/assets/png/account-ui/set-stats.png); }

#app .settingPanel__container-items__item svg.icon-notification use,
#app .settingPanel__container-items__item svg.icon-gifts use,
#app .settingPanel__container-items__item svg.icon-statsIcon use {
    display: none;
}

#app .settingPanel__container-items__title span {
    font-size: .38667rem;
    font-weight: 500;
    color: #FFFFFF;
}

#app .settingPanel__container-items__title span::after {
    display: block;
    margin-top: .05333rem;
    font-size: .29333rem;
    font-weight: 400;
    color: #BFD2F8;
}

#app .settingPanel__container-items__item:has(.icon-notification) .settingPanel__container-items__title span::after { content: "Latest updates and messages"; }
#app .settingPanel__container-items__item:has(.icon-gifts) .settingPanel__container-items__title span::after { content: "My reward gifts"; }
#app .settingPanel__container-items__item:has(.icon-statsIcon) .settingPanel__container-items__title span::after { content: "My game data and analysis"; }
#app .settingPanel__container-items__item:has(.icon-language) .settingPanel__container-items__title span::after { content: "Change app language"; }

#app .settingPanel__container-items-right .van-icon {
    color: #CFE0FF !important;
}

#app .settingPanel__container-items-right span {
    color: #CFE0FF;
}

/* ---------- Service center + logout ---------- */
#app .serviceCenter__container {
    height: auto;
    padding: .4rem .32rem .48rem;
    border-radius: .32rem;
    border: .03333rem solid rgba(110, 175, 255, .75);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 25%),
        linear-gradient(170deg, #113584 0%, #0C2770 40%, #091E58 80%, #08184A 100%);
    box-shadow: 0 0 .32rem rgba(70, 140, 255, .5), inset 0 0 .4rem rgba(130, 190, 255, .16);
}

#app .serviceCenter__container h1 {
    margin-bottom: .37333rem;
    font-size: .42667rem;
    color: #FFFFFF;
}

#app .serviceCenter__container-items {
    gap: .26667rem;
}

#app .serviceCenter__container-items__item {
    width: 100%;
    padding: .21333rem 0;
    border-radius: .24rem;
    border: .02667rem solid rgba(110, 170, 255, .3);
    background: rgba(30, 70, 170, .3);
    color: #DCE7FF;
}

#app .serviceCenter-wrap-header {
    margin: .53333rem 0 .26667rem;
}

#app .serviceCenter-wrap-header button {
    color: #FFFFFF;
    border: .02667rem solid #4D8DFF;
    background: linear-gradient(180deg, #1D4FB8 0%, #11338A 100%);
    box-shadow: 0 0 .21333rem rgba(61, 125, 255, .45);
}