/* ============================================================
   [CX-DRAWER60] Reference-style drawer (y888 layout), clarims
   theme colors. [REV 65] Fonts/spacing matched to the reference
   drawer measured on y888.com (532px column: labels ~13px,
   buttons 43px tall, avatar ~50px, cards = subtle tint).
   ============================================================ */
html[data-device="mobile"] .H1qIcLMTDnWg35ewI9bx{width:60vw !important;max-width:60vw !important;}

.cxd-wrap{padding:.18rem .2rem .3rem;color:var(--theme-primary-font-color);}

/* top row: back + logo */
.cxd-top{display:flex;align-items:center;gap:.14rem;margin-bottom:.14rem;}
.cxd-back{display:inline-flex;align-items:center;justify-content:center;width:.44rem;height:.44rem;border-radius:50%;border:none;background:rgba(140,140,140,.25);color:var(--theme-primary-font-color);font-size:.24rem;cursor:pointer;padding:0;}
.cxd-logo{height:.5rem;max-width:2.4rem;object-fit:contain;}

/* user card (reference: tinted rounded card) */
.cxd-user{display:flex;align-items:center;gap:.16rem;background:rgba(140,140,140,.10);border-radius:.16rem;padding:.16rem .18rem;}
.cxd-avatar{width:.72rem;height:.72rem;border-radius:50%;flex:0 0 auto;cursor:pointer;}
.cxd-userinfo{min-width:0;}
.cxd-namerow{display:flex;align-items:center;gap:.08rem;}
.cxd-uname{font-size:.22rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cxd-idrow{display:flex;align-items:center;gap:.08rem;margin-top:.03rem;font-size:.185rem;opacity:.72;}
.cxd-copy{display:inline-flex;align-items:center;justify-content:center;width:.34rem;height:.34rem;border:none;background:transparent;color:var(--theme-primary-color);font-size:.22rem;cursor:pointer;padding:0;}

/* guest auth pair */
.cxd-auth{display:flex;gap:.14rem;}
.cxd-btn{flex:1 1 0;height:.6rem;border-radius:.12rem;font-size:.21rem;font-weight:500;cursor:pointer;border:1px solid transparent;padding:0 .08rem;display:inline-flex;align-items:center;justify-content:center;gap:.08rem;}
.cxd-btn svg{width:.3rem;height:.3rem;flex:0 0 auto;}
.cxd-btn-login{background:rgba(140,140,140,.22);color:var(--theme-primary-font-color);}
.cxd-btn-reg{background:var(--theme-primary-color);color:#fff;}

/* deposit gift / balance card (reference: same subtle tint card) */
.cxd-gift{margin-top:.16rem;border-radius:.16rem;padding:.18rem .2rem;background:rgba(140,140,140,.10);color:var(--theme-primary-font-color);}
.cxd-gift-head{display:flex;align-items:center;gap:.1rem;font-size:.22rem;font-weight:700;}
.cxd-gift-ic{width:.34rem;height:.34rem;flex:0 0 auto;color:var(--theme-primary-color);}
.cxd-gift-badge{margin-left:auto;display:inline-flex;align-items:center;gap:.06rem;background:#1fae54;color:#fff;font-size:.19rem;font-weight:700;border-radius:.18rem;padding:.03rem .11rem;}
.cxd-gift-badge svg{width:.24rem;height:.24rem;}
.cxd-balrow{display:flex;align-items:center;gap:.1rem;font-size:.24rem;font-weight:700;}
.cxd-balrow .cx-bal-amount{color:var(--theme-side-popver-text-color,#fff);}
.cxd-refresh{font-size:.26rem;color:var(--theme-side-popver-text-color,#fff);opacity:.85;cursor:pointer;display:inline-flex;}
.cxd-actions{display:flex;gap:.14rem;margin-top:.16rem;}
.cxd-btn-wd{background:rgba(140,140,140,.20);border-color:rgba(140,140,140,.28);color:var(--theme-primary-font-color);}
.cxd-btn-dep{background:var(--theme-primary-color);color:#fff;}

/* shortcut grid */
.cxd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem .06rem;margin-top:.26rem;}
.cxd-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.08rem;cursor:pointer;}
.cxd-chip{display:inline-flex;align-items:center;justify-content:center;width:.68rem;height:.68rem;color:var(--theme-primary-color);}
.cxd-chip svg{width:.62rem;height:.62rem;}
.cxd-tlabel{font-size:.185rem;font-weight:500;line-height:1.15;text-align:center;color:var(--theme-primary-font-color);}
.cxd-badge{position:absolute;top:-.02rem;right:50%;margin-right:-.46rem;min-width:.32rem;height:.32rem;line-height:.32rem;text-align:center;background:#e5484d;color:#fff;font-size:.19rem;font-weight:700;border-radius:.16rem;padding:0 .06rem;}

/* rows inside a tinted container card (reference style) */
.cxd-rows{margin-top:.26rem;background:rgba(140,140,140,.08);border-radius:.16rem;padding:.02rem .2rem;}
.cxd-row{display:flex;align-items:center;gap:.14rem;padding:.19rem 0;border-bottom:1px solid rgba(140,140,140,.16);cursor:pointer;}
.cxd-row:last-child{border-bottom:none;}
.cxd-ric{display:inline-flex;color:var(--theme-primary-color);}
.cxd-ric svg{width:.34rem;height:.34rem;}
.cxd-rlabel{font-size:.2rem;color:var(--theme-primary-font-color);}
.cxd-chev{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:.38rem;height:.38rem;border-radius:50%;background:rgba(140,140,140,.20);color:var(--theme-primary-font-color);}
.cxd-chev svg{width:.2rem;height:.2rem;}

/* official channel */
.cxd-channel{margin-top:.26rem;}
.cxd-channel-title{display:flex;align-items:center;gap:.16rem;justify-content:center;font-size:.185rem;opacity:.65;}
.cxd-channel-title::before,.cxd-channel-title::after{content:"";flex:1 1 0;height:1px;background:rgba(140,140,140,.35);}
.cxd-channel-icons{display:flex;gap:.14rem;justify-content:center;margin-top:.14rem;}
.cxd-soc{display:inline-flex;align-items:center;justify-content:center;width:.64rem;height:.64rem;border-radius:50%;background:var(--theme-primary-color);color:#fff;}
.cxd-soc svg{width:.34rem;height:.34rem;}

/* grid/rows/channel sit inside the vendor THL7 wrapper (no cxd-wrap padding there) */
.cxd-grid,.cxd-rows,.cxd-channel{margin-left:.2rem;margin-right:.2rem;}

/* open-state sider: vendor React inlines 3.4rem; pin the open reveal to 60vw (closed state keeps the collapsed class and is untouched) */
html[data-device="mobile"] .ant-layout-sider:not(.ant-layout-sider-collapsed){width:60vw !important;min-width:60vw !important;max-width:60vw !important;flex:0 0 60vw !important;}

/* [CX-DRAWER63] full-height drawer: pin the OPEN sider to the full viewport height (antd modals z-1000 still render above) */
html[data-device="mobile"] .ant-layout-sider:not(.ant-layout-sider-collapsed){position:fixed !important;top:0 !important;bottom:0 !important;height:auto !important;z-index:800 !important;}

/* [CX-DRAWER67] the vendor language block under the drawer is replaced by the styled English row inside the rows card - hide the vendor original (panel-scoped) */
.H1qIcLMTDnWg35ewI9bx .lSye1VtLh0jqkNNPOVaG{display:none !important;}

/* [CX-DRAWER68] Official Channel = its own tinted card; icons are bare glyphs in the theme primary (reference style) */
.cxd-channel{background:rgba(140,140,140,.08);border-radius:.16rem;padding:.18rem .2rem .2rem;}
.cxd-channel-icons{gap:.14rem .36rem;margin-top:.16rem;}
.cxd-soc{background:none;width:auto;height:auto;color:var(--theme-primary-color);}
.cxd-soc svg{width:.42rem;height:.42rem;}

/* [CX-DRAWER69] real reference artwork in place; logo bigger + right; header burger #A4A4A4 (user) */
.cxd-top{justify-content:space-between;}
.cxd-logo{height:.7rem;}
.cxd-back{color:#e6e6e6;}
.cxd-back svg{height:.26rem;width:auto;display:block;}
.cxd-copy svg{width:.23rem;height:.24rem;display:block;}
.cxd-copy svg path{fill:var(--theme-primary-color);}
.cxd-timg{width:.68rem;height:.68rem;object-fit:contain;display:block;}
.cxd-btn-ic{width:.3rem;height:.3rem;object-fit:contain;}
.cxd-btn-gif{width:.36rem;height:.4rem;}
.cxd-gift-ic{width:.36rem;height:.36rem;object-fit:contain;}
.cxd-ricimg{width:.3rem;height:.3rem;object-fit:contain;display:block;}
.cxd-chev{color:#d5d5d5;}
.cxd-chev svg{height:.17rem;width:auto;display:block;}
.cxd-socimg{width:.6rem;height:.6rem;border-radius:50%;display:block;}
.m7vhFTfzt4jM_ufvcChe{color:#A4A4A4 !important;}

/* [CX-DRAWER69b] the extracted back-arrow path points right; flip it so the back button shows < like the reference */
.cxd-back svg{transform:scaleX(-1);}

/* [CX-DRAWER70] Official Channel icons = canonical brand glyphs in the theme color, even professional spacing */
.cxd-channel-icons{gap:.44rem;align-items:center;}
.cxd-soc{color:var(--theme-primary-color);}
.cxd-socsvg{width:.44rem;height:.44rem;display:block;}

/* [CX-DRAWER71] labels #A4A4A4 (user, as reference); other drawer text follows the skin via --theme-side-popver-text-color; filled buttons take the skin primary-font; social icons smaller, row icons bigger (user) */
.cxd-wrap{color:var(--theme-side-popver-text-color,#f0f0f0);}
.cxd-uname,.cxd-bal-amount,.cxd-gift-head{color:var(--theme-side-popver-text-color,#f0f0f0);}
.cxd-idrow{color:color-mix(in srgb, var(--theme-side-popver-text-color,#f0f0f0) 65%, transparent);}
.cxd-tlabel{color:#A4A4A4;}
.cxd-rlabel{color:#A4A4A4;}
.cxd-channel-title{color:#A4A4A4;}
.cxd-tile .cxd-chip{color:var(--theme-primary-color);}
.cxd-btn-dep,.cxd-btn-reg{color:var(--theme-primary-font-color,#fff);}
.cxd-btn-wd,.cxd-btn-login{color:var(--theme-side-popver-text-color,#f0f0f0);}
.cxd-back{color:var(--theme-side-popver-text-color,#f0f0f0);}
.cxd-chev{color:var(--theme-side-popver-text-color,#f0f0f0);}
.cxd-gift-badge{color:var(--theme-primary-font-color,#fff);}
.cxd-socsvg{width:.38rem;height:.38rem;}
.cxd-ric{width:.4rem;height:.4rem;}
.cxd-ricimg{width:.38rem;height:.38rem;}

/* [CX-DRAWER72] size tuning (user): socials smaller, row icons bigger, back glyph smaller with padding inside its circle */
.cxd-socsvg{width:.32rem;height:.32rem;}
.cxd-ric{width:.46rem;height:.46rem;}
.cxd-ricimg{width:.44rem;height:.44rem;}
.cxd-back svg{height:.19rem;}

/* [CX-DRAWER72b] the older .cxd-soc svg rule outranked the single-class size rules - pin the social size with a stronger selector */
.cxd-channel .cxd-socsvg{width:.32rem;height:.32rem;}