#freezescreen.loading-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.48) !important;
    display: none;
}

    #freezescreen.loading-overlay.is-show {
        display: block !important;
    }

#freezescreen .loading-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    pointer-events: none !important;
}

#freezescreen .loading-logo {
    display: block !important;
    width: 150px !important;
    max-width: 45vw !important;
    height: auto !important;
    margin: 0 auto 22px auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#freezescreen .loading-gif {
    display: block !important;
    width: 70px !important;
    max-width: 20vw !important;
    height: auto !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.no-header-page .t-header {
    display: none !important;
}

body.no-header-page .t-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.no-header-page .index-bg {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.login-btn {
    border: 0;
    outline: none;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

.login-field {
    margin-bottom: 14px !important;
}

    .login-field .login-form-box {
        margin-bottom: 0 !important;
    }

.login-error-msg {
    display: block !important;
    color: #ff4d4f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 4px 0 0 12px !important;
    text-align: left !important;
}

.login-form-box.error-field {
    border: none !important;
    box-shadow: none !important;
}

/* Deposit page style sync with HTML, keep current functions */
.top-short-wrap .content-section {
    display: none;
}

    .top-short-wrap .content-section.active {
        display: block;
    }

.select_bank_opt {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    @media (max-width: 360px) {
        .select_bank_opt {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .select_bank_opt .form-check-inline {
        margin: 0 !important;
        padding: 0 !important;
    }

    .select_bank_opt .btn-check {
        display: none !important;
    }

    .select_bank_opt .form-check-label {
        min-height: 78px;
        border-radius: 12px !important;
        border: 1px solid transparent !important;
        background: rgba(255, 255, 255, 0.55) !important;
        box-shadow: 0 3px 10px rgba(80, 100, 140, 0.08);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 12px !important;
        color: #7581a8 !important;
        overflow: hidden;
    }

        .select_bank_opt .form-check-label img {
            max-width: 42px;
            max-height: 32px;
            object-fit: contain;
            margin-bottom: 6px;
        }

        .select_bank_opt .form-check-label p {
            margin: 0;
            font-size: 12px;
            line-height: 1.2;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
        }

    .select_bank_opt .btn-check:checked + .form-check-label {
        border: 1px solid #ff9f63 !important;
        background: #fff !important;
        color: #ff9f63 !important;
        box-shadow: 0 4px 12px rgba(255, 159, 99, 0.25);
    }

.select_bank_opt_amt .select_bank_opt {
    display: flex;
    flex-wrap: wrap;
}

.select_bank_opt_amt .select_bank_opt .form-check-label {
    min-width: 76px;
    min-height: 44px;
    border-radius: 12px !important;
    padding: 8px 14px !important;
}

    .select_bank_opt_amt .select_bank_opt .form-check-label p {
        font-size: 14px;
        font-weight: 600;
    }

.amt_input {
    position: relative;
    display: flex;
    align-items: stretch;
}

    .amt_input .input-group-text {
        border: 0 !important;
        border-radius: 12px 0 0 12px !important;
        background: #fff !important;
        color: #7581a8 !important;
        min-width: 62px;
        justify-content: center;
    }

    .amt_input .form-control,
    .dep-option {
        min-height: 44px;
        border-radius: 12px !important;
        border: 1px solid #d6def5 !important;
        background: #fff !important;
        color: #7581a8 !important;
        box-shadow: none !important;
    }

    .amt_input .input-group-text + .form-control {
        border-radius: 0 12px 12px 0 !important;
    }

.btn-cpy {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #7581a8;
    z-index: 2;
}

.dep-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d6def5;
    padding: 8px 10px 8px 14px;
    color: #7581a8;
}

    .dep-upload label {
        margin: 0;
        font-size: 13px;
        color: #7581a8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dep-upload button {
        border: 0;
        border-radius: 10px;
        background: #ff9f63;
        color: #fff;
        min-width: 82px;
        height: 34px;
        font-size: 13px;
    }

.dep-submit {
    width: 100%;
}

    .dep-submit .orange-btn,
    .deposit-submit-btn {
        width: 100%;
        min-height: 48px;
        border: 0;
        border-radius: 18px;
        background: #ff9f63;
        color: #fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 12px rgba(100, 100, 120, 0.28);
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 600;
    }

        .deposit-submit-btn:hover,
        .dep-submit .orange-btn:hover {
            background: #ff9858;
            color: #fff !important;
        }

.qr-table {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    color: #7581a8;
}

    .qr-table td {
        padding: 10px;
        border-bottom: 1px solid #edf1fb;
    }

    .qr-table tr:last-child td {
        border-bottom: 0;
    }

    .qr-table img {
        max-width: 120px;
        border-radius: 8px;
    }

#form_forgot .vericode-position {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    margin: 8px auto 0 auto !important;
}

#form_forgot .vericode-img {
    height: 48px !important;
    max-width: 180px !important;
}

body.fortune-bg {
    background-image: url('/m/images/fortune/fw-bg.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

    body.fortune-bg .index-bg {
        background: transparent !important;
    }

    body.fortune-bg #fortunewheel {
        display: none !important;
    }

    body.fortune-bg .title-header {
        display: block !important;
        width: 100% !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    body.fortune-bg .fortune-wrap {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        padding-top: 34px;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    body.fortune-bg #fortunewheel2,
    body.fortune-bg .wrapper_inner {
        width: 100%;
        overflow: visible !important;
    }

    body.fortune-bg .fortune_wrap {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Bigger wheel, closer to HTML */
    body.fortune-bg .fortune-wheel {
        position: relative !important;
        width: 500px !important;
        height: 500px !important;
        max-width: 86vw !important;
        max-height: 86vw !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    /* API canvas prize wheel */
    body.fortune-bg #fortune-wheel-canvas {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 91% !important;
        height: 91% !important;
        z-index: 2 !important;
    }

    /* Frame should cover the canvas edge */
    body.fortune-bg .fw-frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        z-index: 3 !important;
    }

    /* Center logo */
    body.fortune-bg .fw-logo {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 72px !important;
        max-width: 15% !important;
        z-index: 5 !important;
    }

    /* Pointer, fit on frame top */
    body.fortune-bg .fw-point {
        position: absolute !important;
        top: -13px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 54px !important;
        z-index: 6 !important;
    }

    body.fortune-bg .fortune-wheel-prize {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 7 !important;
        display: none;
        opacity: 0;
    }

    body.fortune-bg .wheel_product_content {
        display: none !important;
    }

    /* Buttons same width as wheel, like HTML */
    body.fortune-bg .fortune_btn_wrap {
        width: 500px;
        max-width: 86vw;
        margin: 20px auto 0 auto;
    }

    body.fortune-bg .fortune-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        margin: 0 auto;
    }

        body.fortune-bg .fortune-btn button {
            border: 0 !important;
            background: transparent !important;
            padding: 0 !important;
            outline: none !important;
        }

    body.fortune-bg .token_wrap,
    body.fortune-bg .fw-info-btn {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        color: #7581a8;
        font-size: 12px;
        line-height: 1.1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-weight: 600;
    }

    body.fortune-bg .fw-play-btn {
        color: #ff9f63;
        font-weight: 700;
    }

    body.fortune-bg .fw-spin-btn {
        min-width: 118px;
        height: 44px;
        border-radius: 24px;
        background: #ff9f63;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(100, 100, 120, 0.28);
    }

    body.fortune-bg .fw-info-btn {
        flex-direction: row;
    }

@media (max-width: 576px) {
    body.fortune-bg .fortune-wrap {
        padding-top: 28px;
    }

    body.fortune-bg .fortune-wheel {
        width: 360px !important;
        height: 360px !important;
        max-width: 88vw !important;
        max-height: 88vw !important;
    }

    body.fortune-bg #fortune-wheel-canvas {
        width: 91% !important;
        height: 91% !important;
    }

    body.fortune-bg .fortune_btn_wrap {
        width: 360px;
        max-width: 88vw;
    }

    body.fortune-bg .fw-logo {
        width: 54px !important;
    }

    body.fortune-bg .fw-point {
        width: 42px !important;
        top: -8px !important;
    }
}

/* 共用数字 badge */
.notify-num.unread_count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff6b6b;
    color: #fff !important;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Inbox page tab 上面的 badge */
.inbox-badge-tab {
    margin-left: 4px;
    vertical-align: top;
    position: relative;
    top: -6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* Inbox 一级分类 TAB：消息中心 / 私信通知 */
.inbox-group-tab {
    display: inline-flex;
    align-items: center;
    gap: 24px;
}

.inbox-group-tab-btn {
    position: relative;
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    white-space: nowrap;
}

.inbox-group-tab-btn.active {
    color: #333;
    font-weight: 700;
}

.inbox-group-tab-btn .notify-num {
    top: -6px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* Inbox 二级分类 TAB：通知 / 活动 / 公告 / 充提 / 赛事公告 */
.inbox-subtab-wrap {
    padding: 10px 15px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.inbox-subtab-list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inbox-subtab-list li {
    flex: none;
}

.inbox-subtab-btn {
    position: relative;
    background-color: #f7f7f7;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.inbox-subtab-btn.active {
    background-color: #fdeee0;
    color: #ff8a3d;
    font-weight: 600;
}

.inbox-subtab-btn .notify-num {
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* Inbox message list card redesign (to match reference design) */
.inbox-tab-content .msg-icon-col {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background-color: #fff3ea;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: 10px;
}

.inbox-tab-content .msg-icon-col i {
    color: #ffa466;
    font-size: 20px;
}

.inbox-tab-content .msg-list-group.unread .msg-icon-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ea4e3d;
}

.inbox-tab-content .list-group-item {
    align-items: flex-start;
}

.inbox-tab-content .msg-wrap {
    flex: 1 1 0%;
    min-width: 0;
}

.inbox-tab-content .msg-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.inbox-tab-content .msg-top-row h6 {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex: 1 1 0%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-tab-content .msg-top-row .inbox-date {
    font-size: 12px;
    color: #abb8d6;
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-tab-content .msg-wrap p {
    font-size: 12px;
    color: #6b7ba8;
    line-height: 1.2;
    margin-top: 2px;
    margin-bottom: 0;
}

/* Account 页面的 badge */
.inbox-badge-account {
    margin-left: 6px;
    vertical-align: middle;
    position: static !important;
}

/* 侧边 menu 的 badge（如果也要统一） */
.side-menu-box {
    position: relative;
}

    .side-menu-box .notify-num.unread_count {
        position: absolute;
        top: 6px;
        right: 18px;
    }

/* 顶部 header 铃铛/messaging icon 的 badge - 跟上面共用同一个
   .unread_count / renderInboxBadge() 机制，页面载入时 master.master 的
   getInboxMsgTotalCount() 已经会自动更新这个（跟 side menu、account 页面
   那两个一样），这里只是补上它在 header 这个位置要用的定位样式。 */
.top-message-btn {
    position: relative;
}

    .top-message-btn .notify-num.unread_count {
        position: absolute;
        top: -2px;
        right: -4px;
    }

/* Transfer page HTML style sync - function first */
.transfer-page-body {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 95px;
}

    .transfer-page-body .title-header {
        position: relative;
        z-index: 5;
    }

#form_transfer.top-short-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 18px auto 0 auto;
    padding: 0 10px 95px 10px;
}

/* 重点：不要隐藏旧 function block */
#form_transfer .user_box {
    display: block !important;
    margin-bottom: 12px;
}

#form_transfer .balance-wrapper {
    display: block !important;
    margin-bottom: 16px;
}

/* 把旧 wallet block 做成比较接近 HTML 的干净样式 */
#form_transfer .transfer-wallet-card {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #d6def5;
    box-shadow: 0 3px 10px rgba(80, 100, 140, 0.08);
    padding: 10px 14px;
    color: #7581a8;
}

#form_transfer .transfer-wallet-title {
    font-size: 13px;
    font-weight: 700;
    color: #7581a8;
    margin-bottom: 5px;
}

#form_transfer .transfer-wallet-amount {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

#form_transfer .transfer-wallet-action {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ff9f63;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    #form_transfer .transfer-wallet-action img {
        width: 14px;
        height: 14px;
        object-fit: contain;
    }

/* Product balance accordion */
#form_transfer .balance-wrapper .bln-box {
    min-height: 42px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d6def5;
    color: #7581a8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    box-shadow: 0 3px 10px rgba(80, 100, 140, 0.08);
    cursor: pointer;
}

    #form_transfer .balance-wrapper .bln-box:after {
        content: "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #7581a8;
    }

#form_transfer .balance-wrapper .bln-body {
    margin-top: 8px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d6def5;
    overflow: hidden !important;
}

#form_transfer .bln-table {
    width: 100%;
    color: #7581a8;
    font-size: 12px;
}

    #form_transfer .bln-table td {
        padding: 8px;
        border-bottom: 1px solid #edf1fb;
        vertical-align: middle;
    }

    #form_transfer .bln-table tr:last-child td {
        border-bottom: 0;
    }

#form_transfer .btn-group-transfer {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

#form_transfer .btn-in-transfer,
#form_transfer .btn-out-transfer {
    border: 0;
    border-radius: 8px;
    background: #ff9f63;
    color: #fff;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
}

/* Requirement table */
#form_transfer .table-responsive {
    margin-bottom: 18px;
}

#form_transfer .table-share {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: #7581a8;
    font-size: 13px;
    text-align: center;
}

    #form_transfer .table-share th {
        background: #7581a8;
        color: #fff;
        font-weight: 700;
        padding: 9px 8px;
        border: 1px solid #7581a8;
    }

    #form_transfer .table-share td {
        padding: 7px 8px;
        border: 1px solid #7581a8;
        background: rgba(255, 255, 255, 0.2);
        color: #7581a8;
    }

    #form_transfer .table-share .req-achieve {
        color: #10a34a !important;
        font-weight: 700;
    }

/* Form style same as HTML */
#form_transfer .dep-label {
    color: #7581a8;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

#form_transfer .form-control,
#form_transfer .form-select {
    width: 100%;
    min-height: 46px;
    border-radius: 7px !important;
    border: 1px solid #cfd8ee !important;
    background-color: #fff !important;
    color: #7581a8 !important;
    box-shadow: none !important;
    font-size: 14px;
    padding: 10px 14px;
}

#form_transfer .transfer-amount-wrap {
    position: relative;
}

#form_transfer .transfer-max-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 88px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: #ff9f63;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#form_transfer .transfer-amount-wrap input {
    padding-right: 110px !important;
}

#form_transfer .dep-submit {
    width: 100%;
}

    #form_transfer .dep-submit .orange-btn {
        width: 100%;
        min-height: 48px;
        border: 0 !important;
        border-radius: 18px !important;
        background: #ff9f63 !important;
        color: #fff !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        box-shadow: 0 5px 12px rgba(100, 100, 120, 0.28) !important;
    }

        #form_transfer .dep-submit .orange-btn:hover,
        #form_transfer .dep-submit .orange-btn:focus,
        #form_transfer .dep-submit .orange-btn:active {
            background: #ff9f63 !important;
            color: #fff !important;
        }

#form_transfer label.error {
    color: #ff3b3b;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

body.vip-page-v2 {
    background: #eaf1fb !important;
}

    body.vip-page-v2 .t-body {
        padding-bottom: 92px !important;
    }

    body.vip-page-v2 .vip-wrap {
        width: 100% !important;
        max-width: 991px !important;
        margin: 0 auto !important;
        padding: 60px 0 80px 0 !important;
        color: #7682a5 !important;
    }

    body.vip-page-v2 .vip-pic {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
    }

    body.vip-page-v2 .vip-avatar {
        width: 55px !important;
        height: 55px !important;
        flex: 0 0 55px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        body.vip-page-v2 .vip-avatar img {
            width: 55px !important;
            height: 55px !important;
            object-fit: contain !important;
            display: block !important;
        }

    body.vip-page-v2 .vip-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #7682a5 !important;
    }

    body.vip-page-v2 .vip-al-content {
        width: 100% !important;
    }

    body.vip-page-v2 .vip-lvl-bar {
        width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 10px !important;
    }

    body.vip-page-v2 .vip-lvl-badge {
        display: none !important;
    }

        body.vip-page-v2 .vip-lvl-badge.show {
            display: block !important;
        }

    body.vip-page-v2 .vip-progress {
        width: 100% !important;
    }

    body.vip-page-v2 .vip-bar-wrap {
        display: flex !important;
        align-items: center !important;
        padding-bottom: 8px !important;
        color: #7682a5 !important;
    }

        body.vip-page-v2 .vip-bar-wrap > span {
            width: 30% !important;
            flex: 0 0 30% !important;
            font-size: 13px !important;
            line-height: 18px !important;
            color: #7682a5 !important;
        }

    body.vip-page-v2 .vip-bar {
        width: 100% !important;
        position: relative !important;
    }

        body.vip-page-v2 .vip-bar .progress {
            height: 18px !important;
            background: #fff !important;
            border-radius: 999px !important;
            overflow: hidden !important;
        }

        body.vip-page-v2 .vip-bar .progress-bar {
            background: #7682a5 !important;
            border-radius: 999px !important;
            transition: width .35s ease !important;
        }

    body.vip-page-v2 .vip-progress-amt {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 18px !important;
        line-height: 18px !important;
        text-align: center !important;
        color: #ff9f63 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        pointer-events: none !important;
    }

    body.vip-page-v2 .vip-al-thumb-swiper {
        width: 100% !important;
        padding: 0 10px !important;
        overflow: visible !important;
    }

    body.vip-page-v2 .vip-al-thumb-container,
    body.vip-page-v2 .swiper-wrapper {
        width: 100% !important;
        overflow: visible !important;
    }

    body.vip-page-v2 .swiper-slide {
        display: none !important;
        width: 100% !important;
    }

        body.vip-page-v2 .swiper-slide.show {
            display: block !important;
        }

    body.vip-page-v2 .purple-wrap,
    body.vip-page-v2 .purple-inner-wrap {
        width: 100% !important;
    }

    body.vip-page-v2 .vip-bnf-wrap {
        position: relative !important;
        width: 100% !important;
        min-height: 190px !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 10px rgba(80, 100, 140, .16) !important;
        overflow: hidden !important;
        padding-bottom: 20px !important;
    }

    body.vip-page-v2 .vip-bnf-icon {
        width: 100% !important;
        max-width: 90px !important;
        position: absolute !important;
        top: 4px !important;
        right: 16px !important;
        z-index: 2 !important;
    }

        body.vip-page-v2 .vip-bnf-icon img {
            width: 100% !important;
            height: auto !important;
            object-fit: contain !important;
            display: block !important;
        }

    body.vip-page-v2 .vip-bnf-lvl {
        width: 27% !important;
        min-width: 270px !important;
        padding: 9px 8px !important;
        border-top-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
        background: linear-gradient(90deg, #ddc186, #bc9f65) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

        body.vip-page-v2 .vip-bnf-lvl.lock {
            background: linear-gradient(90deg, #abb8d6, #8b9ccb) !important;
        }

    body.vip-page-v2 .vip-bnf-content {
        color: #7682a5 !important;
        padding: 16px 34px 10px 34px !important;
        margin-right: 100px !important;
        position: relative !important;
        z-index: 3 !important;
    }

        body.vip-page-v2 .vip-bnf-content h1 {
            margin: 0 !important;
            font-size: 26px !important;
            line-height: 1.15 !important;
            font-weight: 600 !important;
            color: #7682a5 !important;
            padding-bottom: 8px !important;
        }

        body.vip-page-v2 .vip-bnf-content p {
            margin: 0 !important;
            font-size: 12px !important;
            line-height: 1.35 !important;
            color: #7682a5 !important;
        }

        body.vip-page-v2 .vip-bnf-content b {
            font-weight: 800 !important;
        }

    body.vip-page-v2 .vip-notice {
        width: 100% !important;
        background: linear-gradient(90deg, #abb8d6, #becaec) !important;
        padding: 9px 34px !important;
        color: #7682a5 !important;
        margin-top: 8px !important;
    }

        body.vip-page-v2 .vip-notice p {
            margin: 0 !important;
            font-size: 12px !important;
            line-height: 1.3 !important;
        }

    body.vip-page-v2 .vip-bnf-bg-wrapper {
        width: 100% !important;
        margin-top: 20px !important;
    }

    body.vip-page-v2 .vip-bnf-bg {
        display: none !important;
    }

        body.vip-page-v2 .vip-bnf-bg.show {
            display: block !important;
        }

    body.vip-page-v2 .vip-detail {
        background: #fff !important;
        padding: 10px !important;
        margin-top: 10px !important;
        box-shadow: 0 2px 8px rgba(80, 100, 140, .16) !important;
    }

    body.vip-page-v2 .vip-pri-title {
        color: #000 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        padding: 15px 0 10px 0 !important;
        margin: 0 !important;
        text-transform: uppercase !important;
    }

    body.vip-page-v2 .vip-box-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 14px !important;
        column-gap: 14px !important;
    }

    body.vip-page-v2 .vip-box-wrap-1 {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
        row-gap: 14px !important;
    }

    body.vip-page-v2 .vip-box-inner-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        min-height: 58px !important;
        padding-bottom: 8px !important;
    }

    body.vip-page-v2 .vip-box-inner-wrap-1 {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 58px !important;
        padding: 0 15px 8px 15px !important;
    }

        body.vip-page-v2 .vip-box-inner-wrap img,
        body.vip-page-v2 .vip-box-inner-wrap-1 img {
            width: 50px !important;
            height: 50px !important;
            flex: 0 0 50px !important;
            object-fit: contain !important;
            display: block !important;
        }

    body.vip-page-v2 .vip-bnf {
        width: 50% !important;
        color: #7682a5 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

        body.vip-page-v2 .vip-bnf span {
            display: block !important;
            color: #000 !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            padding-bottom: 3px !important;
            text-transform: none !important;
        }

        body.vip-page-v2 .vip-bnf h5 {
            display: block !important;
            color: #7682a5 !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            margin: 0 !important;
            text-transform: uppercase !important;
        }

    body.vip-page-v2 img {
        font-size: 0 !important;
    }

@media (max-width: 576px) {
    body.vip-page-v2 .vip-wrap {
        max-width: 100% !important;
        padding-top: 60px !important;
    }

    body.vip-page-v2 .vip-bnf-lvl {
        min-width: 270px !important;
    }

    body.vip-page-v2 .vip-bnf-content {
        padding: 16px 34px 10px 34px !important;
        margin-right: 82px !important;
    }

        body.vip-page-v2 .vip-bnf-content h1 {
            font-size: 24px !important;
        }

    body.vip-page-v2 .vip-bnf-icon {
        max-width: 82px !important;
        right: 14px !important;
    }

    body.vip-page-v2 .vip-box-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 8px !important;
    }

    body.vip-page-v2 .vip-box-inner-wrap {
        justify-content: center !important;
    }

        body.vip-page-v2 .vip-box-inner-wrap img,
        body.vip-page-v2 .vip-box-inner-wrap-1 img {
            width: 48px !important;
            height: 48px !important;
            flex-basis: 48px !important;
        }

    body.vip-page-v2 .vip-bnf {
        width: 56% !important;
    }
}

.withdraw-page {
    padding-bottom: 90px;
}

    .withdraw-page .btn-check {
        display: none !important;
    }

    .withdraw-page .top-short-wrap {
        padding: 14px 16px 28px;
    }

    .withdraw-page .withdraw-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 6px 18px rgba(87, 104, 146, 0.10);
        margin-bottom: 16px;
    }

    .withdraw-page .withdraw-section-title {
        font-size: 14px;
        font-weight: 700;
        color: #7581a8;
        margin-bottom: 12px;
    }

    .withdraw-page .withdraw-sub-label,
    .withdraw-page .dep-label {
        font-size: 13px;
        font-weight: 700;
        color: #7581a8;
        margin-bottom: 8px;
    }

    .withdraw-page .table-responsive {
        margin-bottom: 0;
    }

    .withdraw-page .table-share {
        width: 100%;
        border-collapse: collapse;
        overflow: hidden;
        border-radius: 14px;
    }

        .withdraw-page .table-share th {
            background: #7d89b3;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            padding: 10px 8px;
            border: 1px solid #cfd8ef;
        }

        .withdraw-page .table-share td {
            background: #f8fbff;
            color: #7581a8;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            padding: 10px 8px;
            border: 1px solid #dfe6f5;
            word-break: break-word;
        }

    .withdraw-page .balance-box {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    .withdraw-page .qr-num-in {
        display: flex;
        gap: 10px;
        align-items: stretch;
        width: 100%;
    }

        .withdraw-page .qr-num-in .form-control {
            min-height: 48px;
            border-radius: 12px !important;
            border: 1px solid #d8e0f2 !important;
            background: #fff !important;
            color: #7581a8 !important;
            box-shadow: none !important;
            font-weight: 600;
        }

    .withdraw-page .btn-copy {
        min-width: 110px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffb37d 0%, #ff9f63 100%);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 0 14px;
        box-shadow: 0 6px 14px rgba(255, 159, 99, 0.25);
    }

        .withdraw-page .btn-copy:hover {
            background: linear-gradient(180deg, #ffab71 0%, #ff9553 100%);
        }

    .withdraw-page .overview-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .withdraw-page .overview-item {
        background: #f8fbff;
        border: 1px solid #dfe6f5;
        border-radius: 14px;
        padding: 14px 12px;
    }

        .withdraw-page .overview-item .overview-label {
            display: block;
            font-size: 12px;
            color: #8b96bb;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .withdraw-page .overview-item .overview-value {
            display: block;
            font-size: 15px;
            color: #4f5f93;
            font-weight: 800;
            line-height: 1.3;
            word-break: break-word;
        }

    .withdraw-page .select_bank_opt {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .withdraw-page .select_bank_opt .form-check-inline {
            margin: 0 !important;
            padding: 0 !important;
        }

        .withdraw-page .select_bank_opt .form-check-label {
            min-width: 120px;
            min-height: 74px;
            border-radius: 14px !important;
            border: 1px solid #dfe6f5 !important;
            background: #fff !important;
            box-shadow: 0 4px 10px rgba(80, 100, 140, 0.08);
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px 12px !important;
            color: #7581a8 !important;
            transition: all .2s ease;
        }

            .withdraw-page .select_bank_opt .form-check-label p {
                margin: 0;
                font-size: 12px;
                line-height: 1.25;
                text-align: center;
                font-weight: 600;
                word-break: break-word;
            }

        .withdraw-page .select_bank_opt .btn-check:checked + .form-check-label {
            border: 1px solid #ff9f63 !important;
            background: #fff7f2 !important;
            color: #ff9f63 !important;
            box-shadow: 0 6px 14px rgba(255, 159, 99, 0.20);
            position: relative;
        }

            .withdraw-page .select_bank_opt .btn-check:checked + .form-check-label::after {
                content: "";
                position: absolute;
                right: 8px;
                bottom: 8px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #4e7dff;
            }

    .withdraw-page .amt_input {
        display: flex;
        align-items: stretch;
        margin-bottom: 12px;
    }

        .withdraw-page .amt_input .input-group-text {
            min-width: 68px;
            border: 1px solid #d8e0f2 !important;
            border-right: 0 !important;
            border-radius: 12px 0 0 12px !important;
            background: #fff !important;
            color: #7581a8 !important;
            justify-content: center;
            font-weight: 700;
        }

        .withdraw-page .amt_input .form-control {
            min-height: 48px;
            border: 1px solid #d8e0f2 !important;
            border-radius: 0 12px 12px 0 !important;
            background: #fff !important;
            color: #7581a8 !important;
            box-shadow: none !important;
            font-weight: 600;
        }

    .withdraw-page .select_bank_opt_amt .select_bank_opt {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .withdraw-page .select_bank_opt_amt .form-check-inline {
        width: 100%;
    }

    .withdraw-page .select_bank_opt_amt .form-check-label {
        min-width: auto;
        width: 100%;
        min-height: 46px;
        border-radius: 12px !important;
        padding: 8px 10px !important;
    }

        .withdraw-page .select_bank_opt_amt .form-check-label p {
            font-size: 14px;
            font-weight: 700;
        }

    .withdraw-page #<%= common.inputname.WITHDRAW_AMOUNT % > _err_msg label.error,
    .withdraw-page label.error {
        display: block !important;
        color: #ff5a5a !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        margin: 6px 0 0 4px !important;
    }

    .withdraw-page .af-info {
        margin-top: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fbff;
        border: 1px solid #dfe6f5;
    }

        .withdraw-page .af-info p {
            margin: 0 0 6px;
            font-size: 12px;
            line-height: 1.4;
            color: #7581a8;
            font-weight: 600;
        }

            .withdraw-page .af-info p:last-child {
                margin-bottom: 0;
            }

        .withdraw-page .af-info .txt-rd {
            color: #5c6b97 !important;
            font-weight: 700;
        }

    .withdraw-page .dep-submit {
        width: 100%;
        margin-top: 18px;
    }

        .withdraw-page .dep-submit .orange-btn {
            width: 100%;
            min-height: 50px;
            border: 0;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffb37d 0%, #ff9f63 100%);
            color: #fff !important;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 8px 18px rgba(255, 159, 99, 0.28);
        }

            .withdraw-page .dep-submit .orange-btn:hover {
                background: linear-gradient(180deg, #ffab71 0%, #ff9553 100%);
            }

@media (max-width: 576px) {
    .withdraw-page .overview-grid {
        grid-template-columns: 1fr;
    }

    .withdraw-page .balance-box,
    .withdraw-page .qr-num-in {
        flex-direction: column;
    }

    .withdraw-page .btn-copy {
        width: 100%;
        min-height: 44px;
    }

    .withdraw-page .select_bank_opt_amt .select_bank_opt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.withdraw-page .withdraw-error-msg {
    display: block !important;
    width: 100% !important;
    min-height: 18px !important;
    margin: 6px 0 10px 4px !important;
    padding: 0 !important;
    color: #ff3b3b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    clear: both !important;
    position: relative !important;
    z-index: 5 !important;
}

    .withdraw-page .withdraw-error-msg label.error,
    .withdraw-page .withdraw-error-msg .manual-error {
        display: block !important;
        color: #ff3b3b !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

.withdraw-page label.error {
    color: #ff3b3b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.promo-modal .wrapper.text-center {
    width: 100%;
    margin-top: 12px;
}

.promo-modal .inbox-reply-textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

    .promo-modal .inbox-reply-textarea:focus {
        border-color: #ffa15f;
        box-shadow: 0 0 0 2px rgba(255, 161, 95, 0.18);
    }

.promo-modal .inbox-reply-btn {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 12px;
    padding: 0 15px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(90deg, #ffab6c 0%, #ff9657 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
    appearance: none;
    -webkit-appearance: none;
}

    .promo-modal .inbox-reply-btn:active {
        transform: scale(0.98);
    }

    .promo-modal .inbox-reply-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.promo-modal #err_msg_reply {
    margin-top: 5px;
    color: #dc3545;
    font-size: 12px;
    text-align: left;
}

#form_profile label.error {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 12px;
    text-align: left;
}

#form_profile input.error {
    border-color: #dc3545;
}

#form_profile input[readonly] {
    background-color: #f5f5f5;
}

#p_<%= common.inputname.BIRTH_DATE % > {
    cursor: text;
}

    #p_<%= common.inputname.BIRTH_DATE % > .hasDatepicker {
        cursor: pointer;
    }

    #p_<%= common.inputname.BIRTH_DATE % > .profile-locked {
        cursor: default;
        background-color: #f5f5f5;
    }

    #p_<%= common.inputname.BIRTH_DATE % > .profile-locked {
        cursor: default;
    }

/* Deposit PG Amount Error Message */
#form_pg_deposit .pg-amount-field {
    width: 100%;
    display: block;
}

    #form_pg_deposit .pg-amount-field .amt_input {
        width: 100%;
    }

#form_pg_deposit .pg-deposit-error-msg {
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: 5px;
    padding-left: 4px;
    text-align: left;
}

    #form_pg_deposit .pg-deposit-error-msg:empty {
        display: none;
    }

    #form_pg_deposit .pg-deposit-error-msg label.error {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ff3b3b !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

#form_pg_deposit
#pg_<%= common.inputname.DEPOSIT_AMOUNT % > .pg-input-error {
    border-color: #ff3b3b !important;
}

    #form_pg_deposit
    #pg_<%= common.inputname.DEPOSIT_AMOUNT % > .pg-input-error:focus {
        border-color: #ff3b3b !important;
        box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.08) !important;
    }

/* =========================================
   Register Captcha - Input and image column
   ========================================= */

.register-captcha-field {
    width: 100%;
}

.register-captcha-column {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: 50px;
    box-shadow: none;
    overflow: hidden;
}

/* Left input section */
.register-captcha-input {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Shield icon */
.register-captcha-icon {
    position: absolute;
    top: 50%;
    left: 21px;
    color: #7e8fb8;
    font-size: 25px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

/* Captcha input */
.register-captcha-input > input {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 20px 0 68px !important;
    color: #667ba8 !important;
    font-size: 18px !important;
    line-height: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

    .register-captcha-input > input::placeholder {
        color: #7e8fb8;
        opacity: 1;
    }

/* Right captcha section */
.register-captcha-image-button {
    position: relative !important;
    display: block !important;
    flex: 0 0 88px !important;
    width: 88px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer;
}

    /* Captcha image */
    .register-captcha-image-button > .register-captcha-image {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 50px 50px 0 !important;
        object-fit: fill !important;
    }

    /* Remove browser button interaction effects */
    .register-captcha-image-button:hover,
    .register-captcha-image-button:focus,
    .register-captcha-image-button:active {
        background: #ffffff !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Validation message */
.register-captcha-field .login-error-msg {
    margin-top: 4px !important;
    margin-left: 12px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .register-captcha-column {
        height: 52px;
    }

    .register-captcha-icon {
        left: 17px;
        font-size: 20px;
    }

    .register-captcha-input > input {
        padding-left: 52px !important;
        padding-right: 12px !important;
        font-size: 14px !important;
    }

    .register-captcha-image-button {
        flex-basis: 95px !important;
        width: 95px !important;
    }
}

/* Fix language dropdown being covered by banner.
   NOTE: no longer forcing position:relative here (2026-09) -- .top-header's
   default is position:fixed (see style.css), which takes it out of normal
   flow so it doesn't take up layout space. Forcing it to relative made it
   participate in the page flow and pushed the homepage banner down,
   leaving an empty gap above it. z-index alone is enough to keep the
   dropdown above the banner, since fixed elements are already positioned. */
.t-header {
    z-index: 99999 !important;
    overflow: visible !important;
}

    .t-header .top-header {
        z-index: 99999 !important;
        overflow: visible !important;
    }

    .t-header .lang-btn {
        position: relative !important;
        z-index: 100000 !important;
        overflow: visible !important;
    }

        .t-header .lang-btn #current_language {
            position: relative !important;
            z-index: 100001 !important;
            pointer-events: auto !important;
        }

        .t-header .lang-btn #language_menu,
        .t-header .lang-btn #language_menu.show {
            position: absolute !important;
            top: calc(100% + 6px) !important;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            width: 100% !important;
            min-width: 100% !important;
            z-index: 100002 !important;
            pointer-events: auto !important;
        }

            .t-header .lang-btn #language_menu li,
            .t-header .lang-btn #language_menu .language-option,
            .t-header .lang-btn #language_menu .language-option-text {
                position: relative !important;
                z-index: 100003 !important;
                pointer-events: auto !important;
            }

/* New top-right wrapper: message/bell button + language dropdown, keeps header 3-column grid intact */
.t-header .top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

    .t-header .top-right .top-message-btn img {
        max-width: 25px !important;
        width: 25px !important;
        height: auto !important;
    }

    /* .lang-btn used to be a full-width 3rd grid column, so #language_menu's
       width:100% (see rule above) gave it a usable width. Now that .lang-btn
       is a flex item inside .top-right, it shrinks to fit its own text
       ("中文"/"EN"), so width:100% made the dropdown collapse to that same
       tiny width. Give the dropdown its own sensible width instead, anchored
       to the right edge so it doesn't overflow off-screen. */
    .t-header .top-right .lang-btn #language_menu,
    .t-header .top-right .lang-btn #language_menu.show {
        left: auto !important;
        right: 0 !important;
        width: max-content !important;
        min-width: 90px !important;
    }

/* Keep page/banner below header dropdown */
.t-body {
    position: relative;
    z-index: 1;
}

/* Bottom menu default color */
.menu-btm .footer-menu-item {
    position: relative;
    color: #7e8fb8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .menu-btm .footer-menu-item span {
        color: #7e8fb8 !important;
        transition: color 0.2s ease;
    }

    /* Change normal PNG icons to the same blue-grey color */
    .menu-btm .footer-menu-item:not(.menu-btm-home) img {
        filter: brightness(0) saturate(100%) invert(58%) sepia(16%) saturate(1025%) hue-rotate(187deg) brightness(87%) contrast(84%);
        opacity: 0.82;
        transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    }

    /* Selected bottom menu */
    .menu-btm .footer-menu-item.active {
        color: #ff9f63 !important;
    }

        .menu-btm .footer-menu-item.active span {
            color: #ff9f63 !important;
            font-weight: 600;
        }

        /* Selected icon becomes orange */
        .menu-btm .footer-menu-item.active:not(.menu-btm-home) img {
            filter: brightness(0) saturate(100%) invert(73%) sepia(49%) saturate(1516%) hue-rotate(317deg) brightness(102%) contrast(101%);
            opacity: 1;
            transform: translateY(-2px);
        }

    /* Click feedback */
    .menu-btm .footer-menu-item:active {
        transform: scale(0.94);
    }

/* Home remains as its original round orange design */
.menu-btm .menu-btm-home img {
    filter: none !important;
}

.guide-card {
    overflow: hidden;
}

.guide-body {
    padding: 15px 18px 20px;
    line-height: 1.8;
    word-break: break-word;
}

    .guide-body h5 {
        margin: 20px 0 10px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }

        .guide-body h5:first-child {
            margin-top: 0;
        }

    .guide-body p {
        margin: 0 0 10px;
    }

    .guide-body ol,
    .guide-body ul {
        margin: 0 0 15px;
        padding-left: 22px;
    }

    .guide-body li {
        margin-bottom: 7px;
    }

        .guide-body li:last-child {
            margin-bottom: 0;
        }

.guide-route {
    padding: 10px 12px;
    margin: 10px 0 15px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.04);
    font-weight: 600;
    line-height: 1.7;
}

.guide-note {
    padding: 10px 12px;
    margin: 12px 0;
    border-left: 3px solid #d6a950;
    border-radius: 4px;
    background-color: rgba(214, 169, 80, 0.1);
    line-height: 1.7;
}

.guide-warning {
    color: #d9534f;
    font-weight: 600;
}

.guide-file-box {
    padding: 18px 15px;
    text-align: center;
}

.guide-file-icon {
    margin-bottom: 12px;
    font-size: 42px;
    line-height: 1;
}

.guide-file-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
}

.guide-file-description {
    margin-bottom: 18px;
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}

.guide-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 11px 18px;
    border: 0;
    border-radius: 6px;
    background-color: #d6a950;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

    .guide-file-btn:hover,
    .guide-file-btn:focus {
        color: #fff !important;
        opacity: 0.88;
    }

    .guide-file-btn i {
        margin-right: 8px;
    }

.guide-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 576px) {
    .guide-body {
        padding: 14px 15px 18px;
    }

        .guide-body ol,
        .guide-body ul {
            padding-left: 20px;
        }

    .guide-file-btn {
        width: 100%;
    }

    .guide-button-group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Wallet Notice */
.wallet-notice {
    position: relative;
    margin-top: 20px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(118, 130, 165, 0.22);
    border-left: 4px solid #d6a950;
    border-radius: 8px;
    background: linear-gradient( 135deg, #ffffff 0%, #f6f8fc 100% );
    box-shadow: 0 3px 8px rgba(107, 123, 168, 0.14);
}

.wallet-notice-header {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

.wallet-notice-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 11px;
    border-radius: 50%;
    background: rgba(214, 169, 80, 0.14);
    color: #d6a950;
    font-size: 17px;
}

.wallet-notice-title {
    color: #414755;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.wallet-notice-subtitle {
    margin-top: 2px;
    color: #8a91a3;
    font-size: 12px;
    line-height: 1.4;
}

.wallet-notice-list {
    margin: 0;
    padding-left: 21px;
    color: #5f6880;
    font-size: 13px;
    line-height: 1.7;
}

    .wallet-notice-list li {
        padding-left: 3px;
    }

        .wallet-notice-list li + li {
            margin-top: 7px;
        }

        .wallet-notice-list li::marker {
            color: #7682a5;
            font-weight: 700;
        }

    .wallet-notice-list strong {
        color: #414755;
        font-weight: 700;
    }

    .wallet-notice-list a {
        color: #d6a950;
        font-weight: 600;
        text-decoration: none;
    }

        .wallet-notice-list a:hover,
        .wallet-notice-list a:focus {
            color: #bd8d34;
            text-decoration: underline;
        }

        .wallet-notice-list a i {
            margin-left: 3px;
            font-size: 10px;
        }

@media (max-width: 576px) {
    .wallet-notice {
        margin-top: 16px;
        padding: 14px 13px;
    }

    .wallet-notice-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .wallet-notice-title {
        font-size: 14px;
    }

    .wallet-notice-list {
        padding-left: 19px;
        font-size: 12.5px;
        line-height: 1.65;
    }
}

.coin-earning {
    display: ruby-text;
}

#balance-modal {
    z-index: 1060 !important;
}

    #balance-modal .modal-dialog {
        position: relative;
        z-index: 1061;
    }

.modal-backdrop {
    z-index: 1050 !important;
}

#freezescreen {
    z-index: 1040 !important;
}

.addbank-page .top-short-wrap {
    padding-bottom: 100px;
}

.addbank-page .addbank-method-selection {
    display: flex;
    gap: 10px;
    width: 100%;
}

    .addbank-page .addbank-method-selection .form-check-inline {
        flex: 1;
        margin: 0;
    }

    .addbank-page .addbank-method-selection .form-check-label {
        width: 100%;
    }

.addbank-page .addbank-account-table {
    min-width: 520px;
}

    .addbank-page .addbank-account-table th,
    .addbank-page .addbank-account-table td {
        vertical-align: middle;
    }

.addbank-page .form-select,
.addbank-page .form-control {
    width: 100%;
}

.addbank-page .input-tips {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #8791a5;
}

.addbank-page .addbank-limit-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    color: #8a5a28;
    font-size: 12px;
    line-height: 1.5;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
}

    .addbank-page .addbank-limit-message i {
        flex: 0 0 auto;
        margin-top: 2px;
        color: #f97316;
    }

.addbank-page .addbank-back-btn {
    color: #ff783e;
    background: #ffffff;
    border: 1px solid #ff9361;
}

.addbank-page #submit_btn.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.addbank-page .btn-df {
    white-space: nowrap;
}

/* Deposit payment methods: keep three columns even when only two options exist. */
#pg_bankcode.pg-bankcode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

    #pg_bankcode.pg-bankcode-grid .pg-bankcode-item {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

        #pg_bankcode.pg-bankcode-grid .pg-bankcode-item .form-check-label {
            width: 100%;
            min-width: 0;
        }

    #pg_bankcode.pg-bankcode-grid .pg-bankcode-name {
        white-space: nowrap;
    }

    #pg_bankcode.pg-bankcode-grid .pg-bankcode-name-long {
        font-size: 0.875rem !important;
    }

    #pg_bankcode.pg-bankcode-grid .pg-bankcode-name-xlong {
        font-size: 0.75rem !important;
    }

/* BL22-19: license/regulator logos shown at the bottom of the About Us page */
.licence-wrap {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dbe4f3;
    text-align: center;
}

    .licence-wrap p {
        color: #7682a5;
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

.licence-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 10px;
}

    .licence-list img {
        max-width: 100%;
    }

    .licence-list span {
        display: block;
        margin-top: 5px;
        color: #7682a5;
        font-size: 10px;
    }

._wrap_e4ptq_1 {
    margin-bottom: 10% !important;
}

/* BL_CNY live chat: the LiveChat widget normally renders as a small
   fixed-size floating panel (a plain #chat-widget-container div with its
   own inline width/height/position styles, holding the #chat-widget and
   #chat-widget-minimized iframes -- unlike the previous SaleSmartly widget,
   this is regular light-DOM, no closed shadow root). /m/livechat is meant
   to be a dedicated full-screen chat page, so force the widget's host
   element (and its iframes) to cover the whole viewport once it opens
   there. Needs !important to win over LiveChat's own inline styles.

   IMPORTANT: this MUST stay scoped to body.livechat-fullscreen-page --
   the widget element persists across every page (it's injected globally),
   so an unscoped rule here would cover the whole site (including the
   footer menu) with a z-index:999999 layer and block clicks everywhere,
   not just on /m/livechat. The livechat.aspx page adds this body class
   itself via JS. */
body.livechat-fullscreen-page #chat-widget-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 999999 !important;
}

body.livechat-fullscreen-page #chat-widget-container iframe {
    width: 100% !important;
    height: 100% !important;
}

/* BL_CNY deposit page: mobile Safari/webview has poor support for custom
   styling of native <ol> ::marker pseudo-elements (an earlier
   font-variant-numeric attempt here had no effect on device), which was
   letting item 1's number sit visibly further right than items 2-6 despite
   identical HTML. Stop relying on native <ol> numbering entirely -- draw
   the numbers manually via a CSS counter in a fixed-width column so every
   item's number lines up the same regardless of browser/font. */
.top-short-wrap ol.ps-3 {
    list-style: none;
    padding-left: 0;
    counter-reset: notice-counter;
}
.top-short-wrap ol.ps-3 > li {
    counter-increment: notice-counter;
    position: relative;
    padding-left: 1.4em;
}
.top-short-wrap ol.ps-3 > li::before {
    content: counter(notice-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
}

/* Contact Us page - keep the main contact icon a uniform size regardless of
   the uploaded photo's native dimensions (back-office photos vary in size,
   unlike the old fixed default icon set). Does not affect .contact-qr. */
.contact-box img:not(.contact-qr) {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* Popup Announcement modal (index/sports/esports/fish/lottery/card/slots) -
   this modal previously had ZERO custom styling anywhere (checked both
   style.css and custom.css) and relied entirely on raw Bootstrap defaults:
   the title/description were absolutely positioned on top of the promo
   image via Bootstrap's default .carousel-caption, the close button sat
   alone in an empty white bar above the image, and the "don't show again"
   checkbox row had no spacing at all. This block gives it a proper card
   look: rounded corners + shadow on the modal, a small circular close
   button overlaid on the image itself, the title/description moved below
   the image instead of overlapping it, and breathing room around the
   checkbox row. */
.announcementmodal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.announcementmodal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    line-height: 28px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    opacity: 1;
    text-shadow: none;
    font-size: 18px;
}

.announcementmodal .announcementpopupimg img {
    width: 100%;
    height: auto;
    display: block;
}

/* Move the title/description out of the image overlay and into a plain
   white block underneath, instead of Bootstrap's default absolute-positioned
   overlay text. */
.announcementmodal .carousel-caption {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 14px 16px;
    text-align: left;
    background: #fff;
}

    .announcementmodal .carousel-caption h3 {
        margin: 0 0 6px;
        color: #333;
        font-size: 16px;
        font-weight: 700;
    }

    .announcementmodal .carousel-caption p {
        margin: 0;
        color: #666;
        font-size: 13px;
        line-height: 1.5;
    }

.announcementmodal .cls-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 12px;
}

    .announcementmodal .cls-checkbox .round {
        display: flex;
        align-items: center;
        margin: 0;
    }

        .announcementmodal .cls-checkbox .round input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: #ff9f63;
        }

        .announcementmodal .cls-checkbox .round label {
            margin: 0;
        }

/* The header (.t-header) is forced to z-index:99999 elsewhere on this page
   (so its language dropdown always stays on top), which meant it rendered
   ABOVE this popup's backdrop and never got dimmed with the rest of the
   page. Bump this popup's backdrop (tagged with .announcement-backdrop by
   the JS in master.master right after it shows) above the header, and the
   popup card itself one level above that -- so opening the announcement
   dims the header too, while the card itself stays fully bright. This is
   scoped to this one backdrop/modal only, so other modals (side menu,
   balance, etc.) keep their existing stacking untouched. */
.announcement-backdrop {
    z-index: 100000 !important;
}

.announcementmodal {
    z-index: 100001 !important;
}

/* Add Bank page: existing-bank-account table headers were wrapping onto
   two lines on mobile (e.g. 账户持有人 -> 账户持 / 有人), looking messy
   compared to the wider desktop view. Keep header text on one line. */
#bankMethodPane .table-share th,
#cryptoMethodPane .table-share th {
    white-space: nowrap;
    font-size: 11px;
    padding: 10px 3px;
}

/* Add Bank page: hide/show toggle for the existing bank/wallet list table. */
.bank-list-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.bank-list-toggle-btn {
    font-size: 12px;
    color: #7682a5;
    cursor: pointer;
    text-decoration: none;
}

/* Download page: iOS QR code removed. Android QR + button stay centered,
   iOS button (still opens the PWA install guide) sits centered below it. */
.dl-qr.dl-qr-single {
    flex-direction: column;
    gap: 10px;
}

.dl-qr.dl-qr-single .dl-ios-btn-only {
    margin-top: 0;
}

/* .dl-qr-box .orange-inner-wrap normally gets the rounder 20px corner,
   but the iOS button is no longer inside a .dl-qr-box (its QR was
   removed), so give it the same rounding directly to match Android. */
.dl-qr.dl-qr-single .dl-ios-btn-only .orange-inner-wrap {
    border-radius: 20px;
}

/* Android's button used to auto-stretch to match its QR image's box
   width; the iOS button has no QR image to size against, so it was
   coming out a different width. Force both buttons to the exact same
   fixed width instead of relying on each one's own auto-sizing. 130px
   comfortably fits the longer "苹果 iOS" label on one line. */
.dl-qr.dl-qr-single .dl-qr-box .orange-wrap,
.dl-qr.dl-qr-single .dl-ios-btn-only {
    width: 130px;
}

/* Keep icon + label centered on one line inside the pill instead of
   wrapping (which happened at the old 90px width). */
.dl-qr.dl-qr-single .dl-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

/* ============================================================
   Mission page (领红利, /m/mission) + Reward page (红包雨, /m/reward)
   Ported from GSG design mockup [BL22-27] Add Mission page & Reward page.
   Reuses site-wide .title-header / .title-hdr-wrap / .menu-btm (from master.master).
   ============================================================ */
@keyframes ev-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 calc(var(--ev-float, 6px) * -1); }
}

@keyframes ev-twinkle {
    0% { scale: 0; rotate: 0deg; opacity: 0; }
    50% { scale: 1; rotate: 45deg; opacity: 1; }
    100% { scale: 0; rotate: 90deg; opacity: 0; }
}

@keyframes ev-wiggle {
    0%, 20%, 100% { rotate: 0deg; }
    4% { rotate: -12deg; }
    8% { rotate: 12deg; }
    12% { rotate: -8deg; }
    16% { rotate: 8deg; }
}

@keyframes ev-glow {
    0%, 100% { filter: drop-shadow(0 0 0 #ffb46a); }
    50% { filter: drop-shadow(0 0 6px #ffb46a); }
}

@keyframes ev-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.06; }
}

@keyframes ev-shake {
    0%, 100% { rotate: 0deg; }
    20%, 60% { rotate: calc(var(--ev-shake, 8deg) * -1); }
    40%, 80% { rotate: var(--ev-shake, 8deg); }
}

@keyframes ev-flash {
    from { scale: 0; opacity: 1; }
    to { scale: 4; opacity: 0; }
}

@keyframes ev-pop {
    0% { scale: .85; }
    60% { scale: 1.12; }
    100% { scale: 1; }
}

@keyframes ev-rise {
    0% { translate: 0 40px; scale: .3; opacity: 0; }
    70% { translate: 0 0; scale: 1.1; opacity: 1; }
    100% { translate: 0 0; scale: 1; opacity: 1; }
}

@keyframes ev-burst {
    0% { translate: 0 0; rotate: 0deg; scale: .4; opacity: 1; }
    30% { scale: 1; opacity: 1; }
    100% { translate: var(--x) var(--y); rotate: var(--r); scale: 1; opacity: 0; }
}

@keyframes ev-fall {
    0% { translate: 0 0; rotate: var(--r0, 0deg); }
    50% { translate: var(--sway) 55vh; }
    100% { translate: 0 calc(100vh + 160px); rotate: var(--r); }
}

/* lobby entry buttons */
.mission-entry img {
    --ev-float: 3px;
    animation: ev-float 2.4s ease-in-out infinite, ev-glow 2s ease-in-out infinite;
}

/* 网站原有的后台可配置 Float Icon 功能 (#float-icon，跟 Mission/Reward 无关)，
   图片/连结/位置都是后台 /ajaxData/proc_getFloatIcon 设定的，这里让外观跟旁边
   .ap-float 悬浮红包按钮一致：干净的小图示 + 阴影 + 轻微摇晃，不做圆形底/光晕包装，
   并把原生难看的红字 X 关闭钮改成小圆徽章 */
#float-icon #div-img img {
    width: 56px !important;
    height: auto !important;
    filter: drop-shadow(0 3px 6px rgba(160, 0, 0, .35));
    animation: ev-wiggle 2.5s ease-in-out infinite;
}

#float-icon .float-icon-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #ff5a0a;
    animation: none;
    z-index: 1;
}

/* 红包雨: lobby floating icon + reward page (positions are % of the closed envelope box, per mockup) */
/* Hardcode 版本先隐藏，改用左边后台的 Float Icon 功能当入口；markup 保留，之后要切回来直接拿掉这行 display:none 即可 */
.ap-float {
    display: none;
    position: fixed;
    right: 12px;
    bottom: 84px; /* above .menu-btm */
    z-index: 5;
    width: 56px;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
}

.ap-float img:first-child {
    width: 100%;
    filter: drop-shadow(0 3px 6px rgba(160, 0, 0, .35));
    --ev-float: 4px;
    animation: ev-float 2.4s ease-in-out infinite, ev-wiggle 2.5s ease-in-out infinite;
}

.ap-float-blink {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    pointer-events: none;
    animation: ev-twinkle 1.6s ease-in-out infinite;
}

.ap-stage {
    position: relative;
    z-index: 0; /* own stacking context, stays under the fixed header */
    width: min(46vw, 240px);
    aspect-ratio: 284 / 373;
    margin: calc(min(46vw, 240px) * .8) auto 60px; /* the open envelope's coins stick out above the box, CLAIM below */
}

.ap-angpao {
    position: absolute;
    inset: 0;
    background: none;
    border: 0;
    padding: 0;
    --ev-float: 10px;
    animation: ev-float 3s ease-in-out infinite;
}

.ap-angpao img {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    translate: -50% 0;
}

.ap-stage.is-opened .ap-angpao img {
    width: 107.4%; /* angpai-open is 305px wide vs 284px closed, same envelope body */
    animation: ev-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

.ap-stage.is-opening .ap-angpao {
    scale: 1.05;
    animation: ev-shake .45s ease-in-out;
}

.ap-blink {
    position: absolute;
    z-index: 2;
    translate: -50% -50%;
    opacity: 0; /* only twinkle once opened */
    pointer-events: none;
}

.ap-stage.is-opened .ap-blink {
    animation: ev-twinkle 1.6s var(--delay, 0s) ease-in-out infinite;
}

.ap-blink.b1 { left: 73%; top: -8%; width: 26%; }
.ap-blink.b2 { left: -12%; top: 45%; width: 30%; --delay: .5s; }
.ap-blink.b3 { left: 96%; top: 62%; width: 30%; --delay: 1s; }

.ap-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 50%;
    translate: -50% -50%;
    scale: 0;
    opacity: 0;
    pointer-events: none;
}

.ap-stage.is-opened .ap-flash {
    animation: ev-flash .4s ease-out both;
}

.ap-claim {
    position: absolute;
    left: 0;
    right: 0;
    top: 91%; /* overlaps the envelope's bottom edge */
    z-index: 3;
    width: 84%;
    margin: 0 auto;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    animation: ev-pulse 1.2s ease-in-out infinite;
}

.ap-claim img {
    width: 100%;
}

/* gold confetti flake in the 红包雨 (no asset, drawn in CSS) */
.ev-flake {
    position: absolute;
    top: -20px;
    aspect-ratio: 2 / 3;
    background: linear-gradient(135deg, #fff3b0, #f7b733 55%, #d88a00);
    clip-path: polygon(50% 0, 100% 75%, 15% 100%);
    animation: ev-fall var(--d, 5s) linear forwards, ev-flutter var(--flip, 1s) linear infinite;
}

@keyframes ev-flutter {
    to { transform: rotate3d(1, .6, .2, 360deg); }
}

/* mission page (领红利) */
.ms-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 55px;
    background: #eaf3fd;
}

.ms-hero {
    position: relative;
    z-index: 1;
    width: min(64vw, 320px);
    margin: 10px auto -5vw;
}

.ms-panel {
    flex: 1;
    padding: calc(5vw + 12px) 10px 90px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(#fff3ad, #fff8d2);
}

.ms-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.ms-card.is-claim {
    background: linear-gradient(#ffe27a, #ffa94d);
}

.ms-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #eaf3ff;
}

.ms-card.is-claim .ms-thumb {
    background: #fff;
}

.ms-thumb img {
    height: 82%;
}

.ms-info {
    flex: 1;
    min-width: 0;
}

.ms-info h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #6b3a0f;
}

.ms-info p {
    margin: 0;
    font-size: 12px;
    color: #8a5a2b;
}

.ms-btn {
    flex: none;
    min-width: 78px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9d2a, #ff5a0a);
    color: #fff;
    font-size: 15px;
}

.ms-btn:hover,
.ms-btn:focus {
    color: #fff; /* beat the global button:focus grey */
}

.ms-card.is-claim .ms-btn {
    animation: ev-pulse 1.2s ease-in-out infinite;
}

/* Mission Advance: already-claimed card in the list -- only the button badge turns grey
   ("已领取"), the rest of the card keeps its normal look. */
.ms-card.is-claimed .ms-btn {
    background: #aeb3bc;
    color: #fff;
}

.ms-tnc-pop {
    width: min(78vw, 340px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #eef5ff;
}

.ms-tnc-pop::backdrop {
    background: rgba(0, 0, 0, .55);
}

.ms-tnc-inner {
    padding: 22px 22px 20px;
    text-align: center;
}

.ms-tnc-inner h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #111;
}

.ms-tnc-body ul {
    margin: 0 0 18px;
    padding-left: 18px;
    text-align: left;
    font-size: 13px;
    line-height: 1.7;
    color: #8a94a6;
}

.reward-tnc {
    max-width: 480px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: #7682a5 2px 2px 8px -4px;
    color: #7682a5;
}

.reward-tnc h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #ffa466;
}

#reward-tnc-content {
    min-height: 80px;
}

.reward-tnc ol {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
}

.reward-tnc li + li {
    margin-top: 4px;
}

.ev-rain {
    position: fixed;
    inset: 0;
    z-index: 1060; /* above the fixed header and footer */
    overflow: hidden;
    pointer-events: none;
}

.ev-rain img {
    position: absolute;
    top: -90px;
    /* angpao-1/4 + coin-1/2 have their blur cropped flat at the left/right edge; feather it */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    animation: ev-fall var(--d, 3s) linear forwards;
}

@media (prefers-reduced-motion: reduce) {
    .mission-entry img,
    .ap-float img,
    #float-icon #div-img img,
    .ap-stage *,
    .ms-btn {
        animation: none !important;
    }
}

/* Mission Advance: T&C/description content now sits first in the popup (no separate
   title above it -- ma_content already carries its own heading), so give it its own
   bottom margin instead of relying on the "ul inside it" rule above for spacing. */
.ms-tnc-body:not(:empty) {
    margin: 0 0 14px;
}

/* Mission Advance: consecutive check-in day grid inside the T&C/details popup */
.ms-tnc-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 0 0 14px;
}

.ms-tnc-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    color: #8a94a6;
}

.ms-tnc-day-num {
    font-size: 10px;
}

.ms-tnc-day-amt {
    font-size: 9px;
    font-weight: 600;
    color: #ff5a0a;
    display: none;
}

.ms-tnc-day.is-done {
    background: linear-gradient(#ffe27a, #ffa94d);
    color: #6b3a0f;
}

.ms-tnc-day.is-done i {
    font-size: 14px;
    color: #6b3a0f;
}

.ms-tnc-day.is-today {
    box-shadow: 0 0 0 2px #ff5a0a inset;
}

/* Mission Advance: progress rows (register/deposit/turnover/spin/etc.) inside the popup */
.ms-tnc-progress {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff;
    text-align: left;
}

.ms-tnc-progress:empty {
    display: none;
    margin: 0;
    padding: 0;
}

.ms-tnc-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 12px;
    color: #556;
}

.ms-tnc-progress-row b {
    flex: none;
    color: #111;
}

/* Mission Advance: EVENT_CREDIT reward product picker (dormant until EnableEventWallet is on) */
.ms-tnc-select {
    margin: 0 0 14px;
    text-align: left;
}

.ms-tnc-select select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d7dee8;
    background: #fff;
    font-size: 13px;
    color: #333;
}

/* Mission Advance: claim button inside the popup, sits above the existing close button */
.ms-tnc-claim {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9d2a, #ff5a0a);
    color: #fff;
    font-size: 15px;
}

.ms-tnc-claim:disabled {
    background: #c7cdd6;
    color: #fff;
}
/* end mission + reward pages */

/* account page: 头像要跟 VIP/用户名 并排显示（style.css 的 .acc-pic 是 flex，但里面还包了一层 <a>，flex 对孙层不生效，所以要单独把 <a> 也设成 flex） */
.acc-pic a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 头像图会依会员等级动态换图，各等级原图尺寸不一致；style.css 只限制了外层 .acc-avatar 的宽度，
   没限制里面 <img> 本身，图片原图比较大时就会撑破 55px 的框直接以原尺寸显示，要在 img 本身也加限制 */
.acc-avatar img {
    width: 100%;
    height: auto;
    display: block;
}

/* Profile page: 整合进来的"修改密码"表单，沿用原本 /m/change-password 页面的样式 */
.chg-password-error-msg {
    display: block !important;
    color: #ff4d4f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 6px 0 12px 0 !important;
    text-align: left !important;
}

.chg-password-submit-btn {
    border: 0;
    outline: none;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

/* Profile page: 整合进来的"提现密码"表单，沿用原本 /m/withdrawal-password 页面的样式 */
.wp-error-msg {
    display: block !important;
    color: #ff4d4f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 6px 0 12px 0 !important;
    text-align: left !important;
}

.wp-tips {
    margin: 8px 0 24px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: #7682a5;
}

.wp-submit-btn {
    border: 0;
    outline: none;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

/* Profile page: 温馨提示区块是整页最下面的内容，部分手机因为字体大小/机型关系，
   显示上会被固定在底部的导航栏遮住一部分且很难注意到还能往下滑，
   这里刻意加大它跟底部导航栏之间的安全距离，不依赖各机型精确计算出来的高度 */
.profile-warm-reminder {
    margin-bottom: 80px;
}
/* end account page */