/* ============================================================================
   UI ENHANCE  —  cosmetic-only theme overrides
   ----------------------------------------------------------------------------
   Loaded AFTER the compiled uni-app component styles, on these pages only:
     login.php / register.php  -> body.pages-login-login
     invite.php                -> body.pages-index-share
     mine.php                  -> body.pages-my-my
     products.php              -> body.pages-index-index

   SAFETY CONTRACT (do not break):
   - This file changes ONLY visual properties (color, background, border,
     radius, shadow, font, spacing, transition).
   - It NEVER sets display / visibility on any element, so every JS show/hide
     (tabs, popups, alerts, hidden rows) keeps working untouched.
   - All rules are scoped under a page body class and only load where linked.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ---- shared design tokens (scoped to the themed pages) ------------------- */
body.pages-login-login,
body.pages-index-share,
body.pages-my-my,
body.pages-index-index {
    --ui-primary: #2F539B;
    --ui-primary-2: #4774d4;
    --ui-grad: linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%);
    --ui-bg: #eef1f8;
    --ui-card: #ffffff;
    --ui-radius: 16px;
    --ui-radius-sm: 12px;
    --ui-shadow: 0 12px 30px rgba(31, 57, 110, 0.12);
    --ui-shadow-sm: 0 4px 14px rgba(31, 57, 110, 0.08);
    --ui-text: #1f2a44;
    --ui-muted: #7b86a1;
    --ui-border: #e7ebf4;
    background: var(--ui-bg);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

body.pages-login-login uni-text,
body.pages-index-share uni-text,
body.pages-my-my uni-text,
body.pages-index-index uni-text,
body.pages-login-login uni-view,
body.pages-index-share uni-view,
body.pages-my-my uni-view,
body.pages-index-index uni-view,
body.pages-login-login button,
body.pages-index-share button,
body.pages-my-my button,
body.pages-index-index button,
body.pages-login-login input {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ===========================================================================
   LOGIN  +  REGISTER   (body.pages-login-login)
   ========================================================================== */
body.pages-login-login .content {
    background: var(--ui-bg) !important;
}

/* form card */
body.pages-login-login .login_con .login_con_box {
    background: var(--ui-card) !important;
    border-radius: 20px !important;
    box-shadow: var(--ui-shadow) !important;
    padding: 26px 22px 24px !important;
    border: 1px solid var(--ui-border) !important;
    box-sizing: border-box !important;
}

/* Login / Register tab switch */
body.pages-login-login .login_con .login_title {
    display: flex;
    gap: 8px !important;
    background: #f1f4fb !important;
    border-radius: 12px !important;
    padding: 5px !important;
    margin-bottom: 22px !important;
}

body.pages-login-login .login_con .login_title uni-text {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 9px 0 !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ui-muted) !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
}

body.pages-login-login .login_con .login_title uni-text.select {
    background: var(--ui-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(47, 83, 155, 0.35) !important;
}

/* input rows */
body.pages-login-login .login_con .login_input {
    background: #f6f8fd !important;
    border: 1.5px solid var(--ui-border) !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    padding: 4px 10px !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
    box-sizing: border-box !important;
}

body.pages-login-login .login_con .login_input:focus-within {
    border-color: var(--ui-primary-2) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(71, 116, 212, 0.12) !important;
}

body.pages-login-login .login_con .login_input .phoneText,
body.pages-login-login .login_con .login_input .login_input_text {
    color: var(--ui-text) !important;
    font-weight: 600 !important;
}

body.pages-login-login .login_con .login_input .uni-input-input {
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: 15px !important;
    padding: 12px 6px !important;
}

body.pages-login-login .login_con .login_input .uni-input-input::placeholder {
    color: #aab2c6 !important;
}

body.pages-login-login .login_con .login_input .login_input_img {
    cursor: pointer !important;
    opacity: .8 !important;
}

/* submit button */
body.pages-login-login .login_con .login_btn {
    background: var(--ui-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 15px 0 !important;
    margin-top: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    box-shadow: 0 10px 22px rgba(47, 83, 155, 0.32) !important;
    cursor: pointer !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

body.pages-login-login .login_con .login_btn:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 14px 28px rgba(47, 83, 155, 0.42) !important;
}

body.pages-login-login .login_con .login_btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 6px 14px rgba(47, 83, 155, 0.3) !important;
}

/* bottom switch link */
body.pages-login-login .login_con .reg {
    color: var(--ui-primary) !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 16px !important;
    cursor: pointer !important;
}

/* ===========================================================================
   INVITE / SHARE   (body.pages-index-share)
   ========================================================================== */
body.pages-index-share .content {
    background: var(--ui-bg) !important;
}

/* hero banner */
body.pages-index-share .bj_top2 {
    background: var(--ui-grad) !important;
    border-radius: 0 0 26px 26px !important;
    padding: 26px 20px 30px !important;
    box-shadow: var(--ui-shadow) !important;
    color: #fff !important;
}

body.pages-index-share .bj_top2 .title {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}

body.pages-index-share .bj_top2 .msg {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* QR card */
body.pages-index-share #qr-wrapper {
    box-shadow: var(--ui-shadow-sm) !important;
    padding: 14px !important;
}

/* content cards */
body.pages-index-share .box {
    background: var(--ui-card) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    border: 1px solid var(--ui-border) !important;
    margin: 14px 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

body.pages-index-share .box .box_title {
    color: var(--ui-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    padding-left: 12px !important;
    border-left: 4px solid var(--ui-primary) !important;
    line-height: 1.2 !important;
}

/* share/copy rows */
body.pages-index-share .box .bbox {
    background: #f6f8fd !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

body.pages-index-share .box .bbox .msg_title {
    color: var(--ui-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
}

body.pages-index-share .box .bbox .msg span {
    color: var(--ui-text) !important;
    font-weight: 500 !important;
    word-break: break-all !important;
}

/* copy buttons */
body.pages-index-share .box .bbox .btn {
    background: var(--ui-grad) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 14px rgba(47, 83, 155, 0.28) !important;
    cursor: pointer !important;
    transition: transform .15s ease, filter .15s ease !important;
}

body.pages-index-share .box .bbox .btn:hover {
    filter: brightness(1.07) !important;
}

body.pages-index-share .box .bbox .btn:active {
    transform: scale(0.96) !important;
}

body.pages-index-share .box .bbox .btn uni-text span {
    color: #fff !important;
}

/* referral reward level tiles */
body.pages-index-share .box .level {
    gap: 12px !important;
}

body.pages-index-share .box .level .level_box {
    background: linear-gradient(160deg, #f7f9fe, #eef2fb) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: 16px 8px !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.pages-index-share .box .level .level_box .level_title {
    color: var(--ui-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.pages-index-share .box .level .level_box .level_msg {
    color: var(--ui-primary) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
}

/* ===========================================================================
   MINE / PROFILE   (body.pages-my-my)
   ========================================================================== */
body.pages-my-my .content {
    background: var(--ui-bg) !important;
}

/* profile header */
body.pages-my-my .my_info2 {
    background: var(--ui-grad) !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: var(--ui-shadow) !important;
}

body.pages-my-my .my_info2 .avatar_img {
    border: 3px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

body.pages-my-my .my_info2 .avatar_msg .avatar_phone {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

body.pages-my-my .my_info2 .avatar_msg .vip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}

/* balance stats — solid white cards with DARK text so values are always
   readable on the gradient/photo header (fixes white-on-white invisibility) */
body.pages-my-my .my_info2 .cash {
    background: transparent !important;
    border: none !important;
    margin-top: 16px !important;
}

body.pages-my-my .my_info2 .cash .cash_item {
    background: #ffffff !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14) !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
}

body.pages-my-my .my_info2 .cash .cash_item .cash_ky {
    color: var(--ui-primary) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #eef1f8 !important;
}

body.pages-my-my .my_info2 .cash .cash_item .cash_title {
    color: #7b86a1 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* remove the menu container's own padding so the card can go full width */
body.pages-my-my .content .item_gn {
    padding: 0 !important;
}

/* menu list */
body.pages-my-my .item_gn .menu_list2 {
    background: var(--ui-card) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    border: 1px solid var(--ui-border) !important;
    margin: 14px 2px !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item {
    border-bottom: 1px solid #f0f2f8 !important;
    transition: background .18s ease !important;
    border-radius: 10px !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item:hover {
    background: #f6f8fd !important;
}

/* row layout: icon chip | label | chevron, vertically centred */
body.pages-my-my .item_gn .menu_list2 .menu_item uni-navigator {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 13px 6px !important;
}

/* proper, clearly-visible icon chip on EVERY menu button */
body.pages-my-my .item_gn .menu_list2 .menu_item .ico {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    background: linear-gradient(160deg, #eaf0fc, #d7e2f6) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 0 1px rgba(47, 83, 155, 0.08) !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .ico svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .ico svg path {
    fill: var(--ui-primary) !important;
}

/* label takes remaining space so the chevron sits at the far right */
body.pages-my-my .item_gn .menu_list2 .menu_item .name {
    flex: 1 1 auto !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .icon-right {
    position: static !important;
    flex: 0 0 auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .icon-right svg {
    width: 18px !important;
    height: 18px !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .name {
    color: var(--ui-text) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

/* ===========================================================================
   PRODUCTS / HOME   (body.pages-index-index)
   ========================================================================== */
body.pages-index-index .content {
    background: var(--ui-bg) !important;
}

/* shared soft elevation used by slider / tabbar / category */
body.pages-index-index .yinying {
    box-shadow: var(--ui-shadow-sm) !important;
    border-radius: var(--ui-radius-sm) !important;
}

/* quick action bar */
body.pages-index-index .tabbar_i {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    padding: 16px 6px !important;
    box-sizing: border-box !important;
}

body.pages-index-index .tabbar_i .baritem {
    color: var(--ui-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: transform .15s ease !important;
}

body.pages-index-index .tabbar_i .baritem:active {
    transform: scale(0.94) !important;
}

body.pages-index-index .tabbar_i .baritem .baritem_img {
    background: var(--ui-grad) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: 0 6px 14px rgba(47, 83, 155, 0.25) !important;
    box-sizing: border-box !important;
}

body.pages-index-index .tabbar_i .baritem .baritem_img svg path {
    fill: #fff !important;
}

/* category segmented tabs */
body.pages-index-index .category {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

body.pages-index-index .category .category_item .item_selected {
    background: var(--ui-grad) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 14px rgba(47, 83, 155, 0.3) !important;
}

body.pages-index-index .category .category_item .item {
    color: var(--ui-muted) !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* product cards (scoped to listbox3 so it never hits the .item tab labels) */
body.pages-index-index .listbox3 .item {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    overflow: hidden !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    box-sizing: border-box !important;
}

body.pages-index-index .listbox3 .item:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--ui-shadow) !important;
}

body.pages-index-index .listbox3 .item .item_img .item_title {
    color: var(--ui-text) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

body.pages-index-index .listbox3 .item .item_img .zt img,
body.pages-index-index .listbox3 .item .item_img .zt div {
    border-radius: 12px !important;
}

body.pages-index-index .listbox3 .item .item_con .con .msg {
    color: var(--ui-primary) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

body.pages-index-index .listbox3 .item .item_con .con .title {
    color: var(--ui-muted) !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}

/* buy / pre-sale buttons */
body.pages-index-index .listbox3 .item .btns .btn {
    background: var(--ui-grad) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 11px 0 !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 18px rgba(47, 83, 155, 0.3) !important;
    cursor: pointer !important;
    transition: transform .15s ease, filter .15s ease !important;
}

body.pages-index-index .listbox3 .item .btns .btn:hover {
    filter: brightness(1.06) !important;
}

body.pages-index-index .listbox3 .item .btns .btn:active {
    transform: translateY(2px) !important;
}

body.pages-index-index .listbox3 .item .btns .btn svg path {
    fill: #fff !important;
}

body.pages-index-index .listbox3 .item .btns .btn1 {
    background: #eef0f5 !important;
    color: #9aa3b5 !important;
    border-radius: 12px !important;
    padding: 11px 0 !important;
    font-weight: 600 !important;
}

/* --------- PRODUCTS: extra polish (v2) --------------------------------- */

/* banner slider */
body.pages-index-index .u-swiper,
body.pages-index-index .slider-frame,
body.pages-index-index .slider-img {
    border-radius: var(--ui-radius) !important;
}

body.pages-index-index .u-swiper.yinying {
    overflow: hidden !important;
    box-shadow: var(--ui-shadow) !important;
}

/* quick-action labels under the icon chips */
body.pages-index-index .tabbar_i .baritem .baritem_img {
    margin-bottom: 6px !important;
}

/* category tabs row spacing */
body.pages-index-index .category {
    gap: 6px !important;
    margin: 14px 12px !important;
}

/* product list breathing room */
body.pages-index-index .listbox3 {
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

body.pages-index-index .listbox3 .item {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}

/* product cover image */
body.pages-index-index .listbox3 .item .item_img {
    position: relative !important;
}

body.pages-index-index .listbox3 .item .item_img .zt,
body.pages-index-index .listbox3 .item .item_img .zt img,
body.pages-index-index .listbox3 .item .item_img .zt div {
    border-radius: 14px 14px 0 0 !important;
}

/* floating product title chip over the image */
body.pages-index-index .listbox3 .item .item_img .item_title {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent) !important;
    color: #fff !important;
    padding: 18px 12px 8px !important;
    border-radius: 0 0 14px 14px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* turn the 4 stats into clean chips */
body.pages-index-index .listbox3 .item .item_con {
    gap: 8px !important;
    padding: 12px !important;
}

body.pages-index-index .listbox3 .item .item_con .con {
    background: linear-gradient(160deg, #f7f9fe, #eef2fb) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
}

/* buy button: center icon + label nicely */
body.pages-index-index .listbox3 .item .btns {
    padding: 0 12px !important;
}

body.pages-index-index .listbox3 .item .btns .btn > uni-view {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

body.pages-index-index .listbox3 .item .btns .btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ===========================================================================
   v3 — richer visual polish: premium depth, motion & accents
   Still cosmetic-only. Entrance animations always END visible (never hide
   data), and nothing toggles display/visibility.
   ========================================================================== */

/* premium layered page backdrop (content made transparent so it shows) */
body.pages-login-login,
body.pages-index-share,
body.pages-my-my,
body.pages-index-index {
    background:
        radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(820px 460px at 100% 0%, #e7eeff 0%, rgba(231, 238, 255, 0) 55%),
        linear-gradient(180deg, #eef1f8 0%, #e5ebf6 100%) !important;
}

body.pages-login-login .content,
body.pages-index-share .content,
body.pages-my-my .content,
body.pages-index-index .content {
    background: transparent !important;
}

/* gentle entrance for primary surfaces (ends fully visible) */
@keyframes ui-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.pages-login-login .login_con .login_con_box,
body.pages-index-share .box,
body.pages-my-my .my_info2,
body.pages-my-my .item_gn .menu_list2,
body.pages-index-index .tabbar_i,
body.pages-index-index .category,
body.pages-index-index .listbox3 .item {
    animation: ui-fade-up .5s ease both !important;
}

/* animated sheen on the main action buttons only (tasteful, not everywhere) */
@keyframes ui-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

body.pages-login-login .login_con .login_btn,
body.pages-index-share .box .bbox .btn,
body.pages-index-index .listbox3 .item .btns .btn {
    background: linear-gradient(110deg, #2F539B 0%, #4774d4 42%, #6c93e8 52%, #2F539B 100%) !important;
    background-size: 220% 100% !important;
    animation: ui-flow 6s linear infinite !important;
}

/* LOGIN: glowing logo ring + glassy elevated card */
body.pages-login-login .bj .logo {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 12px 32px rgba(47, 83, 155, 0.45) !important;
}

body.pages-login-login .login_con .login_con_box {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 26px 60px -20px rgba(47, 83, 155, 0.5), 0 6px 18px rgba(31, 57, 110, 0.1) !important;
    backdrop-filter: blur(6px) !important;
}

body.pages-login-login .login_con .login_input {
    background: #f4f7fe !important;
}

/* MINE: darken header photo for legible white name + avatar glow ring */
body.pages-my-my .my_info2 .my_info1_bj::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(31, 42, 68, 0.12) 0%, rgba(31, 42, 68, 0.55) 100%) !important;
    z-index: 1 !important;
}

body.pages-my-my .my_info2 .avatar_img {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item .icon-right svg path {
    fill: #b8c0d4 !important;
}

body.pages-my-my .item_gn .menu_list2 .menu_item:hover {
    transform: translateX(3px) !important;
}

/* INVITE: hero light sweep + reward tile top accent bar */
body.pages-index-share .bj_top2 {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(240px 240px at 85% -25%, rgba(255, 255, 255, 0.28), transparent 70%),
        linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%) !important;
}

body.pages-index-share .box .level .level_box {
    position: relative !important;
    overflow: hidden !important;
}

body.pages-index-share .box .level .level_box::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #2F539B, #6c93e8) !important;
}

body.pages-index-share .box .level .level_box .level_msg {
    font-size: 24px !important;
}

/* PRODUCTS: cover image zoom on hover + deeper buy-button glow */
body.pages-index-index .listbox3 .item .item_img {
    overflow: hidden !important;
}

body.pages-index-index .listbox3 .item .item_img .zt img {
    transition: transform .35s ease !important;
}

body.pages-index-index .listbox3 .item:hover .item_img .zt img {
    transform: scale(1.06) !important;
}

body.pages-index-index .listbox3 .item .btns .btn {
    box-shadow: 0 12px 24px rgba(47, 83, 155, 0.4) !important;
}

/* ===========================================================================
   v4 — PREMIUM DARK BACKDROP
   Deep navy gradient with colored glow orbs; the white cards + vibrant
   buttons pop against it. Card content stays light-on-white (readable).
   ========================================================================== */

body.pages-login-login,
body.pages-index-share,
body.pages-my-my,
body.pages-index-index {
    background:
        radial-gradient(680px 360px at 10% 6%, rgba(71, 116, 212, 0.38), transparent 60%),
        radial-gradient(640px 420px at 92% 10%, rgba(124, 92, 224, 0.32), transparent 60%),
        radial-gradient(760px 520px at 50% 112%, rgba(47, 83, 155, 0.42), transparent 60%),
        linear-gradient(160deg, #0e1932 0%, #0a1124 55%, #090e1d 100%) !important;
    background-attachment: fixed !important;
}

/* cards read via a soft light edge + deep shadow on the dark backdrop */
body.pages-login-login .login_con .login_con_box,
body.pages-index-share .box,
body.pages-my-my .item_gn .menu_list2,
body.pages-index-index .tabbar_i,
body.pages-index-index .category,
body.pages-index-index .listbox3 .item {
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* LOGIN: bright glass card floating on the dark scene */
body.pages-login-login .login_con .login_con_box {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 30px 70px -18px rgba(8, 14, 30, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* neutralize the leftover green underline on the active tab */
body.pages-login-login .login_con .login_title uni-text,
body.pages-login-login .login_con .login_title uni-text.select {
    border: none !important;
    border-bottom: none !important;
}

/* logo: brighter glow halo on the dark backdrop */
body.pages-login-login .bj .logo {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 40px rgba(71, 116, 212, 0.7), 0 12px 34px rgba(0, 0, 0, 0.55) !important;
}

/* tidy the very top of the mine header on the dark bg */
body.pages-my-my .my_info2 {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

/* ===========================================================================
   v5 — PRODUCTS card refinement (premium, well-structured)
   ========================================================================== */

/* card: clear separation, rounded, clipped */
body.pages-index-index .listbox3 .item {
    margin-bottom: 18px !important;
    padding: 0 0 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* title strip ("DAILY INCOME DAILY WITHDRAWAL" = product name) as a header bar */
body.pages-index-index .listbox3 .item .item_img .item_title {
    position: static !important;
    background: linear-gradient(135deg, #2F539B, #36454F) !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 9px 12px !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

/* banner image flush inside the clipped card */
body.pages-index-index .listbox3 .item .item_img .zt,
body.pages-index-index .listbox3 .item .item_img .zt img,
body.pages-index-index .listbox3 .item .item_img .zt div {
    border-radius: 0 !important;
}

/* stat tiles: bigger values; highlight the Daily-profit tile in green */
body.pages-index-index .listbox3 .item .item_con {
    gap: 10px !important;
    padding: 14px !important;
}

body.pages-index-index .listbox3 .item .item_con .con {
    background: #f5f8fe !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    padding: 12px 6px !important;
}

body.pages-index-index .listbox3 .item .item_con .con .msg {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--ui-primary) !important;
}

body.pages-index-index .listbox3 .item .item_con .con:nth-child(2) {
    background: linear-gradient(160deg, #e9faf0, #dbf3e6) !important;
    border-color: #bce5cc !important;
}

body.pages-index-index .listbox3 .item .item_con .con:nth-child(2) .msg {
    color: #1c9b55 !important;
}

/* Buy now: vibrant prominent pill */
body.pages-index-index .listbox3 .item .btns {
    padding: 4px 14px 0 !important;
}

body.pages-index-index .listbox3 .item .btns .btn {
    border-radius: 30px !important;
    padding: 14px 0 !important;
    font-size: 15px !important;
    letter-spacing: .5px !important;
    box-shadow: 0 12px 26px rgba(47, 83, 155, 0.45) !important;
}

/* Pre-sale: clear "coming soon" pill instead of a blank-looking tag */
body.pages-index-index .listbox3 .item .btns .btn1 {
    border-radius: 30px !important;
    padding: 13px 0 !important;
    background: #eef1f7 !important;
    color: #8a93a7 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    border: 1px dashed #c7cfde !important;
}

/* ===========================================================================
   SETTINGS / Personal Information   (body.pages-my-infolist)
   Cosmetic-only — no display/visibility changes.
   ========================================================================== */
body.pages-my-infolist {
    --ui-primary: #2F539B;
    --ui-grad: linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%);
    --ui-bg: #eef1f8;
    --ui-card: #ffffff;
    --ui-radius: 16px;
    --ui-shadow-sm: 0 4px 14px rgba(31, 57, 110, 0.08);
    --ui-text: #1f2a44;
    --ui-border: #e7ebf4;
    background: var(--ui-bg);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-infolist uni-view,
body.pages-my-infolist uni-text,
body.pages-my-infolist button,
body.pages-my-infolist input {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-infolist .content { background: var(--ui-bg) !important; }
body.pages-my-infolist .uni-page-head { box-shadow: 0 6px 18px rgba(31, 57, 110, 0.25) !important; }

/* top banner -> clean brand-gradient card (decorative image removed) */
body.pages-my-infolist .info_top {
    padding: 14px 14px 0 !important;
    height: 124px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
body.pages-my-infolist .info_top .info_bj {
    position: relative !important;
    height: 110px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: var(--ui-grad) !important;
    box-shadow: 0 12px 28px rgba(31, 57, 110, 0.28) !important;
}
body.pages-my-infolist .info_top .info_bj uni-image {
    width: 100% !important;
    height: 100% !important;
    background-image: none !important;
    background-color: transparent !important;
}
body.pages-my-infolist .info_top .info_bj uni-image div {
    background-image: none !important;
    background-color: transparent !important;
}
body.pages-my-infolist .info_top .info_bj::after {
    content: "" !important;
    position: absolute !important;
    top: -45%; right: -8%;
    width: 165px; height: 165px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%) !important;
}

/* menu container -> white card */
body.pages-my-infolist .item_gn {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    margin: 14px 14px 0 !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
}

/* each row: icon chip | label | chevron */
body.pages-my-infolist .item_gn .menu_item {
    position: relative !important;
    border-bottom: 1px solid #f0f2f8 !important;
    border-radius: 10px !important;
    transition: background .18s ease !important;
}
body.pages-my-infolist .item_gn .menu_item:last-child { border-bottom: 0 !important; }
body.pages-my-infolist .item_gn .menu_item:hover { background: #f6f8fd !important; }
body.pages-my-infolist .item_gn .menu_item uni-navigator {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 6px !important;
}
body.pages-my-infolist .item_gn .menu_item .ico {
    position: static !important;
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    flex: 0 0 42px !important; margin: 0 !important; padding: 0 !important;
    background: linear-gradient(160deg, #eaf0fc, #d7e2f6) !important;
    border-radius: 12px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: inset 0 0 0 1px rgba(47, 83, 155, 0.08) !important;
    box-sizing: border-box !important;
}
body.pages-my-infolist .item_gn .menu_item .ico svg { width: 23px !important; height: 23px !important; display: block !important; }
body.pages-my-infolist .item_gn .menu_item .ico svg path { fill: var(--ui-primary) !important; }
body.pages-my-infolist .item_gn .menu_item .name {
    flex: 1 1 auto !important;
    padding: 0 !important;
    color: var(--ui-text) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}
body.pages-my-infolist .item_gn .menu_item .icon-right {
    position: static !important;
    flex: 0 0 auto !important;
    top: auto !important; right: auto !important; margin: 0 !important;
    display: flex !important; align-items: center !important;
}
body.pages-my-infolist .item_gn .menu_item .icon-right svg { width: 18px !important; height: 18px !important; }
body.pages-my-infolist .item_gn .menu_item .icon-right svg path { fill: #b9c2d6 !important; }

/* ===========================================================================
   ADD BANK / Bind Wallet   (body.pages-my-card)   — form theme
   ========================================================================== */
body.pages-my-card {
    --ui-primary: #2F539B;
    --ui-grad: linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%);
    --ui-bg: #eef1f8; --ui-card: #fff; --ui-text: #1f2a44; --ui-muted: #7b86a1; --ui-border: #e7ebf4;
    background: var(--ui-bg);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-card uni-view, body.pages-my-card uni-text, body.pages-my-card button, body.pages-my-card input {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-card .content { background: var(--ui-bg) !important; padding: 14px !important; }
body.pages-my-card .uni-page-head { box-shadow: 0 6px 18px rgba(31, 57, 110, 0.25) !important; }
body.pages-my-card .itembox {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(31, 57, 110, 0.08) !important;
    padding: 16px 14px !important;
}
/* top display card */
body.pages-my-card .card_box2 .cad {
    background: var(--ui-grad) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(47, 83, 155, 0.35) !important;
    padding: 16px !important;
}
/* form fields */
body.pages-my-card .input_con { margin-bottom: 14px !important; }
body.pages-my-card .input_lable {
    color: var(--ui-muted) !important; font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: .3px !important; margin-bottom: 6px !important; text-transform: uppercase !important;
}
body.pages-my-card .input_box {
    background: #f6f8fd !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.pages-my-card .input_box:focus-within {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 83, 155, .12) !important;
}
body.pages-my-card .input_box .uni-input-input,
body.pages-my-card .input_box input {
    background: transparent !important; color: var(--ui-text) !important;
    font-size: 15px !important; height: 46px !important;
}
body.pages-my-card .my_btn {
    background: var(--ui-grad) !important; color: #fff !important; border: 0 !important;
    border-radius: 14px !important; padding: 15px !important; font-size: 16px !important;
    font-weight: 700 !important; margin-top: 10px !important;
    box-shadow: 0 12px 26px rgba(47, 83, 155, 0.4) !important;
}
body.pages-my-card .my_btn:active { transform: scale(.99) !important; }

/* ===========================================================================
   CHANGE PASSWORD + CHANGE WITHDRAWAL PASSWORD   (body.ui-changepass)
   Two structurally-identical form pages share this scope.
   ========================================================================== */
body.ui-changepass {
    --ui-primary: #2F539B;
    --ui-grad: linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%);
    --ui-bg: #eef1f8; --ui-card: #fff; --ui-text: #1f2a44; --ui-muted: #7b86a1; --ui-border: #e7ebf4;
    background: var(--ui-bg) !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.ui-changepass uni-view, body.ui-changepass uni-text, body.ui-changepass button, body.ui-changepass input {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.ui-changepass .content { background: var(--ui-bg) !important; }
body.ui-changepass .uni-page-head { box-shadow: 0 6px 18px rgba(31, 57, 110, 0.25) !important; }
/* banner -> brand gradient card (decorative image neutralised) */
body.ui-changepass .info_top { padding: 14px 14px 0 !important; height: 124px !important; overflow: hidden !important; box-sizing: border-box !important; }
body.ui-changepass .info_top .info_bj {
    position: relative !important; height: 110px !important; border-radius: 18px !important; overflow: hidden !important;
    background: var(--ui-grad) !important; box-shadow: 0 12px 28px rgba(31, 57, 110, 0.28) !important;
}
body.ui-changepass .info_top .info_bj uni-image { width: 100% !important; height: 100% !important; background-image: none !important; background-color: transparent !important; }
body.ui-changepass .info_top .info_bj uni-image div { background-image: none !important; background-color: transparent !important; }
body.ui-changepass .info_top .info_bj::after { content: "" !important; position: absolute !important; top: -45%; right: -8%; width: 165px; height: 165px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%) !important; }
/* form card */
body.ui-changepass .itembox {
    background: var(--ui-card) !important; border: 1px solid var(--ui-border) !important; border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(31, 57, 110, 0.08) !important; padding: 18px 14px !important; margin: 14px !important;
}
/* fields: floating label -> clean uppercase block label */
body.ui-changepass .input_con { margin-bottom: 14px !important; }
body.ui-changepass .input_con .input_lable {
    position: static !important; top: auto !important; width: auto !important;
    background: transparent !important; color: var(--ui-muted) !important;
    font-size: 12px !important; font-weight: 600 !important; letter-spacing: .3px !important;
    text-transform: uppercase !important; margin: 0 0 6px 0 !important; padding: 0 !important;
}
body.ui-changepass .input_con .input_box {
    background: #f4f7fc !important; border: 1.5px solid var(--ui-border) !important; border-radius: 12px !important;
    padding: 0 14px !important; transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.ui-changepass .input_con .input_box:focus-within { border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px rgba(47, 83, 155, .12) !important; }
body.ui-changepass .input_box .uni-input-input, body.ui-changepass .input_box input {
    background: transparent !important; color: var(--ui-text) !important; font-size: 15px !important; height: 46px !important;
}
body.ui-changepass .my_btn {
    background: var(--ui-grad) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
    padding: 15px !important; font-size: 16px !important; font-weight: 700 !important; margin-top: 6px !important;
    box-shadow: 0 12px 26px rgba(47, 83, 155, 0.4) !important;
}
body.ui-changepass .my_btn:active { transform: scale(.99) !important; }

/* ===========================================================================
   RECHARGE / WITHDRAW   (body.pages-my-recharge)
   NOTE: tab/radio show-hide is JS-driven; we only restyle .select / .av,
   never touch display/visibility.
   ========================================================================== */
body.pages-my-recharge {
    --ui-primary: #2F539B;
    --ui-grad: linear-gradient(135deg, #2F539B 0%, #3f6fd1 60%, #36454F 100%);
    --ui-bg: #eef1f8; --ui-card: #fff; --ui-text: #1f2a44; --ui-muted: #7b86a1; --ui-border: #e7ebf4;
    background: var(--ui-bg) !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-recharge uni-view, body.pages-my-recharge uni-text, body.pages-my-recharge button, body.pages-my-recharge input {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body.pages-my-recharge .content { background: var(--ui-bg) !important; padding: 14px !important; }
body.pages-my-recharge .uni-page-head { box-shadow: 0 6px 18px rgba(31, 57, 110, 0.25) !important; }
/* toggle tabs */
body.pages-my-recharge .tab_r { gap: 10px !important; margin-bottom: 14px !important; }
body.pages-my-recharge .tab_r .tab_item {
    background: #fff !important; border: 1px solid var(--ui-border) !important; border-radius: 12px !important;
    color: var(--ui-primary) !important; fill: var(--ui-primary) !important; font-weight: 600 !important; padding: 12px 0 !important;
}
body.pages-my-recharge .tab_r .select {
    background: var(--ui-grad) !important; color: #fff !important; fill: #fff !important; border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(47, 83, 155, 0.4) !important;
}
body.pages-my-recharge .tab_r .select svg path { fill: #fff !important; }
/* cards */
body.pages-my-recharge .cz,
body.pages-my-recharge .itemlist1,
body.pages-my-recharge .itembox {
    background: #fff !important; border: 1px solid var(--ui-border) !important; border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(31, 57, 110, 0.08) !important; padding: 16px !important; margin-bottom: 14px !important;
}
/* amount field */
body.pages-my-recharge .je {
    background: #f4f7fc !important; border: 1.5px solid var(--ui-border) !important; border-radius: 12px !important;
    padding: 8px 12px !important; margin-top: 8px !important;
}
body.pages-my-recharge .je .uni-input-input, body.pages-my-recharge .je input {
    background: transparent !important; color: var(--ui-text) !important; font-weight: 700 !important;
}
/* payment gateway rows */
body.pages-my-recharge .u-radio.item {
    background: #f6f8fd !important; border: 1.5px solid var(--ui-border) !important; border-radius: 12px !important;
    padding: 12px 14px !important; margin-bottom: 10px !important;
}
body.pages-my-recharge .u-radio.item.av {
    border-color: var(--ui-primary) !important; background: #eef3fc !important;
    box-shadow: 0 0 0 2px rgba(47, 83, 155, 0.12) !important;
}
/* buttons */
body.pages-my-recharge .my_btn {
    background: var(--ui-grad) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
    padding: 15px !important; font-size: 16px !important; font-weight: 700 !important;
    text-align: center !important; justify-content: center !important; align-items: center !important;
    box-shadow: 0 12px 26px rgba(47, 83, 155, 0.4) !important; margin-top: 6px !important;
}
body.pages-my-recharge .my_btn:active { transform: scale(.99) !important; }