:root {
    --pop-ink: #211634;
    --pop-ink-soft: #5f526f;
    --pop-violet: #7c5cff;
    --pop-violet-deep: #5e3ee8;
    --pop-pink: #ff72b6;
    --pop-mint: #64dfbd;
    --pop-lime: #b8f35b;
    --pop-cream: #fffaf0;
    --pop-paper: #ffffff;
    --pop-lilac: #eee7ff;
    --pop-line: rgba(33, 22, 52, .12);
    --pop-shadow: 0 14px 34px rgba(67, 43, 112, .12);
    --pop-shadow-soft: 0 8px 20px rgba(67, 43, 112, .09);
    --pop-radius-xl: 28px;
    --pop-radius-lg: 22px;
    --pop-radius-md: 16px;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html,
body.web3-pop {
    min-height: 100%;
    color: var(--pop-ink);
    background:
        radial-gradient(circle at -12% 2%, rgba(255, 114, 182, .2), transparent 30%),
        radial-gradient(circle at 112% 18%, rgba(100, 223, 189, .2), transparent 32%),
        #f7f3ff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.web3-pop {
    letter-spacing: .01em;
}

body.web3-pop .mui-content {
    color: var(--pop-ink);
    background-color: transparent;
}

body.web3-pop .web3-page-intro {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 10px;
}

body.web3-pop .web3-kicker {
    margin-bottom: 2px;
    color: var(--pop-violet);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

body.web3-pop .web3-page-title {
    color: var(--pop-ink);
    font-size: 24px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -.02em;
}

body.web3-pop .web3-network {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: var(--pop-ink-soft);
    border: 1px solid var(--pop-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 6px 16px rgba(67, 43, 112, .07);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

body.web3-pop .web3-network span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pop-mint);
    box-shadow: 0 0 0 4px rgba(100, 223, 189, .16);
}

body.web3-pop a,
body.web3-pop .likeA {
    color: inherit;
}

body.web3-pop button,
body.web3-pop input,
body.web3-pop select,
body.web3-pop textarea {
    font: inherit;
}

body.web3-pop button:focus-visible,
body.web3-pop input:focus-visible,
body.web3-pop select:focus-visible,
body.web3-pop textarea:focus-visible,
body.web3-pop .likeA:focus-visible {
    outline: 3px solid rgba(124, 92, 255, .36);
    outline-offset: 2px;
}

/* Shared page chrome */
body.web3-pop .mui-bar-nav,
body.web3-pop .headBox,
body.web3-pop .myAssetTop,
body.web3-pop .bag-header,
body.web3-pop .blind-header,
body.web3-pop .drawlog-header {
    color: var(--pop-ink);
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid var(--pop-line);
    box-shadow: 0 8px 24px rgba(67, 43, 112, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .mui-title,
body.web3-pop .myAssetTop .myAssetTopTitle {
    color: var(--pop-ink);
    font-weight: 800;
    letter-spacing: .04em;
}

/* Bottom navigation */
body.web3-pop .navWeiBox {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    height: 66px;
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 23px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 34px rgba(52, 33, 88, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.web3-pop .navWeiBox .mui-tab-item {
    position: relative;
    height: 52px;
    color: #8f849e;
    border-radius: 17px;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

body.web3-pop .navWeiBox .navWeiImg_1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

body.web3-pop .navWeiBox .navWeiImg_1 i {
    font-size: 21px;
}

body.web3-pop .navWeiBox .mui-tab-label {
    margin-top: -2px;
    font-size: 11px;
    line-height: 16px;
    color: inherit;
    font-weight: 700;
}

body.web3-pop .navWeiBox .navWeiImgActive {
    color: var(--pop-ink);
    background: linear-gradient(135deg, var(--pop-lime), var(--pop-mint));
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(100, 223, 189, .28);
}

/* Buttons */
body.web3-pop .gonggButton,
body.web3-pop .storeshjone,
body.web3-pop .drawupiqd,
body.web3-pop .rankyqhyan,
body.web3-pop .merge-btn,
body.web3-pop .draw-btn,
body.web3-pop .close-result,
body.web3-pop .blind-primary-btn,
body.web3-pop .babrwmyqBtn {
    min-height: 46px;
    border: 0 !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 8px 0 rgba(74, 47, 155, .16), 0 12px 24px rgba(124, 92, 255, .24) !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    transition: transform .15s ease, box-shadow .15s ease;
}

body.web3-pop .gonggButton:active,
body.web3-pop .storeshjone:active,
body.web3-pop .drawupiqd:active,
body.web3-pop .merge-btn:active,
body.web3-pop .draw-btn:active {
    transform: translateY(3px) scale(.99);
    box-shadow: 0 4px 0 rgba(74, 47, 155, .16), 0 8px 16px rgba(124, 92, 255, .2) !important;
}

body.web3-pop .mui-btn-outlined,
body.web3-pop .dialog-cancel,
body.web3-pop .merge-mode-cancel {
    color: var(--pop-ink) !important;
    background: var(--pop-lilac) !important;
    border: 1px solid rgba(124, 92, 255, .18) !important;
    border-radius: 14px !important;
}

/* Inputs and forms */
body.web3-pop .mui-input-row,
body.web3-pop .muiInputRow,
body.web3-pop .usertextnr,
body.web3-pop .tradparLi,
body.web3-pop .selectRow {
    border-color: var(--pop-line);
}

body.web3-pop input[type="text"],
body.web3-pop input[type="email"],
body.web3-pop input[type="password"],
body.web3-pop input[type="number"],
body.web3-pop textarea,
body.web3-pop select {
    color: var(--pop-ink);
    caret-color: var(--pop-violet);
}

body.web3-pop input::placeholder,
body.web3-pop textarea::placeholder {
    color: #a197ad;
}

/* Login / registration */
body.web3-pop .web3-auth,
body.web3-pop .LoginBg,
body.web3-pop .RegisterBg {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 114, 182, .42), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(100, 223, 189, .38), transparent 26%),
        linear-gradient(155deg, #f8f4ff 0%, #e8ddff 48%, #d8f9ef 100%) !important;
}

body.web3-pop .web3-auth::before,
body.web3-pop .LoginBg::before,
body.web3-pop .RegisterBg::before {
    content: "";
    position: fixed;
    left: -58px;
    top: 92px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    pointer-events: none;
}

body.web3-pop .LoginImgbox {
    position: relative;
    z-index: 1;
    padding-top: 54px;
}

body.web3-pop .LoginImgbox::after {
    content: "DOGVERSE · MEMBER PASS";
    display: block;
    margin-top: 8px;
    color: var(--pop-ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

body.web3-pop .LoginImgbox .LoginImg_1 {
    width: 112px;
    height: 112px;
    padding: 8px;
    object-fit: contain;
    border-radius: 34px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 18px 36px rgba(82, 48, 134, .16);
}

body.web3-pop .LoginText {
    margin: 18px 18px 0;
    padding: 24px 20px 22px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--pop-radius-xl);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--pop-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .LoginText .muiInputRow {
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 16px;
    background: rgba(247, 243, 255, .9);
}

body.web3-pop .LoginText .muiInput {
    height: 50px;
    border: 0;
    background: transparent;
}

body.web3-pop .LoginText .yzmaImg {
    right: 8px;
    border-radius: 10px;
}

body.web3-pop .linkACZuo {
    color: var(--pop-ink-soft);
}

body.web3-pop .linkACZuo .linkACZuobd {
    color: var(--pop-violet);
    font-weight: 800;
}

/* Shared content cards */
body.web3-pop .assetbbBox,
body.web3-pop .btomnavBox,
body.web3-pop .mermlinkBox,
body.web3-pop .ranklistHe,
body.web3-pop .tradparLi,
body.web3-pop .bag-item,
body.web3-pop .goods-card,
body.web3-pop .pool-card,
body.web3-pop .progress-card,
body.web3-pop .dialog-card {
    border: 1px solid rgba(124, 92, 255, .12) !important;
    border-radius: var(--pop-radius-lg) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: var(--pop-shadow-soft) !important;
}

body.web3-pop .assetbbHe,
body.web3-pop .btomnavHe {
    border-radius: inherit;
    background: transparent;
}

body.web3-pop .assetbbTletx,
body.web3-pop .btomnavtx,
body.web3-pop .storeklimc {
    color: var(--pop-ink);
    font-weight: 800;
}

body.web3-pop .assetbbshu,
body.web3-pop .diyijifdshu,
body.web3-pop .storetjinsu {
    color: var(--pop-violet);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

body.web3-pop .assetbbtx,
body.web3-pop .huyjindums,
body.web3-pop .rsgsetts_2 {
    color: var(--pop-ink-soft);
}

body.web3-pop .btomnav {
    min-height: 58px;
    border-bottom-color: var(--pop-line);
}

body.web3-pop .btomnavimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    border-radius: 13px;
    background: var(--pop-lilac);
}

body.web3-pop .btomnavimg img {
    max-width: 24px;
    max-height: 24px;
}

/* Home / dog board */
body.web3-pop .unhomeBg {
    background:
        radial-gradient(circle at 18% 17%, rgba(255, 114, 182, .25), transparent 24%),
        radial-gradient(circle at 86% 15%, rgba(100, 223, 189, .25), transparent 25%),
        linear-gradient(165deg, #f8f4ff, #f2ebff 44%, #e7fbf5) !important;
}

body.web3-pop .unhomeCont {
    position: relative;
    background: transparent !important;
}

body.web3-pop .unhomeCont::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 19%;
    height: 47%;
    border: 2px solid rgba(124, 92, 255, .09);
    border-radius: 36px;
    background:
        linear-gradient(rgba(124, 92, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, .045) 1px, transparent 1px),
        rgba(255, 255, 255, .34);
    background-size: 22px 22px;
    transform: perspective(600px) rotateX(8deg);
    pointer-events: none;
}

body.web3-pop .mrytopBox {
    position: relative;
    z-index: 3;
    margin: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--pop-radius-lg);
    background: rgba(255, 255, 255, .8);
    box-shadow: var(--pop-shadow-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.web3-pop .mrymreyhb,
body.web3-pop .mryhuibBox {
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 16px;
    background: var(--pop-lilac) !important;
}

body.web3-pop .mrymreyhb .mrymrmc,
body.web3-pop .mryhuibBox > .fx1 {
    color: var(--pop-violet);
    font-weight: 900;
}

body.web3-pop .mrytopnavRow,
body.web3-pop .shopTopNav {
    gap: 8px;
}

body.web3-pop .mrytnavBox {
    position: relative;
    z-index: 4;
    margin: 0 12px !important;
}

body.web3-pop .mrytnavHe {
    min-height: 66px;
    padding: 9px 5px;
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--pop-shadow-soft);
}

body.web3-pop .mrytnavHe:nth-child(2n) {
    background: rgba(232, 255, 247, .9);
}

body.web3-pop .mrytnavHe img {
    max-height: 30px;
    object-fit: contain;
}

body.web3-pop .mrytnavtx {
    color: var(--pop-ink);
    font-size: 11px;
    font-weight: 800;
}

body.web3-pop .mrythudBox {
    position: relative;
    z-index: 2;
    margin: 10px 10px 0;
}

body.web3-pop .mrythudHe .mrythud {
    filter: drop-shadow(0 12px 12px rgba(69, 45, 100, .18));
    transition: transform .2s ease, filter .2s ease;
}

body.web3-pop .mrythudHe:active .mrythud {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 18px 16px rgba(124, 92, 255, .28));
}

body.web3-pop .mrythudHe .mrythdj {
    color: #fff;
    border: 2px solid #fff;
    background: var(--pop-violet);
    box-shadow: 0 5px 12px rgba(92, 62, 212, .25);
    font-weight: 900;
}

body.web3-pop .qipao {
    opacity: .26;
    filter: hue-rotate(55deg) saturate(1.25);
}

body.web3-pop .mrydwbtmBox {
    left: 10px;
    right: 10px;
    bottom: 77px;
    width: auto;
}

body.web3-pop .mrybtmNav,
body.web3-pop .mrybtmlvq,
body.web3-pop .mrybtmhuis {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--pop-shadow-soft);
    overflow: hidden;
}

body.web3-pop .mrybtmlvq {
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
}

/* Dialogs and sheets */
body.web3-pop .homepaupowBox,
body.web3-pop .rankinupBox,
body.web3-pop .storeupBox,
body.web3-pop .ustratupBox,
body.web3-pop .settnszBox,
body.web3-pop .drawupBox,
body.web3-pop .huodelotupBox,
body.web3-pop .mask-box {
    background: rgba(28, 17, 46, .58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.web3-pop .homepaupCont,
body.web3-pop .rankinupCont,
body.web3-pop .homepsyiCont,
body.web3-pop .lotteryContHe {
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .17), transparent 34%),
        #fff !important;
    box-shadow: 0 28px 60px rgba(20, 10, 42, .28) !important;
    overflow: hidden;
}

body.web3-pop .homepauptleHe {
    min-height: 56px;
    border-bottom: 1px solid var(--pop-line);
    background: linear-gradient(90deg, var(--pop-lilac), rgba(232, 255, 247, .8));
}

body.web3-pop .homepauptletx {
    color: var(--pop-ink);
    font-weight: 900;
    letter-spacing: .05em;
}

body.web3-pop .homepauptzw img {
    width: 28px;
    height: 28px;
    padding: 8px;
    border-radius: 50%;
    background: var(--pop-ink);
    box-sizing: content-box;
    filter: brightness(0) invert(1);
}

body.web3-pop .ranklistBox {
    padding: 10px;
}

body.web3-pop .ranklirwu {
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 15%, rgba(255, 255, 255, .8), transparent 30%),
        var(--pop-lilac);
    overflow: hidden;
}

body.web3-pop .ranklirwu img {
    border-radius: inherit;
}

body.web3-pop .stroassort span {
    margin: 4px;
    padding: 8px 14px;
    color: var(--pop-ink-soft);
    border: 1px solid var(--pop-line);
    border-radius: 999px;
    background: #fff;
}

body.web3-pop .stroassort .stroassortActive {
    color: #fff;
    border-color: transparent;
    background: var(--pop-violet);
    box-shadow: 0 8px 18px rgba(124, 92, 255, .24);
}

/* Profile and assets */
body.web3-pop .apseuptopBoxBa {
    padding: 14px 12px 4px;
    background: transparent;
}

body.web3-pop .apseuptopBox {
    position: relative;
    min-height: 116px;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 18%, rgba(184, 243, 91, .55), transparent 28%),
        linear-gradient(135deg, var(--pop-violet), #a789ff 62%, #d9cfff);
    box-shadow: 0 18px 38px rgba(82, 53, 159, .2);
    overflow: hidden;
}

body.web3-pop .apseuptopBox::after {
    content: "MEMBER PASS";
    position: absolute;
    right: 14px;
    bottom: 11px;
    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

body.web3-pop .apseuptopdataBox,
body.web3-pop .apseuptopdataBox * {
    color: #fff;
}

body.web3-pop .topdataimgHe {
    padding: 4px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .22);
}

body.web3-pop .topdataimgHe img {
    border-radius: 17px;
}

body.web3-pop .sepbtBox {
    padding: 8px 12px 92px;
}

body.web3-pop .huyjinduBox {
    height: 9px;
    border-radius: 999px;
    background: var(--pop-lilac);
}

body.web3-pop .huyjindu {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pop-mint), var(--pop-lime));
}

body.web3-pop .mermlink {
    color: var(--pop-ink);
}

/* Unified icon language */
body.web3-pop .web3-action-icon,
body.web3-pop .web3-balance-icon,
body.web3-pop .web3-menu-icon,
body.web3-pop .btomnavimg > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pop-violet);
    font-size: 22px;
    line-height: 1;
}

body.web3-pop .mrytnavHe > .web3-action-icon,
body.web3-pop .mrytnavlqu > .web3-action-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 4px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 7px 14px rgba(101, 70, 203, .24);
}

body.web3-pop .mrytnavHe:nth-child(2n) > .web3-action-icon {
    color: var(--pop-ink);
    background: linear-gradient(145deg, var(--pop-mint), var(--pop-lime));
}

body.web3-pop .mrybtmNav > .web3-action-icon,
body.web3-pop .mrybtmhuis > .web3-action-icon {
    display: flex;
    width: 34px;
    height: 34px;
    margin: 4px auto 1px;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .mrybtmhuis > .web3-action-icon {
    color: var(--pop-ink);
    background: linear-gradient(145deg, var(--pop-mint), var(--pop-lime));
}

body.web3-pop .web3-action-label,
body.web3-pop .blindBagHomeText {
    display: block;
    color: var(--pop-ink);
    font-size: 9px;
    font-weight: 900;
    line-height: 12px;
}

body.web3-pop .widbzimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
}

body.web3-pop .web3-balance-icon {
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .btomnavimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 11px;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 14px;
    background: var(--pop-lilac);
}

body.web3-pop .btomnav:nth-child(2n) .btomnavimg {
    border-color: rgba(100, 223, 189, .25);
    background: var(--pop-mint-soft);
}

body.web3-pop .btomnavimg > img {
    display: none !important;
}

body.web3-pop .btomnavimg > .fa {
    font-size: 20px;
}

body.web3-pop .tradparLiimg,
body.web3-pop .nagesCtxfsts {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pop-violet);
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 13px;
    background: var(--pop-lilac);
}

body.web3-pop .tradparLiimg > img,
body.web3-pop .nagesCtxfsts > img {
    display: none !important;
}

body.web3-pop .tradparLiimg::before {
    content: "\f1d8";
    font-family: "FontAwesome";
    font-size: 18px;
}

body.web3-pop .nagesCtxfsts::before {
    content: "\f054";
    font-family: "FontAwesome";
    font-size: 13px;
}

body.web3-pop .my-info-sign > img {
    display: none;
}

body.web3-pop .my-info-sign > .fa {
    margin-right: 7px;
    color: var(--pop-ink);
    font-size: 17px;
}

body.web3-pop .web3-work-sign,
body.web3-pop .web3-work-icon,
body.web3-pop .web3-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 8px 16px rgba(100, 61, 197, .2);
}

body.web3-pop .web3-work-sign {
    width: 32px;
    height: 32px;
    margin-right: 7px;
}

body.web3-pop .web3-work-icon {
    width: 48px;
    height: 48px;
    margin: 3px auto 8px;
    font-size: 21px;
}

body.web3-pop .web3-security-icon {
    width: 42px;
    height: 42px;
    margin-right: 12px;
    font-size: 19px;
}

body.web3-pop .web3-verified-badge {
    margin-left: 6px;
    color: var(--pop-mint);
}

body.web3-pop .web3-team-button {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

body.web3-pop .mermlink > img {
    display: none !important;
}

body.web3-pop .web3-menu-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 5px;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .homepauptzw img {
    display: none !important;
}

body.web3-pop .homepauptzw.btneffectansx::before {
    content: "\00d7";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    border-radius: 50%;
    background: var(--pop-ink);
    box-shadow: 0 6px 14px rgba(33, 22, 52, .22);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

/* Explicit collectible slots: visible both when empty and occupied. */
body.web3-pop .mrythudBox {
    padding: 6px;
    border: 2px solid rgba(124, 92, 255, .3);
    border-radius: 24px;
    background:
        linear-gradient(rgba(124, 92, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, .08) 1px, transparent 1px),
        rgba(255, 255, 255, .48);
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 14px 34px rgba(74, 47, 124, .12);
}

body.web3-pop .dog-slot.qipao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23%;
    height: 72px;
    padding: 0 !important;
    opacity: 1;
    color: rgba(93, 64, 173, .68);
    border: 2px solid rgba(124, 92, 255, .52);
    border-radius: 17px;
    background:
        radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .96), transparent 38%),
        linear-gradient(145deg, rgba(238, 231, 255, .96), rgba(224, 255, 246, .94));
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 14px rgba(83, 53, 151, .1);
    filter: none;
    box-sizing: border-box;
}

body.web3-pop .dog-slot::before {
    content: "+";
    position: absolute;
    color: rgba(124, 92, 255, .32);
    font-size: 31px;
    font-weight: 300;
}

body.web3-pop .dog-slot > span {
    position: absolute;
    right: 7px;
    bottom: 5px;
    z-index: 1;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

body.web3-pop .dog-slot.is-empty-action {
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.web3-pop .dog-slot.is-empty-action:hover,
body.web3-pop .dog-slot.is-empty-action:focus-visible {
    border-color: rgba(124, 92, 255, .78) !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 1), transparent 42%),
        linear-gradient(145deg, rgba(239, 232, 255, .98), rgba(222, 255, 247, .96)) !important;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .82),
        0 10px 22px rgba(91, 61, 169, .18) !important;
    transform: translateY(-2px);
    outline: none;
}

body.web3-pop .dog-slot.is-empty-action:active {
    transform: scale(.98);
}

body.web3-pop .mrythudHe {
    width: 23%;
    padding: 3px;
    border: 2px solid var(--pop-violet);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(75, 46, 144, .2);
    box-sizing: border-box;
}

body.web3-pop .mrythudHe .mrythud {
    width: 100%;
    overflow: hidden;
    border-radius: 13px;
}

body.web3-pop .mrythudHe .mrythud > .img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

body.web3-pop .mrythudHe .mrythdj {
    right: 3px;
    bottom: 3px;
    min-width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: 10px;
}

/* Rebuilt dialog controls and game utilities */
body.web3-pop .web3-dialog-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 22px auto 12px;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, .82);
    border-radius: 30px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .38), transparent 30%),
        linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 14px 30px rgba(102, 63, 199, .28);
    font-size: 38px;
}

body.web3-pop .web3-dialog-symbol > img {
    display: none !important;
}

body.web3-pop .settnsLszt {
    width: 58px;
    height: 31px;
    padding: 3px;
    border: 1px solid rgba(124, 92, 255, .22);
    border-radius: 999px;
    background: var(--pop-lilac);
    box-sizing: border-box;
}

body.web3-pop .web3-switch-state {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

body.web3-pop .img_gb.web3-switch-state {
    display: flex;
}

body.web3-pop .img_dk.web3-switch-state {
    display: none;
    color: var(--pop-ink-soft);
    background: #ded7e7;
}

body.web3-pop .lotterynrBox {
    background: rgba(28, 16, 48, .72);
    backdrop-filter: blur(12px);
}

body.web3-pop .lotteryContHe {
    border: 2px solid rgba(124, 92, 255, .3);
    border-radius: 28px;
    background: linear-gradient(160deg, #fff, #eee7ff 54%, #e7fff8);
    box-shadow: 0 24px 60px rgba(26, 12, 48, .28);
    overflow: hidden;
}

body.web3-pop .lotterytleBox {
    align-items: center;
    min-height: 58px;
    color: var(--pop-ink);
    background: rgba(255, 255, 255, .72);
    border-bottom: 1px solid rgba(124, 92, 255, .16);
}

body.web3-pop .web3-dialog-kicker {
    color: var(--pop-violet);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .14em;
}

body.web3-pop .lotterytlezw {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    color: #fff;
    border-radius: 50%;
    background: var(--pop-ink);
}

body.web3-pop .lottery {
    width: 292px;
    height: 292px;
    margin: 18px auto;
    border: 8px solid var(--pop-violet);
    border-radius: 50%;
    background:
        conic-gradient(from 22.5deg, #eee7ff 0 12.5%, #e2fff5 0 25%, #ffe4f2 0 37.5%, #f4ffd9 0 50%, #eee7ff 0 62.5%, #e2fff5 0 75%, #ffe4f2 0 87.5%, #f4ffd9 0);
    box-shadow: 0 0 0 5px #fff, 0 16px 36px rgba(82, 48, 157, .26);
}

body.web3-pop .myCanvasBox {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.web3-pop .clikoper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    color: #fff;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 8px 20px rgba(99, 58, 195, .34);
    font-size: 28px;
}

body.web3-pop .web3-lottery-button,
body.web3-pop .web3-fusion-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 42px;
    padding: 0 18px;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 8px 18px rgba(100, 61, 197, .24);
    font-size: 14px;
    font-weight: 900;
}

body.web3-pop .web3-lottery-button.disabled,
body.web3-pop .web3-fusion-button.disabled {
    color: var(--pop-ink-soft);
    background: #ded7e7;
    box-shadow: none;
}

body.web3-pop .nageean a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    font-size: 22px;
    font-weight: 900;
}

body.web3-pop .nageean a span {
    margin-top: 4px;
    font-size: 11px;
}

body.web3-pop .redenvpCont {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 30px;
    background:
        radial-gradient(circle at 80% 18%, rgba(184, 243, 91, .4), transparent 22%),
        linear-gradient(160deg, var(--pop-violet), #5c3ac7 55%, var(--pop-pink));
    box-shadow: 0 24px 60px rgba(31, 14, 57, .34);
    overflow: hidden;
}

body.web3-pop .redenvpCont > .imgbbg,
body.web3-pop .redenvplinanbg,
body.web3-pop .redenvplinanan {
    display: none !important;
}

body.web3-pop .web3-red-packet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto;
    color: var(--pop-ink);
    border-radius: 28px;
    background: linear-gradient(145deg, var(--pop-mint), var(--pop-lime));
    box-shadow: 0 14px 28px rgba(24, 15, 38, .2);
    font-size: 36px;
}

body.web3-pop .compoundCont {
    border: 2px solid rgba(124, 92, 255, .3);
    border-radius: 28px;
    background: linear-gradient(160deg, #fff, #eee7ff 52%, #e8fff7);
    box-shadow: 0 24px 60px rgba(28, 13, 52, .3);
    overflow: hidden;
}

body.web3-pop .compoundNr {
    background:
        linear-gradient(rgba(124, 92, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, .08) 1px, transparent 1px);
    background-size: 18px 18px;
}

body.web3-pop .compoundNr .nmddbg,
body.web3-pop .compoundNr .rwebeijing,
body.web3-pop .compoundNr .comphchandacbg,
body.web3-pop .compoundNr .comphchandactx {
    display: none !important;
}

body.web3-pop .compoundNr .heniubox {
    padding: 5px;
    border: 2px solid rgba(124, 92, 255, .34);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 18px rgba(78, 46, 143, .13);
    box-sizing: border-box;
}

body.web3-pop .compoundNr .juesetu {
    border-radius: 13px;
}

/* Blind box */
body.web3-pop .blind-page,
body.web3-pop .drawlog-page,
body.web3-pop .bag-content {
    color: var(--pop-ink);
    background:
        radial-gradient(circle at 15% 6%, rgba(255, 114, 182, .2), transparent 28%),
        radial-gradient(circle at 90% 14%, rgba(100, 223, 189, .22), transparent 28%),
        #f7f3ff !important;
}

body.web3-pop .blind-hero {
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(238, 231, 255, .96), rgba(232, 255, 247, .94));
    box-shadow: var(--pop-shadow);
}

body.web3-pop .blind-box-img,
body.web3-pop .opening-box {
    filter: hue-rotate(35deg) saturate(1.1) drop-shadow(0 18px 16px rgba(124, 92, 255, .18));
}

body.web3-pop .progress-bar {
    background: linear-gradient(90deg, var(--pop-mint), var(--pop-lime), var(--pop-pink));
}

body.web3-pop .pool-item {
    border: 1px solid rgba(124, 92, 255, .1);
    background: var(--pop-lilac);
}

body.web3-pop .draw-overlay,
body.web3-pop .bag-dialog {
    background: rgba(29, 17, 47, .7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.web3-pop .ten-reveal,
body.web3-pop .result-panel {
    color: var(--pop-ink);
    border-color: rgba(124, 92, 255, .24);
    background: linear-gradient(160deg, #fff, #f1eaff 48%, #e8fff8);
    box-shadow: 0 0 52px rgba(124, 92, 255, .28);
}

/* Toasts and loading */
body.web3-pop .mui-toast-container {
    bottom: 96px;
}

body.web3-pop .mui-toast-message,
body.web3-pop .bag-top-toast {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    background: rgba(33, 22, 52, .9);
    box-shadow: 0 12px 30px rgba(24, 13, 42, .24);
    backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .apseuptopBox,
    body.web3-pop .LoginText,
    body.web3-pop .assetbbBox,
    body.web3-pop .btomnavBox {
        animation: pop-enter .46s cubic-bezier(.2, .78, .24, 1) both;
    }

    body.web3-pop .assetbbBox:nth-child(2),
    body.web3-pop .btomnavBox:nth-child(2) {
        animation-delay: .05s;
    }

    body.web3-pop .assetbbBox:nth-child(3),
    body.web3-pop .btomnavBox:nth-child(3) {
        animation-delay: .1s;
    }
}

@keyframes pop-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 340px) {
    body.web3-pop .navWeiBox {
        left: 6px;
        right: 6px;
    }

    body.web3-pop .LoginText {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* --------------------------------------------------------------------------
   DOGVERSE 3.0 — geometry, compact artwork, details and dialog normalization
   -------------------------------------------------------------------------- */

html {
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 114, 182, .14), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(100, 223, 189, .14), transparent 28%),
        #f6f3fb;
}

body.web3-pop,
body.web3-pop .mui-content,
body.web3-pop .blind-page,
body.web3-pop .bag-page,
body.web3-pop .drawlog-page {
    box-sizing: border-box;
}

body.web3-pop .mui-bar-nav,
body.web3-pop .myAssetTop {
    height: 52px !important;
    padding: 0 12px !important;
}

body.web3-pop .mui-bar-nav .mui-title {
    height: 52px;
    line-height: 52px;
    font-size: 17px;
}

body.web3-pop .mui-bar-nav .mui-pull-left {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .84);
    font-size: 19px;
}

body.web3-pop .mui-content:not(.unhomeBg) {
    padding-top: 64px;
}

/* The legacy tab bar is a table positioned from the top. Reset both rules. */
body.web3-pop .navWeiBox {
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    width: calc(100% - 20px) !important;
    max-width: 460px !important;
    margin: 0 !important;
    transform: translateX(-50%);
    box-sizing: border-box;
    table-layout: fixed;
}

body.web3-pop .navWeiBox .mui-tab-item {
    display: flex !important;
    flex: 1 1 25% !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25% !important;
    max-width: none !important;
    padding: 2px 0;
}

body.web3-pop .navWeiBox .navWeiImg_1 {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

body.web3-pop .navWeiBox .navWeiImg_1 i {
    font-size: 19px;
}

body.web3-pop .navWeiBox .mui-tab-label {
    display: block;
    margin: 0;
    font-size: 10px;
    line-height: 14px;
}

/* Home and market boards share a strict slot geometry. */
body.web3-pop .mrytopBox {
    background: rgba(255, 255, 255, .82) !important;
}

body.web3-pop .mryhuibBox,
body.web3-pop .mrymreyhb {
    min-height: 42px;
    box-sizing: border-box;
}

body.web3-pop .mrythudBox {
    overflow: hidden;
    box-sizing: border-box;
}

body.web3-pop .home-dashboard .mrythudBox {
    height: 306px !important;
}

body.web3-pop .shop-dashboard .mrythudBox {
    height: 318px !important;
    margin-top: 14px !important;
}

body.web3-pop .dog-slot.qipao,
body.web3-pop .mrythudHe {
    height: 90px !important;
}

body.web3-pop .home-dashboard .dog-slot.qipao,
body.web3-pop .home-dashboard .mrythudHe {
    width: 22.5% !important;
}

body.web3-pop .shop-dashboard .dog-slot.qipao,
body.web3-pop .shop-dashboard .mrythudHe {
    width: 29% !important;
}

body.web3-pop .home-dashboard .qipao1 { left: 1% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao2 { left: 26% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao3 { left: 51% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao4 { left: 76% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao5 { left: 1% !important; top: 108px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao6 { left: 26% !important; top: 108px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao7 { left: 51% !important; top: 108px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao8 { left: 76% !important; top: 108px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao9 { left: 1% !important; top: 208px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao10 { left: 26% !important; top: 208px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao11 { left: 51% !important; top: 208px !important; margin: 0 !important; }
body.web3-pop .home-dashboard .qipao12 { left: 76% !important; top: 208px !important; margin: 0 !important; }

body.web3-pop .home-dashboard .mrythudHe1 { left: 1%; top: 8px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe2 { left: 26%; top: 8px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe3 { left: 51%; top: 8px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe4 { left: 76%; top: 8px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe5 { left: 1%; top: 108px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe6 { left: 26%; top: 108px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe7 { left: 51%; top: 108px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe8 { left: 76%; top: 108px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe9 { left: 1%; top: 208px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe10 { left: 26%; top: 208px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe11 { left: 51%; top: 208px; margin: 0; }
body.web3-pop .home-dashboard .mrythudHe12 { left: 76%; top: 208px; margin: 0; }

body.web3-pop .shop-dashboard .qipao1 { left: 1% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao2 { left: 35.5% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao3 { left: 70% !important; top: 8px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao4 { left: 1% !important; top: 110px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao5 { left: 35.5% !important; top: 110px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao6 { left: 70% !important; top: 110px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao7 { left: 1% !important; top: 212px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao8 { left: 35.5% !important; top: 212px !important; margin: 0 !important; }
body.web3-pop .shop-dashboard .qipao9 { left: 70% !important; top: 212px !important; margin: 0 !important; }

body.web3-pop .shop-dashboard .mrythudHe1 { left: 1%; top: 8px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe2 { left: 35.5%; top: 8px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe3 { left: 70%; top: 8px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe4 { left: 1%; top: 110px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe5 { left: 35.5%; top: 110px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe6 { left: 70%; top: 110px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe7 { left: 1%; top: 212px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe8 { left: 35.5%; top: 212px; margin: 0; }
body.web3-pop .shop-dashboard .mrythudHe9 { left: 70%; top: 212px; margin: 0; }

body.web3-pop .shop-dashboard .huangdquye > .fx1 {
    display: none !important;
}

body.web3-pop .mrythudHe .mrythud {
    height: 100% !important;
    min-height: 0 !important;
    filter: none;
}

body.web3-pop .mrythudHe .mrythud > .img {
    background: var(--pop-lilac);
}

/* Asset and profile cards must participate in normal flow. */
body.web3-pop .apseuptopBoxBa {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 12px 6px !important;
    overflow: visible !important;
}

body.web3-pop .apseuptopBox {
    height: auto !important;
    min-height: 158px !important;
    box-sizing: border-box;
}

body.web3-pop .apseuptopdataBox {
    position: relative !important;
    height: auto !important;
    min-height: 158px;
    box-sizing: border-box;
}

body.web3-pop .sepbtBox {
    position: relative;
    margin-top: 0 !important;
    padding-top: 8px !important;
}

body.web3-pop .assetbbBox,
body.web3-pop .btomnavBox {
    margin: 0 0 12px !important;
    border-width: 2px !important;
    overflow: hidden;
}

body.web3-pop .assetbbHe,
body.web3-pop .btomnav {
    box-sizing: border-box;
}

/* Detail-page cards and forms. */
body.web3-pop .nagesatopBox {
    margin: 2px 12px 14px !important;
    padding: 22px 20px !important;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 26px !important;
    color: #fff;
    background:
        radial-gradient(circle at 88% 16%, rgba(184, 243, 91, .55), transparent 25%),
        linear-gradient(135deg, var(--pop-violet), #9d7cff 60%, var(--pop-pink)) !important;
    box-shadow: 0 18px 38px rgba(82, 53, 159, .22);
}

body.web3-pop .nagesatoptx,
body.web3-pop .nagesatoshu,
body.web3-pop .nagesatoshu span {
    color: #fff !important;
}

body.web3-pop .nagesContBox,
body.web3-pop .messageDabox,
body.web3-pop .rsgsetBox {
    margin: 0 12px 14px !important;
    padding: 16px !important;
    border: 2px solid rgba(124, 92, 255, .16);
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: var(--pop-shadow-soft);
    box-sizing: border-box;
}

body.web3-pop .carryPanel,
body.web3-pop .carryPayManage,
body.web3-pop .nagesbtnActive,
body.web3-pop .blockcaczann,
body.web3-pop .anquntuichuAn {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 10px 22px rgba(124, 92, 255, .24) !important;
}

body.web3-pop .carryPanel {
    border: 2px solid rgba(124, 92, 255, .18) !important;
    border-radius: 20px !important;
}

body.web3-pop .nagesCtxfsHe {
    padding: 12px !important;
    border: 2px solid rgba(124, 92, 255, .18) !important;
    border-radius: 18px !important;
    background: var(--pop-lilac) !important;
}

body.web3-pop .nagesCtxfsHe > img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
}

body.web3-pop .messalRowsan {
    margin-bottom: 14px;
    padding: 14px !important;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 18px;
    background: #fff;
}

body.web3-pop .messalRowsan .mui-input-row,
body.web3-pop .messalRowsan .muiInput {
    min-height: 46px;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--pop-lilac) !important;
}

body.web3-pop .nesaplicBox {
    margin: 14px 0 !important;
    padding: 12px !important;
    border: 2px solid rgba(124, 92, 255, .18);
    border-radius: 20px;
    background: rgba(238, 231, 255, .48);
}

body.web3-pop .nesaplicCont {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 16px;
    background: #fff;
}

body.web3-pop .nesaplicCont:last-child {
    margin-bottom: 0 !important;
}

body.web3-pop .nesapzjimg {
    flex: 0 0 148px !important;
    width: 148px !important;
    height: 96px !important;
    border: 2px dashed rgba(124, 92, 255, .42) !important;
    border-radius: 15px;
    background: var(--pop-lilac);
    overflow: hidden;
}

body.web3-pop .nesapzjimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.web3-pop .nesaplicscan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 9px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .nesaplicscan img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1);
}

body.web3-pop .rsgsetBox {
    padding: 0 14px !important;
}

body.web3-pop .rsgsetHe {
    min-height: 58px;
    border-bottom: 1px solid var(--pop-line) !important;
}

body.web3-pop .rsgsetHe:last-child {
    border-bottom: 0 !important;
}

body.web3-pop .rsgsetzhgx img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

/* Team, records and empty states. */
body.web3-pop .indentddTop {
    top: 52px !important;
    padding: 10px 12px !important;
    gap: 6px;
    border-bottom: 1px solid rgba(124, 92, 255, .14);
    background: rgba(255, 255, 255, .9) !important;
}

body.web3-pop .indentddqh {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    width: calc((100% - 24px) / 5) !important;
    padding: 0 !important;
    border: 0 !important;
}

body.web3-pop .indentddqhtx {
    border: 1px solid rgba(124, 92, 255, .18);
    background: var(--pop-lilac);
}

body.web3-pop .indentddqhActive .indentddqhtx,
body.web3-pop .teamPageBtn:not(.teamPageBtnDisabled) {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
}

body.web3-pop .teamListWrap {
    top: 138px !important;
    right: 12px;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    padding: 12px;
    border: 2px solid rgba(124, 92, 255, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78) !important;
    box-sizing: border-box;
}

body.web3-pop .teamPager {
    left: 12px !important;
    right: 12px !important;
    bottom: 8px !important;
    height: 54px !important;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: var(--pop-shadow-soft) !important;
}

body.web3-pop .teamPageBtn {
    border-radius: 13px !important;
}

body.web3-pop .mescroll {
    top: 52px !important;
    right: 0;
    padding: 14px 12px 24px;
    background: transparent !important;
    box-sizing: border-box;
}

body.web3-pop .mescroll-empty {
    width: calc(100% - 24px);
    margin: 64px auto 0;
    padding: 34px 18px !important;
    border: 2px solid rgba(124, 92, 255, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--pop-shadow-soft);
    box-sizing: border-box;
}

body.web3-pop .mescroll-empty .empty-icon {
    width: 104px !important;
    height: 104px !important;
    object-fit: contain;
}

body.web3-pop .upwarp-nodata {
    color: var(--pop-ink-soft);
}

/* Asset ledgers: gold, cash and shop-credit history. */
body.web3-pop .ledger-overview {
    position: fixed;
    z-index: 10;
    top: 52px;
    right: 12px;
    left: 12px;
    height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 0 0 22px 22px;
    background:
        radial-gradient(circle at 93% 0, rgba(142, 235, 255, .18), transparent 36%),
        rgba(255, 255, 255, .93);
    box-shadow: 0 12px 26px rgba(74, 47, 124, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
}

body.web3-pop .ledger-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 8px 18px rgba(124, 92, 255, .22);
    font-size: 17px;
}

body.web3-pop .ledger-overview-gold .ledger-overview-icon {
    color: #211634;
    background: linear-gradient(145deg, #c8ff4d, #f2cf5b);
    box-shadow: 0 8px 18px rgba(200, 255, 77, .24);
}

body.web3-pop .ledger-overview-cash .ledger-overview-icon {
    color: #211634;
    background: linear-gradient(145deg, #8eebff, #8effc6);
    box-shadow: 0 8px 18px rgba(142, 235, 255, .25);
}

body.web3-pop .ledger-overview-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

body.web3-pop .ledger-overview-copy small {
    color: #978aa8;
    font-size: 8px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .13em;
}

body.web3-pop .ledger-overview-copy strong {
    color: #211634;
    font-size: 14px;
    font-weight: 950;
    line-height: 22px;
}

body.web3-pop .ledger-overview-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 9px;
    color: #796c8e;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 999px;
    background: #f7f3ff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

body.web3-pop .ledger-overview-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #67dbac;
    box-shadow: 0 0 0 3px rgba(103, 219, 172, .14);
}

body.web3-pop .mescroll.ledger-list {
    top: 134px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 12px 18px;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(142, 235, 255, .09), transparent 30%),
        rgba(255, 255, 255, .88) !important;
    box-shadow: 0 14px 34px rgba(74, 47, 124, .09);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 92, 255, .3) transparent;
    box-sizing: border-box;
}

body.web3-pop .mescroll.ledger-list::-webkit-scrollbar {
    width: 3px;
}

body.web3-pop .mescroll.ledger-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(var(--pop-violet), #8eebff);
}

body.web3-pop .ledger-records {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.web3-pop .ledger-list .money-log-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 88px;
    margin: 0 !important;
    padding: 13px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

body.web3-pop .ledger-list .money-log-row:last-child {
    border-bottom: 0 !important;
}

body.web3-pop .ledger-record-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #4b926e;
    border: 1px solid rgba(103, 219, 172, .18);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(200, 255, 77, .25), rgba(142, 255, 198, .28));
    font-size: 12px;
}

body.web3-pop .ledger-list-cash .ledger-record-icon {
    background: linear-gradient(145deg, rgba(142, 235, 255, .25), rgba(142, 255, 198, .28));
}

body.web3-pop .ledger-list-shop .ledger-record-icon {
    background: linear-gradient(145deg, rgba(124, 92, 255, .14), rgba(235, 104, 182, .16));
}

body.web3-pop .ledger-expense-icon {
    display: none;
}

body.web3-pop .money-log-row.money-log-out .ledger-record-icon {
    color: #d0527f;
    border-color: rgba(235, 104, 182, .17);
    background: linear-gradient(145deg, rgba(255, 211, 234, .58), rgba(235, 104, 182, .14));
}

body.web3-pop .money-log-row.money-log-out .ledger-income-icon {
    display: none;
}

body.web3-pop .money-log-row.money-log-out .ledger-expense-icon {
    display: inline-block;
}

body.web3-pop .ledger-list .money-log-info {
    min-width: 0;
    text-align: left;
}

body.web3-pop .ledger-list .money-log-title {
    margin: 0;
    color: #211634;
    font-size: 13px;
    font-weight: 900;
    line-height: 19px;
    text-align: left;
}

body.web3-pop .ledger-list .money-log-detail {
    margin-top: 3px;
    color: #796c8e;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
}

body.web3-pop .ledger-list .tradparLitime {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: #aaa0b7;
    font-size: 8px;
    line-height: 13px;
    text-align: left;
    white-space: nowrap;
}

body.web3-pop .ledger-list .tradparLitime i {
    color: #b9abce;
    font-size: 9px;
}

body.web3-pop .ledger-list .money-log-amount {
    display: flex;
    min-width: 72px;
    padding: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
}

body.web3-pop .ledger-list .money-log-amount strong {
    color: #4b926e;
    font-size: 17px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    line-height: 22px;
}

body.web3-pop .ledger-list .money-log-amount span {
    margin-top: 2px;
    color: #9a8eaa;
    font-size: 8px;
    font-weight: 800;
    line-height: 13px;
}

body.web3-pop .ledger-list .money-log-out .money-log-amount strong {
    color: #d0527f;
}

body.web3-pop .ledger-list .mescroll-upwarp {
    min-height: 38px;
    padding: 8px 0 0;
}

body.web3-pop .ledger-list .upwarp-nodata {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9a8eaa;
    font-size: 10px;
}

body.web3-pop .ledger-list .upwarp-nodata i {
    color: #8eebff;
}

body.web3-pop .ledger-list .mescroll-empty {
    width: auto;
    min-height: 210px;
    margin: 0;
    padding: 70px 18px 34px !important;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.web3-pop .ledger-list .mescroll-empty::before {
    content: "\f01c";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    color: #a995c5;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 17px;
    background: #f7f3ff;
    font: normal normal normal 20px/1 FontAwesome;
}

body.web3-pop .ledger-list .mescroll-empty .empty-tip {
    color: #9a8eaa;
    font-size: 12px;
}

@media (max-width: 360px) {
    body.web3-pop .ledger-overview {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 9px;
    }

    body.web3-pop .ledger-overview-icon {
        width: 38px;
        height: 38px;
    }

    body.web3-pop .ledger-list .money-log-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 4px !important;
    }

    body.web3-pop .ledger-record-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    body.web3-pop .ledger-list .money-log-amount {
        min-width: 64px;
    }

    body.web3-pop .ledger-list .money-log-amount strong {
        font-size: 15px;
    }
}

/* Not enough Gold — compact Web3 purchase status dialog. */
body.web3-pop .jinbibzuupBox.insufficient-gold-modal {
    padding: 18px !important;
    background:
        radial-gradient(circle at 50% 16%, rgba(145, 105, 255, .22), transparent 34%),
        rgba(18, 10, 33, .76) !important;
}

body.web3-pop .homepsyiCont.insufficient-gold-card {
    position: relative;
    width: min(376px, 100%) !important;
    max-width: 376px !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    color: #211631;
    border: 1px solid rgba(255, 255, 255, .84) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 96% 4%, rgba(255, 105, 188, .2), transparent 28%),
        radial-gradient(circle at 4% 100%, rgba(94, 224, 195, .18), transparent 32%),
        linear-gradient(150deg, #fff 0%, #f7f1ff 58%, #effffa 100%) !important;
    box-shadow:
        0 0 0 1px rgba(145, 104, 255, .2),
        0 30px 80px rgba(12, 5, 28, .5),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    overflow: hidden !important;
}

body.web3-pop .insufficient-gold-orb {
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(24px);
    opacity: .38;
    pointer-events: none;
}

body.web3-pop .insufficient-gold-orb-one {
    top: 70px;
    right: -54px;
    background: #ff72c5;
}

body.web3-pop .insufficient-gold-orb-two {
    bottom: 28px;
    left: -64px;
    background: #62dfbf;
}

body.web3-pop .insufficient-gold-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 13px 14px 12px 20px;
    border-bottom: 1px solid rgba(124, 92, 255, .12);
    box-sizing: border-box;
}

body.web3-pop .insufficient-gold-heading {
    min-width: 0;
}

body.web3-pop .insufficient-gold-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    color: #7c5cff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .16em;
}

body.web3-pop .insufficient-gold-kicker i {
    font-size: 9px;
}

body.web3-pop .insufficient-gold-heading h2 {
    margin: 0;
    color: #211631;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body.web3-pop .insufficient-gold-close {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 15px;
    background: #1d132d;
    box-shadow: 0 6px 15px rgba(29, 19, 45, .2);
    font-size: 18px;
    cursor: pointer;
}

body.web3-pop .insufficient-gold-close:active,
body.web3-pop .insufficient-gold-action:active {
    transform: scale(.97);
}

body.web3-pop .insufficient-gold-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 0;
    text-align: center;
}

body.web3-pop .insufficient-gold-emblem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 27px;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .4), transparent 28%),
        linear-gradient(145deg, #7657ff, #ed5fb3);
    box-shadow:
        0 14px 30px rgba(118, 87, 255, .25),
        inset 0 0 0 5px rgba(255, 255, 255, .08);
}

body.web3-pop .insufficient-gold-emblem .fa-diamond {
    position: relative;
    z-index: 2;
    font-size: 31px;
    transform: translateY(1px);
}

body.web3-pop .insufficient-gold-emblem b {
    position: absolute;
    z-index: 3;
    right: 9px;
    bottom: 9px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    color: #20152f;
    border: 3px solid #f6f1ff;
    border-radius: 50%;
    background: #9af0ce;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1;
    box-sizing: border-box;
}

body.web3-pop .insufficient-gold-ring {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 21px;
}

body.web3-pop .insufficient-gold-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    color: #6e4ae8;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 999px;
    background: rgba(124, 92, 255, .08);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
}

body.web3-pop .insufficient-gold-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f05fb2;
    box-shadow: 0 0 0 4px rgba(240, 95, 178, .12);
}

body.web3-pop .insufficient-gold-description {
    margin: 9px 0 15px;
    color: #70667b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

body.web3-pop .insufficient-gold-amount-card {
    display: flex;
    width: 100%;
    min-height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 20%, rgba(230, 94, 184, .2), transparent 28%),
        linear-gradient(145deg, #221634, #15101f);
    box-shadow: 0 14px 28px rgba(29, 18, 45, .16);
    box-sizing: border-box;
}

body.web3-pop .insufficient-gold-amount-label {
    color: #c6b7dc;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .16em;
}

body.web3-pop .insufficient-gold-amount-card strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    margin: 7px 0 4px;
    color: #fff;
    font-size: clamp(26px, 8vw, 34px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

body.web3-pop .insufficient-gold-amount-card strong i {
    color: #9af0ce;
    font-size: 17px;
    filter: drop-shadow(0 0 8px rgba(154, 240, 206, .38));
}

body.web3-pop .insufficient-gold-amount-card small {
    color: #9589a7;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

body.web3-pop .insufficient-gold-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    margin-top: 13px;
    padding: 0 17px;
    color: #fff;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #7657ff, #df5eb8);
    box-shadow: 0 11px 22px rgba(118, 87, 255, .22);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

body.web3-pop .insufficient-gold-action i {
    font-size: 11px;
}

@media (max-width: 360px) {
    body.web3-pop .insufficient-gold-modal {
        padding: 12px !important;
    }

    body.web3-pop .insufficient-gold-header {
        min-height: 66px;
        padding-left: 16px;
    }

    body.web3-pop .insufficient-gold-body {
        padding: 15px 14px 0;
    }

    body.web3-pop .insufficient-gold-emblem {
        width: 72px;
        height: 72px;
        border-radius: 24px;
    }
}

/* Contact and invitation pages. */
body.web3-pop .contact-page {
    padding: 64px 12px 30px !important;
    background: transparent !important;
}

body.web3-pop .contact-intro {
    margin: 4px auto 14px;
    padding: 14px 16px;
    color: var(--pop-ink-soft);
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

body.web3-pop .contact-card,
body.web3-pop .empty-contact {
    margin: 12px auto !important;
    padding: 18px !important;
    border: 2px solid rgba(124, 92, 255, .16);
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: var(--pop-shadow-soft) !important;
}

body.web3-pop .contact-account {
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 14px !important;
    background: var(--pop-lilac) !important;
    color: var(--pop-violet) !important;
}

body.web3-pop .contact-link {
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
}

body.web3-pop .invite-share-page {
    min-height: 100%;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    background: transparent !important;
}

body.web3-pop .invite-share-page::before {
    content: none;
    display: none;
}

body.web3-pop .share-section,
body.web3-pop .poster-preview-section {
    border: 1px solid rgba(154, 127, 255, .2) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(28, 23, 54, .96), rgba(17, 15, 38, .98)) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    backdrop-filter: blur(18px);
}

body.web3-pop .invite-dog {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 23px !important;
    background: transparent !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.web3-pop .invite-desc {
    display: block !important;
}

body.web3-pop .invite-user {
    color: #fff !important;
    background: transparent !important;
}

body.web3-pop .invite-link-box {
    padding: 11px 13px !important;
    color: #b8b1ca !important;
    border: 1px solid rgba(139, 111, 255, .27) !important;
    border-radius: 15px !important;
    background: #0c0a1d !important;
}

body.web3-pop .invite-copy-btn,
body.web3-pop .generate-poster-btn,
body.web3-pop .poster-action-btn {
    height: 46px !important;
    line-height: 18px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(105deg, #7355ff, #e55fb4) !important;
    box-shadow: 0 10px 22px rgba(115, 85, 255, .25) !important;
}

body.web3-pop .generate-poster-btn,
body.web3-pop .poster-action-btn.secondary {
    color: #d8d1eb !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
}

body.web3-pop .share-icon {
    box-shadow: 0 8px 18px rgba(32, 20, 52, .18) !important;
}

/* Browser-native MUI popups and every legacy full-screen home sheet. */
body.web3-pop .mui-popup-backdrop {
    z-index: 2000000 !important;
    background: rgba(24, 13, 42, .62);
    backdrop-filter: blur(10px);
}

body.web3-pop .mui-popup {
    z-index: 2000001 !important;
    width: min(340px, calc(100% - 32px)) !important;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 26px !important;
    box-shadow: 0 28px 64px rgba(21, 10, 40, .34);
    overflow: hidden;
}

body.web3-pop .mui-popup-inner {
    padding: 24px 20px 20px;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .18), transparent 35%),
        linear-gradient(160deg, #fff, #f1ebff);
}

body.web3-pop .mui-popup-title {
    color: var(--pop-ink);
    font-size: 18px;
    font-weight: 900;
}

body.web3-pop .mui-popup-text {
    color: var(--pop-ink-soft);
    font-size: 14px;
    line-height: 1.65;
}

body.web3-pop .mui-popup-buttons {
    height: 52px;
    background: #fff;
}

body.web3-pop .mui-popup-button {
    height: 52px;
    color: var(--pop-ink-soft);
    border-color: var(--pop-line);
    background: #fff;
    font-weight: 800;
}

body.web3-pop .mui-popup-button-bold,
body.web3-pop .mui-popup-button:last-child {
    color: #fff;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop :is(
    .expediteupBox,
    .drawupBox,
    .rankinupBox,
    .storeupBox,
    .ustratupBox,
    .huodelotupBox,
    .husuijihdupBox,
    .huishouupBox,
    .jinbibzuupBox,
    .hdmfbxupBox,
    .masterupBox,
    .homepaupowBox,
    .settnszBox
) {
    background: rgba(24, 13, 42, .64) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.web3-pop :is(
    .homepaupCont,
    .rankinupCont,
    .homepsyiCont,
    .lotteryContHe,
    .compoundCont,
    .redenvpCont,
    .masterupCont,
    .expediteupCont,
    .storeupCont,
    .ustratupCont,
    .huishouupCont
) {
    width: calc(100% - 28px) !important;
    max-width: 420px !important;
    max-height: calc(100vh - 48px);
    border: 2px solid rgba(124, 92, 255, .26) !important;
    border-radius: 28px !important;
    background: linear-gradient(160deg, #fff, #f1eaff 58%, #e8fff8) !important;
    box-shadow: 0 28px 64px rgba(22, 10, 42, .34) !important;
    overflow: auto !important;
    box-sizing: border-box;
}

/* Blind box, bag and log pages previously carried a beige theme after globals. */
body.web3-pop .blind-page,
body.web3-pop .bag-page,
body.web3-pop .drawlog-page {
    background:
        radial-gradient(circle at 15% 6%, rgba(255, 114, 182, .2), transparent 28%),
        radial-gradient(circle at 90% 14%, rgba(100, 223, 189, .22), transparent 28%),
        #f7f3ff !important;
}

body.web3-pop .blind-header,
body.web3-pop .bag-header,
body.web3-pop .drawlog-header {
    color: var(--pop-ink) !important;
    background: rgba(250, 248, 255, .94) !important;
}

body.web3-pop .blind-back,
body.web3-pop .bag-back,
body.web3-pop .drawlog-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    padding: 0;
    color: var(--pop-ink) !important;
    border: 1px solid rgba(124, 92, 255, .2) !important;
    border-radius: 12px;
    background: #fff !important;
    font-size: 22px !important;
}

body.web3-pop .drawlog-page {
    padding: 66px 12px 26px !important;
}

body.web3-pop .log-card {
    border: 2px solid rgba(124, 92, 255, .18) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: var(--pop-shadow-soft) !important;
}

body.web3-pop .log-card img {
    border: 2px solid rgba(124, 92, 255, .22);
}

body.web3-pop .log-name,
body.web3-pop .log-no {
    color: var(--pop-ink) !important;
}

body.web3-pop .pager button {
    min-width: 104px;
    height: 44px;
    padding: 0 18px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 8px 18px rgba(124, 92, 255, .2);
}

body.web3-pop .pager button:disabled {
    color: #958aa3;
    background: #e7e1ed !important;
    box-shadow: none;
}

body.web3-pop .bag-empty {
    margin: 42px auto 0;
    padding: 36px 18px !important;
    color: var(--pop-ink-soft) !important;
    border: 2px dashed rgba(124, 92, 255, .3);
    border-radius: 24px;
    background: rgba(255, 255, 255, .74);
}

body.web3-pop .bag-page {
    bottom: 164px !important;
}

body.web3-pop .merge-bar {
    bottom: 82px !important;
    padding: 10px 14px !important;
}

/* --------------------------------------------------------------------------
   DOGVERSE 3.1 — page alignment, home hierarchy and complete popup reset
   -------------------------------------------------------------------------- */

/* Tab pages start at the viewport top. Only the floating tab bar needs room. */
body.web3-pop.has-wap-tabbar .mui-content:not(.unhomeBg) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.web3-pop.has-wap-tabbar .sepbtBox {
    padding: 8px 12px 58px !important;
}

body.web3-pop :is(
    .assetbbTletx,
    .assetbbtx,
    .btomnavtx,
    .mermlinktx,
    .mermliewmx,
    .web3-action-label,
    .mrytnavtx
) {
    line-height: 1.35 !important;
}

body.web3-pop :is(.assetbbTletx, .assetbbtx, .mermliewmx) {
    display: flex;
    align-items: center;
}

/* Home: the balance belongs to the earnings card; the obsolete parameter row
   is removed in markup so the dog board can move up by a full row. */
body.web3-pop .home-dashboard .unhomeCont {
    padding-bottom: 146px;
    box-sizing: border-box;
}

body.web3-pop .home-dashboard .unhomeCont::before {
    top: 17%;
    height: 51%;
    border-color: rgba(124, 92, 255, .16);
    background:
        linear-gradient(rgba(124, 92, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, .07) 1px, transparent 1px),
        rgba(255, 255, 255, .38);
    background-size: 22px 22px;
}

body.web3-pop .home-dashboard .mrytopBox {
    flex: 0 0 94px;
    height: 94px;
    margin: 8px 12px 4px !important;
    padding: 8px !important;
    box-sizing: border-box;
}

body.web3-pop .home-dashboard .mrytopBox > .df {
    align-items: stretch;
    height: 100%;
    gap: 8px;
}

body.web3-pop .home-dashboard .mrymreyhb {
    top: 0 !important;
    display: flex;
    flex: 0 0 43%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 43% !important;
    min-height: 0;
    height: 76px !important;
    padding: 8px 7px !important;
    margin: 0 !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 19px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(184, 243, 91, .75), transparent 32%),
        linear-gradient(145deg, #6b4dea, #9876ff 58%, #ff72b6) !important;
    box-shadow: 0 12px 22px rgba(91, 60, 191, .24);
}

body.web3-pop .home-dashboard .mrymreyhb .mrymrmc {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px !important;
    letter-spacing: .08em;
    text-align: center;
}

body.web3-pop .homeCoinTotal {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    color: #fff;
    white-space: nowrap;
}

body.web3-pop .homeCoinGlyph {
    flex: 0 0 auto;
    margin-right: 5px;
    color: var(--pop-lime);
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(42, 24, 95, .35);
}

body.web3-pop .homeCoinValue {
    min-width: 0;
    max-width: calc(100% - 43px);
    overflow: hidden;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 22px;
    text-overflow: ellipsis;
}

body.web3-pop .homeCoinUnit {
    margin-left: 4px;
    color: rgba(255, 255, 255, .76);
    font-size: 9px;
    font-weight: 800;
}

body.web3-pop .homeHourlyIncome {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding-top: 4px;
    color: rgba(255, 255, 255, .86);
    border-top: 1px solid rgba(255, 255, 255, .25);
    white-space: nowrap;
}

body.web3-pop .homeHourlyLabel {
    margin-right: 5px;
    font-size: 8px;
    font-weight: 800;
}

body.web3-pop .homeHourlyValue {
    max-width: 64px;
    overflow: hidden;
    color: var(--pop-lime);
    font-size: 11px;
    font-weight: 900;
    line-height: 13px;
    text-overflow: ellipsis;
}

body.web3-pop .homeHourlyUnit {
    margin-left: 4px;
    font-size: 7px;
    font-weight: 800;
}

body.web3-pop .home-dashboard .mrytopBox > .df > .fx1:last-child {
    min-width: 0;
}

body.web3-pop .home-dashboard .mrytopnavRow {
    align-items: stretch;
    height: 76px;
    gap: 6px;
}

body.web3-pop .home-dashboard .mrytnavHe {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    min-height: 0;
    height: 76px;
    padding: 6px 3px;
    box-sizing: border-box;
}

body.web3-pop .home-dashboard .mrytnavHe > .web3-action-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 5px;
    font-size: 17px;
}

body.web3-pop .home-dashboard .huangdquyeBox,
body.web3-pop .home-dashboard .huangdquye {
    flex: 0 0 auto !important;
    height: 306px !important;
}

body.web3-pop .home-dashboard .huangdquye > .fx1 {
    display: none;
}

body.web3-pop .home-dashboard .mrythudBox {
    flex: 0 0 306px;
    width: calc(100% - 20px);
    height: 306px !important;
    margin: 2px 10px 0 !important;
    padding: 0 1%;
    border: 2px solid rgba(124, 92, 255, .17);
    border-radius: 26px;
    background: rgba(255, 255, 255, .26);
}

body.web3-pop .home-dashboard .dog-slot.qipao {
    opacity: 1;
    border: 2px solid rgba(124, 92, 255, .3) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(240, 233, 255, .52)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        0 8px 16px rgba(65, 39, 110, .09);
}

body.web3-pop .home-dashboard .dog-slot.qipao span {
    color: rgba(90, 62, 160, .55);
}

body.web3-pop .home-dashboard .mrydwbtmBox {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    z-index: 32;
    width: calc(100% - 20px) !important;
    max-width: 460px;
    height: 66px;
    transform: translateX(-50%);
}

body.web3-pop .home-dashboard .mrybtmNavBox {
    align-items: stretch;
    width: 100%;
    height: 66px;
    padding: 6px !important;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 34px rgba(37, 20, 63, .22);
    backdrop-filter: blur(16px);
    box-sizing: border-box;
}

body.web3-pop .home-dashboard :is(.mrybtmNav, .mrybtmhuis, .blindBagHomeBtn) {
    display: flex;
    flex: 0 0 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px !important;
    min-width: 50px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .15) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box;
    overflow: visible;
}

body.web3-pop .home-dashboard :is(.mrybtmNav, .mrybtmhuis, .blindBagHomeBtn) .web3-action-icon {
    height: 24px;
    margin: 0 0 3px;
    color: var(--pop-violet);
    font-size: 19px;
    line-height: 24px;
}

body.web3-pop .home-dashboard :is(.web3-action-label, .blindBagHomeText) {
    position: static !important;
    display: block;
    width: 100%;
    color: var(--pop-ink) !important;
    font-size: 9px !important;
    font-weight: 800;
    line-height: 11px !important;
    text-align: center;
    text-shadow: none !important;
    white-space: nowrap;
}

body.web3-pop .home-dashboard .mrybtmlvq {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 54px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    color: #fff;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(124, 92, 255, .25) !important;
    box-sizing: border-box;
}

body.web3-pop .home-dashboard .mrybtmlvq > .df {
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.web3-pop .home-dashboard .mrybtmlvdji,
body.web3-pop .home-dashboard .mrylvqmm {
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900;
    line-height: 14px !important;
    text-align: center;
    word-break: normal;
}

body.web3-pop .home-dashboard .mrybtmlvdji {
    font-size: 12px !important;
    line-height: 15px !important;
}

body.web3-pop .home-dashboard .mrylvqmm {
    font-size: 13px !important;
    line-height: 16px !important;
}

body.web3-pop .home-dashboard .mrythudHe {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

body.web3-pop .home-dashboard .mrythudBox.is-dragging {
    overflow: visible !important;
}

body.web3-pop .home-dashboard .mrythudHe.is-dragging {
    z-index: 9999 !important;
    cursor: grabbing;
    transform: scale(1.06);
    box-shadow: 0 18px 34px rgba(62, 35, 119, .34);
}

body.web3-pop .home-dashboard :is(.backpack-drop-ready, .recycle-drop-ready) {
    overflow: visible !important;
    box-shadow:
        0 0 0 3px rgba(184, 243, 91, .46),
        0 0 20px rgba(124, 92, 255, .42) !important;
}

body.web3-pop .home-dashboard :is(.backpack-drop-hover, .recycle-drop-hover) {
    transform: translateY(-5px) scale(1.1);
    box-shadow:
        0 0 0 4px rgba(184, 243, 91, .82),
        0 0 28px rgba(124, 92, 255, .65) !important;
}

/* Every legacy overlay now shares one dark glass backdrop. Existing active
   classes still control visibility, so this changes appearance only. */
body.web3-pop :is(
    .homepaupowBox,
    .expediteupBox,
    .drawupBox,
    .rankinupBox,
    .storeupBox,
    .ustratupBox,
    .settnszBox,
    .lotterynrBox,
    .huodelotupBox,
    .huodrandoBox,
    .husuijihdupBox,
    .huishouupBox,
    .redenvpepopBox,
    .compoundhcBox,
    .dcmbopBox,
    .lixianshyupBox,
    .jinbibzuupBox,
    .gxhdjbupBox,
    .hdmfbxupBox,
    .flyTreasureShareBox,
    .masterupBox,
    .loginNoticePopupBox
) {
    z-index: 1000001 !important;
    align-items: center;
    justify-content: center;
    padding: 20px 14px !important;
    background: rgba(22, 11, 41, .7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
}

body.web3-pop :is(
    .homepaupowBox,
    .expediteupBox,
    .drawupBox,
    .rankinupBox,
    .storeupBox,
    .ustratupBox,
    .settnszBox,
    .lotterynrBox,
    .huodelotupBox,
    .huodrandoBox,
    .husuijihdupBox,
    .huishouupBox,
    .redenvpepopBox,
    .compoundhcBox,
    .dcmbopBox,
    .lixianshyupBox,
    .jinbibzuupBox,
    .gxhdjbupBox,
    .hdmfbxupBox,
    .flyTreasureShareBox,
    .masterupBox,
    .loginNoticePopupBox
) {
    display: flex;
}

body.web3-pop :is(.redenvpepoyin, .masterupyiny, .dcmboppoyin) {
    background: transparent !important;
}

body.web3-pop :is(
    .homepaupCont,
    .rankinupCont,
    .homepsyiCont,
    .lotteryContHe,
    .compoundCont,
    .redenvpCont,
    .masterupCont,
    .dcmbopContHe,
    .loginNoticePopup,
    .treasure-share-card
) {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0 auto !important;
    padding-bottom: 18px !important;
    border: 2px solid rgba(255, 255, 255, .74) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .2), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(100, 223, 189, .18), transparent 36%),
        linear-gradient(160deg, #fff, #f1eaff 65%, #eafff9) !important;
    box-shadow:
        0 0 0 1px rgba(124, 92, 255, .14),
        0 30px 70px rgba(15, 6, 31, .42) !important;
    overflow: auto !important;
    box-sizing: border-box;
}

body.web3-pop :is(.homepaupCont, .rankinupCont, .homepsyiCont) {
    min-height: 0 !important;
}

body.web3-pop .rankinupCont {
    height: min(650px, calc(100vh - 40px)) !important;
}

body.web3-pop .homepauptleHe {
    top: 0 !important;
    display: flex;
    align-items: center;
    min-height: 58px !important;
    margin: 0 0 12px !important;
    padding: 8px 10px 8px 16px !important;
    color: var(--pop-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .14) !important;
    background: transparent !important;
    box-sizing: border-box;
}

body.web3-pop .storeupBox .homepauptleHe {
    position: sticky !important;
    top: 0 !important;
    z-index: 20;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 18px rgba(52, 31, 87, .06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.web3-pop .storeupBox #product_content {
    height: calc(100% - 70px) !important;
}

body.web3-pop .homepauptle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px !important;
    background: none !important;
    background-image: none !important;
}

body.web3-pop .homepauptletx {
    display: block;
    width: 100%;
    height: auto !important;
    transform: none !important;
    color: var(--pop-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 900;
    line-height: 22px !important;
    letter-spacing: .04em;
    text-align: center;
}

body.web3-pop .homepauptletx > span {
    position: static !important;
    display: inline !important;
    transform: none !important;
}

/* Lettering.js marks spaces as `.empty`; keep them as ordinary title spaces. */
body.web3-pop .homepauptletx > span.empty {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body.web3-pop .homepauptzw {
    position: relative;
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 13px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}

body.web3-pop .homepauptzw::before {
    content: "×";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pop-ink);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

body.web3-pop .homepauptzw img {
    display: none !important;
}

body.web3-pop .homepauptleHe > .homepauptzw:first-child {
    visibility: hidden;
}

body.web3-pop :is(
    .homepwdcwmc,
    .homepwdshjBox,
    .expedibtn,
    .drawupiqd,
    .drawupiqhus,
    .drawupiqxx,
    .rankyqhyan,
    .storeslsuls,
    .storeshjone,
    .storeshjtwo,
    .storeshjthre,
    .storetjin,
    .storetjinsu
) {
    background-image: none !important;
}

body.web3-pop .homepwdcwmc {
    height: auto !important;
    margin: 8px 16px;
    padding: 10px 12px !important;
    color: var(--pop-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 14px;
    background: var(--pop-lilac) !important;
    font-family: inherit !important;
}

body.web3-pop .homepwdshjBox {
    height: auto !important;
    margin: 16px auto !important;
    padding: 10px 14px !important;
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 14px;
    background: #fff !important;
}

body.web3-pop :is(.expedibtn, .drawupiqd, .drawupiqhus, .drawupiqxx, .rankyqhyan) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 32px);
    min-height: 44px;
    height: auto !important;
    margin: 12px auto !important;
    padding: 10px 14px !important;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 9px 20px rgba(124, 92, 255, .22);
    box-sizing: border-box;
    line-height: 1.25 !important;
}

body.web3-pop :is(.ranklistBox, .ustralistBox) {
    height: calc(100% - 78px) !important;
    margin: 0 !important;
    padding: 0 12px 14px !important;
}

body.web3-pop :is(.ranklistHe, .ustralistHe, .settnsLsthe) {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 2px solid rgba(124, 92, 255, .16) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 9px 20px rgba(52, 31, 87, .08) !important;
    overflow: hidden;
}

body.web3-pop :is(.ranklistnr, .settnsLstnr) {
    min-height: 70px;
    padding: 8px 10px !important;
    color: var(--pop-ink) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f7f3ff, #e8fff8) !important;
    box-shadow: none !important;
}

body.web3-pop .ustralistHe {
    display: flex;
    min-height: 106px;
    background: linear-gradient(135deg, #f7f3ff, #e8fff8) !important;
}

body.web3-pop .ustrajtuimg {
    display: flex;
    flex: 0 0 96px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px !important;
    padding: 10px !important;
    color: var(--pop-ink) !important;
    box-sizing: border-box;
}

body.web3-pop .ustrajtuimg img {
    width: 70px !important;
    height: 70px !important;
    margin: 0 0 4px !important;
    border: 2px solid rgba(124, 92, 255, .2);
    border-radius: 18px;
    background: #fff;
    object-fit: contain;
}

body.web3-pop :is(.ranklimc, .ranklidjj, .ranklishuj, .storeklimc, .ustrmch_1, .ustrmch_2, .ustrmch_3, .settnsLstmc, .settnsLstmcone, .settnsLstms) {
    color: var(--pop-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

body.web3-pop .ranklirwuHe {
    border: 2px solid rgba(124, 92, 255, .22);
    border-radius: 17px;
    background: #fff;
}

body.web3-pop .ranklirwu img,
body.web3-pop .ustralistHe img {
    object-fit: contain;
}

body.web3-pop .ranklislsu {
    color: var(--pop-violet) !important;
    background: var(--pop-lilac) !important;
    border-radius: 12px;
}

body.web3-pop .settnsCont {
    width: auto !important;
    margin: 0 14px !important;
}

body.web3-pop .stroassort {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 10px;
}

body.web3-pop .storetjin {
    display: flex;
    align-items: center;
    width: auto !important;
    height: 38px !important;
    margin: 0 12px 10px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 12px;
    background: #fff !important;
}

body.web3-pop .storetjinsu,
body.web3-pop .storetjdwe {
    color: var(--pop-ink) !important;
    line-height: 26px !important;
}

body.web3-pop .storeslsuls {
    top: 8px !important;
    left: 8px !important;
    width: 26px !important;
    height: 26px !important;
    color: var(--pop-violet) !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 9px;
    background: var(--pop-lilac) !important;
    font-size: 10px !important;
    font-weight: 900;
    line-height: 26px !important;
}

body.web3-pop :is(.storeshjone, .storeshjtwo, .storeshjthre) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 78px !important;
    height: 38px !important;
    margin: 12px 0 0 !important;
    padding: 0 10px !important;
    color: var(--pop-violet) !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 6px 14px rgba(72, 43, 122, .08);
    font-weight: 900;
    line-height: 1 !important;
}

body.web3-pop .incomeSummaryCard {
    width: calc(100% - 32px) !important;
    margin: 16px auto 0 !important;
    padding: 24px 18px 22px !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(184, 243, 91, .7), transparent 32%),
        linear-gradient(145deg, var(--pop-violet), #9876ff 58%, var(--pop-pink)) !important;
    box-shadow: 0 16px 30px rgba(82, 53, 159, .24) !important;
    box-sizing: border-box;
}

body.web3-pop .incomeSummaryIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
    color: var(--pop-violet) !important;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 18px !important;
    background: var(--pop-lime) !important;
    box-shadow: 0 10px 20px rgba(37, 20, 80, .22) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

body.web3-pop .incomeSummaryValue {
    color: #fff !important;
    font-size: 28px !important;
    line-height: 34px !important;
}

body.web3-pop .incomeSummaryUnit {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 12px !important;
    letter-spacing: .08em;
}

body.web3-pop .lotteryContHe {
    padding: 10px 0 18px !important;
    background-image:
        radial-gradient(circle at 50% 38%, rgba(124, 92, 255, .14), transparent 46%),
        linear-gradient(160deg, #fff, #f1eaff 65%, #eafff9) !important;
}

body.web3-pop .lotterytle img {
    display: none !important;
}

body.web3-pop .lotterytle::before {
    content: "幸运转盘";
    color: var(--pop-ink);
    font-size: 18px;
    font-weight: 900;
    line-height: 44px;
}

html[data-language="en"] body.web3-pop .lotterytle::before {
    content: "Lucky Wheel";
}

body.web3-pop .lotterytlezw {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 13px;
    background: #fff;
}

body.web3-pop .lotterytlezw img {
    display: none !important;
}

body.web3-pop .lotterytlezw::before {
    content: "×";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--pop-ink);
    font-size: 24px;
}

body.web3-pop .lotterytleBox > .lotterytlezw:first-child {
    visibility: hidden;
}

body.web3-pop .lotterydizuo {
    top: -12px !important;
    width: calc(100% - 80px);
    height: 54px !important;
    margin: 0 auto;
    border: 1px solid rgba(124, 92, 255, .2);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 10px 22px rgba(124, 92, 255, .22);
}

body.web3-pop .lotterydizuoCnt {
    inset: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.web3-pop .lotterydizshu {
    font-size: 15px !important;
    font-weight: 900;
    line-height: 20px !important;
}

body.web3-pop .lotterydims,
body.web3-pop .lotterydizuozwt {
    display: none !important;
}

body.web3-pop :is(.loginNoticePopupTitle, .treasure-share-title) {
    color: var(--pop-ink) !important;
    font-size: 18px !important;
    font-weight: 900;
    line-height: 24px !important;
    text-align: center;
}

body.web3-pop .treasureCopyBtn {
    width: calc(100% - 36px) !important;
    height: 44px !important;
    margin: 0 auto 18px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 9px 20px rgba(124, 92, 255, .22);
    font-size: 14px !important;
    line-height: 44px !important;
    text-align: center;
}

/* Login announcement — compact Web3 bulletin card. */
body.web3-pop.login-notice-open {
    overflow: hidden !important;
}

body.web3-pop .loginNoticePopupBox {
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
    animation: login-notice-backdrop-in .24s ease both;
}

body.web3-pop .loginNoticePopupBox.is-closing {
    animation: login-notice-backdrop-out .22s ease both;
}

body.web3-pop .loginNoticePopup {
    position: relative;
    width: min(390px, 100%) !important;
    max-height: min(680px, calc(100dvh - 36px)) !important;
    padding: 20px 18px 17px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 114, 182, .22), transparent 30%),
        radial-gradient(circle at 2% 98%, rgba(100, 223, 189, .22), transparent 33%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(247, 242, 255, .98) 64%, rgba(237, 255, 251, .98)) !important;
    box-shadow:
        0 0 0 1px rgba(124, 92, 255, .16),
        0 34px 90px rgba(15, 6, 31, .48),
        inset 0 1px rgba(255, 255, 255, .94) !important;
    text-align: left;
    animation: login-notice-card-in .38s cubic-bezier(.2, .85, .22, 1.08) both;
    box-sizing: border-box;
}

body.web3-pop .loginNoticePopupBox.is-closing .loginNoticePopup {
    animation: login-notice-card-out .2s ease both;
}

body.web3-pop .login-notice-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

body.web3-pop .login-notice-orb-one {
    top: -46px;
    right: -36px;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 114, 182, .09);
}

body.web3-pop .login-notice-orb-two {
    left: -44px;
    bottom: 70px;
    width: 104px;
    height: 104px;
    background: rgba(100, 223, 189, .08);
}

body.web3-pop .login-notice-close {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 15px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #625673;
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 7px 18px rgba(57, 39, 91, .1);
    font-size: 14px;
    line-height: 1;
}

body.web3-pop .login-notice-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding-right: 42px;
}

body.web3-pop .login-notice-icon {
    position: relative;
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 19px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 12px 24px rgba(124, 92, 255, .26), inset 0 1px rgba(255, 255, 255, .35);
    font-size: 21px;
}

body.web3-pop .login-notice-icon span {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: #c8ff4d;
    box-shadow: 0 0 12px rgba(200, 255, 77, .85);
}

body.web3-pop .login-notice-heading {
    min-width: 0;
}

body.web3-pop .login-notice-kicker {
    display: flex;
    align-items: center;
    color: #7c5cff;
    font-size: 8px;
    font-weight: 950;
    line-height: 13px;
    letter-spacing: .14em;
    gap: 6px;
}

body.web3-pop .login-notice-kicker i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #67dbac;
    box-shadow: 0 0 0 4px rgba(103, 219, 172, .13);
}

body.web3-pop .loginNoticePopupTitle {
    padding: 2px 0 0 !important;
    color: #211634 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 29px !important;
    text-align: left !important;
}

body.web3-pop .login-notice-subtitle {
    margin-top: 1px;
    color: #a094ad;
    font-size: 7px;
    font-weight: 850;
    line-height: 12px;
    letter-spacing: .1em;
}

body.web3-pop .login-notice-divider {
    position: relative;
    height: 1px;
    margin: 17px 0 14px;
    background: linear-gradient(90deg, rgba(124, 92, 255, .24), rgba(255, 114, 182, .08), transparent);
}

body.web3-pop .login-notice-divider span {
    position: absolute;
    top: -2px;
    left: 0;
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .login-notice-content-shell {
    position: relative;
    z-index: 1;
    padding: 12px 13px 13px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px rgba(255, 255, 255, .86);
}

body.web3-pop .login-notice-content-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

body.web3-pop .login-notice-content-label span {
    display: inline-flex;
    align-items: center;
    color: #594c6e;
    font-size: 10px;
    font-weight: 900;
    gap: 6px;
}

body.web3-pop .login-notice-content-label span i {
    color: #7c5cff;
}

body.web3-pop .login-notice-content-label small {
    color: #a69bb1;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .08em;
}

body.web3-pop .loginNoticePopupContent {
    max-height: min(34vh, 230px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 5px 0 0 !important;
    color: #5f536e !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    text-align: left;
    word-break: break-word;
    white-space: normal;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 92, 255, .35) transparent;
    -webkit-overflow-scrolling: touch;
}

body.web3-pop .loginNoticePopupContent::-webkit-scrollbar {
    width: 4px;
}

body.web3-pop .loginNoticePopupContent::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(124, 92, 255, .35);
}

body.web3-pop .loginNoticePopupBtn {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100% !important;
    height: 48px !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 14px 0 0 !important;
    padding: 0 18px;
    color: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink)) !important;
    box-shadow: 0 11px 24px rgba(124, 92, 255, .25), inset 0 1px rgba(255, 255, 255, .3);
    font-size: 14px !important;
    font-weight: 900;
    line-height: 48px !important;
    text-align: center;
}

body.web3-pop .loginNoticePopupBtn i {
    font-size: 11px;
    transition: transform .2s ease;
}

body.web3-pop .loginNoticePopupBtn:active {
    transform: translateY(1px) scale(.99);
}

body.web3-pop .loginNoticePopupBtn:active i {
    transform: translateX(3px);
}

body.web3-pop .login-notice-footnote {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #998da6;
    font-size: 8px;
    line-height: 13px;
    gap: 5px;
}

body.web3-pop .login-notice-footnote i {
    color: #67b996;
}

@keyframes login-notice-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes login-notice-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes login-notice-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes login-notice-card-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(12px) scale(.97); }
}

@media (max-height: 590px) {
    body.web3-pop .loginNoticePopup {
        padding-block: 15px !important;
    }

    body.web3-pop .login-notice-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    body.web3-pop .login-notice-hero {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    body.web3-pop .login-notice-divider {
        margin-block: 12px 10px;
    }

    body.web3-pop .loginNoticePopupContent {
        max-height: 27vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.web3-pop .loginNoticePopupBox,
    body.web3-pop .loginNoticePopup,
    body.web3-pop .loginNoticePopupBox.is-closing,
    body.web3-pop .loginNoticePopupBox.is-closing .loginNoticePopup {
        animation: none !important;
    }
}

body.web3-pop :is(.masteruptl, .dcmbopConttle, .avatar-picker-title) {
    color: var(--pop-ink) !important;
    font-size: 17px !important;
    font-weight: 900;
    line-height: 24px !important;
    text-align: center;
}

body.web3-pop .masterupCont {
    position: relative;
    z-index: 1020;
    padding: 22px 18px !important;
}

body.web3-pop .masterup-profile-row {
    align-items: center;
}

body.web3-pop .masterup-profile-name {
    min-width: 0;
}

body.web3-pop .masterup-profile-name .masteruptmc {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0;
    line-height: 22px;
}

body.web3-pop .masterup-profile-name .masteruptmc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .redenvpCont {
    min-height: 390px;
    padding: 22px 18px !important;
    color: var(--pop-ink);
}

body.web3-pop :is(.redenvpCodata, .redenvplinan, .redenvplitixinBox) {
    position: relative;
    z-index: 2;
}

body.web3-pop .redenvpCodata {
    padding: 8px 0 18px !important;
    background: none !important;
}

body.web3-pop .redenvcodlogo img {
    border: 3px solid rgba(124, 92, 255, .22);
    border-radius: 20px;
}

body.web3-pop .nvpCodacacaan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--pop-ink);
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 13px;
    background: #fff;
}

body.web3-pop .avatar-picker-panel {
    left: 50% !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: min(420px, calc(100% - 24px)) !important;
    transform: translateX(-50%);
    border-color: rgba(255, 255, 255, .74) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .2), transparent 34%),
        linear-gradient(160deg, #fff, #f1eaff 68%, #eafff9) !important;
    box-shadow: 0 28px 64px rgba(15, 6, 31, .4);
}

@media (max-width: 360px) {
    body.web3-pop .home-dashboard .mrymreyhb {
        flex-basis: 40%;
        width: 40% !important;
    }

    body.web3-pop .homeCoinValue {
        font-size: 15px;
    }

    body.web3-pop .home-dashboard .mrybtmNavBox {
        gap: 4px;
        padding: 6px 4px !important;
    }

    body.web3-pop .home-dashboard :is(.mrybtmNav, .mrybtmhuis, .blindBagHomeBtn) {
        flex-basis: 44px;
        width: 44px !important;
        min-width: 44px !important;
    }

    body.web3-pop .home-dashboard .mrybtmlvq {
        min-width: 76px;
        padding-inline: 5px !important;
    }
}

/* Lucky Draw / Web3 protocol redesign */
body.web3-pop .lotterynrBox,
body.web3-pop .huodelotupBox {
    --lottery-lime: #c8ff4d;
    --lottery-cyan: #8eebff;
    --lottery-pink: #ff73c8;
    --lottery-violet: #7c5cff;
    --lottery-ink: #120d20;
    --lottery-panel: #1b1430;
}

body.web3-pop .lotterynrBox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 18% 12%, rgba(124, 92, 255, .28), transparent 34%),
        radial-gradient(circle at 84% 88%, rgba(142, 235, 255, .18), transparent 32%),
        rgba(12, 8, 22, .78) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    box-sizing: border-box;
}

body.web3-pop .lotteryContHe {
    position: relative;
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 32px);
    margin: 0 !important;
    padding: 0 20px 20px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 30px !important;
    color: #fff;
    background:
        radial-gradient(circle at 82% 0, rgba(255, 115, 200, .18), transparent 28%),
        radial-gradient(circle at 8% 72%, rgba(142, 235, 255, .12), transparent 34%),
        linear-gradient(155deg, #241a3d 0%, #151024 54%, #101823 100%) !important;
    box-shadow:
        0 0 0 1px rgba(124, 92, 255, .2),
        0 34px 90px rgba(0, 0, 0, .48),
        inset 0 1px rgba(255, 255, 255, .08) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

body.web3-pop .lotteryContHe::before,
body.web3-pop .lotteryContHe::after {
    content: "";
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    pointer-events: none;
}

body.web3-pop .lotteryContHe::before {
    top: 104px;
    left: 50%;
    width: 390px;
    height: 390px;
    transform: translateX(-50%);
}

body.web3-pop .lotteryContHe::after {
    top: 142px;
    left: -46px;
    width: 120px;
    height: 120px;
    box-shadow: 355px 282px 0 -38px rgba(200, 255, 77, .08);
}

body.web3-pop .lotterytleBox {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto !important;
    min-height: 70px !important;
    margin: 0 -20px !important;
    padding: 12px 14px 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(20, 15, 34, .84) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
}

body.web3-pop .lottery-brand {
    min-width: 0;
}

body.web3-pop .lottery-eyebrow,
body.web3-pop .lottery-result-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--lottery-cyan);
    font-size: 9px;
    font-weight: 900;
    line-height: 14px;
    letter-spacing: .2em;
}

body.web3-pop .lottery-eyebrow span,
body.web3-pop .lottery-result-kicker span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lottery-lime);
    box-shadow: 0 0 12px rgba(200, 255, 77, .8);
}

body.web3-pop .lotterytle {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 27px !important;
    text-align: left !important;
    letter-spacing: .02em;
}

body.web3-pop .lotterytle::before {
    content: none !important;
}

body.web3-pop .lotterytlezw {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .86) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

body.web3-pop .lotterytlezw::before {
    content: none !important;
}

body.web3-pop .lotterytlezw i {
    font-size: 17px;
}

body.web3-pop .lotterytlezw:active {
    transform: scale(.94);
}

body.web3-pop .lottery-status-row {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding-top: 10px;
}

body.web3-pop .lottery-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    color: var(--lottery-lime);
    border: 1px solid rgba(200, 255, 77, .22);
    border-radius: 999px;
    background: rgba(200, 255, 77, .08);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .14em;
}

body.web3-pop .lottery-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: web3LotteryLive 1.7s ease-in-out infinite;
}

body.web3-pop .lottery-hint {
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
}

body.web3-pop .lotteryzpan {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 10px;
}

body.web3-pop .lottery-orbit {
    --wheel-size: min(304px, calc(100vw - 72px));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wheel-size);
    height: var(--wheel-size);
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 62%, rgba(124, 92, 255, .18) 63%, transparent 66%),
        rgba(255, 255, 255, .025);
    box-shadow:
        0 0 55px rgba(124, 92, 255, .22),
        inset 0 0 40px rgba(142, 235, 255, .06);
    box-sizing: border-box;
}

body.web3-pop .lottery {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.web3-pop .myCanvasBox {
    position: absolute !important;
    inset: 0 !important;
    z-index: 110;
    display: block !important;
}

body.web3-pop #myCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

body.web3-pop .lottery-pointer {
    position: absolute;
    top: -5px;
    left: 50%;
    z-index: 150;
    width: 38px;
    height: 48px;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .42));
}

body.web3-pop .lottery-pointer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    width: 26px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(160deg, var(--lottery-lime), #8fffc6);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

body.web3-pop .lottery-pointer span {
    position: absolute;
    top: 7px;
    left: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lottery-ink);
}

body.web3-pop .clikoper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 130 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78px !important;
    height: 78px !important;
    margin: -39px 0 0 -39px !important;
    padding: 0;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 35% 26%, rgba(255, 255, 255, .18), transparent 27%),
        linear-gradient(150deg, #241a3d, #110c1d) !important;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, .08),
        0 12px 26px rgba(0, 0, 0, .42),
        inset 0 0 20px rgba(124, 92, 255, .28) !important;
}

body.web3-pop .clikoper span {
    color: var(--lottery-cyan);
    font-size: 8px;
    font-weight: 900;
    line-height: 10px;
    letter-spacing: .22em;
}

body.web3-pop .clikoper strong {
    margin-top: 2px;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 24px;
    letter-spacing: .05em;
}

body.web3-pop .lotterydizuo {
    position: relative !important;
    top: 0 !important;
    z-index: 6 !important;
    width: 100% !important;
    height: 58px !important;
    margin: 0 0 10px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(90deg, rgba(124, 92, 255, .14), rgba(142, 235, 255, .06)),
        rgba(255, 255, 255, .035) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}

body.web3-pop .lotterydizuoCnt {
    position: absolute !important;
    inset: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 11px;
    padding: 0 14px;
    box-sizing: border-box;
}

body.web3-pop .lottery-ticket-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--lottery-lime);
    border: 1px solid rgba(200, 255, 77, .22);
    border-radius: 12px;
    background: rgba(200, 255, 77, .08);
    box-shadow: inset 0 0 16px rgba(200, 255, 77, .06);
    font-size: 20px;
}

body.web3-pop .lottery-ticket-copy {
    flex: 1;
    min-width: 0;
}

body.web3-pop .lottery-ticket-label {
    color: rgba(255, 255, 255, .42);
    font-size: 8px;
    font-weight: 900;
    line-height: 11px;
    letter-spacing: .18em;
}

body.web3-pop .lotterydizshu {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #fff !important;
    text-align: left !important;
}

body.web3-pop .lotterydizshu strong {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 25px;
}

body.web3-pop .lotterydizshu span {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 800;
}

body.web3-pop .lotteryxzbtm {
    position: relative !important;
    top: 0 !important;
    z-index: 6 !important;
    width: 100%;
    margin: 0 !important;
}

body.web3-pop :is(#lotteryxzan, #lotterywal) {
    width: 100% !important;
    margin: 0 !important;
}

body.web3-pop .web3-lottery-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px 14px !important;
    color: #171127 !important;
    border: 0;
    border-radius: 17px !important;
    background:
        linear-gradient(105deg, var(--lottery-lime), #92f8d0 55%, var(--lottery-cyan)) !important;
    box-shadow:
        0 12px 28px rgba(142, 235, 255, .16),
        inset 0 1px rgba(255, 255, 255, .6) !important;
    box-sizing: border-box;
}

body.web3-pop .web3-lottery-button::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 16px;
    pointer-events: none;
}

body.web3-pop .lottery-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 11px;
    color: #fff;
    border-radius: 11px;
    background: var(--lottery-ink);
    box-shadow: 0 6px 14px rgba(18, 13, 32, .2);
    font-size: 16px;
}

body.web3-pop .lottery-button-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

body.web3-pop .lottery-button-copy strong {
    color: inherit;
    font-size: 15px;
    font-weight: 950;
    line-height: 19px;
}

body.web3-pop .lottery-button-copy small {
    margin-top: 1px;
    color: rgba(23, 17, 39, .56);
    font-size: 8px;
    font-weight: 900;
    line-height: 10px;
    letter-spacing: .15em;
}

body.web3-pop .web3-lottery-button > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 10px;
    background: rgba(23, 17, 39, .88);
    font-size: 17px;
}

body.web3-pop .web3-lottery-button.disabled {
    justify-content: center;
    color: rgba(255, 255, 255, .62) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

body.web3-pop .web3-lottery-button.disabled .lottery-button-copy {
    flex: none;
    align-items: center;
}

body.web3-pop .web3-lottery-button.disabled .lottery-button-copy small {
    color: rgba(255, 255, 255, .32);
}

body.web3-pop .web3-lottery-button.is-spinning {
    cursor: wait;
    filter: saturate(.72);
}

body.web3-pop .lotteryxzan .web3-lottery-button {
    animation: web3LotteryButtonTap .35s ease;
}

body.web3-pop .huodelotupBox {
    background:
        radial-gradient(circle at 50% 40%, rgba(124, 92, 255, .24), transparent 42%),
        rgba(8, 5, 15, .78) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.web3-pop .huodelotupBox .lottery-result-card {
    width: min(340px, calc(100% - 28px)) !important;
    padding: 0 18px 18px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 84% 8%, rgba(142, 235, 255, .1), transparent 30%),
        linear-gradient(155deg, #211831, #12101e 68%, #101923) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
    overflow: hidden;
}

body.web3-pop .lottery-result-card .homepauptleHe {
    min-height: 60px !important;
    margin: 0 -18px 14px !important;
    padding: 8px 10px 8px 14px !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .025) !important;
}

body.web3-pop .lottery-result-card .homepauptletx {
    color: #fff !important;
    font-size: 17px !important;
    line-height: 24px !important;
}

body.web3-pop .lottery-result-card .homepauptzw {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .13) !important;
    background: rgba(255, 255, 255, .07) !important;
}

body.web3-pop .lottery-result-card .homepauptzw::before {
    content: none !important;
}

body.web3-pop .lottery-result-card .homepauptzw i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
}

body.web3-pop .lottery-result-kicker {
    justify-content: center;
    margin-bottom: 12px;
    color: rgba(142, 235, 255, .72);
    font-size: 8px;
    letter-spacing: .16em;
}

body.web3-pop .lottery-result-card .web3-dialog-symbol {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 14px !important;
    color: var(--lottery-cyan) !important;
    border: 1px solid rgba(142, 235, 255, .28) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(142, 235, 255, .12), transparent 58%),
        rgba(255, 255, 255, .035) !important;
    box-shadow:
        0 0 0 6px rgba(142, 235, 255, .035),
        0 12px 26px rgba(0, 0, 0, .2) !important;
    font-size: 25px !important;
}

body.web3-pop .lottery-result-card .drawupitj {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    padding: 12px 14px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
    text-align: center;
    box-sizing: border-box;
}

body.web3-pop .lottery-result-card .drawupiqd {
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    color: var(--lottery-ink) !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(105deg, var(--lottery-lime), var(--lottery-cyan)) !important;
    box-shadow: 0 10px 24px rgba(142, 235, 255, .14) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 50px !important;
}

@keyframes web3LotteryLive {
    0%, 100% {
        opacity: .45;
        transform: scale(.86);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes web3LotteryButtonTap {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(.97);
    }
}

@media (max-height: 620px) {
    body.web3-pop .lotteryContHe {
        padding-bottom: 14px !important;
    }

    body.web3-pop .lotterytleBox {
        min-height: 62px !important;
    }

    body.web3-pop .lottery-orbit {
        --wheel-size: min(258px, calc(100vw - 80px));
    }

    body.web3-pop .lottery-status-row {
        min-height: 32px;
        padding-top: 6px;
    }

    body.web3-pop .lotterydizuo {
        height: 52px !important;
        margin-bottom: 8px !important;
    }

    body.web3-pop .web3-lottery-button {
        min-height: 50px !important;
    }
}

@media (max-width: 360px) {
    body.web3-pop .lotteryContHe {
        padding-inline: 14px !important;
        border-radius: 24px !important;
    }

    body.web3-pop .lotterytleBox {
        margin-inline: -14px !important;
        padding-left: 16px;
    }

    body.web3-pop .lottery-orbit {
        --wheel-size: min(278px, calc(100vw - 54px));
    }

    body.web3-pop .lottery-hint {
        font-size: 9px;
    }
}

/* Dividend Dog NFT shop */
body.web3-pop .storeupBox .dividend-shop-panel {
    display: flex !important;
    flex-direction: column;
    width: min(430px, calc(100% - 20px)) !important;
    height: min(690px, calc(100dvh - 24px)) !important;
    padding: 0 !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 90% 7%, rgba(255, 115, 200, .14), transparent 28%),
        radial-gradient(circle at 4% 82%, rgba(142, 235, 255, .1), transparent 30%),
        linear-gradient(155deg, #241a3d, #151023 58%, #101b25) !important;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .5),
        inset 0 1px rgba(255, 255, 255, .07) !important;
    overflow: hidden !important;
}

body.web3-pop .dividend-shop-panel .homepauptleHe {
    flex: 0 0 68px;
    position: sticky !important;
    top: 0 !important;
    z-index: 30;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(20, 15, 34, .88) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .dividend-shop-panel .homepauptle {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-left: 9px;
}

body.web3-pop .dividend-shop-panel .homepauptletx {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 23px !important;
}

body.web3-pop .dividend-shop-subtitle {
    color: rgba(142, 235, 255, .6);
    font-size: 8px;
    font-weight: 900;
    line-height: 11px;
    letter-spacing: .16em;
}

body.web3-pop .dividend-shop-panel .homepauptzw {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .06) !important;
}

body.web3-pop .dividend-shop-panel .homepauptzw::before {
    content: none !important;
}

body.web3-pop .dividend-shop-panel .homepauptzw i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 15px;
}

body.web3-pop .dividend-shop-panel .dividend-shop-mark {
    color: #151023 !important;
    border-color: rgba(200, 255, 77, .4) !important;
    background: linear-gradient(145deg, #c8ff4d, #8eebff) !important;
    box-shadow: 0 8px 18px rgba(142, 235, 255, .12);
}

body.web3-pop .dividend-shop-panel .stroassort {
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-height: 47px;
    margin: 0 !important;
    padding: 9px 12px 7px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .018) !important;
    overflow-x: auto;
    box-sizing: border-box;
}

body.web3-pop .dividend-shop-panel .stroassort span {
    flex: 0 0 auto;
    padding: 6px 11px !important;
    color: rgba(255, 255, 255, .48);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    font-size: 10px !important;
    font-weight: 850;
    line-height: 14px;
}

body.web3-pop .dividend-shop-panel .stroassortActive {
    color: #171127 !important;
    border-color: transparent !important;
    background: linear-gradient(105deg, #c8ff4d, #8eebff) !important;
    box-shadow: 0 7px 16px rgba(142, 235, 255, .1);
}

body.web3-pop .dividend-shop-panel .dividend-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    height: auto !important;
    padding: 10px 12px 20px !important;
    background: transparent !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(142, 235, 255, .52) transparent;
    box-sizing: border-box;
}

body.web3-pop .dividend-shop-panel .dividend-product-grid::-webkit-scrollbar {
    width: 3px;
}

body.web3-pop .dividend-shop-panel .dividend-product-grid::-webkit-scrollbar-track {
    background: transparent;
}

body.web3-pop .dividend-shop-panel .dividend-product-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(#c8ff4d, #8eebff);
}

body.web3-pop .dividend-product-card {
    min-width: 0;
    height: auto !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background:
        linear-gradient(155deg, rgba(124, 92, 255, .08), rgba(142, 235, 255, .025)),
        rgba(255, 255, 255, .035);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .12),
        inset 0 1px rgba(255, 255, 255, .04);
    overflow: hidden;
}

body.web3-pop .dividend-product-visual {
    position: relative;
    aspect-ratio: 1.35 / 1;
    margin: 7px 7px 0;
    border: 1px solid rgba(142, 235, 255, .14);
    border-radius: 15px;
    background: #0f1325;
    overflow: hidden;
}

body.web3-pop .dividend-product-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -30px 30px rgba(10, 8, 18, .22);
    pointer-events: none;
}

body.web3-pop .dividend-product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    pointer-events: none;
}

body.web3-pop :is(.dividend-tier, .dividend-protocol) {
    position: absolute;
    top: 7px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 7px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .08em;
}

body.web3-pop .dividend-tier {
    left: 7px;
    color: #171127;
    border-color: rgba(200, 255, 77, .36);
    background: rgba(200, 255, 77, .88);
}

body.web3-pop .dividend-protocol {
    right: 7px;
    color: #fff;
    background: rgba(18, 13, 32, .58);
}

body.web3-pop .dividend-product-body {
    padding: 8px;
}

body.web3-pop .dividend-product-body h3 {
    display: -webkit-box;
    min-height: 48px;
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

body.web3-pop .dividend-product-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    margin-top: 6px;
}

body.web3-pop .dividend-product-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    color: rgba(255, 255, 255, .74);
    border: 1px solid rgba(142, 235, 255, .12);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(142, 235, 255, .06), rgba(124, 92, 255, .045));
    box-sizing: border-box;
}

body.web3-pop .dividend-product-meta > span > i {
    flex: 0 0 auto;
    color: #8eebff;
    font-size: 12px;
}

body.web3-pop .dividend-product-meta > span > b {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-weight: inherit;
    line-height: 1;
}

body.web3-pop .dividend-product-meta small {
    color: rgba(255, 255, 255, .5);
    font-size: 9px;
    font-weight: 800;
    line-height: 12px;
    white-space: nowrap;
}

body.web3-pop .dividend-product-meta strong {
    display: block;
    min-width: 0;
    flex: 0 1 auto;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

body.web3-pop .dividend-product-meta .dividend-meta-income {
    border-color: rgba(200, 255, 77, .15);
    background: linear-gradient(135deg, rgba(200, 255, 77, .07), rgba(124, 92, 255, .045));
}

body.web3-pop .dividend-product-meta .dividend-meta-income > i,
body.web3-pop .dividend-product-meta .dividend-meta-income strong {
    color: #d7ff86;
}

body.web3-pop .dividend-product-actions {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 6px;
    margin-top: 7px;
}

body.web3-pop .dividend-product-actions .detail-btn {
    width: 100% !important;
    min-width: 0;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 6px;
    color: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .045) !important;
    font-size: 9px !important;
    font-weight: 850;
    line-height: 12px !important;
    overflow: hidden;
    white-space: normal;
    box-sizing: border-box;
}

body.web3-pop .shop-buy-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    height: 38px;
    padding: 4px 9px;
    color: #171127;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(105deg, #c8ff4d, #8eebff);
    box-shadow: 0 8px 18px rgba(142, 235, 255, .1);
    overflow: hidden;
}

body.web3-pop .shop-buy-button small {
    color: rgba(23, 17, 39, .5);
    font-size: 7px;
    font-weight: 900;
    line-height: 9px;
    letter-spacing: .08em;
}

body.web3-pop .shop-buy-button strong {
    display: block;
    max-width: 100%;
    color: #171127;
    font-size: 11px;
    font-weight: 950;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .shop-dashboard .mrythudHe {
    width: 28% !important;
}

body.web3-pop .shop-dashboard .mrythud {
    position: relative;
    padding: 3px;
    border: 1px solid rgba(124, 92, 255, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 9px 20px rgba(47, 27, 88, .12);
    box-sizing: border-box;
}

body.web3-pop .shop-dashboard .mrythud img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
}

body.web3-pop .shop-dashboard .qxmp {
    top: auto !important;
    right: 5px;
    bottom: 5px;
    left: 5px;
    width: auto;
    min-width: 0;
    padding: 4px 5px;
    transform: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(30, 19, 52, .94), rgba(89, 60, 165, .92));
    box-shadow:
        0 5px 13px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    font-size: 8px;
    font-weight: 850;
    line-height: 11px;
    letter-spacing: .01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

body.web3-pop .shop-dashboard .qxmp::before {
    content: "◷";
    margin-right: 3px;
    color: #78efd0;
    text-shadow: 0 0 8px rgba(120, 239, 208, .72);
}

body.web3-pop .shop-dashboard .mrythudHe.ksh .qxmp {
    color: #14241f;
    border-color: rgba(255, 255, 255, .48);
    background: linear-gradient(90deg, #78efd0, #b8f35b);
    box-shadow: 0 7px 15px rgba(100, 223, 189, .28);
}

body.web3-pop .shop-dashboard .mrythudHe.ksh .qxmp::before {
    content: "✓";
    color: #14241f;
    text-shadow: none;
}

body.web3-pop .mask-box {
    position: fixed !important;
    top: 50% !important;
    left: 50%;
    z-index: 1000010 !important;
    width: min(330px, calc(100% - 30px)) !important;
    max-height: calc(100vh - 30px);
    margin: 0 !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 90% 0, rgba(142, 235, 255, .12), transparent 34%),
        linear-gradient(155deg, #241a3d, #12101f) !important;
    box-shadow:
        0 0 0 100vmax rgba(6, 4, 13, .64),
        0 28px 70px rgba(0, 0, 0, .48);
    transform: translate(-50%, -50%);
}

body.web3-pop .mask-close {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .06) !important;
    font-size: 0;
    line-height: 34px !important;
    padding: 0;
    cursor: pointer;
}

body.web3-pop .mask-close::before {
    content: "×";
    font-size: 20px;
}

body.web3-pop .mask-content {
    max-height: calc(100vh - 50px);
    padding: 58px 18px 20px !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 12px;
    line-height: 1.7;
    overflow-y: auto;
    box-sizing: border-box;
}

body.web3-pop .dividend-detail-kicker {
    color: #8eebff;
    font-size: 8px;
    font-weight: 950;
    line-height: 12px;
    letter-spacing: .16em;
}

body.web3-pop .dividend-detail-title {
    margin: 5px 0 14px;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 24px;
}

body.web3-pop .dividend-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.web3-pop .dividend-detail-fact {
    min-width: 0;
    padding: 9px 7px;
    border: 1px solid rgba(142, 235, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    box-sizing: border-box;
}

body.web3-pop .dividend-detail-fact small,
body.web3-pop .dividend-detail-fact strong {
    display: block;
}

body.web3-pop .dividend-detail-fact small {
    min-height: 22px;
    color: rgba(255, 255, 255, .45);
    font-size: 8px;
    font-weight: 850;
    line-height: 11px;
}

body.web3-pop .dividend-detail-fact strong {
    margin-top: 4px;
    color: #d7ff86;
    font-size: 11px;
    font-weight: 950;
    line-height: 15px;
    overflow-wrap: anywhere;
}

body.web3-pop .dividend-detail-description {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    line-height: 1.75;
}

body.web3-pop .dividend-detail-note {
    margin-top: 13px;
    padding: 9px 11px;
    color: rgba(255, 255, 255, .58);
    border-left: 2px solid #8eebff;
    border-radius: 0 9px 9px 0;
    background: rgba(142, 235, 255, .06);
    font-size: 9px;
    line-height: 14px;
}

@media (max-width: 360px) {
    body.web3-pop .dividend-shop-panel .dividend-product-grid {
        grid-template-columns: 1fr;
    }

    body.web3-pop .dividend-product-visual {
        aspect-ratio: 1 / .72;
    }

    body.web3-pop .dividend-product-body h3 {
        min-height: 32px;
    }
}

/* Wealth page — exact number, label and action alignment */
body.web3-pop .wealth-page .apseuptopdataBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 70px 30px !important;
    text-align: center;
}

body.web3-pop .wealth-page :is(.diyijifd, .diyijifdshu) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

body.web3-pop .wealth-page .diyijifd {
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

body.web3-pop .wealth-page .diyijifdshu {
    min-height: 42px;
    margin-top: 2px;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: .02em;
}

body.web3-pop .wealth-page .web3-team-button {
    top: 18px;
    right: auto;
    left: 18px;
}

body.web3-pop .wealth-stat-card .assetbbHe {
    padding: 12px 14px 13px;
}

body.web3-pop .wealth-stat-card .assetbbTletx {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 20px;
    height: auto;
    margin: 0 0 7px;
    line-height: 20px !important;
}

body.web3-pop .wealth-stat-grid {
    display: grid !important;
    align-items: start;
    width: 100%;
    text-align: center;
}

body.web3-pop .wealth-stat-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.web3-pop .wealth-stat-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.web3-pop .wealth-stat-item {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
}

body.web3-pop .wealth-stat-item .assetbbshu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 0 !important;
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 28px !important;
    white-space: nowrap;
}

body.web3-pop .wealth-stat-item .assetbbtx {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 18px;
    margin: 3px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 18px !important;
    text-align: center;
}

body.web3-pop .wealth-progress-row {
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

body.web3-pop .wealth-progress-row .huyjinduBox {
    width: auto;
    height: 8px;
    margin: 0 !important;
}

body.web3-pop .wealth-progress-limit {
    flex: 0 0 56px;
    min-width: 0;
    color: #79a82a !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    white-space: nowrap;
}

body.web3-pop .wealth-progress-limit-start {
    text-align: left;
}

body.web3-pop .wealth-progress-limit-end {
    text-align: right;
}

body.web3-pop .wealth-progress-card .huyjindums {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 4px;
    width: 100%;
    margin: 0;
    padding-top: 7px;
    line-height: 16px;
    text-align: center;
}

body.web3-pop .wealth-actions {
    padding: 14px !important;
}

body.web3-pop .wealth-actions .mermlinkCont {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 !important;
    background: transparent;
}

body.web3-pop .wealth-actions .mermlinkCont > .fx1 {
    min-width: 0;
}

body.web3-pop .wealth-actions .wealth-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 52px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(124, 92, 255, .22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(242, 237, 255, .9), rgba(232, 255, 248, .72));
    box-sizing: border-box;
}

body.web3-pop .wealth-actions .mermlink {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto !important;
    line-height: 1;
}

body.web3-pop .wealth-actions .web3-menu-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border-radius: 10px;
    font-size: 15px;
}

body.web3-pop .wealth-actions .mermlinktx,
body.web3-pop .wealth-actions .mermliewmx {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    margin: 0;
    color: var(--pop-ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 20px !important;
    white-space: nowrap;
}

body.web3-pop .wealth-actions .babrwmyqBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin: 12px 0 0;
    padding: 0 14px;
    box-sizing: border-box;
}

body.web3-pop .wealth-actions .babrwmyqBtn .web3-menu-icon {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

body.web3-pop .wealth-actions .babrwmyqBtn .mermliewmx {
    color: #fff;
}

@media (max-width: 360px) {
    body.web3-pop .wealth-stat-card .assetbbHe {
        padding-inline: 10px;
    }

    body.web3-pop .wealth-stat-item .assetbbshu {
        font-size: 15px;
    }

    body.web3-pop .wealth-actions {
        padding-inline: 10px !important;
    }
}

/* My profile — compact columns with shared icon/text center line */
body.web3-pop .my-info-page .apseuptopdataBox {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 0 30px 16px !important;
}

body.web3-pop .my-info-page .apseuptopdataimg {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin-right: 12px;
}

body.web3-pop .my-info-page .apseuptopdataBox > .fx1 {
    min-width: 0;
}

body.web3-pop .my-info-page .topdauid {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
}

body.web3-pop .my-info-page .topdadengj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 21px;
    margin-top: 4px;
    line-height: 21px;
}

body.web3-pop .my-info-page .my-info-sign {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    margin-left: auto;
    padding: 0 14px 0 12px !important;
}

body.web3-pop .my-info-page .my-info-sign > .fa {
    margin: 0 !important;
}

body.web3-pop .my-info-page .my-info-sign .beoqiandtx {
    display: flex;
    align-items: center;
    height: 20px;
    line-height: 20px;
}

body.web3-pop .my-info-page .sepbtBox {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

body.web3-pop .my-info-page .btomnavBox {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    box-sizing: border-box;
}

body.web3-pop .my-info-page .btomnavHe {
    padding: 6px 12px !important;
}

body.web3-pop .my-info-page .btomnav {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto 18px;
    align-items: center;
    column-gap: 10px;
    min-height: 56px;
    padding: 8px 0 !important;
    box-sizing: border-box;
}

body.web3-pop .my-info-page .btomnavimg {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 11px;
}

body.web3-pop .my-info-page .btomnavimg > .fa {
    font-size: 16px;
}

body.web3-pop .my-info-page .btomnavtx {
    grid-column: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 20px;
    height: auto !important;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 20px !important;
    text-align: left;
}

body.web3-pop .my-info-page .rsgsetts_2 {
    grid-column: 3;
    display: flex;
    align-items: center;
    min-height: 20px;
    margin: 0 !important;
    font-size: 11px;
    line-height: 20px !important;
    white-space: nowrap;
}

body.web3-pop .my-info-page .btomnavzxx {
    grid-column: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 34px;
    margin: 0;
    line-height: 1;
}

body.web3-pop .my-info-page .btomnavzxx .i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 34px;
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 360px) {
    body.web3-pop .my-info-page .sepbtBox {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.web3-pop .my-info-page .btomnavHe {
        padding-inline: 10px !important;
    }

    body.web3-pop .my-info-page .btomnav {
        grid-template-columns: 32px minmax(0, 1fr) auto 16px;
        column-gap: 8px;
    }
}

/* Blind-box draw history: fixed chrome with an independently scrolling ledger. */
body.web3-pop .blind-drawlog-overview {
    position: fixed;
    z-index: 10;
    top: 52px;
    right: 12px;
    left: 12px;
    height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 0 0 22px 22px;
    background:
        radial-gradient(circle at 92% 0, rgba(255, 114, 182, .16), transparent 38%),
        rgba(255, 255, 255, .93);
    box-shadow: 0 12px 26px rgba(74, 47, 124, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
}

body.web3-pop .blind-drawlog-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 8px 18px rgba(124, 92, 255, .22);
    font-size: 17px;
}

body.web3-pop .blind-drawlog-overview-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

body.web3-pop .blind-drawlog-overview-copy small {
    color: #978aa8;
    font-size: 8px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .13em;
}

body.web3-pop .blind-drawlog-overview-copy strong {
    color: #211634;
    font-size: 14px;
    font-weight: 950;
    line-height: 22px;
}

body.web3-pop .blind-drawlog-total {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    height: 29px;
    padding: 0 10px;
    color: #796c8e;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 999px;
    background: #f7f3ff;
    font-size: 9px;
    font-weight: 800;
    line-height: 29px;
    white-space: nowrap;
}

body.web3-pop .blind-drawlog-total b {
    color: var(--pop-violet);
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

body.web3-pop .blind-drawlog-page {
    position: fixed;
    top: 134px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-height: 0;
    padding: 8px 12px 18px;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(142, 235, 255, .09), transparent 30%),
        rgba(255, 255, 255, .88) !important;
    box-shadow: 0 14px 34px rgba(74, 47, 124, .09);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 92, 255, .3) transparent;
    box-sizing: border-box;
}

body.web3-pop .blind-drawlog-page::-webkit-scrollbar {
    width: 3px;
}

body.web3-pop .blind-drawlog-page::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(var(--pop-violet), #8eebff);
}

body.web3-pop .blind-drawlog-list {
    margin: 0;
    padding: 0;
}

body.web3-pop .blind-drawlog-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 92px;
    padding: 13px 8px;
    border-bottom: 1px solid rgba(124, 92, 255, .1);
    box-sizing: border-box;
}

body.web3-pop .blind-drawlog-row:last-child {
    border-bottom: 0;
}

body.web3-pop .blind-drawlog-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 3px;
    border: 1px solid rgba(124, 92, 255, .2);
    border-radius: 15px;
    background: linear-gradient(145deg, #f1eaff, #e8fff8);
    box-shadow: 0 6px 15px rgba(74, 47, 124, .09);
    box-sizing: border-box;
}

body.web3-pop .blind-drawlog-image img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    object-fit: cover;
}

body.web3-pop .blind-drawlog-main {
    min-width: 0;
    text-align: left;
}

body.web3-pop .blind-drawlog-main h2 {
    margin: 0;
    color: #211634;
    font-size: 13px;
    font-weight: 900;
    line-height: 19px;
    word-break: break-word;
}

body.web3-pop .blind-drawlog-product,
body.web3-pop .blind-drawlog-main time {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #796c8e;
    font-size: 9px;
    line-height: 14px;
}

body.web3-pop .blind-drawlog-main time {
    color: #aaa0b7;
    font-size: 8px;
}

body.web3-pop .blind-drawlog-product i {
    color: #8eebff;
    font-size: 9px;
}

body.web3-pop .blind-drawlog-main time i {
    color: #b9abce;
    font-size: 9px;
}

body.web3-pop .blind-drawlog-result {
    display: flex;
    min-width: 74px;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

body.web3-pop .blind-drawlog-result > small {
    color: #a99eb6;
    font-size: 7px;
    font-weight: 900;
    line-height: 11px;
    letter-spacing: .1em;
}

body.web3-pop .blind-drawlog-result > strong {
    color: var(--pop-violet);
    font-size: 16px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    line-height: 21px;
}

body.web3-pop .blind-drawlog-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    margin-top: 4px;
    padding: 0 7px;
    color: #796c8e;
    border: 1px solid rgba(124, 92, 255, .09);
    border-radius: 8px;
    background: #f7f3ff;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

body.web3-pop .blind-drawlog-badge i {
    color: #8eebff;
    font-size: 8px;
}

body.web3-pop .blind-drawlog-badge-guarantee {
    color: #ca4a8f;
    border-color: rgba(235, 104, 182, .14);
    background: rgba(255, 226, 241, .7);
}

body.web3-pop .blind-drawlog-badge-guarantee i {
    color: var(--pop-pink);
}

body.web3-pop .blind-drawlog-load {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    color: #9387a3;
    font-size: 10px;
    line-height: 18px;
}

body.web3-pop .blind-drawlog-load-visible {
    display: flex;
}

body.web3-pop .blind-drawlog-load i {
    color: var(--pop-violet);
    font-size: 11px;
}

body.web3-pop .blind-drawlog-load-end i {
    color: #8eebff;
}

body.web3-pop .blind-drawlog-empty {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9a8eaa;
    font-size: 12px;
}

body.web3-pop .blind-drawlog-empty i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    color: #a995c5;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 18px;
    background: #f7f3ff;
    font-size: 21px;
}

@media (max-width: 360px) {
    body.web3-pop .blind-drawlog-overview {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 9px;
    }

    body.web3-pop .blind-drawlog-overview-icon {
        width: 38px;
        height: 38px;
    }

    body.web3-pop .blind-drawlog-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 4px;
    }

    body.web3-pop .blind-drawlog-image {
        width: 46px;
        height: 46px;
    }

    body.web3-pop .blind-drawlog-image img {
        width: 38px;
        height: 38px;
    }

    body.web3-pop .blind-drawlog-result {
        min-width: 68px;
    }
}

/* Wallet binding, payment management and official support. */
body.web3-pop .wallet-bind-page,
body.web3-pop .payment-manage-page,
body.web3-pop .support-page {
    min-height: 100vh;
    padding: 64px 12px 30px;
    background:
        radial-gradient(circle at 10% 7%, rgba(255, 114, 182, .14), transparent 27%),
        radial-gradient(circle at 92% 14%, rgba(100, 223, 189, .16), transparent 28%);
    box-sizing: border-box;
}

body.web3-pop .wallet-bind-hero,
body.web3-pop .payment-manage-hero,
body.web3-pop .support-hero {
    display: grid;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(142, 235, 255, .18), transparent 38%),
        rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(74, 47, 124, .09);
    box-sizing: border-box;
}

body.web3-pop .wallet-bind-hero {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
}

body.web3-pop .wallet-bind-token,
body.web3-pop .payment-token-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(142, 255, 198, .3), rgba(142, 235, 255, .28));
}

body.web3-pop .wallet-bind-token {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(38, 183, 135, .16);
    border-radius: 17px;
}

body.web3-pop .wallet-bind-token img {
    width: 32px;
    height: 32px;
}

body.web3-pop .wallet-bind-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .wallet-bind-hero-copy small,
body.web3-pop .payment-manage-hero small,
body.web3-pop .support-hero small,
body.web3-pop .wallet-section-heading small,
body.web3-pop .support-channel-heading small {
    color: #978aa8;
    font-size: 8px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .12em;
}

body.web3-pop .wallet-bind-hero-copy strong {
    color: #211634;
    font-size: 16px;
    font-weight: 950;
    line-height: 22px;
}

body.web3-pop .wallet-bind-hero-copy > span {
    color: #796c8e;
    font-size: 10px;
    line-height: 16px;
}

body.web3-pop .wallet-bind-status,
body.web3-pop .payment-method-copy em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9a8eaa;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 999px;
    background: #f7f3ff;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

body.web3-pop .wallet-bind-status {
    height: 28px;
    padding: 0 9px;
    font-size: 9px;
}

body.web3-pop .wallet-bind-status i,
body.web3-pop .payment-method-copy em i,
body.web3-pop .support-online i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b9abce;
}

body.web3-pop .wallet-bind-status-active,
body.web3-pop .payment-method-copy .payment-status-active {
    color: #4b926e;
    border-color: rgba(103, 219, 172, .16);
    background: rgba(232, 255, 247, .9);
}

body.web3-pop .wallet-bind-status-active i,
body.web3-pop .payment-method-copy .payment-status-active i,
body.web3-pop .support-online i {
    background: #67dbac;
    box-shadow: 0 0 0 3px rgba(103, 219, 172, .14);
}

body.web3-pop .wallet-current-card,
body.web3-pop .wallet-form-card,
body.web3-pop .payment-methods-card,
body.web3-pop .payment-security-note,
body.web3-pop .support-channel,
body.web3-pop .support-safety,
body.web3-pop .support-empty {
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(74, 47, 124, .08);
    box-sizing: border-box;
}

body.web3-pop .wallet-current-card,
body.web3-pop .wallet-form-card {
    margin-top: 12px;
    padding: 15px;
}

body.web3-pop .wallet-section-heading {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

body.web3-pop .wallet-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    font-size: 12px;
}

body.web3-pop .wallet-current-card .wallet-section-heading > span {
    color: #4b926e;
    background: linear-gradient(145deg, rgba(200, 255, 77, .28), rgba(142, 255, 198, .34));
}

body.web3-pop .wallet-section-heading > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .wallet-section-heading strong {
    color: #211634;
    font-size: 13px;
    font-weight: 900;
    line-height: 19px;
}

body.web3-pop .wallet-section-heading em {
    height: 24px;
    padding: 0 8px;
    color: #6e6082;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 8px;
    background: #f7f3ff;
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    line-height: 24px;
    white-space: nowrap;
}

body.web3-pop .wallet-address-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 10px 10px 12px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 14px;
    background: #f7f3ff;
}

body.web3-pop .wallet-address-box code {
    min-width: 0;
    color: #5f5371;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 9px;
    line-height: 15px;
    overflow-wrap: anywhere;
}

body.web3-pop .wallet-copy-btn,
body.web3-pop .support-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    color: var(--pop-violet);
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 10px;
    background: #fff;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

body.web3-pop .wallet-copy-btn-done,
body.web3-pop .support-copy-done {
    color: #4b926e;
    border-color: rgba(103, 219, 172, .24);
    background: #e8fff7;
}

body.web3-pop .wallet-field {
    display: block;
    margin-top: 15px;
}

body.web3-pop .wallet-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #4d4260;
    font-size: 11px;
    font-weight: 850;
    line-height: 17px;
}

body.web3-pop .wallet-field-label i {
    color: var(--pop-violet);
    font-size: 10px;
}

body.web3-pop .wallet-input-shell {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(124, 92, 255, .15);
    border-radius: 14px;
    background: #f7f3ff;
    box-sizing: border-box;
}

body.web3-pop .wallet-input-shell > i {
    color: #8eebff;
    font-size: 15px;
}

body.web3-pop .wallet-input-shell input {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 !important;
    color: #211634;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.web3-pop .wallet-chain-option {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(247, 243, 255, .96), rgba(232, 255, 247, .7));
    box-sizing: border-box;
}

body.web3-pop .wallet-chain-option input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

body.web3-pop .wallet-chain-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #211634;
    border-radius: 12px;
    background: linear-gradient(145deg, #c8ff4d, #8eebff);
    font-size: 13px;
}

body.web3-pop .wallet-chain-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .wallet-chain-copy strong {
    color: #211634;
    font-size: 11px;
    font-weight: 900;
    line-height: 17px;
}

body.web3-pop .wallet-chain-copy small {
    color: #8d819d;
    font-size: 8px;
    font-weight: 800;
    line-height: 14px;
}

body.web3-pop .wallet-chain-check {
    color: #67dbac;
    font-size: 16px;
}

body.web3-pop .wallet-security-tip {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px;
    color: #7a6b47;
    border: 1px solid rgba(242, 207, 91, .26);
    border-radius: 14px;
    background: rgba(255, 249, 224, .84);
    font-size: 9px;
    line-height: 15px;
}

body.web3-pop .wallet-security-tip > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #ba8b17;
    border-radius: 10px;
    background: rgba(242, 207, 91, .2);
    font-size: 12px;
}

body.web3-pop .wallet-security-tip span {
    display: flex;
    flex-direction: column;
}

body.web3-pop .wallet-security-tip strong {
    color: #5c4a20;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .wallet-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    margin-top: 14px;
    padding: 0 16px;
    color: #fff;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 6px 0 rgba(86, 55, 189, .22), 0 10px 22px rgba(124, 92, 255, .18);
    font-size: 12px;
    font-weight: 900;
}

body.web3-pop .wallet-submit:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 rgba(86, 55, 189, .22), 0 7px 16px rgba(124, 92, 255, .15);
}

body.web3-pop .wallet-submit:disabled {
    opacity: .62;
}

body.web3-pop .payment-manage-page {
    padding-top: 64px;
}

body.web3-pop .payment-manage-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
}

body.web3-pop .payment-manage-hero-icon,
body.web3-pop .support-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
}

body.web3-pop .payment-manage-hero-icon {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

body.web3-pop .payment-manage-hero > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .payment-manage-hero strong,
body.web3-pop .support-hero strong {
    color: #211634;
    font-size: 15px;
    font-weight: 950;
    line-height: 21px;
}

body.web3-pop .payment-manage-hero p,
body.web3-pop .support-hero p {
    margin: 2px 0 0;
    color: #796c8e;
    font-size: 9px;
    line-height: 15px;
}

body.web3-pop .payment-methods-card {
    margin-top: 12px;
    padding: 8px 12px 12px;
}

body.web3-pop .payment-methods-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(124, 92, 255, .09);
}

body.web3-pop .payment-methods-heading span {
    color: #4d4260;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .payment-methods-heading small {
    color: #a49aad;
    font-size: 8px;
}

body.web3-pop .payment-method-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 10px 4px 2px;
}

body.web3-pop .payment-method-row + .payment-method-row {
    border-top: 1px solid rgba(124, 92, 255, .09);
}

body.web3-pop .payment-token-erc20 {
    background: linear-gradient(145deg, rgba(142, 235, 255, .32), rgba(124, 92, 255, .18));
}

body.web3-pop .payment-token-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(38, 183, 135, .16);
    border-radius: 16px;
}

body.web3-pop .payment-token-icon img {
    width: 30px;
    height: 30px;
}

body.web3-pop .payment-method-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .payment-method-copy > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.web3-pop .payment-method-copy strong {
    color: #211634;
    font-size: 13px;
    font-weight: 900;
    line-height: 20px;
}

body.web3-pop .payment-method-copy em {
    height: 21px;
    padding: 0 7px;
    font-size: 8px;
}

body.web3-pop .payment-method-copy em i {
    width: 5px;
    height: 5px;
}

body.web3-pop .payment-method-copy > small {
    margin-top: 4px;
    color: #8d819d;
    font-size: 9px;
    line-height: 15px;
    overflow-wrap: anywhere;
}

body.web3-pop .payment-method-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    color: var(--pop-violet);
    border-radius: 10px;
    background: #f7f3ff;
    font-size: 16px;
}

body.web3-pop .payment-security-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 12px;
    padding: 13px;
}

body.web3-pop .payment-security-note > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #4b926e;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(200, 255, 77, .24), rgba(142, 255, 198, .28));
}

body.web3-pop .payment-security-note strong {
    color: #4d4260;
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
}

body.web3-pop .payment-security-note p {
    margin: 3px 0 0;
    color: #8d819d;
    font-size: 9px;
    line-height: 16px;
}

body.web3-pop .support-page {
    padding-bottom: 28px;
}

body.web3-pop .support-hero {
    position: relative;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding-right: 76px;
}

body.web3-pop .support-hero-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

body.web3-pop .support-hero > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .support-online {
    position: absolute;
    top: 14px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 25px;
    padding: 0 8px;
    color: #4b926e;
    border: 1px solid rgba(103, 219, 172, .16);
    border-radius: 999px;
    background: rgba(232, 255, 247, .9);
    font-size: 8px;
    font-weight: 850;
}

body.web3-pop .support-channel {
    margin-top: 12px;
    padding: 14px;
}

body.web3-pop .support-channel-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

body.web3-pop .support-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    border-radius: 13px;
    background: linear-gradient(145deg, #35a9df, #66d4ff);
    box-shadow: 0 7px 16px rgba(53, 169, 223, .2);
}

body.web3-pop .support-channel-discord .support-channel-icon {
    background: linear-gradient(145deg, #5865f2, #9a80ff);
    box-shadow: 0 7px 16px rgba(88, 101, 242, .2);
}

body.web3-pop .support-channel-heading > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .support-channel-heading strong {
    color: #211634;
    font-size: 13px;
    font-weight: 900;
    line-height: 19px;
}

body.web3-pop .support-channel-heading em {
    height: 23px;
    padding: 0 8px;
    color: #287fa9;
    border: 1px solid rgba(53, 169, 223, .14);
    border-radius: 8px;
    background: rgba(226, 247, 255, .9);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    line-height: 23px;
}

body.web3-pop .support-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 9px 9px 11px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 14px;
    background: #f7f3ff;
}

body.web3-pop .support-account > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.web3-pop .support-account small {
    color: #a49aad;
    font-size: 8px;
    line-height: 12px;
}

body.web3-pop .support-account code {
    margin-top: 2px;
    color: #5b4d70;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-weight: 850;
    line-height: 16px;
    overflow-wrap: anywhere;
}

body.web3-pop .support-open {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    margin-top: 10px;
    padding: 0 13px;
    color: #fff !important;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 7px 17px rgba(124, 92, 255, .18);
    font-size: 10px;
    font-weight: 900;
    box-sizing: border-box;
}

body.web3-pop .support-channel-telegram .support-open {
    background: linear-gradient(135deg, #35a9df, #7c5cff);
}

body.web3-pop .support-safety {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    margin-top: 12px;
    padding: 12px;
    color: #8d819d;
    font-size: 9px;
    line-height: 15px;
}

body.web3-pop .support-safety > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ba8b17;
    border-radius: 10px;
    background: rgba(242, 207, 91, .2);
}

body.web3-pop .support-safety span {
    display: flex;
    flex-direction: column;
}

body.web3-pop .support-safety strong {
    color: #5c4a20;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .support-empty {
    display: flex;
    min-height: 220px;
    margin-top: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9a8eaa;
    font-size: 10px;
}

body.web3-pop .support-empty i {
    margin-bottom: 10px;
    color: #b9abce;
    font-size: 28px;
}

body.web3-pop .support-empty strong {
    color: #5b4d70;
    font-size: 12px;
}

body.web3-pop .support-empty span {
    margin-top: 3px;
}

@media (max-width: 360px) {
    body.web3-pop .wallet-bind-page,
    body.web3-pop .payment-manage-page,
    body.web3-pop .support-page {
        padding-inline: 9px;
    }

    body.web3-pop .wallet-bind-hero {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 10px;
    }

    body.web3-pop .wallet-bind-token {
        width: 46px;
        height: 46px;
    }

    body.web3-pop .support-hero {
        padding-right: 68px;
    }
}

/* Profile identity sizing and the complete 45-dog avatar library. */
body.web3-pop .my-info-page .apseuptopdataBox {
    min-height: 158px;
    padding: 26px 0 25px 16px !important;
}

body.web3-pop .my-info-page .apseuptopdataimg {
    position: relative;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    margin-right: 14px;
    border-radius: 25px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 22px rgba(34, 19, 72, .18);
}

body.web3-pop .my-info-page .apseuptopdataimg::after {
    content: "\f040";
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--pop-violet), var(--pop-pink));
    box-shadow: 0 5px 12px rgba(68, 37, 136, .22);
    font: normal normal normal 10px/1 FontAwesome;
}

body.web3-pop .my-info-page .topdataimgHe {
    width: 76px;
    height: 76px;
    padding: 4px;
    border-width: 2px;
    border-radius: 25px;
    box-sizing: border-box;
    cursor: pointer;
}

body.web3-pop .my-info-page .topdataimgHe img {
    width: 64px;
    height: 64px;
    border-radius: 19px;
    object-fit: cover;
}

body.web3-pop .my-info-page .apseuptopdataBox > .fx1 {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

body.web3-pop .my-info-page .topdauid {
    min-height: 27px;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    line-height: 27px;
    text-shadow: 0 2px 8px rgba(39, 21, 78, .2);
}

body.web3-pop .my-info-page .topdadengj {
    width: 82px;
    height: 26px;
    margin-top: 5px;
    color: #fff4cf;
    font-size: 12px;
    font-weight: 900;
    line-height: 26px;
    text-shadow: 0 1px 3px rgba(129, 70, 0, .2);
}

body.web3-pop .avatar-picker-panel {
    display: flex;
    max-height: min(78vh, 650px) !important;
    padding: 0 !important;
    flex-direction: column;
    overflow: hidden !important;
}

body.web3-pop .avatar-picker-title {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    margin: 0 !important;
    padding: 10px 14px 9px 17px;
    border-bottom: 1px solid rgba(124, 92, 255, .1);
    background: rgba(255, 255, 255, .78);
    box-sizing: border-box;
}

body.web3-pop .avatar-picker-heading {
    display: flex;
    flex-direction: column;
    text-align: left;
}

body.web3-pop .avatar-picker-heading > span {
    color: #211634;
    font-size: 16px;
    font-weight: 950;
    line-height: 22px;
}

body.web3-pop .avatar-picker-heading > small {
    color: #978aa8;
    font-size: 8px;
    font-weight: 900;
    line-height: 13px;
    letter-spacing: .13em;
}

body.web3-pop .avatar-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: #211634;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

body.web3-pop .avatar-picker-grid {
    display: grid;
    min-height: 0;
    padding: 12px 13px 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 92, 255, .3) transparent;
}

body.web3-pop .avatar-picker-grid::-webkit-scrollbar {
    width: 3px;
}

body.web3-pop .avatar-picker-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(var(--pop-violet), #8eebff);
}

body.web3-pop .avatar-picker-item {
    position: relative;
    min-width: 0;
    padding: 6px 4px 7px;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 17px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 14px rgba(74, 47, 124, .07);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

body.web3-pop .avatar-picker-item.avatar-picker-selected {
    border-color: var(--pop-violet);
    background: linear-gradient(145deg, #f1eaff, #e8fff8);
    box-shadow: 0 8px 18px rgba(124, 92, 255, .18);
}

body.web3-pop .avatar-picker-item.avatar-picker-selected::after {
    content: "\f00c";
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 7px;
    background: var(--pop-violet);
    font: normal normal normal 8px/1 FontAwesome;
}

body.web3-pop .avatar-picker-item img {
    display: block;
    width: 64px;
    height: 64px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    background: #eef7ff;
    object-fit: cover;
}

body.web3-pop .avatar-picker-item > span {
    display: block;
    margin-top: 4px;
    color: #8d819d;
    font-size: 8px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .08em;
}

body.web3-pop .avatar-picker-tip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    margin: 0;
    padding: 0 12px max(2px, env(safe-area-inset-bottom));
    color: #796c8e;
    border-top: 1px solid rgba(124, 92, 255, .1);
    background: rgba(255, 255, 255, .76);
    font-size: 9px;
    line-height: 16px;
    box-sizing: border-box;
}

body.web3-pop .avatar-picker-tip i {
    color: var(--pop-violet);
}

@media (max-width: 360px) {
    body.web3-pop .my-info-page .apseuptopdataBox {
        padding-left: 12px !important;
    }

    body.web3-pop .my-info-page .apseuptopdataimg,
    body.web3-pop .my-info-page .topdataimgHe {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }

    body.web3-pop .my-info-page .topdataimgHe img {
        width: 56px;
        height: 56px;
    }

    body.web3-pop .my-info-page .topdauid {
        font-size: 16px;
    }

    body.web3-pop .my-info-page .topdadengj {
        width: 76px;
        font-size: 11px;
    }

    body.web3-pop .avatar-picker-grid {
        gap: 7px;
        padding-inline: 9px;
    }

    body.web3-pop .avatar-picker-item img {
        width: 58px;
        height: 58px;
    }
}

/* Treasure system ---------------------------------------------------------
   A dedicated visual language for every treasure state. The legacy active
   classes and event handlers remain untouched; only the presentation layer
   is replaced here. */
body.web3-pop .treasure-modal {
    --treasure-ink: #f8f7ff;
    --treasure-muted: #aaa4c3;
    --treasure-violet: #8a67ff;
    --treasure-pink: #ff62b8;
    --treasure-mint: #7af1d0;
    --treasure-gold: #ffd66b;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    background:
        radial-gradient(circle at 50% 27%, rgba(137, 101, 255, .26), transparent 34%),
        rgba(16, 10, 31, .76) !important;
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

body.web3-pop .treasure-modal .treasure-modal-card {
    position: relative;
    width: min(404px, 100%) !important;
    max-width: 404px !important;
    max-height: min(720px, calc(100dvh - 36px)) !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 20px 20px !important;
    color: var(--treasure-ink) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 105% -5%, rgba(255, 98, 184, .24), transparent 34%),
        radial-gradient(circle at -5% 100%, rgba(122, 241, 208, .13), transparent 38%),
        linear-gradient(155deg, #2a1c48 0%, #171126 48%, #101722 100%) !important;
    box-shadow:
        0 0 0 1px rgba(138, 103, 255, .14),
        0 28px 80px rgba(8, 3, 20, .62),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    box-sizing: border-box;
}

body.web3-pop .treasure-modal .treasure-modal-card::-webkit-scrollbar {
    display: none;
}

body.web3-pop .treasure-modal .treasure-modal-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -66px;
    right: -48px;
    width: 188px;
    height: 188px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow:
        0 0 0 26px rgba(255, 255, 255, .018),
        0 0 0 52px rgba(255, 255, 255, .012);
    pointer-events: none;
}

body.web3-pop .treasure-modal .treasure-modal-card > * {
    position: relative;
    z-index: 1;
}

body.web3-pop .treasure-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 88px;
    margin: 0 -20px;
    padding: 20px 18px 13px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-sizing: border-box;
}

body.web3-pop .treasure-modal-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #b8a7ff;
    font-size: 9px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .18em;
}

body.web3-pop .treasure-modal-kicker span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--treasure-mint);
    box-shadow: 0 0 12px rgba(122, 241, 208, .86);
}

body.web3-pop .treasure-modal-title {
    color: var(--treasure-ink);
    font-size: 22px;
    font-weight: 950;
    line-height: 28px;
    letter-spacing: .02em;
}

body.web3-pop .treasure-modal-close {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 15px;
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 17px;
    cursor: pointer;
    box-sizing: border-box;
}

body.web3-pop .treasure-modal-close:active {
    transform: scale(.94);
    background: rgba(255, 255, 255, .14);
}

body.web3-pop .treasure-visual-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 192px;
    margin: 12px 0 0;
    overflow: hidden;
}

body.web3-pop .treasure-visual-stage::before {
    content: "";
    position: absolute;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.10) 0 3deg, transparent 3deg 20deg);
    -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 43% 68%, transparent 69%);
    mask: radial-gradient(circle, transparent 0 42%, #000 43% 68%, transparent 69%);
    opacity: .6;
    animation: treasureHaloSpin 20s linear infinite;
}

body.web3-pop .treasure-visual-stage::after {
    content: "";
    position: absolute;
    bottom: 18px;
    width: 172px;
    height: 28px;
    border-radius: 50%;
    background: rgba(138, 103, 255, .32);
    filter: blur(14px);
}

body.web3-pop .treasure-chest {
    position: relative;
    z-index: 2;
    width: 140px;
    height: 124px;
    margin-top: 15px;
    filter: drop-shadow(0 18px 18px rgba(4, 1, 13, .46));
    animation: treasureChestFloat 3.2s ease-in-out infinite;
}

body.web3-pop .treasure-chest-light {
    position: absolute;
    z-index: -1;
    top: 12px;
    left: 50%;
    width: 128px;
    height: 92px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(255, 214, 107, .34);
    filter: blur(22px);
}

body.web3-pop .treasure-chest-lid {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 10px;
    width: 120px;
    height: 48px;
    border: 3px solid rgba(255, 243, 195, .75);
    border-bottom: 0;
    border-radius: 60px 60px 8px 8px;
    background:
        linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,.34) 20% 24%, transparent 24% 76%, rgba(255,255,255,.24) 76% 80%, transparent 80%),
        linear-gradient(135deg, #ffdc72, #ff9255 50%, #e85aa6);
    box-shadow:
        inset 0 7px 10px rgba(255, 255, 255, .28),
        0 5px 0 #6d3cab;
    box-sizing: border-box;
}

body.web3-pop .treasure-chest-body {
    position: absolute;
    z-index: 2;
    top: 61px;
    left: 5px;
    width: 130px;
    height: 61px;
    border: 3px solid rgba(255, 235, 179, .68);
    border-radius: 8px 8px 22px 22px;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.25) 18% 22%, transparent 22% 78%, rgba(255,255,255,.18) 78% 82%, transparent 82%),
        linear-gradient(145deg, #ffb85f, #ed698f 48%, #865ce7);
    box-shadow:
        inset 0 -10px 18px rgba(74, 30, 125, .25),
        0 8px 0 #3f2868;
    box-sizing: border-box;
}

body.web3-pop .treasure-chest-band {
    position: absolute;
    z-index: 4;
    top: 54px;
    left: 3px;
    width: 134px;
    height: 16px;
    border: 2px solid rgba(255, 247, 210, .76);
    border-radius: 8px;
    background: linear-gradient(90deg, #ffe57f, #ffb85c 48%, #ffe57f);
    box-shadow: 0 3px 0 rgba(77, 39, 118, .68);
    box-sizing: border-box;
}

body.web3-pop .treasure-chest-lock {
    position: absolute;
    z-index: 5;
    top: 51px;
    left: 52px;
    width: 36px;
    height: 43px;
    border: 3px solid #fff3ba;
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(145deg, #fff097, #ffc257);
    box-shadow: 0 5px 0 #8d5087, 0 0 18px rgba(255, 214, 107, .44);
    box-sizing: border-box;
}

body.web3-pop .treasure-chest-lock::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 7px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50% 50% 4px 4px;
    background: #7b4b72;
}

body.web3-pop .treasure-spark {
    position: absolute;
    z-index: 3;
    color: #fff2a3;
    text-shadow: 0 0 12px rgba(255, 224, 123, .9);
    animation: treasureSparkPulse 2s ease-in-out infinite;
}

body.web3-pop .treasure-spark-one {
    top: 35px;
    left: 17%;
    font-size: 21px;
}

body.web3-pop .treasure-spark-two {
    top: 24px;
    right: 20%;
    color: #acffeb;
    font-size: 27px;
    animation-delay: -.7s;
}

body.web3-pop .treasure-spark-three {
    right: 14%;
    bottom: 35px;
    color: #f8a8dc;
    font-size: 15px;
    animation-delay: -1.3s;
}

body.web3-pop .treasure-reward-copy {
    padding: 15px 14px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(138, 103, 255, .16), rgba(255, 98, 184, .08)),
        rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
}

body.web3-pop .treasure-reward-label {
    margin-bottom: 3px;
    color: var(--treasure-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: .1em;
}

body.web3-pop .drawupitj.treasure-reward-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: 42px !important;
    letter-spacing: -.035em;
    text-shadow: 0 0 24px rgba(255, 214, 107, .24);
}

body.web3-pop .treasure-reward-amount .treasure-reward-plus {
    color: var(--treasure-mint);
    font-size: 22px;
}

body.web3-pop .treasure-reward-amount small {
    color: #d1cbe0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

body.web3-pop .treasure-reward-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    color: #aaa4c3;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

body.web3-pop .treasure-reward-note i {
    color: var(--treasure-mint);
}

body.web3-pop .treasure-primary-btn,
body.web3-pop .drawupiqd.treasure-primary-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    margin: 14px 0 0 !important;
    padding: 0 17px 0 21px !important;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(95deg, #7859f6 0%, #9e62f4 46%, #f060ae 100%) !important;
    box-shadow:
        0 12px 26px rgba(111, 75, 239, .28),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    font-size: 15px;
    font-weight: 900;
    line-height: 20px !important;
    letter-spacing: .04em;
    cursor: pointer;
    box-sizing: border-box;
}

body.web3-pop .treasure-primary-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font-size: 12px;
}

body.web3-pop .treasure-primary-btn:active {
    transform: translateY(1px) scale(.992);
}

body.web3-pop .treasure-visual-stage-compact {
    height: 180px;
}

/* Empty treasure / sharing state */
body.web3-pop .treasure-share-modal .treasure-share-card {
    padding-bottom: 18px !important;
}

body.web3-pop .treasure-empty-state {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 15px 0 16px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 21px;
    background:
        radial-gradient(circle at 0 50%, rgba(122, 241, 208, .11), transparent 44%),
        rgba(255, 255, 255, .035);
}

body.web3-pop .treasure-mini-chest {
    position: relative;
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: #f9dd80;
    border: 1px solid rgba(255, 221, 122, .24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 204, 92, .16), rgba(138, 103, 255, .18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    font-size: 25px;
}

body.web3-pop .treasure-mini-chest span {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #171126;
    border: 2px solid #201532;
    border-radius: 8px;
    background: var(--treasure-mint);
    font-size: 15px;
    font-weight: 950;
}

body.web3-pop .treasure-empty-copy {
    flex: 1;
    min-width: 0;
}

body.web3-pop .drawupitj.treasure-share-title {
    width: auto !important;
    height: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    text-align: left;
}

body.web3-pop .homepsyimashu.treasure-share-desc {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--treasure-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 650;
    line-height: 16px !important;
    text-align: left;
}

body.web3-pop .treasure-share-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 10px;
}

body.web3-pop .treasure-share-section-title span {
    color: #f8f7ff;
    font-size: 12px;
    font-weight: 850;
    line-height: 18px;
}

body.web3-pop .treasure-share-section-title em {
    color: #8e86a7;
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    line-height: 14px;
    letter-spacing: .14em;
}

body.web3-pop .treasureShareGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    margin: 0;
}

body.web3-pop .treasureShareItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 88px;
    color: #cec8df;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    box-sizing: border-box;
}

body.web3-pop .treasureShareItem:active {
    transform: scale(.96);
    border-color: rgba(138, 103, 255, .46);
    background: rgba(138, 103, 255, .1);
}

body.web3-pop .treasureShareIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 0 6px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    box-shadow:
        0 8px 18px rgba(5, 2, 17, .23),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    font-size: 17px;
    font-weight: 900;
    line-height: 42px;
    box-sizing: border-box;
}

body.web3-pop .treasureShareTelegram { background: linear-gradient(145deg, #39b9f4, #1b8ed1); }
body.web3-pop .treasureShareWhatsapp { background: linear-gradient(145deg, #43dd7b, #1caf55); }
body.web3-pop .treasureShareFacebook { background: linear-gradient(145deg, #438bf3, #1b57b8); }
body.web3-pop .treasureShareX { background: linear-gradient(145deg, #34303d, #09080d); }
body.web3-pop .treasureShareReddit { background: linear-gradient(145deg, #ff784c, #ef401e); }
body.web3-pop .treasureShareDiscord { background: linear-gradient(145deg, #8190ff, #5664da); }

body.web3-pop .treasureShareName {
    max-width: 100%;
    overflow: hidden;
    color: #c8c2d8;
    font-size: 9px;
    font-weight: 750;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .treasureCopyBtn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    margin: 12px 0 0;
    padding: 8px 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: linear-gradient(95deg, #7457ef, #ac63ea 52%, #ed62ac);
    box-shadow:
        0 12px 25px rgba(106, 72, 221, .24),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .18s ease, filter .18s ease;
}

body.web3-pop .treasureCopyBtn:active {
    transform: scale(.986);
}

body.web3-pop .treasure-copy-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .15);
    font-size: 14px;
}

body.web3-pop .treasure-copy-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

body.web3-pop .treasure-copy-text b {
    font-size: 13px;
    font-weight: 900;
    line-height: 18px;
}

body.web3-pop .treasure-copy-text small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .68);
    font-size: 8px;
    font-weight: 650;
    line-height: 12px;
}

body.web3-pop .treasure-copy-arrow {
    margin-left: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

body.web3-pop .treasureCopyBtn.treasure-copy-success {
    background: linear-gradient(95deg, #2abf91, #61d9b4) !important;
    filter: saturate(1.08);
}

@keyframes treasureChestFloat {
    0%, 100% { transform: translateY(2px) rotate(-.5deg); }
    50% { transform: translateY(-7px) rotate(.5deg); }
}

@keyframes treasureHaloSpin {
    to { transform: rotate(360deg); }
}

@keyframes treasureSparkPulse {
    0%, 100% { transform: scale(.82) rotate(-8deg); opacity: .48; }
    50% { transform: scale(1.16) rotate(8deg); opacity: 1; }
}

@media (max-width: 360px), (max-height: 670px) {
    body.web3-pop .treasure-modal .treasure-modal-card {
        padding: 0 15px 15px !important;
        border-radius: 25px !important;
    }

    body.web3-pop .treasure-modal-head {
        min-height: 76px;
        margin-inline: -15px;
        padding: 16px 14px 10px 17px;
    }

    body.web3-pop .treasure-modal-title {
        font-size: 19px;
        line-height: 24px;
    }

    body.web3-pop .treasure-modal-close {
        flex-basis: 38px;
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px;
    }

    body.web3-pop .treasure-visual-stage {
        height: 158px;
        margin-top: 5px;
    }

    body.web3-pop .treasure-chest {
        transform: scale(.9);
    }

    body.web3-pop .drawupitj.treasure-reward-amount {
        font-size: 29px !important;
        line-height: 36px !important;
    }

    body.web3-pop .treasure-empty-state {
        margin: 11px 0 12px;
        padding: 10px;
    }

    body.web3-pop .treasure-mini-chest {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

    body.web3-pop .treasureShareItem {
        height: 75px;
        border-radius: 15px;
    }

    body.web3-pop .treasureShareIcon {
        width: 36px;
        height: 36px;
        margin-bottom: 4px;
        border-radius: 12px;
        line-height: 36px;
    }

    body.web3-pop .treasureCopyBtn {
        min-height: 52px;
        margin-top: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.web3-pop .treasure-visual-stage::before,
    body.web3-pop .treasure-chest,
    body.web3-pop .treasure-spark {
        animation: none;
    }
}

/* Blind-box inventory / Web3 asset vault */
body.web3-pop:has(.bag-vault-page) {
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 91, 190, .19), transparent 30%),
        radial-gradient(circle at 5% 31%, rgba(115, 84, 255, .24), transparent 38%),
        linear-gradient(180deg, #171027 0%, #0d0b18 58%, #121020 100%) !important;
    color: #fff;
}

body.web3-pop:has(.bag-vault-page)::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 76%);
    mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

body.web3-pop .bag-vault-header {
    position: fixed;
    z-index: 80;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    height: 142px;
    padding: 8px 14px 12px;
    transform: translateX(-50%);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: linear-gradient(180deg, rgba(18, 12, 31, .98), rgba(18, 12, 31, .91));
    box-shadow: 0 14px 32px rgba(4, 2, 12, .42);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

body.web3-pop .bag-vault-header .bag-titlebar {
    position: relative;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
}

body.web3-pop .bag-vault-header .bag-back {
    position: absolute;
    left: 0;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    font-size: 24px;
}

body.web3-pop .bag-title-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

body.web3-pop .bag-title-copy span {
    margin-bottom: 7px;
    color: #9c86ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.1px;
}

body.web3-pop .bag-title-copy strong {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 1px;
}

body.web3-pop .bag-status-dot {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8e829f;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 1px;
}

body.web3-pop .bag-status-dot i,
body.web3-pop .bag-section-head small i,
body.web3-pop .bag-dog-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64e1bc;
    box-shadow: 0 0 10px rgba(100, 225, 188, .9);
}

body.web3-pop .bag-vault-header .bag-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
}

body.web3-pop .bag-vault-header .bag-tab {
    display: flex;
    min-width: 0;
    height: 60px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 17px;
    color: #978ba9;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    text-align: left;
}

body.web3-pop .bag-vault-header .bag-tab > i {
    display: inline-flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #9d8cff;
    background: rgba(128, 92, 255, .12);
    font-size: 14px;
}

body.web3-pop .bag-vault-header .bag-tab span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

body.web3-pop .bag-vault-header .bag-tab strong {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .bag-vault-header .bag-tab small {
    color: inherit;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

body.web3-pop .bag-vault-header .bag-tab.active {
    border-color: rgba(156, 125, 255, .72);
    color: #fff;
    background: linear-gradient(135deg, rgba(104, 69, 247, .88), rgba(211, 76, 191, .63));
    box-shadow: 0 9px 25px rgba(101, 69, 239, .28), inset 0 1px rgba(255, 255, 255, .22);
}

body.web3-pop .bag-vault-header .bag-tab.active > i {
    border-color: rgba(255, 255, 255, .21);
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 18px rgba(255, 255, 255, .11);
}

body.web3-pop .bag-vault-page {
    position: fixed;
    z-index: 2;
    top: 142px;
    bottom: 112px;
    left: 50%;
    width: 100%;
    max-width: 480px;
    min-height: 0;
    padding: 14px 14px 32px;
    transform: translateX(-50%);
}

body.web3-pop .bag-overview {
    position: relative;
    display: flex;
    min-height: 140px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 21px 20px;
    border: 1px solid rgba(151, 124, 255, .42);
    border-radius: 26px;
    background:
        radial-gradient(circle at 83% 20%, rgba(92, 229, 190, .25), transparent 26%),
        linear-gradient(135deg, rgba(113, 77, 253, .73), rgba(46, 29, 79, .92) 62%, rgba(31, 22, 50, .98));
    box-shadow: 0 18px 42px rgba(5, 2, 17, .39), inset 0 1px rgba(255, 255, 255, .15);
}

body.web3-pop .bag-overview.cash-overview {
    border-color: rgba(255, 204, 89, .46);
    background:
        radial-gradient(circle at 83% 20%, rgba(255, 202, 68, .36), transparent 25%),
        linear-gradient(135deg, rgba(88, 55, 184, .9), rgba(63, 35, 80, .95) 59%, rgba(34, 24, 35, .99));
}

body.web3-pop .bag-overview-copy {
    position: relative;
    z-index: 2;
    max-width: 68%;
}

body.web3-pop .bag-overview-kicker {
    display: block;
    margin-bottom: 8px;
    color: #aef9e1;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.9px;
}

body.web3-pop .cash-overview .bag-overview-kicker {
    color: #ffdb72;
}

body.web3-pop .bag-overview h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: .4px;
    line-height: 1.15;
}

body.web3-pop .bag-overview p {
    margin: 0;
    color: rgba(255, 255, 255, .67);
    font-size: 10px;
    line-height: 1.55;
}

body.web3-pop .bag-count-orbit {
    position: relative;
    z-index: 2;
    display: flex;
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(12, 8, 24, .37);
    box-shadow: inset 0 0 25px rgba(147, 117, 255, .22), 0 0 0 8px rgba(255, 255, 255, .035);
}

body.web3-pop .cash-overview .bag-count-orbit {
    box-shadow: inset 0 0 25px rgba(255, 199, 71, .22), 0 0 0 8px rgba(255, 255, 255, .035);
}

body.web3-pop .bag-count-orbit::after {
    position: absolute;
    inset: -7px;
    content: "";
    border: 1px dashed rgba(189, 171, 255, .42);
    border-radius: 50%;
}

body.web3-pop .bag-count-orbit span {
    color: rgba(255, 255, 255, .52);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

body.web3-pop .bag-count-orbit strong {
    margin-top: 2px;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

body.web3-pop .bag-overview-grid {
    position: absolute;
    right: -35px;
    bottom: -47px;
    width: 180px;
    height: 140px;
    opacity: .16;
    transform: perspective(150px) rotateX(56deg) rotateZ(-16deg);
    background-image:
        linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px);
    background-size: 18px 18px;
}

body.web3-pop .bag-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 21px 3px 12px;
}

body.web3-pop .bag-section-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.web3-pop .bag-section-head span {
    color: #796a91;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

body.web3-pop .bag-section-head strong {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

body.web3-pop .bag-section-head small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #746a83;
    font-size: 8px;
}

body.web3-pop .bag-vault-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.web3-pop .bag-vault-grid .bag-item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 7px;
    border: 1px solid rgba(151, 128, 255, .24);
    border-radius: 19px;
    background: linear-gradient(160deg, rgba(42, 31, 67, .97), rgba(21, 16, 34, .99));
    box-shadow: 0 14px 30px rgba(3, 2, 10, .36), inset 0 1px rgba(255, 255, 255, .07);
    text-align: left;
}

body.web3-pop .bag-vault-grid .bag-item.cash {
    border-color: rgba(255, 200, 72, .29);
    background:
        radial-gradient(circle at 78% 23%, rgba(255, 188, 63, .12), transparent 28%),
        linear-gradient(160deg, rgba(52, 32, 70, .98), rgba(23, 17, 31, .99));
}

body.web3-pop .bag-item-head {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 2px 6px;
}

body.web3-pop .bag-item-head span {
    color: #9f8cff;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}

body.web3-pop .bag-item.cash .bag-item-head span {
    color: #f8ca58;
}

body.web3-pop .bag-item-head b {
    color: rgba(255, 255, 255, .33);
    font-size: 7px;
    font-weight: 800;
}

body.web3-pop .bag-item-visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: #1b142c;
}

body.web3-pop .bag-item-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -36px 42px rgba(8, 5, 18, .18);
}

body.web3-pop .bag-item-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: inherit;
}

body.web3-pop .bag-item-aura {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: #7d5cff;
    box-shadow: 0 0 12px #8c6bff;
}

body.web3-pop .bag-item.cash .bag-item-aura {
    border-color: #fff4bf;
    background: #ffc846;
    box-shadow: 0 0 12px #ffc846;
}

body.web3-pop .bag-item-body {
    padding: 8px 2px 2px;
}

body.web3-pop .bag-name {
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .bag-dog-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: #827793;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .6px;
}

body.web3-pop .bag-cash-value {
    display: block;
    margin-top: 6px;
}

body.web3-pop .bag-cash-value small {
    display: block;
    color: #8c809c;
    font-size: 7px;
}

body.web3-pop .bag-cash-value strong {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #ffd467;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .bag-action {
    display: flex;
    height: 27px;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    padding: 0 7px;
    border: 1px solid rgba(151, 126, 255, .25);
    border-radius: 9px;
    color: #baaaff;
    background: rgba(123, 88, 255, .1);
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .bag-item.cash .bag-action {
    border-color: rgba(255, 204, 89, .28);
    color: #ffda7c;
    background: rgba(255, 190, 57, .08);
}

body.web3-pop .bag-loading {
    grid-column: 1 / -1;
    padding: 22px 10px 8px;
    color: #776d86;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    text-align: center;
}

body.web3-pop .bag-empty {
    grid-column: 1 / -1;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 18px;
    border: 1px dashed rgba(151, 126, 255, .3);
    border-radius: 26px;
    color: #fff;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}

body.web3-pop .bag-empty-icon {
    display: flex;
    width: 84px;
    height: 84px;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border: 1px solid rgba(157, 131, 255, .45);
    border-radius: 28px;
    color: #a28cff;
    background: linear-gradient(145deg, rgba(131, 91, 255, .2), rgba(255, 99, 194, .08));
    box-shadow: inset 0 0 26px rgba(139, 102, 255, .13);
    font-size: 30px;
}

body.web3-pop .bag-empty strong {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 900;
}

body.web3-pop .bag-empty span {
    color: #796e89;
    font-size: 10px;
    line-height: 1.6;
}

body.web3-pop .bag-vault-actionbar {
    position: fixed;
    z-index: 70;
    bottom: 49px;
    left: 50%;
    width: 100%;
    max-width: 480px;
    height: 63px;
    padding: 8px 14px 9px;
    transform: translateX(-50%);
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(14, 10, 24, .94);
    box-shadow: 0 -14px 30px rgba(4, 2, 11, .36);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

body.web3-pop .bag-vault-actionbar .merge-btn {
    display: flex;
    width: 100%;
    height: 46px;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(115deg, #6947f4, #b94fc9 66%, #f064ac);
    box-shadow: 0 8px 22px rgba(110, 69, 235, .28), inset 0 1px rgba(255, 255, 255, .24);
    text-align: left;
}

body.web3-pop .bag-vault-actionbar .merge-btn.cash-claim {
    background: linear-gradient(115deg, #7751ea, #bd5fac 58%, #d59642);
    box-shadow: 0 8px 22px rgba(206, 133, 57, .18), inset 0 1px rgba(255, 255, 255, .24);
}

body.web3-pop .bag-vault-actionbar .merge-btn > i {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    font-size: 14px;
}

body.web3-pop .bag-vault-actionbar .merge-btn > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

body.web3-pop .bag-vault-actionbar .merge-btn strong {
    font-size: 12px;
    font-weight: 900;
}

body.web3-pop .bag-vault-actionbar .merge-btn small {
    color: rgba(255, 255, 255, .58);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

body.web3-pop .bag-vault-actionbar .merge-btn > b {
    font-size: 16px;
    font-weight: normal;
}

body.web3-pop .bag-vault-dialog {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 4, 15, .79);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

body.web3-pop .bag-vault-dialog.show {
    display: flex;
}

body.web3-pop .bag-vault-dialog .dialog-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    padding: 25px 20px 20px;
    border: 1px solid rgba(158, 132, 255, .38);
    border-radius: 29px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 18%, rgba(119, 79, 249, .3), transparent 31%),
        linear-gradient(165deg, #271d3c, #130f20 63%, #10121b);
    box-shadow: 0 28px 70px rgba(2, 1, 8, .65), inset 0 1px rgba(255, 255, 255, .1);
    text-align: center;
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-card {
    border-color: rgba(255, 207, 87, .42);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 192, 60, .22), transparent 31%),
        linear-gradient(165deg, #33213e, #17121f 63%, #11151b);
}

body.web3-pop .bag-vault-dialog .dialog-card::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 150px;
    height: 2px;
    content: "";
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #957aff, transparent);
    box-shadow: 0 0 15px #815fff;
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-card::after {
    background: linear-gradient(90deg, transparent, #ffcd58, transparent);
    box-shadow: 0 0 15px #ffbd3b;
}

body.web3-pop .bag-vault-dialog .dialog-x {
    position: absolute;
    z-index: 4;
    top: 14px;
    right: 14px;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

body.web3-pop .bag-vault-dialog .dialog-kicker {
    display: block;
    margin-bottom: 14px;
    color: #9f8aff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-kicker {
    color: #ffd76c;
}

body.web3-pop .dialog-image-stage {
    position: relative;
    width: 166px;
    height: 166px;
    margin: 0 auto 15px;
}

body.web3-pop .dialog-image-stage img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 32px;
    box-shadow: 0 15px 35px rgba(4, 2, 11, .48);
}

body.web3-pop .dialog-image-ring {
    position: absolute;
    z-index: 1;
    inset: -8px;
    border: 1px dashed rgba(163, 138, 255, .45);
    border-radius: 39px;
}

body.web3-pop .cash-dialog .dialog-image-ring {
    border-color: rgba(255, 210, 95, .5);
}

body.web3-pop .bag-vault-dialog .dialog-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
}

body.web3-pop .bag-vault-dialog .dialog-note {
    min-height: 42px;
    margin: 0 8px 18px;
    color: #92869f;
    font-size: 11px;
    line-height: 1.7;
}

body.web3-pop .bag-vault-dialog .dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body.web3-pop .bag-vault-dialog .dialog-actions button,
body.web3-pop .merge-mode-cancel-wide {
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    color: #988da5;
    background: rgba(255, 255, 255, .055);
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .bag-vault-dialog .dialog-actions .dialog-confirm {
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
    background: linear-gradient(135deg, #7151ed, #db5caf);
    box-shadow: 0 8px 19px rgba(111, 75, 223, .23);
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-actions .dialog-confirm {
    background: linear-gradient(135deg, #9a66dc, #da8e43);
}

body.web3-pop .bag-vault-dialog .merge-mode-card {
    max-width: 370px;
    padding: 27px 18px 18px;
    text-align: left;
}

body.web3-pop .bag-vault-dialog .merge-mode-card .dialog-title,
body.web3-pop .bag-vault-dialog .merge-mode-card .dialog-note,
body.web3-pop .bag-vault-dialog .merge-mode-card .dialog-kicker {
    text-align: center;
}

body.web3-pop .merge-mode-option {
    display: grid;
    width: 100%;
    min-height: 73px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 9px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(151, 124, 255, .29);
    border-radius: 18px;
    color: #fff;
    background: rgba(122, 88, 244, .09);
    text-align: left;
}

body.web3-pop .merge-mode-option > i {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #af9bff;
    background: rgba(139, 102, 255, .16);
    font-size: 16px;
}

body.web3-pop .merge-mode-option > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

body.web3-pop .merge-mode-option strong {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

body.web3-pop .merge-mode-option small {
    color: #887c96;
    font-size: 9px;
    line-height: 1.45;
}

body.web3-pop .merge-mode-option > b {
    color: rgba(255, 255, 255, .19);
    font-size: 17px;
    font-weight: 900;
}

body.web3-pop .merge-mode-option:disabled {
    opacity: .56;
}

body.web3-pop .merge-mode-cancel-wide {
    display: block;
    width: 100%;
    margin-top: 11px;
}

body.web3-pop .bag-top-toast {
    position: fixed;
    z-index: 2147483647;
    top: 43%;
    left: 50%;
    display: none;
    max-width: 82%;
    padding: 12px 18px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: #fff;
    background: rgba(19, 13, 31, .94);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .4);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}

body.web3-pop .bag-top-toast.show {
    display: block;
}

@media (max-width: 360px) {
    body.web3-pop .bag-vault-header {
        height: 136px;
        padding-inline: 10px;
    }

    body.web3-pop .bag-vault-page {
        top: 136px;
        padding-inline: 10px;
    }

    body.web3-pop .bag-vault-header .bag-tab {
        height: 55px;
        gap: 7px;
        padding: 8px;
    }

    body.web3-pop .bag-vault-header .bag-tab > i {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    body.web3-pop .bag-overview {
        min-height: 128px;
        padding: 18px 15px;
    }

    body.web3-pop .bag-overview h1 {
        font-size: 20px;
    }

    body.web3-pop .bag-count-orbit {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    body.web3-pop .bag-vault-grid {
        gap: 6px;
    }

    body.web3-pop .bag-vault-grid .bag-item {
        padding: 6px;
        border-radius: 17px;
    }

    body.web3-pop .bag-item-visual {
        border-radius: 12px;
    }

    body.web3-pop .bag-name {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.web3-pop .bag-item-aura,
    body.web3-pop .bag-count-orbit::after {
        animation: none !important;
    }
}

/* Inventory vault must win over the legacy shared light-card rules above. */
body.web3-pop .bag-vault-header {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(18, 12, 31, .98), rgba(18, 12, 31, .91)) !important;
}

body.web3-pop .bag-vault-header .bag-back {
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .13) !important;
    background: rgba(255, 255, 255, .07) !important;
}

body.web3-pop .bag-vault-page {
    bottom: 145px !important;
    background: transparent !important;
}

body.web3-pop .bag-vault-grid .bag-item {
    border: 1px solid rgba(151, 128, 255, .24) !important;
    border-radius: 19px !important;
    background: linear-gradient(160deg, rgba(42, 31, 67, .97), rgba(21, 16, 34, .99)) !important;
    box-shadow: 0 14px 30px rgba(3, 2, 10, .36), inset 0 1px rgba(255, 255, 255, .07) !important;
}

body.web3-pop .bag-vault-grid .bag-item.cash {
    border-color: rgba(255, 200, 72, .29) !important;
    background:
        radial-gradient(circle at 78% 23%, rgba(255, 188, 63, .12), transparent 28%),
        linear-gradient(160deg, rgba(52, 32, 70, .98), rgba(23, 17, 31, .99)) !important;
}

body.web3-pop .bag-vault-grid .bag-empty {
    margin: 0;
    color: #fff !important;
    border: 1px dashed rgba(151, 126, 255, .3) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .025) !important;
}

body.web3-pop .bag-vault-actionbar {
    bottom: 82px !important;
    padding: 8px 14px 9px !important;
}

body.web3-pop .bag-vault-actionbar .merge-btn {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 15px !important;
    background: linear-gradient(115deg, #6947f4, #b94fc9 66%, #f064ac) !important;
    box-shadow: 0 8px 22px rgba(110, 69, 235, .28), inset 0 1px rgba(255, 255, 255, .24) !important;
}

body.web3-pop .bag-vault-actionbar .merge-btn.cash-claim {
    background: linear-gradient(115deg, #7751ea, #bd5fac 58%, #d59642) !important;
    box-shadow: 0 8px 22px rgba(206, 133, 57, .18), inset 0 1px rgba(255, 255, 255, .24) !important;
}

body.web3-pop .bag-vault-dialog .dialog-card {
    border: 1px solid rgba(158, 132, 255, .38) !important;
    border-radius: 29px !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(119, 79, 249, .3), transparent 31%),
        linear-gradient(165deg, #271d3c, #130f20 63%, #10121b) !important;
    box-shadow: 0 28px 70px rgba(2, 1, 8, .65), inset 0 1px rgba(255, 255, 255, .1) !important;
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-card {
    border-color: rgba(255, 207, 87, .42) !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 192, 60, .22), transparent 31%),
        linear-gradient(165deg, #33213e, #17121f 63%, #11151b) !important;
}

body.web3-pop .bag-vault-dialog .dialog-x,
body.web3-pop .bag-vault-dialog .dialog-actions .dialog-cancel,
body.web3-pop .bag-vault-dialog .merge-mode-cancel {
    color: #988da5 !important;
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(255, 255, 255, .055) !important;
}

body.web3-pop .bag-vault-dialog .dialog-x {
    color: #fff !important;
}

body.web3-pop .bag-vault-dialog .dialog-actions .dialog-confirm {
    color: #fff !important;
    background: linear-gradient(135deg, #7151ed, #db5caf) !important;
}

body.web3-pop .bag-vault-dialog.cash-dialog .dialog-actions .dialog-confirm {
    background: linear-gradient(135deg, #9a66dc, #da8e43) !important;
}

body.web3-pop .bag-vault-dialog .merge-mode-option {
    color: #fff !important;
    border-color: rgba(151, 124, 255, .29) !important;
    background: rgba(122, 88, 244, .09) !important;
}

/* Home kennel: three larger slots per row, four rows for all 12 dogs. */
body.web3-pop .home-dashboard .huangdquyeBox,
body.web3-pop .home-dashboard .huangdquye {
    height: 426px !important;
}

body.web3-pop .home-dashboard .mrythudBox {
    flex: 0 0 426px;
    height: 426px !important;
}

body.web3-pop .home-dashboard .dog-slot.qipao,
body.web3-pop .home-dashboard .mrythudHe {
    width: 29% !important;
    height: 96px !important;
}

body.web3-pop .home-dashboard :is(.qipao1, .qipao4, .qipao7, .qipao10) {
    left: 1% !important;
}

body.web3-pop .home-dashboard :is(.qipao2, .qipao5, .qipao8, .qipao11) {
    left: 35.5% !important;
}

body.web3-pop .home-dashboard :is(.qipao3, .qipao6, .qipao9, .qipao12) {
    left: 70% !important;
}

body.web3-pop .home-dashboard :is(.qipao1, .qipao2, .qipao3) {
    top: 8px !important;
}

body.web3-pop .home-dashboard :is(.qipao4, .qipao5, .qipao6) {
    top: 110px !important;
}

body.web3-pop .home-dashboard :is(.qipao7, .qipao8, .qipao9) {
    top: 212px !important;
}

body.web3-pop .home-dashboard :is(.qipao10, .qipao11, .qipao12) {
    top: 314px !important;
}

body.web3-pop .home-dashboard :is(.mrythudHe1, .mrythudHe4, .mrythudHe7, .mrythudHe10) {
    left: 1%;
}

body.web3-pop .home-dashboard :is(.mrythudHe2, .mrythudHe5, .mrythudHe8, .mrythudHe11) {
    left: 35.5%;
}

body.web3-pop .home-dashboard :is(.mrythudHe3, .mrythudHe6, .mrythudHe9, .mrythudHe12) {
    left: 70%;
}

body.web3-pop .home-dashboard :is(.mrythudHe1, .mrythudHe2, .mrythudHe3) {
    top: 8px;
}

body.web3-pop .home-dashboard :is(.mrythudHe4, .mrythudHe5, .mrythudHe6) {
    top: 110px;
}

body.web3-pop .home-dashboard :is(.mrythudHe7, .mrythudHe8, .mrythudHe9) {
    top: 212px;
}

body.web3-pop .home-dashboard :is(.mrythudHe10, .mrythudHe11, .mrythudHe12) {
    top: 314px;
}

body.web3-pop .home-dashboard .mrythudHe .mrythdj {
    min-width: 25px;
    height: 24px;
    line-height: 20px;
    font-size: 11px;
}

/* DOGVERSE Mystery Drop --------------------------------------------------
   The blind-box page intentionally uses a darker drop-vault surface while
   retaining the shared violet / pink / mint product palette. */
body.web3-pop .blind-vault-header,
body.web3-pop .blind-vault-page,
body.web3-pop .blind-vault-page *,
body.web3-pop .blind-draw-stage,
body.web3-pop .blind-draw-stage * {
    box-sizing: border-box;
}

body.web3-pop .blind-vault-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 50%;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    width: min(480px, 100%);
    height: 64px !important;
    padding: max(7px, env(safe-area-inset-top)) 13px 7px !important;
    transform: translateX(-50%);
    color: #f8f7ff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background:
        linear-gradient(90deg, rgba(23, 16, 39, .96), rgba(13, 15, 27, .94)) !important;
    box-shadow: 0 10px 30px rgba(5, 3, 13, .34) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

body.web3-pop .blind-vault-header .blind-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    padding: 0;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 13px;
    background: rgba(255, 255, 255, .065) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: 22px !important;
}

body.web3-pop .blind-vault-header .blind-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #fff;
    line-height: 1;
}

body.web3-pop .blind-vault-header .blind-title span {
    margin-bottom: 4px;
    color: #9d89ff;
    font-size: 7px;
    font-weight: 900;
    line-height: 9px;
    letter-spacing: .2em;
}

body.web3-pop .blind-vault-header .blind-title strong {
    font-size: 16px;
    font-weight: 950;
    line-height: 20px;
    letter-spacing: .04em;
}

body.web3-pop .blind-vault-header .blind-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 76px;
    padding: 5px 9px 6px;
    color: #8f899f;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
    font-size: 7px;
    font-weight: 800;
    line-height: 10px;
}

body.web3-pop .blind-vault-header .blind-balance b {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    color: #f8f7ff;
    font-size: 13px;
    font-weight: 950;
    line-height: 16px;
}

body.web3-pop .blind-vault-header .blind-balance b i {
    color: #77efd0;
    font-size: 9px;
    text-shadow: 0 0 10px rgba(119, 239, 208, .72);
}

body.web3-pop .blind-vault-header .blind-balance b em {
    overflow: hidden;
    max-width: 82px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .blind-vault-page {
    position: fixed;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(480px, 100%);
    min-height: 0;
    margin: 0;
    padding: calc(76px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%);
    color: #f8f7ff !important;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(circle at 84% 7%, rgba(255, 89, 177, .18), transparent 28%),
        radial-gradient(circle at 8% 25%, rgba(105, 79, 255, .2), transparent 34%),
        radial-gradient(circle at 90% 64%, rgba(83, 224, 195, .1), transparent 30%),
        linear-gradient(165deg, #171126 0%, #0e0b18 47%, #0b1219 100%) !important;
    background-size: 26px 26px, 26px 26px, auto, auto, auto, auto !important;
    box-shadow: 0 0 60px rgba(32, 19, 54, .32);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

body.web3-pop .blind-vault-page::-webkit-scrollbar {
    display: none;
}

body.web3-pop .blind-vault-hero {
    position: relative;
    min-height: 0;
    padding: 18px 17px 15px !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 29px !important;
    background:
        radial-gradient(circle at 86% 17%, rgba(255, 89, 177, .27), transparent 31%),
        radial-gradient(circle at 16% 88%, rgba(91, 225, 196, .14), transparent 38%),
        linear-gradient(145deg, rgba(55, 35, 91, .94), rgba(24, 18, 42, .96) 54%, rgba(14, 25, 31, .96)) !important;
    box-shadow:
        0 22px 48px rgba(3, 2, 11, .38),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    overflow: hidden;
    text-align: left;
}

body.web3-pop .blind-hero-grid {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask: linear-gradient(to bottom, #000, transparent 74%);
    mask: linear-gradient(to bottom, #000, transparent 74%);
    opacity: .54;
    pointer-events: none;
}

body.web3-pop .blind-vault-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -74px;
    right: -68px;
    width: 222px;
    height: 222px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 0 28px rgba(255, 255, 255, .018),
        0 0 0 56px rgba(255, 255, 255, .012);
    filter: none;
}

body.web3-pop .blind-vault-hero > * {
    position: relative;
    z-index: 1;
}

body.web3-pop .blind-season {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 23px;
    padding: 0 10px;
    color: #c8bbff;
    border: 1px solid rgba(157, 137, 255, .26);
    border-radius: 999px;
    background: rgba(115, 82, 240, .1);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .16em;
}

body.web3-pop .blind-season span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #70f0ce;
    box-shadow: 0 0 10px rgba(112, 240, 206, .9);
}

body.web3-pop .blind-hero-main {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(150px, 1.12fr);
    align-items: center;
    min-height: 184px;
    margin-top: 2px;
}

body.web3-pop .blind-hero-copy {
    z-index: 3;
    padding-left: 2px;
}

body.web3-pop .blind-vault-hero .blind-slogan {
    margin: 0;
    color: #fff;
    font-size: clamp(23px, 7vw, 31px);
    font-weight: 950;
    line-height: 1.17;
    letter-spacing: -.045em;
    text-shadow: 0 8px 28px rgba(4, 2, 12, .3);
}

body.web3-pop .blind-vault-hero .blind-slogan em {
    color: transparent;
    background: linear-gradient(90deg, #9e83ff, #ff73bd 56%, #7cf1d2);
    -webkit-background-clip: text;
    background-clip: text;
    font-style: normal;
}

body.web3-pop .blind-vault-hero .blind-subtitle {
    max-width: 132px;
    margin-top: 9px;
    color: #aaa4bd;
    font-size: 9px;
    font-weight: 650;
    line-height: 15px;
}

body.web3-pop .blind-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 178px;
    height: 178px;
    margin-left: auto;
}

body.web3-pop .blind-visual::before {
    content: "";
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(124, 91, 255, .46), rgba(255, 86, 181, .35));
    filter: blur(20px);
}

body.web3-pop .blind-visual::after {
    content: "";
    position: absolute;
    bottom: 13px;
    left: 50%;
    width: 128px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(100, 238, 204, .25);
    filter: blur(11px);
}

body.web3-pop .blind-vault-hero .blind-box-img {
    position: relative;
    z-index: 3;
    width: 146px !important;
    height: 146px !important;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 39px !important;
    background: #c9aaff;
    box-shadow:
        0 17px 30px rgba(6, 2, 20, .44),
        0 0 0 5px rgba(255, 255, 255, .035) !important;
    filter: saturate(1.12) contrast(1.04) !important;
    object-fit: cover;
    animation: blindVaultFloat 4s ease-in-out infinite;
}

body.web3-pop .blind-orbit {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

body.web3-pop .blind-orbit-one {
    width: 176px;
    height: 84px;
    transform: translate(-50%, -50%) rotate(-18deg);
    animation: blindOrbitPulse 3.4s ease-in-out infinite;
}

body.web3-pop .blind-orbit-two {
    width: 154px;
    height: 174px;
    transform: translate(-50%, -50%) rotate(28deg);
    border-color: rgba(116, 240, 207, .17);
    animation: blindOrbitPulse 3.4s ease-in-out -1.4s infinite reverse;
}

body.web3-pop .blind-visual-spark {
    position: absolute;
    z-index: 4;
    color: #fff5ae;
    text-shadow: 0 0 12px rgba(255, 224, 112, .9);
    animation: blindSparkPulse 2.1s ease-in-out infinite;
}

body.web3-pop .blind-visual-spark-one {
    top: 13px;
    right: 12px;
    font-size: 18px;
}

body.web3-pop .blind-visual-spark-two {
    left: 7px;
    bottom: 30px;
    color: #84f3d4;
    font-size: 24px;
    animation-delay: -1s;
}

body.web3-pop .blind-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body.web3-pop .blind-quick-link {
    display: grid;
    grid-template-columns: 33px 1fr 12px;
    align-items: center;
    min-width: 0;
    height: 52px;
    padding: 0 10px;
    color: #f4f1ff;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    cursor: pointer;
    text-decoration: none;
}

body.web3-pop .blind-quick-link > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: #d5ccff;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(126, 91, 255, .28), rgba(255, 100, 186, .17));
    font-size: 13px;
}

body.web3-pop .blind-quick-link b {
    min-width: 0;
    padding-left: 8px;
    font-size: 10px;
    font-weight: 850;
    line-height: 15px;
}

body.web3-pop .blind-quick-link > i {
    color: #7e768e;
    font-size: 12px;
}

body.web3-pop .blind-quick-link:active {
    transform: scale(.975);
    background: rgba(126, 91, 255, .12);
}

body.web3-pop .blind-hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
    padding: 10px 3px 0;
    color: #8e879f;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 7px;
    font-weight: 750;
    line-height: 11px;
}

body.web3-pop .blind-hero-foot span {
    display: flex;
    align-items: center;
    gap: 4px;
}

body.web3-pop .blind-hero-foot i {
    color: #75e9ca;
}

body.web3-pop .blind-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 23px 2px 11px;
}

body.web3-pop .blind-section-head > div,
body.web3-pop .blind-pool-card .section-title > div {
    display: flex;
    flex-direction: column;
}

body.web3-pop .blind-section-head small,
body.web3-pop .blind-pool-card .section-title small {
    margin-bottom: 3px;
    color: #8f79ff !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 10px;
    letter-spacing: .17em;
}

body.web3-pop .blind-section-head strong,
body.web3-pop .blind-pool-card .section-title strong {
    color: #f8f7ff;
    font-size: 16px;
    font-weight: 950;
    line-height: 21px;
}

body.web3-pop .blind-section-head > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8e879e;
    font-size: 8px;
    font-weight: 750;
    line-height: 14px;
}

body.web3-pop .blind-progress-headline > span {
    color: #69d8b8;
}

body.web3-pop .blind-guarantee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0 !important;
}

body.web3-pop .blind-guarantee-grid .progress-card {
    min-width: 0;
    padding: 13px 12px 11px !important;
    color: #f8f7ff;
    border: 1px solid rgba(255, 255, 255, .095) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(126, 91, 255, .12), rgba(255, 255, 255, .035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.web3-pop .blind-guarantee-grid .progress-card:last-child {
    background:
        linear-gradient(145deg, rgba(255, 91, 181, .13), rgba(255, 255, 255, .035)) !important;
}

body.web3-pop .blind-guarantee-grid .progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f1edff;
    font-size: 10px;
    font-weight: 850;
    line-height: 15px;
}

body.web3-pop .blind-guarantee-grid .progress-head span:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
}

body.web3-pop .blind-guarantee-grid .progress-head i {
    color: #a999ff;
    font-size: 9px;
}

body.web3-pop .blind-guarantee-grid .progress-head span:last-child {
    color: #aaa3b8;
    font-size: 8px;
}

body.web3-pop .blind-guarantee-grid .progress-track {
    height: 6px;
    margin: 10px 0 7px;
    padding: 1px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .075);
}

body.web3-pop .blind-guarantee-grid .progress-bar {
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #7458f5, #a675ff 48%, #73eaca) !important;
    box-shadow: 0 0 10px rgba(134, 104, 255, .48);
}

body.web3-pop .blind-guarantee-grid .progress-card:last-child .progress-bar {
    background: linear-gradient(90deg, #9d62f6, #ff63b7 56%, #ffd36b) !important;
    box-shadow: 0 0 10px rgba(255, 99, 183, .42);
}

body.web3-pop .blind-guarantee-grid .progress-tip {
    color: #8f899d;
    font-size: 8px;
    font-weight: 650;
    line-height: 13px;
}

body.web3-pop .blind-guarantee-grid .progress-tip b {
    color: #fff;
    font-weight: 900;
}

body.web3-pop .blind-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.web3-pop .blind-access-card {
    position: relative;
    min-width: 0;
    padding: 11px !important;
    color: #f8f7ff;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 90% 5%, rgba(113, 236, 204, .11), transparent 35%),
        linear-gradient(155deg, rgba(38, 31, 57, .98), rgba(19, 17, 30, .98)) !important;
    box-shadow:
        0 16px 30px rgba(3, 2, 10, .22),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    overflow: hidden;
    text-align: left;
}

body.web3-pop .blind-access-card-multi {
    border-color: rgba(255, 104, 185, .19) !important;
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 91, 181, .17), transparent 37%),
        linear-gradient(155deg, rgba(48, 31, 67, .98), rgba(20, 16, 31, .98)) !important;
}

body.web3-pop .blind-access-card::after {
    content: "";
    position: absolute;
    right: -29px;
    top: -29px;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    background: transparent !important;
}

body.web3-pop .blind-access-badge {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 8px;
    color: #75dfc2;
    border: 1px solid rgba(117, 223, 194, .15);
    border-radius: 99px;
    background: rgba(117, 223, 194, .065);
    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .15em;
}

body.web3-pop .blind-access-card-multi .blind-access-badge {
    color: #ff93ce;
    border-color: rgba(255, 147, 206, .18);
    background: rgba(255, 99, 183, .07);
}

body.web3-pop .blind-access-preview {
    position: relative;
    width: 100%;
    height: 116px;
    margin: 8px 0 5px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 17px;
    background:
        radial-gradient(circle, rgba(121, 89, 246, .19), transparent 66%),
        rgba(255, 255, 255, .028);
    overflow: hidden;
}

body.web3-pop .blind-access-preview img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    filter: saturate(1.06) contrast(1.03);
    object-fit: cover;
}

body.web3-pop .blind-access-count {
    position: absolute;
    z-index: 2;
    right: 7px;
    top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 7px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(16, 11, 27, .72);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 900;
}

body.web3-pop .blind-access-card .goods-name {
    margin: 0 0 4px;
    color: #f8f7ff;
    font-size: 13px;
    font-weight: 900;
    line-height: 18px;
    text-align: left;
}

body.web3-pop .blind-access-card .goods-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 24px;
}

body.web3-pop .blind-access-card .goods-price i {
    align-self: center;
    color: #72eaca;
    font-size: 9px;
}

body.web3-pop .blind-access-card-multi .goods-price i {
    color: #ff81c5;
}

body.web3-pop .blind-access-card .goods-price small {
    color: #888194;
    font-size: 7px;
    font-weight: 750;
}

body.web3-pop .blind-access-card .draw-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 43px !important;
    height: 43px;
    margin: 9px 0 0;
    padding: 0 10px 0 13px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 14px !important;
    background: linear-gradient(100deg, #6447e8, #8c5ff3) !important;
    box-shadow:
        0 9px 18px rgba(81, 57, 199, .2),
        inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .blind-access-card-multi .draw-btn {
    background: linear-gradient(100deg, #8154ec, #d45ec9 55%, #ed61a7) !important;
    box-shadow:
        0 9px 18px rgba(205, 82, 174, .2),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

body.web3-pop .blind-access-card .draw-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
    font-size: 9px;
}

body.web3-pop .blind-access-card .draw-btn[disabled] {
    opacity: .46;
    filter: grayscale(.2);
}

body.web3-pop .blind-pool-card {
    margin: 22px 0 0 !important;
    padding: 15px !important;
    color: #f8f7ff;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(112, 234, 201, .09), transparent 31%),
        rgba(255, 255, 255, .035) !important;
    box-shadow:
        0 16px 32px rgba(3, 2, 10, .2),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.web3-pop .blind-pool-card .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.web3-pop .blind-pool-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    color: #74e7c8;
    border: 1px solid rgba(116, 231, 200, .16);
    border-radius: 99px;
    background: rgba(116, 231, 200, .06);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .12em;
}

body.web3-pop .blind-pool-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #74e7c8;
    box-shadow: 0 0 8px rgba(116, 231, 200, .88);
    animation: blindLivePulse 1.4s ease-in-out infinite;
}

body.web3-pop .blind-pool-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 11px;
    padding: 8px 9px;
    color: #8e879d;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: 8px;
    font-weight: 650;
    line-height: 13px;
}

body.web3-pop .blind-pool-tip i {
    color: #9d86ff;
}

body.web3-pop .blind-pool-card .pool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

body.web3-pop .blind-pool-card .pool-item {
    min-width: 0;
    padding: 5px 5px 7px !important;
    color: #d9d4e4;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .026) !important;
    text-align: center;
}

body.web3-pop .blind-pool-card .pool-item > span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(122, 91, 246, .13), rgba(111, 231, 201, .07));
    overflow: hidden;
}

body.web3-pop .blind-pool-card .pool-item img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
}

body.web3-pop .blind-pool-card .pool-name {
    margin-top: 5px;
    overflow: hidden;
    color: #a8a1b5;
    font-size: 7px;
    font-weight: 700;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Opening, ten-pull and results share one vault overlay. */
body.web3-pop .draw-overlay {
    z-index: 1000002 !important;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    background:
        radial-gradient(circle at 50% 38%, rgba(121, 86, 246, .28), transparent 37%),
        rgba(8, 6, 16, .82) !important;
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

body.web3-pop .blind-draw-stage {
    width: min(404px, 100%);
    max-height: calc(100dvh - 36px);
    color: #f8f7ff;
    text-align: center;
}

body.web3-pop .blind-opening-kicker,
body.web3-pop .result-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #b09cff;
    font-size: 8px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .19em;
}

body.web3-pop .blind-opening-kicker span,
body.web3-pop .result-kicker span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #71e9c8;
    box-shadow: 0 0 11px rgba(113, 233, 200, .9);
}

body.web3-pop .blind-opening-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 248px;
    height: 248px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.04) 0 1deg, transparent 1deg 12deg),
        radial-gradient(circle, rgba(117, 83, 241, .2), transparent 67%);
    box-shadow:
        0 0 0 22px rgba(255, 255, 255, .014),
        0 0 68px rgba(117, 83, 241, .28);
    overflow: hidden;
}

body.web3-pop .blind-opening-visual .opening-box {
    position: relative;
    z-index: 2;
    width: 184px !important;
    height: 184px !important;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 45px !important;
    box-shadow: 0 18px 35px rgba(2, 1, 8, .42);
    filter: saturate(1.14) contrast(1.04) !important;
    object-fit: cover;
    animation: blindBoxDecrypt 1.05s ease-in-out infinite !important;
}

body.web3-pop .blind-scan-line {
    position: absolute;
    z-index: 4;
    left: 25px;
    right: 25px;
    top: 28px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #75f0ce, transparent);
    box-shadow: 0 0 16px rgba(117, 240, 206, .9);
    animation: blindScanMove 1.65s ease-in-out infinite;
}

body.web3-pop .blind-draw-stage .magic-ring {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 147px;
    width: 286px;
    height: 286px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(153, 124, 255, .32);
    border-radius: 50%;
    box-shadow:
        0 0 0 17px rgba(120, 87, 246, .025),
        0 0 52px rgba(120, 87, 246, .22),
        inset 0 0 38px rgba(255, 95, 183, .1);
    animation: blindRingVault 2.2s ease-in-out infinite;
}

body.web3-pop .blind-draw-stage .opening-text {
    margin-top: 21px;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 24px;
    text-shadow: none;
}

body.web3-pop .blind-draw-stage .opening-text span {
    display: block;
    margin-top: 5px;
    color: #8d869b;
    font-size: 8px;
    font-weight: 750;
    line-height: 13px;
    letter-spacing: .08em;
}

body.web3-pop .blind-draw-stage .ten-reveal,
body.web3-pop .blind-draw-stage .result-panel {
    width: 100%;
    max-height: calc(100dvh - 38px);
    margin: 0;
    padding: 18px !important;
    color: #f8f7ff !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 91, 181, .18), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(108, 232, 199, .09), transparent 38%),
        linear-gradient(155deg, #2a1b45, #151021 52%, #10191f) !important;
    box-shadow:
        0 26px 72px rgba(3, 1, 9, .62),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

body.web3-pop .blind-draw-stage .ten-reveal::-webkit-scrollbar,
body.web3-pop .blind-draw-stage .result-panel::-webkit-scrollbar {
    display: none;
}

body.web3-pop .blind-draw-stage .reveal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    color: #fff;
    text-align: left;
}

body.web3-pop .blind-draw-stage .reveal-head > div {
    display: flex;
    flex-direction: column;
}

body.web3-pop .blind-draw-stage .reveal-head small {
    margin-bottom: 4px;
    color: #9e87ff;
    font-size: 7px;
    font-weight: 900;
    line-height: 10px;
    letter-spacing: .16em;
}

body.web3-pop .blind-draw-stage .reveal-head strong {
    color: #fff;
    font-size: 17px;
    font-weight: 950;
    line-height: 22px;
}

body.web3-pop .blind-draw-stage .reveal-head > span {
    height: 27px;
    padding: 0 10px;
    color: #d9d0ff;
    border: 1px solid rgba(159, 132, 255, .18);
    border-radius: 10px;
    background: rgba(126, 90, 245, .12);
    font-size: 9px;
    font-weight: 900;
    line-height: 27px;
}

body.web3-pop .blind-draw-stage .reel-window {
    height: 156px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 19px;
    background:
        linear-gradient(90deg, rgba(7, 5, 13, .72), rgba(255,255,255,.045) 29%, rgba(255,255,255,.065) 50%, rgba(255,255,255,.045) 71%, rgba(7, 5, 13, .72)) !important;
    box-shadow: inset 0 0 24px rgba(2, 1, 8, .44);
}

body.web3-pop .blind-draw-stage .reel-window::before {
    background: linear-gradient(90deg, rgba(8, 5, 14, .88), transparent);
}

body.web3-pop .blind-draw-stage .reel-window::after {
    background: linear-gradient(-90deg, rgba(8, 5, 14, .88), transparent);
}

body.web3-pop .blind-draw-stage .reel-marker {
    top: 7px;
    bottom: 7px;
    width: 104px;
    border: 2px solid #fb66b4;
    border-radius: 17px;
    box-shadow:
        0 0 18px rgba(251, 102, 180, .54),
        inset 0 0 16px rgba(126, 91, 245, .16);
}

body.web3-pop .blind-draw-stage .reel-marker::before {
    border-top-color: #fb66b4;
}

body.web3-pop .blind-draw-stage .reel-marker::after {
    border-bottom-color: #fb66b4;
}

body.web3-pop .blind-draw-stage .reel-card {
    flex-basis: 92px;
    padding: 7px 4px;
    color: #f8f7ff;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

body.web3-pop .blind-draw-stage .reel-card.active {
    border-color: rgba(255, 121, 195, .35);
    background: linear-gradient(145deg, rgba(128, 94, 246, .2), rgba(255, 100, 185, .13));
    box-shadow: 0 0 24px rgba(252, 103, 182, .34);
}

body.web3-pop .blind-draw-stage .reel-card.cash {
    background: linear-gradient(145deg, rgba(255, 202, 95, .17), rgba(255, 104, 170, .12));
}

body.web3-pop .blind-draw-stage .reel-card img {
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 10px;
    object-fit: cover;
}

body.web3-pop .blind-draw-stage .reel-card-name {
    margin-top: 5px;
    color: #d5d0df;
    font-size: 8px;
}

body.web3-pop .blind-draw-stage .reveal-current {
    min-height: 52px;
    padding-top: 12px;
    color: #8f889e;
}

body.web3-pop .blind-draw-stage .reveal-current b {
    color: #fff;
    font-size: 15px;
    line-height: 21px;
}

body.web3-pop .blind-draw-stage .reveal-current span {
    color: #938ca0;
    font-size: 8px;
}

body.web3-pop .blind-draw-stage .result-panel {
    padding-top: 20px !important;
}

body.web3-pop .blind-draw-stage .result-kicker {
    margin-bottom: 7px;
}

body.web3-pop .blind-draw-stage .result-title {
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 30px;
    letter-spacing: -.02em;
}

body.web3-pop .blind-draw-stage .result-subtitle {
    margin-top: 4px;
    color: #918a9f;
    font-size: 8px;
    font-weight: 700;
    line-height: 13px;
}

body.web3-pop .blind-draw-stage .result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

body.web3-pop .blind-draw-stage .result-grid.single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 220px;
    margin-right: auto;
    margin-left: auto;
}

body.web3-pop .blind-draw-stage .result-item {
    position: relative;
    min-width: 0;
    padding: 8px 7px 9px;
    color: #f8f7ff;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.web3-pop .blind-draw-stage .result-item.cash {
    background: linear-gradient(145deg, rgba(255, 206, 99, .15), rgba(255, 102, 177, .09));
    box-shadow:
        0 0 18px rgba(255, 141, 67, .11),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.web3-pop .blind-draw-stage .result-item img {
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 12px;
    object-fit: cover;
}

body.web3-pop .blind-draw-stage .result-name {
    margin-top: 6px;
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .blind-draw-stage .result-tag {
    display: inline-flex;
    align-items: center;
    min-height: 17px;
    margin: 5px 2px 0;
    padding: 1px 6px;
    color: #7de1c4;
    border: 1px solid rgba(125, 225, 196, .14);
    border-radius: 99px;
    background: rgba(125, 225, 196, .065);
    font-size: 6px;
    font-weight: 750;
    line-height: 11px;
}

body.web3-pop .blind-draw-stage .result-tag.guarantee {
    color: #ff9ad0;
    border-color: rgba(255, 154, 208, .16);
    background: rgba(255, 100, 183, .07);
}

body.web3-pop .blind-draw-stage .result-item.jackpot {
    border: 2px solid rgba(255, 215, 104, .66) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 232, 133, .19), transparent 42%),
        linear-gradient(145deg, rgba(133, 91, 244, .2), rgba(255, 102, 177, .13));
    box-shadow:
        0 0 23px rgba(255, 210, 92, .22),
        inset 0 1px 0 rgba(255, 255, 255, .1);
}

body.web3-pop .blind-draw-stage .result-item.jackpot::before {
    right: 6px;
    top: 6px;
    padding: 3px 7px;
    color: #241527;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffe885, #ffad68);
    box-shadow: 0 4px 12px rgba(28, 11, 25, .3);
    font-size: 7px;
}

body.web3-pop .blind-draw-stage .close-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px !important;
    height: 54px;
    margin: 14px 0 0;
    padding: 0 13px 0 20px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 17px !important;
    background: linear-gradient(95deg, #6d50ef, #9a60ed 49%, #ed60ab) !important;
    box-shadow:
        0 13px 28px rgba(101, 70, 221, .27),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    font-size: 13px;
    font-weight: 900;
}

body.web3-pop .blind-draw-stage .close-result i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font-size: 10px;
}

body.web3-pop .blind-draw-stage .ten-reveal.jackpot-hold,
body.web3-pop .blind-draw-stage .result-panel.jackpot-panel {
    border-color: rgba(255, 220, 111, .48) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 219, 105, .17), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255, 91, 181, .15), transparent 35%),
        linear-gradient(155deg, #302044, #171020 52%, #151b1f) !important;
    box-shadow:
        0 0 35px rgba(255, 212, 95, .22),
        0 28px 75px rgba(3, 1, 9, .65) !important;
}

@keyframes blindVaultFloat {
    0%, 100% { transform: translateY(2px) rotate(-.4deg); }
    50% { transform: translateY(-7px) rotate(.4deg); }
}

@keyframes blindOrbitPulse {
    0%, 100% { opacity: .38; scale: .96; }
    50% { opacity: .8; scale: 1.04; }
}

@keyframes blindSparkPulse {
    0%, 100% { transform: scale(.78) rotate(-8deg); opacity: .45; }
    50% { transform: scale(1.14) rotate(8deg); opacity: 1; }
}

@keyframes blindLivePulse {
    0%, 100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes blindBoxDecrypt {
    0%, 100% { transform: translateY(2px) rotate(-1.2deg) scale(.98); }
    35% { transform: translateY(-3px) rotate(1.4deg) scale(1.02); }
    70% { transform: translateY(-1px) rotate(-.8deg) scale(1.045); }
}

@keyframes blindScanMove {
    0%, 100% { top: 30px; opacity: .25; }
    50% { top: 214px; opacity: 1; }
}

@keyframes blindRingVault {
    0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.92) rotate(0); }
    50% { opacity: .85; transform: translate(-50%, -50%) scale(1.04) rotate(180deg); }
}

@media (max-width: 360px) {
    body.web3-pop .blind-vault-header {
        grid-template-columns: 38px 1fr auto;
        padding-inline: 9px !important;
    }

    body.web3-pop .blind-vault-header .blind-balance {
        min-width: 68px;
        padding-inline: 7px;
    }

    body.web3-pop .blind-vault-page {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }

    body.web3-pop .blind-vault-hero {
        min-height: 0;
        padding-inline: 13px !important;
    }

    body.web3-pop .blind-hero-main {
        grid-template-columns: minmax(0, .86fr) minmax(137px, 1.14fr);
        min-height: 174px;
    }

    body.web3-pop .blind-visual {
        width: 158px;
        height: 158px;
    }

    body.web3-pop .blind-vault-hero .blind-box-img {
        width: 130px !important;
        height: 130px !important;
        border-radius: 34px !important;
    }

    body.web3-pop .blind-vault-hero .blind-slogan {
        font-size: 22px;
    }

    body.web3-pop .blind-access-preview {
        height: 102px;
    }

    body.web3-pop .blind-access-card {
        padding: 9px !important;
    }

    body.web3-pop .blind-access-card .draw-btn {
        padding-left: 10px !important;
        font-size: 10px;
    }

    body.web3-pop .blind-pool-card {
        padding: 12px !important;
    }
}

@media (max-height: 670px) {
    body.web3-pop .blind-opening-kicker {
        margin-bottom: 8px;
    }

    body.web3-pop .blind-opening-visual {
        width: 210px;
        height: 210px;
    }

    body.web3-pop .blind-opening-visual .opening-box {
        width: 158px !important;
        height: 158px !important;
        border-radius: 39px !important;
    }

    body.web3-pop .blind-draw-stage .magic-ring {
        top: 126px;
        width: 240px;
        height: 240px;
    }

    body.web3-pop .blind-draw-stage .opening-text {
        margin-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.web3-pop .blind-vault-hero .blind-box-img,
    body.web3-pop .blind-orbit,
    body.web3-pop .blind-visual-spark,
    body.web3-pop .blind-pool-live i,
    body.web3-pop .blind-opening-visual .opening-box,
    body.web3-pop .blind-scan-line,
    body.web3-pop .blind-draw-stage .magic-ring {
        animation: none !important;
    }
}

/* ==========================================================================
   Home asset dialogs — recycle + five-elements fusion
   ========================================================================== */

body.web3-pop .huishouupBox,
body.web3-pop .compoundhcBox {
    padding: 18px !important;
    background:
        radial-gradient(circle at 16% 10%, rgba(129, 92, 255, .24), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(255, 70, 185, .14), transparent 32%),
        rgba(8, 7, 22, .78) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .huishouupBox .recycle-dialog-card {
    position: relative;
    width: min(100%, 370px) !important;
    max-width: 370px !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 18px 18px !important;
    overflow: hidden;
    border: 1px solid rgba(193, 178, 255, .38) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 90% 2%, rgba(255, 91, 195, .2), transparent 31%),
        radial-gradient(circle at 8% 43%, rgba(106, 231, 255, .1), transparent 38%),
        linear-gradient(156deg, #21173c 0%, #121025 48%, #0b1320 100%) !important;
    box-shadow:
        0 30px 80px rgba(3, 1, 15, .58),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

body.web3-pop .huishouupBox .recycle-dialog-card::before {
    position: absolute;
    top: 0;
    left: 16%;
    width: 68%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #c8a5ff, #ff68c5, transparent);
    box-shadow: 0 0 20px rgba(222, 115, 255, .9);
}

body.web3-pop .recycle-dialog-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
}

body.web3-pop .recycle-title-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

body.web3-pop .recycle-title-copy span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #a999ff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
}

body.web3-pop .recycle-title-copy span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #66f0c7;
    box-shadow: 0 0 12px rgba(102, 240, 199, .9);
}

body.web3-pop .recycle-title-copy strong {
    color: #fff;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
}

body.web3-pop .recycle-close,
body.web3-pop .fusion-close {
    display: grid !important;
    flex: 0 0 auto;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #f7f2ff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    font-size: 17px !important;
}

body.web3-pop .recycle-asset-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 156px;
    margin: 0 0 8px;
    overflow: hidden;
    border: 1px solid rgba(172, 151, 255, .25);
    border-radius: 24px;
    background:
        linear-gradient(rgba(139, 110, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 110, 255, .08) 1px, transparent 1px),
        radial-gradient(circle at 50% 54%, rgba(154, 106, 255, .32), transparent 42%),
        rgba(10, 11, 31, .72);
    background-size: 23px 23px, 23px 23px, auto, auto;
}

body.web3-pop .recycle-asset-stage::after {
    position: absolute;
    right: 12px;
    bottom: 11px;
    left: 12px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .7), transparent);
    box-shadow: 0 0 12px rgba(107, 232, 255, .55);
}

body.web3-pop .recycle-orbit {
    position: absolute;
    width: 126px;
    height: 126px;
    border: 1px solid rgba(119, 226, 255, .25);
    border-radius: 50%;
    box-shadow:
        0 0 0 10px rgba(158, 116, 255, .04),
        0 0 38px rgba(129, 94, 255, .22);
}

body.web3-pop .recycle-orbit::before,
body.web3-pop .recycle-orbit::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #7be9ff;
    box-shadow: 0 0 12px #7be9ff;
}

body.web3-pop .recycle-orbit::before {
    top: 11px;
    right: 19px;
}

body.web3-pop .recycle-orbit::after {
    bottom: 8px;
    left: 23px;
    background: #ff72c8;
    box-shadow: 0 0 12px #ff72c8;
}

body.web3-pop .recycle-dog-frame {
    position: relative;
    z-index: 1;
    width: 116px;
    height: 116px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 29px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04));
    box-shadow:
        0 15px 32px rgba(4, 2, 20, .46),
        0 0 26px rgba(148, 105, 255, .26);
}

body.web3-pop .recycle-dog-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 23px;
    background: rgba(255, 255, 255, .92);
}

body.web3-pop .recycle-asset-tag {
    position: absolute;
    top: 10px;
    left: 11px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(108, 236, 255, .22);
    border-radius: 99px;
    color: #8de9ff;
    background: rgba(8, 20, 38, .72);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
}

body.web3-pop .recycle-asset-name {
    margin: 10px 0 13px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

body.web3-pop .recycle-value-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid rgba(145, 122, 255, .28);
    border-radius: 18px;
    background: linear-gradient(110deg, rgba(116, 80, 228, .18), rgba(70, 211, 230, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.web3-pop .recycle-value-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

body.web3-pop .recycle-value-card > div span {
    color: #eeebff;
    font-size: 13px;
    font-weight: 800;
}

body.web3-pop .recycle-value-card > div small {
    color: #776f98;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

body.web3-pop .recycle-value-card > strong {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #8cf1d1;
    font-size: 21px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(86, 235, 194, .24);
}

body.web3-pop .recycle-value-card > strong > i {
    align-self: center;
    color: #ffe173;
    font-size: 13px;
}

body.web3-pop .recycle-value-card > strong em {
    color: #9c94bc;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

body.web3-pop .recycle-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 11px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 133, 111, .18);
    border-radius: 14px;
    color: #ff9d87;
    background: rgba(255, 94, 94, .07);
    text-align: left;
}

body.web3-pop .recycle-warning > i {
    font-size: 15px;
}

body.web3-pop .recycle-warning > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.web3-pop .recycle-warning strong {
    color: #ffd2c8;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .recycle-warning small {
    color: #8e7c91;
    font-size: 9px;
}

body.web3-pop .recycle-actions {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 10px;
}

body.web3-pop .recycle-actions button {
    min-height: 49px;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 15px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
}

body.web3-pop .recycle-cancel {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #a9a2bf !important;
    background: rgba(255, 255, 255, .055) !important;
}

body.web3-pop .recycle-confirm {
    border: 1px solid rgba(255, 255, 255, .28) !important;
    color: #130e24 !important;
    background: linear-gradient(112deg, #8cf1d1 0%, #a7f6b6 48%, #ffe477 100%) !important;
    box-shadow: 0 12px 26px rgba(105, 237, 196, .2) !important;
}

body.web3-pop .recycle-confirm i {
    margin-right: 4px;
}

/* Five-elements synthesis terminal */
body.web3-pop .compoundhcBox .compoundCont {
    position: relative !important;
    width: min(100%, 410px) !important;
    max-width: 410px !important;
    min-height: 0 !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    padding: 0 14px 14px !important;
    overflow: auto !important;
    border: 1px solid rgba(177, 154, 255, .34) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 85% 0%, rgba(255, 85, 191, .17), transparent 28%),
        radial-gradient(circle at 6% 38%, rgba(63, 221, 231, .1), transparent 31%),
        linear-gradient(155deg, #1d1736 0%, #101020 55%, #0b1420 100%) !important;
    box-shadow:
        0 30px 84px rgba(2, 1, 14, .62),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.web3-pop .compoundhcBox .compoundCont::before {
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #9e8aff, #ff72c8, transparent);
    box-shadow: 0 0 22px rgba(190, 106, 255, .9);
}

body.web3-pop .compoundCont .fusion-dialog-head {
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.web3-pop .fusion-title-copy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
}

body.web3-pop .fusion-title-copy > span {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #9e8cff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
}

body.web3-pop .fusion-title-copy > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6dc4;
    box-shadow: 0 0 12px #ff6dc4;
}

body.web3-pop .fusion-title-copy strong {
    color: #fff;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: 1px;
}

body.web3-pop .compoundCont .fusion-close {
    position: static !important;
    inset: auto !important;
}

body.web3-pop .compoundhcBox .compoundNr {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(151, 130, 243, .18) !important;
    border-radius: 23px !important;
    background:
        linear-gradient(rgba(130, 109, 225, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 109, 225, .045) 1px, transparent 1px),
        rgba(7, 10, 25, .68) !important;
    background-size: 21px 21px, 21px 21px, auto !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.web3-pop .fusion-protocol {
    position: relative;
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 12px 13px 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(167, 141, 255, .2);
    border-radius: 17px;
    background:
        radial-gradient(circle at 90% 50%, rgba(128, 105, 255, .26), transparent 33%),
        linear-gradient(110deg, rgba(113, 83, 210, .17), rgba(48, 203, 219, .07));
}

body.web3-pop .fusion-protocol::after {
    position: absolute;
    right: -34px;
    width: 110px;
    height: 110px;
    content: "";
    border: 1px solid rgba(131, 235, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 12px rgba(146, 107, 255, .05);
}

body.web3-pop .fusion-protocol > div:first-child {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

body.web3-pop .fusion-protocol span {
    color: #8e7deb;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

body.web3-pop .fusion-protocol strong {
    color: #f6f2ff;
    font-size: 15px;
    font-weight: 900;
}

body.web3-pop .fusion-protocol p {
    margin: 1px 0 0;
    color: #837c9b;
    font-size: 9px;
    line-height: 1.35;
}

body.web3-pop .fusion-core {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(168, 148, 255, .44);
    border-radius: 17px;
    color: #bbadff;
    background: rgba(15, 11, 42, .72);
    box-shadow:
        inset 0 0 18px rgba(151, 112, 255, .12),
        0 0 24px rgba(122, 95, 236, .16);
    font-size: 20px;
}

body.web3-pop .compoundNr .heniubox {
    --element: #bda8ff;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    grid-column: span 2;
    width: auto !important;
    min-width: 0 !important;
    height: 126px !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--element) 43%, transparent) !important;
    border-radius: 17px !important;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--element) 19%, transparent), transparent 46%),
        rgba(18, 18, 40, .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 10px 22px rgba(1, 2, 13, .22) !important;
}

body.web3-pop .compoundNr .compounoneBox {
    --element: #ffd56a;
}

body.web3-pop .compoundNr .compountwoBox {
    --element: #72e6a2;
}

body.web3-pop .compoundNr .compounthreeBox {
    --element: #70c9ff;
}

body.web3-pop .compoundNr .compounfourBox {
    --element: #ff718f;
    grid-column: 2 / span 2;
}

body.web3-pop .compoundNr .compounfiveBox {
    --element: #dca86f;
    grid-column: 4 / span 2;
}

body.web3-pop .compoundNr .heniubox::before {
    position: absolute;
    top: 0;
    left: 24%;
    z-index: 2;
    width: 52%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--element), transparent);
    box-shadow: 0 0 10px var(--element);
    pointer-events: none;
}

body.web3-pop .compoundNr .heniubox .manzu,
body.web3-pop .compoundNr .heniubox .bumanzu {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px 7px 7px !important;
}

body.web3-pop .compoundNr .heniubox .manzu {
    background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--element) 19%, transparent), transparent 62%);
}

body.web3-pop .compoundNr .heniubox .bumanzu {
    background: rgba(5, 7, 19, .25);
}

body.web3-pop .compoundNr .heniubox .juesetu {
    position: static !important;
    display: block !important;
    width: 78px !important;
    max-width: calc(100% - 4px) !important;
    height: 78px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .3));
}

body.web3-pop .compoundNr .heniubox .bumanzu .juesetu {
    opacity: .33;
    filter: grayscale(.86) saturate(.45) drop-shadow(0 7px 10px rgba(0, 0, 0, .25));
}

body.web3-pop .compoundNr .heniubox .compotext {
    position: absolute !important;
    right: 6px !important;
    bottom: 7px !important;
    left: 6px !important;
    z-index: 2;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .75);
}

body.web3-pop .compoundNr .fusion-state {
    position: absolute;
    top: 6px;
    right: 5px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 5px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 99px;
    font-size: 6px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .4px;
}

body.web3-pop .compoundNr .fusion-state.ready {
    border-color: color-mix(in srgb, var(--element) 45%, transparent);
    color: var(--element);
    background: rgba(8, 14, 25, .74);
    box-shadow: 0 0 12px color-mix(in srgb, var(--element) 18%, transparent);
}

body.web3-pop .compoundNr .fusion-state.missing {
    color: #716b83;
    background: rgba(8, 9, 18, .72);
}

body.web3-pop .compoundNr .comphchan {
    position: static !important;
    display: block !important;
    grid-column: 1 / -1;
    width: 100% !important;
    height: auto !important;
    margin: 3px 0 0 !important;
}

body.web3-pop .compoundNr .comphchandac {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

body.web3-pop .compoundNr .web3-fusion-button {
    display: grid !important;
    grid-template-columns: 20px auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 54px !important;
    padding: 7px 15px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 16px !important;
    color: #140f27 !important;
    background: linear-gradient(112deg, #a98aff, #df75da 52%, #7de9db) !important;
    box-shadow:
        0 13px 28px rgba(139, 91, 232, .26),
        inset 0 1px 0 rgba(255, 255, 255, .5) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-align: left !important;
    text-shadow: none !important;
}

body.web3-pop .compoundNr .web3-fusion-button > i {
    grid-row: 1 / 3;
    color: #281847;
    font-size: 18px;
}

body.web3-pop .compoundNr .web3-fusion-button b {
    font-size: 14px;
    font-weight: 950;
}

body.web3-pop .compoundNr .web3-fusion-button small {
    color: rgba(23, 13, 43, .58);
    font-size: 6px;
    font-weight: 950;
    letter-spacing: 1.2px;
}

body.web3-pop .compoundNr .web3-fusion-button.disabled {
    border-color: rgba(255, 255, 255, .08) !important;
    color: #777086 !important;
    background: linear-gradient(110deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.web3-pop .compoundNr .web3-fusion-button.disabled > i,
body.web3-pop .compoundNr .web3-fusion-button.disabled small {
    color: #5d586b;
}

@media (max-width: 380px) {
    body.web3-pop .huishouupBox,
    body.web3-pop .compoundhcBox {
        padding: 12px !important;
    }

    body.web3-pop .huishouupBox .recycle-dialog-card {
        padding: 0 14px 14px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .recycle-dialog-top {
        min-height: 68px;
    }

    body.web3-pop .recycle-asset-stage {
        height: 142px;
    }

    body.web3-pop .compoundhcBox .compoundCont {
        padding: 0 10px 10px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .compoundCont .fusion-dialog-head {
        min-height: 66px !important;
    }

    body.web3-pop .compoundhcBox .compoundNr {
        gap: 7px !important;
        padding: 9px !important;
    }

    body.web3-pop .compoundNr .heniubox {
        height: 116px !important;
    }

    body.web3-pop .compoundNr .heniubox .juesetu {
        width: 70px !important;
        height: 70px !important;
    }
}

@media (max-height: 680px) {
    body.web3-pop .huishouupBox .recycle-dialog-card {
        transform: scale(.93);
    }

    body.web3-pop .compoundhcBox .compoundCont {
        transform: scale(.94);
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .recycle-orbit {
        animation: recycle-orbit-spin 12s linear infinite;
    }

    body.web3-pop .fusion-core {
        animation: fusion-core-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes recycle-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fusion-core-pulse {
    50% {
        border-color: rgba(255, 116, 202, .52);
        color: #ff8bd4;
        box-shadow:
            inset 0 0 22px rgba(255, 105, 197, .13),
            0 0 28px rgba(180, 99, 255, .25);
    }
}

/* ==========================================================================
   Random synthesis matrix
   ========================================================================== */

body.web3-pop .huodrandoBox {
    padding: 16px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(112, 83, 255, .28), transparent 34%),
        radial-gradient(circle at 92% 90%, rgba(255, 74, 180, .17), transparent 34%),
        rgba(7, 7, 21, .82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .huodrandoBox .random-fusion-card {
    position: relative;
    width: min(100%, 400px) !important;
    max-width: 400px !important;
    max-height: calc(100vh - 28px) !important;
    margin: auto !important;
    padding: 0 14px 14px !important;
    overflow: auto !important;
    border: 1px solid rgba(177, 154, 255, .38) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 87, 190, .18), transparent 29%),
        radial-gradient(circle at 7% 42%, rgba(78, 218, 232, .09), transparent 34%),
        linear-gradient(154deg, #211a3d 0%, #111024 51%, #0a1420 100%) !important;
    box-shadow:
        0 32px 90px rgba(3, 1, 16, .66),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
    box-sizing: border-box;
}

body.web3-pop .huodrandoBox .random-fusion-card::before {
    position: absolute;
    top: 0;
    left: 16%;
    width: 68%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #a892ff, #ff76c9, transparent);
    box-shadow: 0 0 22px rgba(197, 105, 255, .92);
}

body.web3-pop .random-fusion-head {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0 2px;
}

body.web3-pop .random-fusion-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

body.web3-pop .random-fusion-title > span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: #a493ff !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1.8px !important;
}

body.web3-pop .random-fusion-title > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6eeac9;
    box-shadow: 0 0 12px rgba(110, 234, 201, .95);
}

body.web3-pop .random-fusion-title strong {
    color: #fff;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: 1px;
}

body.web3-pop .random-fusion-close {
    display: grid !important;
    flex: 0 0 auto;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #f8f4ff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    font-size: 17px !important;
}

body.web3-pop .random-fusion-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin: 0 0 10px;
    padding: 9px 11px 9px 13px;
    border: 1px solid rgba(154, 130, 255, .2);
    border-radius: 16px;
    background:
        radial-gradient(circle at 91% 50%, rgba(118, 233, 216, .12), transparent 30%),
        linear-gradient(108deg, rgba(120, 84, 222, .17), rgba(58, 207, 223, .055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.web3-pop .random-fusion-intro > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

body.web3-pop .random-fusion-intro > div span {
    margin: 0 !important;
    color: #8677d4 !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1.4px !important;
}

body.web3-pop .random-fusion-intro > div strong {
    color: #f6f2ff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .random-fusion-intro > small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid rgba(111, 234, 204, .22);
    border-radius: 99px;
    color: #85e9d0;
    background: rgba(10, 28, 37, .56);
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

body.web3-pop #raffle.random-fusion-grid {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(154, 132, 255, .2);
    border-radius: 23px;
    background:
        linear-gradient(rgba(135, 112, 232, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135, 112, 232, .045) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(124, 91, 231, .13), transparent 45%),
        rgba(5, 8, 22, .68);
    background-size: 20px 20px, 20px 20px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    box-sizing: border-box;
}

body.web3-pop #raffle.random-fusion-grid::before {
    position: absolute;
    inset: 9px;
    content: "";
    border: 1px solid rgba(105, 225, 235, .06);
    border-radius: 17px;
    pointer-events: none;
}

body.web3-pop #raffle .raffle-unit {
    position: relative !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    aspect-ratio: 1;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden;
    border: 1px solid rgba(166, 143, 255, .26) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 50% 12%, rgba(153, 112, 255, .19), transparent 52%),
        rgba(18, 15, 43, .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 8px 18px rgba(0, 0, 12, .24) !important;
    box-sizing: border-box;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

body.web3-pop #raffle .raffle-unit::before {
    position: absolute;
    top: 0;
    left: 23%;
    z-index: 3;
    width: 54%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(181, 156, 255, .8), transparent);
}

body.web3-pop #raffle .raffle-unit > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #17112f;
}

body.web3-pop #raffle .raffle-unit .aiyasxbtxBa {
    position: absolute !important;
    right: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    z-index: 4;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
}

body.web3-pop #raffle .raffle-unit .aiyasxbtx {
    display: block !important;
    width: 100%;
    min-width: 0;
    min-height: 20px;
    padding: 4px 3px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px !important;
    color: #f7f2ff !important;
    background: linear-gradient(90deg, rgba(11, 9, 29, .86), rgba(27, 17, 56, .8)) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .32);
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
    white-space: nowrap;
    box-sizing: border-box;
}

body.web3-pop #raffle .raffle-unit-0 {
    grid-area: 1 / 1;
}

body.web3-pop #raffle .raffle-unit-1 {
    grid-area: 1 / 2;
}

body.web3-pop #raffle .raffle-unit-2 {
    grid-area: 1 / 3;
}

body.web3-pop #raffle .raffle-unit-3 {
    grid-area: 1 / 4;
}

body.web3-pop #raffle .raffle-unit-4 {
    grid-area: 2 / 4;
}

body.web3-pop #raffle .raffle-unit-5 {
    grid-area: 3 / 4;
}

body.web3-pop #raffle .raffle-unit-6 {
    grid-area: 4 / 4;
}

body.web3-pop #raffle .raffle-unit-7 {
    grid-area: 4 / 3;
}

body.web3-pop #raffle .raffle-unit-8 {
    grid-area: 4 / 2;
}

body.web3-pop #raffle .raffle-unit-9 {
    grid-area: 4 / 1;
}

body.web3-pop #raffle .raffle-unit-10 {
    grid-area: 3 / 1;
}

body.web3-pop #raffle .raffle-unit-11 {
    grid-area: 2 / 1;
}

body.web3-pop #raffle .random-fusion-action {
    position: relative !important;
    display: block !important;
    grid-area: 2 / 2 / span 2 / span 2;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(180, 151, 255, .36) !important;
    border-radius: 21px !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(141, 100, 255, .23), transparent 47%),
        linear-gradient(148deg, rgba(53, 36, 105, .94), rgba(15, 17, 43, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 14px 30px rgba(5, 2, 19, .35) !important;
}

body.web3-pop #raffle .random-fusion-action::before,
body.web3-pop #raffle .random-fusion-action::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    border: 1px solid rgba(131, 223, 255, .13);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body.web3-pop #raffle .random-fusion-action::before {
    width: 126px;
    height: 126px;
}

body.web3-pop #raffle .random-fusion-action::after {
    width: 98px;
    height: 98px;
    border-color: rgba(255, 110, 198, .13);
}

body.web3-pop #raffle .random-fusion-action > a {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-height: 100% !important;
    padding: 9px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
    box-sizing: border-box;
}

body.web3-pop #raffle .random-fusion-core {
    display: grid !important;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 0 4px !important;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 17px;
    color: #160f2b;
    background: linear-gradient(135deg, #b197ff, #ff78c8 55%, #78ead7);
    box-shadow:
        0 10px 25px rgba(163, 93, 239, .32),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    font-size: 21px !important;
}

body.web3-pop #raffle .random-fusion-action > a > strong {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

body.web3-pop #raffle .random-fusion-action > a > small {
    color: #8f82c9;
    font-size: 6px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 1.25px;
}

body.web3-pop #raffle .random-fusion-action > a > em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(115, 235, 208, .17);
    border-radius: 99px;
    color: #82dfc8;
    background: rgba(8, 27, 36, .48);
    font-size: 7px;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

body.web3-pop #raffle .raffle-unit.niuactive {
    z-index: 8;
    border-color: #83f0d4 !important;
    background: rgba(40, 30, 83, .96) !important;
    box-shadow:
        0 0 0 2px rgba(131, 240, 212, .28),
        0 0 24px rgba(103, 235, 207, .58),
        inset 0 0 18px rgba(132, 240, 217, .14) !important;
    transform: scale(1.055);
}

body.web3-pop #raffle .raffle-unit.niuactive::before {
    right: 5px;
    bottom: 5px;
    left: 5px;
    width: auto;
    height: auto;
    border: 1px solid rgba(145, 255, 226, .66);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(125, 250, 222, .08), transparent);
    box-shadow: inset 0 0 14px rgba(121, 245, 217, .12);
}

body.web3-pop #raffle .raffle-unit.niuactive .aiyasxbtx {
    color: #101e21 !important;
    border-color: rgba(255, 255, 255, .48);
    background: linear-gradient(100deg, #86eed4, #baf589) !important;
    text-shadow: none;
}

body.web3-pop .random-fusion-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 8px 4px 0;
    color: #6f6985;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

body.web3-pop .random-fusion-footnote i {
    color: #8578c2;
}

@media (max-width: 380px) {
    body.web3-pop .huodrandoBox {
        padding: 10px !important;
    }

    body.web3-pop .huodrandoBox .random-fusion-card {
        padding: 0 10px 10px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .random-fusion-head {
        min-height: 68px;
    }

    body.web3-pop #raffle.random-fusion-grid {
        gap: 5px;
        padding: 6px;
        border-radius: 20px;
    }

    body.web3-pop #raffle .raffle-unit {
        padding: 2px !important;
        border-radius: 13px !important;
    }

    body.web3-pop #raffle .raffle-unit > img {
        border-radius: 10px !important;
    }

    body.web3-pop #raffle .raffle-unit .aiyasxbtxBa {
        right: 3px !important;
        bottom: 3px !important;
        left: 3px !important;
    }

    body.web3-pop #raffle .raffle-unit .aiyasxbtx {
        min-height: 17px;
        padding: 3px 2px !important;
        font-size: 8px !important;
    }

    body.web3-pop #raffle .random-fusion-core {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        font-size: 18px !important;
    }
}

@media (max-height: 660px) {
    body.web3-pop .huodrandoBox .random-fusion-card {
        transform: scale(.94);
    }

    body.web3-pop .random-fusion-head {
        min-height: 66px;
    }

    body.web3-pop .random-fusion-intro {
        min-height: 46px;
        margin-bottom: 7px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop #raffle .random-fusion-core {
        animation: random-fusion-core-pulse 2.5s ease-in-out infinite;
    }
}

@keyframes random-fusion-core-pulse {
    50% {
        box-shadow:
            0 12px 32px rgba(255, 105, 199, .4),
            0 0 0 6px rgba(165, 125, 255, .07),
            inset 0 1px 0 rgba(255, 255, 255, .7);
        transform: translateY(-2px);
    }
}

/* ==========================================================================
   Random synthesis result
   ========================================================================== */

body.web3-pop .husuijihdupBox {
    padding: 16px !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(119, 87, 255, .3), transparent 34%),
        radial-gradient(circle at 89% 87%, rgba(255, 75, 183, .18), transparent 34%),
        rgba(7, 7, 21, .82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .husuijihdupBox .random-result-card {
    position: relative;
    width: min(100%, 374px) !important;
    max-width: 374px !important;
    max-height: calc(100vh - 28px) !important;
    margin: auto !important;
    padding: 0 16px 16px !important;
    overflow: auto !important;
    border: 1px solid rgba(185, 164, 255, .4) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 88, 192, .2), transparent 30%),
        radial-gradient(circle at 8% 45%, rgba(77, 224, 233, .1), transparent 35%),
        linear-gradient(154deg, #211a3d 0%, #111024 51%, #0a1420 100%) !important;
    box-shadow:
        0 32px 90px rgba(3, 1, 16, .66),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
    box-sizing: border-box;
}

body.web3-pop .husuijihdupBox .random-result-card::before {
    position: absolute;
    top: 0;
    left: 16%;
    width: 68%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #aa92ff, #ff76c9, transparent);
    box-shadow: 0 0 22px rgba(197, 105, 255, .92);
}

body.web3-pop .random-result-head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0 1px;
}

body.web3-pop .random-result-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

body.web3-pop .random-result-title > span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: #a593ff !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1.8px !important;
}

body.web3-pop .random-result-title > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6feac9;
    box-shadow: 0 0 12px rgba(111, 234, 201, .95);
}

body.web3-pop .random-result-title strong {
    color: #fff;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: 1px;
}

body.web3-pop .random-result-close {
    display: grid !important;
    flex: 0 0 auto;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #f8f4ff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    font-size: 17px !important;
}

body.web3-pop .random-result-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 220px;
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid rgba(160, 137, 255, .24);
    border-radius: 23px;
    background:
        linear-gradient(rgba(139, 115, 235, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 115, 235, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 51%, rgba(146, 100, 255, .32), transparent 46%),
        rgba(6, 9, 24, .72);
    background-size: 22px 22px, 22px 22px, auto, auto;
}

body.web3-pop .random-result-stage::after {
    position: absolute;
    right: 16px;
    bottom: 12px;
    left: 16px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(104, 234, 255, .72), transparent);
    box-shadow: 0 0 14px rgba(104, 234, 255, .55);
}

body.web3-pop .random-result-badge {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 5px 8px;
    border: 1px solid rgba(111, 235, 216, .25);
    border-radius: 99px;
    color: #84ead2 !important;
    background: rgba(8, 25, 35, .7);
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

body.web3-pop .random-result-orbit {
    position: absolute;
    width: 188px;
    height: 188px;
    border: 1px solid rgba(122, 226, 255, .2);
    border-radius: 50%;
    box-shadow:
        0 0 0 12px rgba(151, 107, 255, .045),
        0 0 42px rgba(136, 96, 255, .25);
}

body.web3-pop .random-result-orbit::before,
body.web3-pop .random-result-orbit::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #72e9ff;
    box-shadow: 0 0 12px #72e9ff;
}

body.web3-pop .random-result-orbit::before {
    top: 18px;
    right: 25px;
}

body.web3-pop .random-result-orbit::after {
    bottom: 15px;
    left: 28px;
    background: #ff78cc;
    box-shadow: 0 0 12px #ff78cc;
}

body.web3-pop .random-result-dog-frame {
    position: relative;
    z-index: 3;
    width: 184px;
    height: 184px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .04));
    box-shadow:
        0 18px 38px rgba(3, 1, 18, .48),
        0 0 32px rgba(151, 104, 255, .28);
    box-sizing: border-box;
}

body.web3-pop .random-result-dog-frame .showImg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    object-fit: cover !important;
    object-position: center !important;
    background:
        radial-gradient(circle at 50% 40%, rgba(144, 103, 255, .25), transparent 55%),
        #15102f;
}

body.web3-pop .random-result-spark {
    position: absolute;
    z-index: 4;
    color: #fff;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
}

body.web3-pop .random-result-spark.spark-one {
    top: 28px;
    right: 27px;
    color: #8ee8ff;
    font-size: 15px;
}

body.web3-pop .random-result-spark.spark-two {
    right: 39px;
    bottom: 29px;
    color: #ff91d6;
    font-size: 12px;
}

body.web3-pop .random-result-spark.spark-three {
    bottom: 38px;
    left: 28px;
    color: #b8f48d;
    font-size: 10px;
}

body.web3-pop .random-result-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    text-align: center;
}

body.web3-pop .random-result-identity > span {
    margin: 0 !important;
    color: #81799d !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .4px !important;
}

body.web3-pop .random-result-identity > strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-shadow: 0 0 20px rgba(175, 127, 255, .28);
    white-space: nowrap;
}

body.web3-pop .random-result-identity > small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #74dfc3;
    font-size: 8px;
    font-weight: 800;
}

body.web3-pop .random-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

body.web3-pop .random-result-meta > div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid rgba(158, 136, 255, .18);
    border-radius: 15px;
    background: linear-gradient(110deg, rgba(119, 84, 222, .13), rgba(69, 213, 222, .045));
    box-sizing: border-box;
}

body.web3-pop .random-result-meta > div > i {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(180, 156, 255, .24);
    border-radius: 10px;
    color: #ad99ff;
    background: rgba(18, 14, 45, .7);
    font-size: 12px;
}

body.web3-pop .random-result-meta > div > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 !important;
    color: #827b98 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

body.web3-pop .random-result-meta > div small {
    color: #f4efff;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

body.web3-pop .husuijihdupBox .random-result-confirm {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 16px !important;
    color: #140e27 !important;
    background: linear-gradient(112deg, #a891ff 0%, #e36fd1 52%, #78ead6 100%) !important;
    box-shadow:
        0 14px 30px rgba(142, 91, 235, .28),
        inset 0 1px 0 rgba(255, 255, 255, .54) !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-sizing: border-box;
}

body.web3-pop .husuijihdupBox .random-result-confirm i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(20, 12, 40, .12);
    font-size: 11px;
}

@media (max-width: 380px) {
    body.web3-pop .husuijihdupBox {
        padding: 10px !important;
    }

    body.web3-pop .husuijihdupBox .random-result-card {
        padding: 0 12px 12px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .random-result-head {
        min-height: 68px;
    }

    body.web3-pop .random-result-stage {
        height: 202px;
    }

    body.web3-pop .random-result-dog-frame {
        width: 170px;
        height: 170px;
        border-radius: 27px;
    }

    body.web3-pop .random-result-dog-frame .showImg {
        border-radius: 21px !important;
    }

    body.web3-pop .random-result-orbit {
        width: 175px;
        height: 175px;
    }
}

@media (max-height: 670px) {
    body.web3-pop .husuijihdupBox .random-result-card {
        transform: scale(.94);
    }

    body.web3-pop .random-result-head {
        min-height: 66px;
    }

    body.web3-pop .random-result-stage {
        height: 190px;
        margin-bottom: 9px;
    }

    body.web3-pop .random-result-dog-frame {
        width: 160px;
        height: 160px;
    }

    body.web3-pop .random-result-orbit {
        width: 166px;
        height: 166px;
    }

    body.web3-pop .random-result-identity,
    body.web3-pop .random-result-meta {
        margin-bottom: 9px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .random-result-orbit {
        animation: random-result-orbit-spin 13s linear infinite;
    }

    body.web3-pop .random-result-spark {
        animation: random-result-spark-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes random-result-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes random-result-spark-pulse {
    50% {
        opacity: .35;
        transform: scale(.72);
    }
}

/* ==========================================================================
   Home merge cash reward
   ========================================================================== */

body.web3-pop .mergeredenvpepopBox {
    padding: 16px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(119, 86, 255, .3), transparent 34%),
        radial-gradient(circle at 90% 89%, rgba(255, 74, 181, .18), transparent 34%),
        rgba(6, 6, 19, .84) !important;
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}

body.web3-pop .mergeredenvpepopBox .redenvpepoyin {
    background: transparent !important;
    pointer-events: none;
}

body.web3-pop .mergeredenvpepopBox .merge-reward-card {
    position: relative !important;
    z-index: 540 !important;
    width: min(100%, 366px) !important;
    max-width: 366px !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
    margin: auto !important;
    padding: 0 16px 16px !important;
    overflow: auto !important;
    border: 1px solid rgba(183, 160, 255, .4) !important;
    border-radius: 30px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 88, 190, .2), transparent 30%),
        radial-gradient(circle at 7% 45%, rgba(76, 220, 232, .1), transparent 35%),
        linear-gradient(154deg, #211a3d 0%, #111024 52%, #09131f 100%) !important;
    box-shadow:
        0 32px 90px rgba(3, 1, 16, .68),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
    box-sizing: border-box;
}

body.web3-pop .mergeredenvpepopBox .merge-reward-card::before {
    position: absolute;
    top: 0;
    left: 16%;
    width: 68%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #aa93ff, #ff78ca, transparent);
    box-shadow: 0 0 22px rgba(198, 106, 255, .92);
}

body.web3-pop .merge-reward-head {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    padding: 0 1px;
}

body.web3-pop .merge-reward-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

body.web3-pop .merge-reward-title > span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: #a493ff !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1.8px !important;
}

body.web3-pop .merge-reward-title > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #72e9cb;
    box-shadow: 0 0 12px rgba(114, 233, 203, .95);
}

body.web3-pop .merge-reward-title > strong {
    color: #fff;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: .7px;
}

body.web3-pop .merge-reward-close {
    display: grid !important;
    flex: 0 0 auto;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #f8f4ff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    font-size: 17px !important;
}

body.web3-pop .merge-reward-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 172px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(160, 137, 255, .23);
    border-radius: 22px;
    background:
        linear-gradient(rgba(139, 115, 235, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 115, 235, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 52%, rgba(145, 101, 255, .3), transparent 46%),
        rgba(6, 9, 24, .72);
    background-size: 21px 21px, 21px 21px, auto, auto;
}

body.web3-pop .merge-reward-stage::after {
    position: absolute;
    right: 15px;
    bottom: 11px;
    left: 15px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(105, 234, 255, .7), transparent);
    box-shadow: 0 0 13px rgba(105, 234, 255, .54);
}

body.web3-pop .merge-reward-badge {
    position: absolute;
    z-index: 5;
    top: 11px;
    left: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 5px 8px;
    border: 1px solid rgba(112, 235, 212, .23);
    border-radius: 99px;
    color: #82e8d0 !important;
    background: rgba(7, 27, 35, .68);
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .9px !important;
}

body.web3-pop .merge-reward-orbit {
    position: absolute;
    width: 126px;
    height: 126px;
    border: 1px solid rgba(120, 226, 255, .2);
    border-radius: 50%;
    box-shadow:
        0 0 0 11px rgba(152, 108, 255, .045),
        0 0 38px rgba(135, 96, 255, .24);
}

body.web3-pop .merge-reward-orbit::before,
body.web3-pop .merge-reward-orbit::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #74eaff;
    box-shadow: 0 0 11px #74eaff;
}

body.web3-pop .merge-reward-orbit::before {
    top: 10px;
    right: 18px;
}

body.web3-pop .merge-reward-orbit::after {
    bottom: 9px;
    left: 20px;
    background: #ff7acd;
    box-shadow: 0 0 11px #ff7acd;
}

body.web3-pop .merge-reward-token {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 27px;
    color: #1c1130;
    background: linear-gradient(135deg, #b096ff, #ff79c9 54%, #79ead6);
    box-shadow:
        0 16px 34px rgba(155, 91, 239, .36),
        0 0 0 8px rgba(157, 116, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .68);
    font-size: 34px;
}

body.web3-pop .merge-reward-spark {
    position: absolute;
    z-index: 4;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
}

body.web3-pop .merge-reward-spark.spark-one {
    top: 32px;
    right: 29px;
    color: #8deaff;
    font-size: 14px;
}

body.web3-pop .merge-reward-spark.spark-two {
    right: 42px;
    bottom: 25px;
    color: #ff92d6;
    font-size: 11px;
}

body.web3-pop .merge-reward-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 13px;
    text-align: center;
}

body.web3-pop .merge-reward-copy > span {
    margin: 0 !important;
    color: #817991 !important;
    font-size: 9px !important;
    font-weight: 850 !important;
}

body.web3-pop .merge-reward-copy > strong {
    display: flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    color: #fff;
    font-size: 29px;
    font-weight: 950;
    line-height: 1.15;
    text-shadow: 0 0 22px rgba(176, 129, 255, .3);
}

body.web3-pop .merge-reward-copy > strong b {
    max-width: 250px;
    overflow: hidden;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .merge-reward-copy > strong small {
    color: #887f98;
    font-size: 10px;
}

body.web3-pop .merge-reward-copy > em {
    color: #766e83;
    font-size: 8px;
    font-style: normal;
}

body.web3-pop .merge-reward-status {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    margin-bottom: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(110, 232, 207, .16);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(70, 219, 193, .08), rgba(121, 83, 220, .07));
    text-align: left;
}

body.web3-pop .merge-reward-status > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(111, 232, 208, .22);
    border-radius: 11px;
    color: #76e1c4;
    background: rgba(61, 218, 190, .08);
    font-size: 14px;
}

body.web3-pop .merge-reward-status > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 !important;
}

body.web3-pop .merge-reward-status > span strong {
    color: #f4f0ff;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .merge-reward-status > span small {
    color: #777080;
    font-size: 8px;
}

body.web3-pop .merge-reward-status > b {
    color: #6ddbbd;
    font-size: 6px;
    font-weight: 950;
    letter-spacing: .8px;
}

body.web3-pop .merge-reward-confirm {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    color: #160f2a;
    background: linear-gradient(112deg, #aa93ff, #e270d2 52%, #79e9d5);
    box-shadow:
        0 14px 30px rgba(143, 91, 236, .28),
        inset 0 1px 0 rgba(255, 255, 255, .55);
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
}

body.web3-pop .merge-reward-confirm > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(21, 12, 41, .12);
    font-size: 10px;
}

@media (max-width: 380px) {
    body.web3-pop .mergeredenvpepopBox {
        padding: 10px !important;
    }

    body.web3-pop .mergeredenvpepopBox .merge-reward-card {
        padding: 0 12px 12px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .merge-reward-head {
        min-height: 68px;
    }

    body.web3-pop .merge-reward-stage {
        height: 160px;
    }
}

@media (max-height: 650px) {
    body.web3-pop .mergeredenvpepopBox .merge-reward-card {
        transform: scale(.94);
    }

    body.web3-pop .merge-reward-head {
        min-height: 66px;
    }

    body.web3-pop .merge-reward-stage {
        height: 148px;
        margin-bottom: 9px;
    }

    body.web3-pop .merge-reward-token {
        width: 76px;
        height: 76px;
        border-radius: 23px;
        font-size: 29px;
    }

    body.web3-pop .merge-reward-copy,
    body.web3-pop .merge-reward-status {
        margin-bottom: 9px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .merge-reward-orbit {
        animation: merge-reward-orbit-spin 12s linear infinite;
    }

    body.web3-pop .merge-reward-spark {
        animation: merge-reward-spark-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes merge-reward-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes merge-reward-spark-pulse {
    50% {
        opacity: .36;
        transform: scale(.72);
    }
}

/* ==========================================================================
   Home level milestone cash reward
   ========================================================================== */

body.web3-pop .upgraderedenvpepopBox {
    z-index: 12020 !important;
    padding: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 15% 9%, rgba(128, 88, 255, .31), transparent 35%),
        radial-gradient(circle at 90% 88%, rgba(255, 91, 176, .2), transparent 34%),
        rgba(5, 5, 18, .86) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
}

body.web3-pop .upgraderedenvpepopBox .redenvpepoyin {
    background: transparent !important;
    pointer-events: none;
}

body.web3-pop .upgraderedenvpepopBox .upgrade-reward-card {
    position: relative !important;
    z-index: 540 !important;
    width: min(100%, 366px) !important;
    max-width: 366px !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
    margin: auto !important;
    padding: 0 16px 13px !important;
    overflow: auto !important;
    border: 1px solid rgba(185, 161, 255, .43) !important;
    border-radius: 30px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 91% 2%, rgba(255, 102, 195, .2), transparent 29%),
        radial-gradient(circle at 4% 52%, rgba(106, 231, 222, .1), transparent 32%),
        linear-gradient(154deg, #251c45 0%, #121126 52%, #09151f 100%) !important;
    box-shadow:
        0 32px 90px rgba(3, 1, 16, .7),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    box-sizing: border-box;
}

body.web3-pop .upgraderedenvpepopBox .upgrade-reward-card::before {
    position: absolute;
    top: 0;
    left: 14%;
    width: 72%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #aa93ff, #ff7bc9, transparent);
    box-shadow: 0 0 24px rgba(199, 106, 255, .95);
}

body.web3-pop .upgrade-reward-head {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    padding: 0 1px;
}

body.web3-pop .upgrade-reward-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

body.web3-pop .upgrade-reward-title > span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: #ad9bff !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 1.65px !important;
}

body.web3-pop .upgrade-reward-title > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b8f35b;
    box-shadow: 0 0 12px rgba(184, 243, 91, .9);
}

body.web3-pop .upgrade-reward-title > strong {
    color: #fff;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: .7px;
}

body.web3-pop .upgrade-reward-close {
    display: grid !important;
    flex: 0 0 auto;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #f8f4ff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    font-size: 17px !important;
}

body.web3-pop .upgrade-reward-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 166px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(160, 137, 255, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 54%, rgba(174, 101, 255, .3), transparent 45%),
        linear-gradient(145deg, rgba(34, 27, 68, .55), rgba(6, 13, 28, .82));
}

body.web3-pop .upgrade-reward-grid {
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        linear-gradient(rgba(147, 126, 239, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147, 126, 239, .06) 1px, transparent 1px);
    background-size: 21px 21px;
}

body.web3-pop .upgrade-reward-stage::after {
    position: absolute;
    right: 15px;
    bottom: 11px;
    left: 15px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(183, 243, 91, .72), transparent);
    box-shadow: 0 0 13px rgba(183, 243, 91, .5);
}

body.web3-pop .upgrade-reward-badge {
    position: absolute;
    z-index: 5;
    top: 11px;
    left: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(184, 243, 91, .22);
    border-radius: 99px;
    color: #c8f785 !important;
    background: rgba(17, 34, 28, .7);
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .8px !important;
}

body.web3-pop .upgrade-reward-orbit {
    position: absolute;
    width: 122px;
    height: 122px;
    border: 1px solid rgba(192, 167, 255, .24);
    border-radius: 50%;
    box-shadow:
        0 0 0 11px rgba(168, 112, 255, .05),
        0 0 38px rgba(135, 96, 255, .24);
}

body.web3-pop .upgrade-reward-orbit::before,
body.web3-pop .upgrade-reward-orbit::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #c8f785;
    box-shadow: 0 0 11px #c8f785;
}

body.web3-pop .upgrade-reward-orbit::before {
    top: 10px;
    right: 17px;
}

body.web3-pop .upgrade-reward-orbit::after {
    bottom: 8px;
    left: 21px;
    background: #ff7bc9;
    box-shadow: 0 0 11px #ff7bc9;
}

body.web3-pop .upgrade-reward-token {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 27px;
    color: #201535;
    background: linear-gradient(137deg, #c1a8ff, #ff86cb 53%, #b8f35b);
    box-shadow:
        0 17px 36px rgba(154, 89, 239, .36),
        0 0 0 8px rgba(157, 116, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    font-size: 33px;
    transition: .28s ease;
}

body.web3-pop .upgrade-reward-spark {
    position: absolute;
    z-index: 4;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
}

body.web3-pop .upgrade-reward-spark.spark-one {
    top: 31px;
    right: 30px;
    color: #c8f785;
    font-size: 14px;
}

body.web3-pop .upgrade-reward-spark.spark-two {
    right: 43px;
    bottom: 24px;
    color: #ff91d4;
    font-size: 11px;
}

body.web3-pop .upgrade-reward-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    text-align: center;
}

body.web3-pop .upgrade-reward-copy > span {
    color: #8d849c !important;
    font-size: 9px !important;
    font-weight: 850 !important;
}

body.web3-pop .upgrade-reward-copy > strong {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #fff;
    font-size: 27px;
    font-weight: 950;
    line-height: 1.2;
    text-shadow: 0 0 22px rgba(176, 129, 255, .3);
}

body.web3-pop .upgrade-reward-copy > strong b {
    font-weight: 950;
}

body.web3-pop .upgrade-reward-copy > strong small {
    color: #9890a5;
    font-size: 10px;
}

body.web3-pop .upgrade-reward-copy > em {
    color: #7b7388;
    font-size: 8px;
    font-style: normal;
}

body.web3-pop .upgrade-reward-status {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    margin-bottom: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(184, 243, 91, .16);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(184, 243, 91, .08), rgba(121, 83, 220, .08));
    text-align: left;
}

body.web3-pop .upgrade-reward-status > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(184, 243, 91, .21);
    border-radius: 11px;
    color: #c8f785;
    background: rgba(184, 243, 91, .08);
    font-size: 14px;
}

body.web3-pop .upgrade-reward-status > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

body.web3-pop .upgrade-reward-status > span strong {
    color: #f5f1ff;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .upgrade-reward-status > span small {
    color: #7d7589;
    font-size: 8px;
}

body.web3-pop .upgrade-reward-status > b {
    color: #c8f785;
    font-size: 6px;
    font-weight: 950;
    letter-spacing: .75px;
}

body.web3-pop .upgraderedenvpepopBox .upgrade-reward-confirm {
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
    display: flex !important;
    width: 100% !important;
    height: 52px !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 16px !important;
    color: #1d1431 !important;
    background: linear-gradient(112deg, #b39aff, #ee78c8 52%, #b8f35b) !important;
    box-shadow:
        0 14px 30px rgba(143, 91, 236, .28),
        inset 0 1px 0 rgba(255, 255, 255, .58) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-sizing: border-box;
}

body.web3-pop .upgrade-reward-confirm > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(24, 14, 44, .12);
    font-size: 10px;
}

body.web3-pop .upgrade-reward-loading-icon {
    display: none !important;
}

body.web3-pop .upgrade-reward-security {
    position: static !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    text-align: center;
}

body.web3-pop .upgrade-reward-security .redenvplitixinn {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: #686071 !important;
    background: none !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
}

body.web3-pop .upgrade-reward-security .fa {
    margin-right: 4px;
    color: #827597;
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-loading .upgrade-reward-confirm {
    pointer-events: none;
    filter: saturate(.55);
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-loading .upgrade-reward-button-icon {
    display: none;
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-loading .upgrade-reward-loading-icon {
    display: grid !important;
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-success .upgrade-reward-token {
    color: #15271f;
    background: linear-gradient(140deg, #b8f35b, #70e8b9 58%, #8ce9ef);
    box-shadow: 0 17px 36px rgba(77, 220, 170, .25), 0 0 0 8px rgba(120, 232, 197, .06);
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-success .upgrade-reward-token .fa::before {
    content: "\f00c";
}

body.web3-pop .upgraderedenvpepopBox.upgrade-reward-success .upgrade-reward-status {
    border-color: rgba(103, 229, 190, .22);
    background: linear-gradient(110deg, rgba(72, 220, 183, .1), rgba(121, 83, 220, .07));
}

@media (max-width: 380px) {
    body.web3-pop .upgraderedenvpepopBox {
        padding: 10px !important;
    }

    body.web3-pop .upgraderedenvpepopBox .upgrade-reward-card {
        padding: 0 12px 11px !important;
        border-radius: 26px !important;
    }

    body.web3-pop .upgrade-reward-head {
        min-height: 68px;
    }

    body.web3-pop .upgrade-reward-stage {
        height: 156px;
    }
}

@media (max-height: 650px) {
    body.web3-pop .upgraderedenvpepopBox .upgrade-reward-card {
        transform: scale(.94);
    }

    body.web3-pop .upgrade-reward-head {
        min-height: 65px;
    }

    body.web3-pop .upgrade-reward-stage {
        height: 145px;
        margin-bottom: 9px;
    }

    body.web3-pop .upgrade-reward-copy,
    body.web3-pop .upgrade-reward-status {
        margin-bottom: 9px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .upgraderedenvpepopBox.redenvpepopBoxActive .upgrade-reward-orbit {
        animation: upgrade-reward-orbit-spin 12s linear infinite;
    }

    body.web3-pop .upgraderedenvpepopBox.redenvpepopBoxActive .upgrade-reward-spark {
        animation: merge-reward-spark-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes upgrade-reward-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Profile member level, daily check-in action and reward dialog. */
body.web3-pop .my-info-page .apseuptopdataBox {
    padding: 30px 16px 28px !important;
}

body.web3-pop .my-info-page .apseuptopdataBox > .fx1 {
    padding-right: 8px;
}

body.web3-pop .my-info-page .topdauid {
    max-width: 100%;
    overflow: hidden;
    font-size: 17px !important;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .my-info-page .topdadengj {
    position: relative;
    width: max-content !important;
    min-width: 82px;
    max-width: 100%;
    height: 30px !important;
    margin-top: 6px !important;
    padding: 0 9px 0 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 3px;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 11px !important;
    background: rgba(19, 12, 47, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px rgba(48, 25, 106, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    line-height: 1 !important;
    box-sizing: border-box;
}

body.web3-pop .my-info-page .topdadengj::before {
    content: "◆";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #261840;
    border-radius: 7px;
    background: linear-gradient(145deg, #b8f35b, #64dfbd);
    box-shadow: 0 5px 12px rgba(50, 31, 99, .2), inset 0 1px 0 rgba(255, 255, 255, .55);
    font-size: 9px;
}

body.web3-pop .my-info-page .member-level-mark {
    color: rgba(255, 255, 255, .62) !important;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

body.web3-pop .my-info-page .topdadengj strong {
    color: #fff !important;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
}

body.web3-pop .my-info-page .member-level-name {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    color: #d8ff9b !important;
    font-size: 10px;
    line-height: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .my-info-page .member-level-name::before {
    content: "·";
    margin-right: 3px;
    color: rgba(255, 255, 255, .48);
}

body.web3-pop .my-info-page .my-info-sign {
    flex: 0 0 112px;
    width: 112px;
    height: 48px !important;
    margin: 0 0 0 auto !important;
    padding: 5px 10px 5px 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #211634 !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 16px !important;
    outline: none;
    background: linear-gradient(145deg, #b8f35b, #71e5b8) !important;
    box-shadow: 0 11px 22px rgba(42, 27, 90, .2), inset 0 1px 0 rgba(255, 255, 255, .58) !important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body.web3-pop .my-info-page button.my-info-sign:active {
    transform: translateY(1px) scale(.985);
}

body.web3-pop .my-info-page .member-sign-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border-radius: 12px;
    background: #211634;
    box-shadow: 0 6px 14px rgba(30, 18, 57, .24);
}

body.web3-pop .my-info-page .member-sign-icon .fa {
    color: inherit !important;
    font-size: 16px;
}

body.web3-pop .my-info-page .member-sign-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #211634 !important;
    line-height: 1;
}

body.web3-pop .my-info-page .member-sign-copy small {
    margin-bottom: 3px;
    color: rgba(33, 22, 52, .56) !important;
    font-size: 7px;
    line-height: 8px;
    font-weight: 950;
    letter-spacing: .14em;
}

body.web3-pop .my-info-page .member-sign-copy strong {
    color: #211634 !important;
    font-size: 14px;
    line-height: 16px;
    font-weight: 950;
    white-space: nowrap;
}

body.web3-pop .my-info-page .my-info-sign.is-signed {
    color: #d9d4e8 !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background: rgba(20, 14, 45, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

body.web3-pop .my-info-page .my-info-sign.is-signed .member-sign-icon {
    color: #211634 !important;
    background: #64dfbd;
}

body.web3-pop .my-info-page .my-info-sign.is-signed .member-sign-copy,
body.web3-pop .my-info-page .my-info-sign.is-signed .member-sign-copy strong {
    color: #fff !important;
}

body.web3-pop .my-info-page .my-info-sign.is-signed .member-sign-copy small {
    color: rgba(255, 255, 255, .56) !important;
}

body.web3-pop .sign-reward-modal {
    z-index: 12000 !important;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    box-sizing: border-box;
}

body.web3-pop .sign-reward-modal .redenvpepoyin {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(8, 6, 20, .76) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.web3-pop .sign-reward-modal .redenvpCont {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2;
    width: min(354px, 100%) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 32px);
    margin: 0 !important;
    padding: 22px 20px 18px !important;
    overflow: hidden;
    color: #fff !important;
    border: 1px solid rgba(155, 126, 255, .42) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 88% 4%, rgba(255, 91, 184, .22), transparent 33%),
        radial-gradient(circle at 7% 78%, rgba(100, 223, 189, .18), transparent 34%),
        linear-gradient(155deg, #17122d, #0d0b20 68%, #17102b) !important;
    box-shadow: 0 34px 76px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transform: translateY(16px) scale(.96);
    transition: transform .28s ease;
    box-sizing: border-box;
}

body.web3-pop .sign-reward-modal.redenvpepopBoxActive .redenvpCont {
    transform: translateY(0) scale(1);
}

body.web3-pop .sign-popup-grid {
    position: absolute;
    inset: 0;
    opacity: .09;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .42) 1px, transparent 1px);
    background-size: 31px 31px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body.web3-pop .sign-reward-modal .nvpCodacacaan {
    position: absolute !important;
    top: 14px;
    right: 14px;
    left: auto !important;
    z-index: 5;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}

body.web3-pop .sign-reward-modal .nvpCodacacaan .i {
    color: #fff !important;
    font-size: 28px !important;
    line-height: 36px !important;
}

body.web3-pop .sign-popup-kicker {
    position: relative;
    z-index: 2;
    min-height: 20px;
    padding-right: 48px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8d7cff !important;
    font-size: 9px;
    line-height: 14px;
    font-weight: 950;
    letter-spacing: .18em;
}

body.web3-pop .sign-popup-kicker > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64dfbd;
    box-shadow: 0 0 12px rgba(100, 223, 189, .9);
}

body.web3-pop .sign-reward-orbit {
    position: relative;
    z-index: 2;
    width: 112px;
    height: 112px;
    margin: 15px auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 111, 255, .34);
    border-radius: 50%;
}

body.web3-pop .sign-reward-orbit::before,
body.web3-pop .sign-reward-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

body.web3-pop .sign-reward-orbit::before {
    inset: 10px;
    border: 1px dashed rgba(255, 255, 255, .2);
}

body.web3-pop .sign-reward-orbit::after {
    top: 5px;
    right: 19px;
    width: 8px;
    height: 8px;
    background: #b8f35b;
    box-shadow: 0 0 13px rgba(184, 243, 91, .9);
}

body.web3-pop .sign-reward-core {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 24px;
    background: linear-gradient(145deg, #7355ff, #d75fc2);
    box-shadow: 0 14px 28px rgba(89, 53, 196, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: rotate(-4deg);
}

body.web3-pop .sign-reward-core .fa {
    color: #fff;
    font-size: 32px;
    transform: rotate(4deg);
}

body.web3-pop .sign-reward-modal .redenvcodmss {
    position: relative;
    z-index: 2;
    margin: 0 0 3px !important;
    color: #9a88ff !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 900;
    letter-spacing: .12em;
    text-align: center;
}

body.web3-pop .sign-popup-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 24px;
    line-height: 32px;
    font-weight: 950;
    text-align: center;
}

body.web3-pop .sign-popup-reward {
    position: relative;
    z-index: 2;
    min-height: 58px;
    margin: 11px 0 10px;
    padding: 8px 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    color: #fff;
    border: 1px solid rgba(184, 243, 91, .22);
    border-radius: 18px;
    background: rgba(184, 243, 91, .08);
    box-sizing: border-box;
}

body.web3-pop .sign-popup-reward strong {
    color: #b8f35b;
    font-size: 31px;
    line-height: 38px;
    font-weight: 950;
    letter-spacing: -.03em;
}

body.web3-pop .sign-popup-reward span {
    color: #e8e2f4;
    font-size: 12px;
    font-weight: 800;
}

body.web3-pop .sign-popup-desc {
    position: relative;
    z-index: 2;
    max-width: 272px;
    margin: 0 auto 14px;
    color: #918aa5;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

body.web3-pop .sign-reward-modal .redenvplinan {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff !important;
    border: 0 !important;
    border-radius: 15px !important;
    outline: none;
    background: linear-gradient(105deg, #7355ff, #e55fb4) !important;
    box-shadow: 0 12px 24px rgba(104, 70, 226, .28) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 950;
    letter-spacing: .03em !important;
    box-sizing: border-box;
}

body.web3-pop .sign-reward-modal .redenvplinan .fa {
    color: inherit;
    font-size: 11px;
}

body.web3-pop .sign-reward-modal .redenvplinan.is-loading {
    opacity: .72;
    filter: saturate(.6);
}

body.web3-pop .sign-reward-modal .redenvplitixinBox {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2;
    width: 100% !important;
    margin-top: 10px;
    text-align: center;
}

body.web3-pop .sign-reward-modal .redenvplitixinn {
    height: auto !important;
    padding: 0 !important;
    color: #6f687f !important;
    border: 0 !important;
    background: none !important;
    font-size: 9px !important;
    line-height: 14px !important;
}

body.web3-pop .sign-reward-modal .redenvplitixinn .fa {
    margin-right: 4px;
    color: #64dfbd;
}

body.web3-pop .sign-reward-modal.sign-popup-success .sign-reward-core {
    color: #211634;
    background: linear-gradient(145deg, #b8f35b, #64dfbd);
    box-shadow: 0 14px 28px rgba(78, 208, 170, .24), inset 0 1px 0 rgba(255, 255, 255, .62);
}

body.web3-pop .sign-reward-modal.sign-popup-success .sign-reward-core .fa {
    color: #211634;
}

body.web3-pop .sign-reward-modal.sign-popup-success .redenvplinan {
    color: #211634 !important;
    background: linear-gradient(145deg, #b8f35b, #64dfbd) !important;
    box-shadow: 0 12px 24px rgba(79, 213, 174, .2) !important;
}

@media (max-width: 360px) {
    body.web3-pop .my-info-page .apseuptopdataBox {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.web3-pop .my-info-page .apseuptopdataimg {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        margin-right: 8px;
    }

    body.web3-pop .my-info-page .apseuptopdataBox > .fx1 {
        padding-right: 5px;
    }

    body.web3-pop .my-info-page .my-info-sign {
        flex-basis: 86px;
        width: 86px;
        gap: 5px;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    body.web3-pop .my-info-page .member-sign-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    body.web3-pop .my-info-page .member-sign-copy strong {
        font-size: 12px;
    }

    body.web3-pop .my-info-page .member-sign-copy small {
        letter-spacing: .08em;
    }

    body.web3-pop .my-info-page .topdadengj {
        min-width: 0;
        padding-right: 6px !important;
        padding-left: 28px !important;
        gap: 2px;
    }

    body.web3-pop .my-info-page .topdadengj::before {
        left: 4px;
        top: 5px;
        width: 19px;
        height: 19px;
        border-radius: 6px;
    }

    body.web3-pop .my-info-page .member-level-mark {
        font-size: 7px;
    }

    body.web3-pop .my-info-page .topdadengj strong {
        font-size: 14px;
    }

    body.web3-pop .my-info-page .member-level-name {
        font-size: 9px;
    }
}

@media (max-height: 650px) {
    body.web3-pop .sign-reward-modal .redenvpCont {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    body.web3-pop .sign-reward-orbit {
        width: 92px;
        height: 92px;
        margin-top: 9px;
        margin-bottom: 8px;
    }

    body.web3-pop .sign-reward-core {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    body.web3-pop .sign-popup-reward {
        min-height: 50px;
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.web3-pop .sign-reward-modal.redenvpepopBoxActive .sign-reward-orbit::before {
        animation: sign-reward-orbit-spin 10s linear infinite;
    }
}

@keyframes sign-reward-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Withdrawal center */
body.web3-pop .withdraw-header {
    height: 58px !important;
    padding: 0 12px;
    border-bottom: 1px solid rgba(124, 92, 255, .12) !important;
    background: rgba(250, 248, 255, .92) !important;
    box-shadow: 0 10px 30px rgba(54, 35, 92, .06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .withdraw-header .mui-action-back {
    position: absolute !important;
    top: 9px;
    left: 12px;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 1px solid rgba(124, 92, 255, .15);
    border-radius: 14px;
    background: #fff;
    color: #25183b !important;
    font-size: 21px;
    line-height: 40px;
    margin: 0 !important;
    text-align: center;
    box-shadow: 0 6px 16px rgba(74, 52, 116, .08);
}

body.web3-pop .withdraw-header .mui-title {
    height: 58px;
    color: #211634 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 58px !important;
    letter-spacing: .04em;
}

body.web3-pop .withdraw-history {
    position: absolute;
    z-index: 2;
    top: 11px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(124, 92, 255, .14);
    border-radius: 12px;
    background: #fff;
    color: #635479;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    box-shadow: 0 6px 16px rgba(74, 52, 116, .07);
}

body.web3-pop .withdraw-history i {
    color: #7c5cff;
    font-size: 14px;
}

body.web3-pop .withdraw-page {
    min-height: 100%;
    padding-top: 58px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .16), transparent 28%),
        radial-gradient(circle at 0 33%, rgba(112, 223, 198, .13), transparent 27%),
        linear-gradient(180deg, #fbf8ff 0%, #f4f7ff 55%, #f8fbff 100%) !important;
}

body.web3-pop .withdraw-shell {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 14px 12px 28px;
}

body.web3-pop .withdraw-balance-card {
    position: relative;
    min-height: 184px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 26px;
    background:
        radial-gradient(circle at 86% 18%, rgba(184, 243, 91, .34), transparent 25%),
        radial-gradient(circle at 12% 100%, rgba(255, 114, 182, .35), transparent 36%),
        linear-gradient(135deg, #201438 0%, #432578 52%, #7556df 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(62, 37, 112, .22), inset 0 1px rgba(255, 255, 255, .22);
}

body.web3-pop .withdraw-card-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(100deg, #000, transparent 73%);
    mask-image: linear-gradient(100deg, #000, transparent 73%);
}

body.web3-pop .withdraw-balance-head,
body.web3-pop .withdraw-balance-value,
body.web3-pop .withdraw-balance-foot {
    position: relative;
    z-index: 1;
}

body.web3-pop .withdraw-balance-head,
body.web3-pop .withdraw-balance-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.web3-pop .withdraw-eyebrow,
body.web3-pop .withdraw-panel-kicker {
    display: block;
    color: #b8f35b;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .18em;
}

body.web3-pop .withdraw-balance-label {
    margin-top: 5px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 700;
}

body.web3-pop .withdraw-secure {
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    background: rgba(17, 11, 34, .2);
    color: rgba(255, 255, 255, .78);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    gap: 6px;
}

body.web3-pop .withdraw-secure span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70dfc6;
    box-shadow: 0 0 0 4px rgba(112, 223, 198, .13), 0 0 12px rgba(112, 223, 198, .65);
}

body.web3-pop .withdraw-balance-value {
    display: flex;
    align-items: baseline;
    margin: 13px 0 15px;
    white-space: nowrap;
}

body.web3-pop .withdraw-currency {
    margin-right: 7px;
    color: #b8f35b;
    font-size: 22px;
    font-weight: 900;
}

body.web3-pop .withdraw-balance-value strong {
    max-width: calc(100% - 36px);
    overflow: hidden;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: clamp(34px, 10vw, 46px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
}

body.web3-pop .withdraw-network-chip,
body.web3-pop .withdraw-round {
    display: inline-flex;
    align-items: center;
    height: 30px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .withdraw-network-chip {
    padding: 0 10px 0 7px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    gap: 6px;
}

body.web3-pop .withdraw-network-chip img {
    width: 18px;
    height: 18px;
}

body.web3-pop .withdraw-round {
    padding: 0 11px;
    background: #b8f35b;
    color: #2d2440;
}

body.web3-pop .withdraw-progress {
    display: flex;
    align-items: center;
    margin: 12px 0;
    padding: 13px 11px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 24px rgba(74, 52, 116, .06);
}

body.web3-pop .withdraw-progress-item {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #aaa1b8;
    gap: 6px;
}

body.web3-pop .withdraw-progress-item > span {
    display: flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5def2;
    border-radius: 9px;
    background: #faf8fd;
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .withdraw-progress-item div {
    min-width: 0;
}

body.web3-pop .withdraw-progress-item strong,
body.web3-pop .withdraw-progress-item small {
    display: block;
    white-space: nowrap;
}

body.web3-pop .withdraw-progress-item strong {
    color: #6e637f;
    font-size: 9px;
    line-height: 1.25;
}

body.web3-pop .withdraw-progress-item small {
    margin-top: 2px;
    font-size: 7px;
}

body.web3-pop .withdraw-progress-item.is-active > span {
    border-color: #7c5cff;
    background: #7c5cff;
    color: #fff;
    box-shadow: 0 5px 12px rgba(124, 92, 255, .25);
}

body.web3-pop .withdraw-progress-item.is-active strong {
    color: #2c2041;
}

body.web3-pop .withdraw-progress-line {
    flex: 1;
    height: 1px;
    min-width: 7px;
    margin: 0 6px;
    background: linear-gradient(90deg, #cdbfff, #e7e0ef);
}

body.web3-pop .withdraw-form {
    margin: 0;
}

body.web3-pop .withdraw-panel,
body.web3-pop .withdraw-note-panel {
    margin-bottom: 12px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(61, 42, 96, .07);
}

body.web3-pop .withdraw-panel {
    padding: 17px 15px;
}

body.web3-pop .withdraw-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

body.web3-pop .withdraw-panel-kicker {
    color: #8a73ed;
    font-size: 8px;
}

body.web3-pop .withdraw-panel-head h2 {
    margin: 4px 0 0;
    color: #211634;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .withdraw-manage {
    display: inline-flex;
    align-items: center;
    height: 31px;
    padding: 0 10px;
    border: 1px solid #e5dcff;
    border-radius: 10px;
    background: #f7f3ff;
    color: #6c55c8;
    font-size: 10px;
    font-weight: 800;
    gap: 5px;
}

body.web3-pop .withdraw-page .withdraw-method-list {
    padding: 0;
}

body.web3-pop .withdraw-page .withdraw-method {
    display: flex;
    width: 100%;
    height: 70px;
    min-height: 70px;
    align-items: center;
    margin: 0 0 9px;
    padding: 10px 12px !important;
    border: 1px solid #ddd4f5 !important;
    border-radius: 17px !important;
    background: linear-gradient(105deg, #fbf9ff, #f4fbff) !important;
    text-align: left;
    box-shadow: none !important;
}

body.web3-pop .withdraw-page .withdraw-method:last-child {
    margin-bottom: 0;
}

body.web3-pop .withdraw-page .withdraw-method.nagesCtxfsHeActive {
    border-color: rgba(124, 92, 255, .65) !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .09) !important;
}

body.web3-pop .withdraw-method-logo {
    display: flex;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 17px rgba(47, 166, 135, .12);
}

body.web3-pop .withdraw-method-logo img {
    width: 30px;
    height: 30px;
}

body.web3-pop .withdraw-method-copy {
    min-width: 0;
    margin-left: 11px;
}

body.web3-pop .withdraw-method-copy strong,
body.web3-pop .withdraw-method-copy small {
    display: block;
}

body.web3-pop .withdraw-method-copy strong {
    color: #241938;
    font-size: 15px;
    font-weight: 900;
}

body.web3-pop .withdraw-method-copy small {
    margin-top: 4px;
    color: #9a90aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
}

body.web3-pop .withdraw-page .withdraw-method-check {
    position: static;
    display: flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    border-radius: 9px;
    background: #70dfc6;
    color: #1e594d;
    font-size: 11px;
    box-shadow: 0 5px 12px rgba(112, 223, 198, .25);
}

body.web3-pop .withdraw-page .withdraw-method-check::before {
    content: none !important;
}

body.web3-pop .withdraw-page .withdraw-method:not(.nagesCtxfsHeActive) .withdraw-method-check {
    display: none;
}

body.web3-pop .withdraw-page .withdraw-method.nagesCtxfsHeActive .withdraw-method-check {
    display: flex;
}

body.web3-pop .withdraw-channel-tip {
    display: flex;
    align-items: flex-start;
    margin-top: 11px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #f8f6fc;
    color: #847991;
    font-size: 9px;
    line-height: 1.55;
    gap: 7px;
}

body.web3-pop .withdraw-channel-tip i {
    margin-top: 2px;
    color: #8b70ef;
}

body.web3-pop .withdraw-tier-index {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 9px;
    background: #211634;
    color: #b8f35b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

body.web3-pop .withdraw-page .carryPanel.withdraw-tier-card {
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 15px !important;
    overflow: hidden;
    border: 1px solid rgba(124, 92, 255, .16) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 95% 5%, rgba(184, 243, 91, .22), transparent 28%),
        linear-gradient(145deg, #f7f3ff, #f4fcff) !important;
    color: #211634 !important;
    box-shadow: inset 0 1px #fff !important;
}

body.web3-pop .withdraw-page .carryPanel.withdraw-tier-card.is-locked {
    filter: none;
    opacity: .78;
}

body.web3-pop .withdraw-tier-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.web3-pop .withdraw-tier-status {
    display: inline-flex;
    align-items: center;
    color: #867b96;
    font-size: 10px;
    font-weight: 900;
    gap: 7px;
}

body.web3-pop .withdraw-tier-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb2c8;
}

body.web3-pop .withdraw-tier-status.is-ready {
    color: #277967;
}

body.web3-pop .withdraw-tier-status.is-ready span {
    background: #64dfbd;
    box-shadow: 0 0 0 4px rgba(100, 223, 189, .15);
}

body.web3-pop .withdraw-tier-code {
    color: rgba(72, 56, 102, .32);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

body.web3-pop .withdraw-tier-amount {
    display: flex;
    align-items: baseline;
    margin: 10px 0 13px;
}

body.web3-pop .withdraw-tier-amount span {
    margin-right: 5px;
    color: #7c5cff;
    font-size: 19px;
    font-weight: 900;
}

body.web3-pop .withdraw-tier-amount strong {
    color: #211634;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
}

body.web3-pop .withdraw-tier-amount small {
    margin-left: 7px;
    color: #968ba6;
    font-size: 9px;
    font-weight: 800;
}

body.web3-pop .withdraw-tier-divider {
    height: 1px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, 0));
}

body.web3-pop .withdraw-tier-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.web3-pop .withdraw-tier-meta-item {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
}

body.web3-pop .withdraw-tier-meta-item small,
body.web3-pop .withdraw-tier-meta-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .withdraw-tier-meta-item small {
    color: #a398b1;
    font-size: 8px;
}

body.web3-pop .withdraw-tier-meta-item strong {
    margin-top: 4px;
    color: #45375d;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .withdraw-tier-message {
    display: flex;
    align-items: center;
    margin-top: 10px;
    color: #736881;
    font-size: 9px;
    line-height: 1.45;
    gap: 6px;
}

body.web3-pop .withdraw-tier-message i {
    color: #64cfae;
    font-size: 12px;
}

body.web3-pop .withdraw-empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed #dcd2f4;
    border-radius: 18px;
    background: #faf8fe;
    color: #8f849d;
}

body.web3-pop .withdraw-empty > span {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 14px;
    background: #eee8ff;
    color: #7c5cff;
    font-size: 18px;
}

body.web3-pop .withdraw-empty strong {
    color: #493d5e;
    font-size: 13px;
}

body.web3-pop .withdraw-empty small {
    margin-top: 5px;
    font-size: 9px;
}

body.web3-pop .withdraw-note-panel {
    display: flex;
    align-items: flex-start;
    padding: 13px 14px;
    background: linear-gradient(105deg, #fffdf5, #fff9ee);
    border-color: rgba(232, 190, 89, .2);
    gap: 10px;
}

body.web3-pop .withdraw-note-icon {
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff0bb;
    color: #c88c16;
    font-size: 15px;
}

body.web3-pop .withdraw-note-panel strong {
    color: #4a3b26;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .withdraw-note-panel p {
    margin: 4px 0 0;
    color: #88775c;
    font-size: 9px;
    line-height: 1.55;
}

body.web3-pop .withdraw-submit-area {
    padding: 1px 0 0;
}

body.web3-pop .withdraw-page .carrySubmit {
    display: flex;
    width: 100%;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: #d8d2df !important;
    color: #8e8599 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    gap: 9px;
}

body.web3-pop .withdraw-page .carrySubmit.nagesbtnActive {
    background: linear-gradient(105deg, #7c5cff, #c25fd4 60%, #ff72b6) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(150, 82, 203, .25), 0 5px 0 rgba(85, 57, 151, .15) !important;
}

body.web3-pop .withdraw-page .carrySubmit i {
    font-size: 12px;
    transition: transform .2s ease;
}

body.web3-pop .withdraw-page .carrySubmit.nagesbtnActive:active {
    transform: translateY(2px);
    box-shadow: 0 7px 16px rgba(150, 82, 203, .22), 0 2px 0 rgba(85, 57, 151, .15) !important;
}

body.web3-pop .withdraw-page .carrySubmit.nagesbtnActive:active i {
    transform: translateX(3px);
}

body.web3-pop .withdraw-page .carrySubmit.is-loading {
    opacity: .78;
    pointer-events: none;
}

body.web3-pop .withdraw-page .carrySubmit.is-loading i {
    animation: withdraw-submit-spin .8s linear infinite;
}

body.web3-pop .withdraw-submit-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 4px 2px;
    color: #a298ae;
    font-size: 8px;
    line-height: 1.35;
    text-align: center;
    gap: 5px;
}

@keyframes withdraw-submit-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 360px) {
    body.web3-pop .withdraw-header .mui-title {
        text-align: left;
        padding-left: 48px;
    }

    body.web3-pop .withdraw-history span {
        display: none;
    }

    body.web3-pop .withdraw-history {
        width: 36px;
        justify-content: center;
        padding: 0;
    }

    body.web3-pop .withdraw-shell {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .withdraw-balance-card {
        min-height: 172px;
        padding: 18px;
        border-radius: 23px;
    }

    body.web3-pop .withdraw-progress {
        padding-right: 9px;
        padding-left: 9px;
    }

    body.web3-pop .withdraw-progress-item div {
        display: none;
    }

    body.web3-pop .withdraw-progress-line {
        margin-right: 8px;
        margin-left: 8px;
    }

    body.web3-pop .withdraw-panel {
        padding: 15px 13px;
    }

    body.web3-pop .withdraw-tier-meta-item {
        padding-right: 8px;
        padding-left: 8px;
    }

    body.web3-pop .withdraw-tier-meta-item strong {
        font-size: 9px;
    }
}

/* Identity verification */
body.web3-pop .auth-header {
    height: 58px !important;
    padding: 0 12px;
    border-bottom: 1px solid rgba(124, 92, 255, .12) !important;
    background: rgba(250, 248, 255, .92) !important;
    box-shadow: 0 10px 30px rgba(54, 35, 92, .06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web3-pop .auth-header .mui-action-back {
    position: absolute !important;
    top: 9px;
    left: 12px;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(124, 92, 255, .15);
    border-radius: 14px;
    background: #fff;
    color: #25183b !important;
    font-size: 21px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(74, 52, 116, .08);
}

body.web3-pop .auth-header .mui-title {
    height: 58px;
    color: #211634 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 58px !important;
    letter-spacing: .04em;
}

body.web3-pop .auth-header-secure {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    height: 34px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(100, 223, 189, .22);
    border-radius: 11px;
    background: #effcf8;
    color: #397b69;
    font-size: 9px;
    font-weight: 900;
    gap: 5px;
}

body.web3-pop .auth-header-secure i {
    color: #44b796;
    font-size: 11px;
}

body.web3-pop .auth-page {
    min-height: 100%;
    padding-top: 58px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .15), transparent 26%),
        radial-gradient(circle at 0 31%, rgba(112, 223, 198, .13), transparent 25%),
        linear-gradient(180deg, #fbf8ff 0%, #f4f7ff 54%, #f8fbff 100%) !important;
}

body.web3-pop .auth-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 12px 28px;
}

body.web3-pop .auth-hero {
    position: relative;
    min-height: 190px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 27px;
    background:
        radial-gradient(circle at 88% 16%, rgba(184, 243, 91, .3), transparent 25%),
        radial-gradient(circle at 10% 110%, rgba(255, 114, 182, .34), transparent 39%),
        linear-gradient(135deg, #201438 0%, #432578 52%, #7556df 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(62, 37, 112, .22), inset 0 1px rgba(255, 255, 255, .22);
}

body.web3-pop .auth-hero.is-verified {
    background:
        radial-gradient(circle at 88% 16%, rgba(184, 243, 91, .35), transparent 27%),
        radial-gradient(circle at 6% 110%, rgba(100, 223, 189, .28), transparent 38%),
        linear-gradient(135deg, #19142d 0%, #302466 48%, #5f4bd0 100%);
}

body.web3-pop .auth-hero.is-rejected {
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 204, 102, .35), transparent 27%),
        radial-gradient(circle at 4% 110%, rgba(255, 114, 182, .36), transparent 38%),
        linear-gradient(135deg, #29152c 0%, #5c2a61 50%, #8151bc 100%);
}

body.web3-pop .auth-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(100deg, #000, transparent 72%);
    mask-image: linear-gradient(100deg, #000, transparent 72%);
}

body.web3-pop .auth-hero-orbit {
    position: absolute;
    top: -64px;
    right: -48px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
}

body.web3-pop .auth-hero-orbit::before,
body.web3-pop .auth-hero-orbit::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

body.web3-pop .auth-hero-orbit::before {
    inset: 19px;
}

body.web3-pop .auth-hero-orbit::after {
    inset: 42px;
}

body.web3-pop .auth-hero-orbit span {
    position: absolute;
    top: 68px;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b8f35b;
    box-shadow: 0 0 16px rgba(184, 243, 91, .8);
}

body.web3-pop .auth-hero-content,
body.web3-pop .auth-hero-foot {
    position: relative;
    z-index: 1;
}

body.web3-pop .auth-hero-content {
    display: flex;
    min-height: 102px;
    align-items: center;
    gap: 14px;
}

body.web3-pop .auth-hero-icon {
    display: flex;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 22px;
    background: rgba(255, 255, 255, .12);
    color: #b8f35b;
    font-size: 28px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 12px 24px rgba(16, 8, 34, .18);
}

body.web3-pop .auth-hero.is-rejected .auth-hero-icon {
    color: #ffd275;
}

body.web3-pop .auth-hero-copy {
    min-width: 0;
}

body.web3-pop .auth-eyebrow,
body.web3-pop .auth-panel-kicker {
    display: block;
    color: #b8f35b;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .15em;
}

body.web3-pop .auth-hero-copy h2 {
    margin: 6px 0 5px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
}

body.web3-pop .auth-hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 10px;
    line-height: 1.5;
}

body.web3-pop .auth-hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 11px;
}

body.web3-pop .auth-status-pill,
body.web3-pop .auth-encryption {
    display: inline-flex;
    align-items: center;
    height: 29px;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .auth-status-pill {
    padding: 0 10px;
    background: #b8f35b;
    color: #2e2441;
    letter-spacing: .05em;
    gap: 6px;
}

body.web3-pop .auth-status-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3f876b;
}

body.web3-pop .auth-hero.is-rejected .auth-status-pill {
    background: #ffd275;
}

body.web3-pop .auth-encryption {
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(17, 11, 34, .2);
    color: rgba(255, 255, 255, .68);
    letter-spacing: .08em;
    gap: 5px;
}

body.web3-pop .auth-progress {
    display: flex;
    align-items: center;
    margin: 12px 0;
    padding: 13px 14px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 24px rgba(74, 52, 116, .06);
}

body.web3-pop .auth-progress-item {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #aaa1b8;
    gap: 7px;
}

body.web3-pop .auth-progress-item > span {
    display: flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4ddef;
    border-radius: 9px;
    background: #faf8fd;
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .auth-progress-item strong {
    color: #7c718d;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

body.web3-pop .auth-progress-item.is-active > span {
    border-color: #7c5cff;
    background: #7c5cff;
    color: #fff;
    box-shadow: 0 5px 12px rgba(124, 92, 255, .22);
}

body.web3-pop .auth-progress-item.is-active strong {
    color: #302344;
}

body.web3-pop .auth-progress > i {
    flex: 1;
    height: 1px;
    min-width: 9px;
    margin: 0 8px;
    background: linear-gradient(90deg, #cbbdff, #e7e0ef);
}

body.web3-pop .auth-form {
    margin: 0;
}

body.web3-pop .auth-panel,
body.web3-pop .auth-guide,
body.web3-pop .auth-reject-note {
    margin-bottom: 12px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 12px 28px rgba(61, 42, 96, .07);
}

body.web3-pop .auth-panel {
    padding: 17px 15px;
}

body.web3-pop .auth-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

body.web3-pop .auth-panel-kicker {
    color: #8a73ed;
}

body.web3-pop .auth-panel-head h2 {
    margin: 4px 0 0;
    color: #211634;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .auth-required,
body.web3-pop .auth-file-hint {
    display: inline-flex;
    height: 27px;
    align-items: center;
    padding: 0 9px;
    border-radius: 9px;
    background: #f6f2ff;
    color: #76658e;
    font-size: 8px;
    font-weight: 800;
}

body.web3-pop .auth-required {
    gap: 5px;
}

body.web3-pop .auth-required i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff72b6;
}

body.web3-pop .auth-file-hint {
    color: #4d927f;
    background: #eefbf7;
    letter-spacing: .06em;
}

body.web3-pop .auth-field {
    display: block;
    margin: 0 0 12px;
}

body.web3-pop .auth-field:last-child {
    margin-bottom: 0;
}

body.web3-pop .auth-field-label {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    color: #534663;
    font-size: 10px;
    font-weight: 900;
    gap: 6px;
}

body.web3-pop .auth-field-label > i {
    width: 14px;
    color: #8068df;
    font-size: 11px;
    text-align: center;
}

body.web3-pop .auth-field-label em {
    color: #ff6bab;
    font-style: normal;
}

body.web3-pop .auth-input-wrap {
    position: relative;
    display: block;
}

body.web3-pop .auth-page .auth-input-wrap .muiInput,
body.web3-pop .auth-page .auth-input-wrap select.muiInput {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 42px 0 13px !important;
    border: 1px solid #e2daef !important;
    border-radius: 14px !important;
    background: linear-gradient(105deg, #fcfbff, #f7faff) !important;
    color: #2d223e !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 48px;
    box-shadow: inset 0 1px #fff !important;
}

body.web3-pop .auth-page .auth-input-wrap .muiInput:focus {
    border-color: #8e76ef !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .09) !important;
}

body.web3-pop .auth-form.is-locked .auth-input-wrap .muiInput {
    background: #f5f4f8 !important;
    color: #756b80 !important;
    -webkit-text-fill-color: #756b80;
    opacity: 1;
}

body.web3-pop .auth-form.is-locked .auth-input-wrap input[type='password'] {
    letter-spacing: .12em;
}

body.web3-pop .auth-field-state,
body.web3-pop .auth-select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #64cfae;
    font-size: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}

body.web3-pop .auth-select-arrow {
    color: #8b7b9c;
}

body.web3-pop .auth-page .auth-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
}

body.web3-pop .auth-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.web3-pop .auth-upload-card {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #ded5f1;
    border-radius: 16px;
    background: linear-gradient(145deg, #faf8ff, #f5fbff);
    text-align: left;
    box-shadow: inset 0 1px #fff;
}

body.web3-pop .auth-upload-card:not(.is-locked):active {
    border-color: #8d75ed;
    transform: translateY(1px);
}

body.web3-pop .auth-upload-selfie {
    grid-column: 1 / -1;
}

body.web3-pop .auth-upload-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

body.web3-pop .auth-upload-top strong {
    overflow: hidden;
    color: #413550;
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .auth-upload-top em {
    flex: 0 0 auto;
    margin-left: 5px;
    padding: 3px 5px;
    border-radius: 6px;
    background: #ffe6f2;
    color: #c04f87;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
}

body.web3-pop .auth-upload-top em.is-optional {
    background: #eaf9f5;
    color: #398571;
}

body.web3-pop .auth-upload-preview {
    position: relative;
    display: block;
    width: 100%;
    height: 104px;
    overflow: hidden;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 12px;
    background: #eeebf6;
}

body.web3-pop .auth-upload-selfie .auth-upload-preview {
    height: 128px;
}

body.web3-pop .auth-upload-preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.web3-pop .auth-upload-card.is-locked .auth-upload-preview > img {
    filter: blur(5px) brightness(.58) saturate(.7);
    transform: scale(1.06);
}

body.web3-pop .auth-upload-cover,
body.web3-pop .auth-vault-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #76658e;
    gap: 5px;
}

body.web3-pop .auth-upload-cover {
    background: rgba(248, 246, 253, .78);
}

body.web3-pop .auth-upload-cover i {
    display: flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: #7c5cff;
    font-size: 13px;
    box-shadow: 0 6px 15px rgba(74, 52, 116, .1);
}

body.web3-pop .auth-upload-cover small,
body.web3-pop .auth-vault-cover small {
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .auth-vault-cover {
    background: rgba(27, 19, 48, .54);
    color: #fff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body.web3-pop .auth-vault-cover i {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(184, 243, 91, .95);
    color: #314526;
    font-size: 12px;
    box-shadow: 0 0 18px rgba(184, 243, 91, .25);
}

body.web3-pop .auth-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

body.web3-pop .auth-guide,
body.web3-pop .auth-reject-note {
    display: flex;
    align-items: flex-start;
    padding: 14px;
    gap: 11px;
}

body.web3-pop .auth-guide {
    border-color: rgba(232, 190, 89, .2);
    background: linear-gradient(105deg, #fffdf5, #fff9ee);
}

body.web3-pop .auth-guide-icon,
body.web3-pop .auth-reject-note > span {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 15px;
}

body.web3-pop .auth-guide-icon {
    background: #fff0bb;
    color: #c88c16;
}

body.web3-pop .auth-guide strong,
body.web3-pop .auth-reject-note strong {
    color: #4a3b26;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .auth-guide ul {
    margin: 5px 0 0;
    padding-left: 14px;
    color: #88775c;
    font-size: 9px;
    line-height: 1.65;
}

body.web3-pop .auth-reject-note {
    border-color: rgba(242, 108, 155, .2);
    background: #fff5f8;
}

body.web3-pop .auth-reject-note > span {
    background: #ffe0eb;
    color: #c84f7c;
}

body.web3-pop .auth-reject-note strong {
    color: #7d3150;
}

body.web3-pop .auth-reject-note p {
    margin: 4px 0 0;
    color: #9c6076;
    font-size: 9px;
    line-height: 1.5;
}

body.web3-pop .auth-submit-area {
    padding-top: 1px;
}

body.web3-pop .auth-submit {
    display: flex;
    width: 100%;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(105deg, #7c5cff, #c25fd4 60%, #ff72b6);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(150, 82, 203, .25), 0 5px 0 rgba(85, 57, 151, .15);
    gap: 9px;
}

body.web3-pop .auth-submit.is-verified {
    background: linear-gradient(105deg, #42b997, #65d7b8) !important;
    color: #fff;
    opacity: 1;
    box-shadow: 0 12px 24px rgba(65, 181, 150, .2), 0 5px 0 rgba(38, 121, 100, .12);
}

body.web3-pop .auth-submit.is-reviewing {
    background: linear-gradient(105deg, #8c7dad, #aa98ce) !important;
    color: #fff;
    opacity: 1;
    box-shadow: 0 12px 24px rgba(94, 76, 126, .14), 0 5px 0 rgba(59, 44, 87, .1);
}

body.web3-pop .auth-submit.is-loading {
    opacity: .78;
    pointer-events: none;
}

body.web3-pop .auth-submit.is-loading i {
    animation: auth-submit-spin .8s linear infinite;
}

body.web3-pop .auth-submit-area > p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11px 3px 1px;
    color: #a097ab;
    font-size: 8px;
    line-height: 1.4;
    text-align: center;
    gap: 5px;
}

@keyframes auth-submit-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 360px) {
    body.web3-pop .auth-header .mui-title {
        padding-left: 48px;
        text-align: left;
    }

    body.web3-pop .auth-header-secure span {
        display: none;
    }

    body.web3-pop .auth-header-secure {
        width: 34px;
        justify-content: center;
        padding: 0;
    }

    body.web3-pop .auth-shell {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .auth-hero {
        min-height: 180px;
        padding: 18px;
        border-radius: 24px;
    }

    body.web3-pop .auth-hero-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        border-radius: 18px;
        font-size: 23px;
    }

    body.web3-pop .auth-hero-copy h2 {
        font-size: 17px;
    }

    body.web3-pop .auth-encryption {
        display: none;
    }

    body.web3-pop .auth-progress {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .auth-progress-item {
        gap: 4px;
    }

    body.web3-pop .auth-progress-item strong {
        font-size: 8px;
    }

    body.web3-pop .auth-progress > i {
        margin-right: 5px;
        margin-left: 5px;
    }

    body.web3-pop .auth-panel {
        padding: 15px 13px;
    }

    body.web3-pop .auth-upload-grid {
        gap: 8px;
    }

    body.web3-pop .auth-upload-card {
        padding: 8px;
    }

    body.web3-pop .auth-upload-top strong {
        font-size: 8px;
    }
}

/* Registration onboarding */
body.web3-pop .register-page {
    position: relative;
    min-height: 100%;
    padding: 0 !important;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .2), transparent 28%),
        radial-gradient(circle at 0 32%, rgba(112, 223, 198, .17), transparent 28%),
        linear-gradient(180deg, #faf7ff 0%, #f3f6ff 52%, #f8fbff 100%) !important;
}

body.web3-pop .register-glow {
    position: absolute;
    border-radius: 50%;
    opacity: .34;
    filter: blur(3px);
    pointer-events: none;
}

body.web3-pop .register-glow-one {
    top: 260px;
    right: -72px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(124, 92, 255, .32), rgba(124, 92, 255, 0) 70%);
}

body.web3-pop .register-glow-two {
    top: 720px;
    left: -80px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(100, 223, 189, .3), rgba(100, 223, 189, 0) 70%);
}

body.web3-pop .register-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 12px 28px;
}

body.web3-pop .register-nav {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

body.web3-pop .register-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

body.web3-pop .register-brand-mark {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 12px;
    background: linear-gradient(145deg, #7c5cff, #bc63d5);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(124, 92, 255, .2), inset 0 1px rgba(255, 255, 255, .28);
}

body.web3-pop .register-brand-copy {
    min-width: 0;
}

body.web3-pop .register-brand-copy strong,
body.web3-pop .register-brand-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .register-brand-copy strong {
    max-width: 180px;
    color: #261a3a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .register-brand-copy small {
    margin-top: 3px;
    color: #9a8da9;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

body.web3-pop .register-login-link {
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .82);
    color: #6c55c8;
    font-size: 10px;
    font-weight: 900;
    gap: 6px;
    box-shadow: 0 7px 16px rgba(74, 52, 116, .07);
}

body.web3-pop .register-login-link i {
    font-size: 9px;
}

body.web3-pop .register-hero {
    position: relative;
    min-height: 200px;
    padding: 22px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 12%, rgba(184, 243, 91, .32), transparent 27%),
        radial-gradient(circle at 10% 115%, rgba(255, 114, 182, .36), transparent 40%),
        linear-gradient(135deg, #201438 0%, #432578 52%, #7556df 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(62, 37, 112, .22), inset 0 1px rgba(255, 255, 255, .22);
}

body.web3-pop .register-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(100deg, #000, transparent 73%);
    mask-image: linear-gradient(100deg, #000, transparent 73%);
}

body.web3-pop .register-hero-orbit {
    position: absolute;
    top: -72px;
    right: -42px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
}

body.web3-pop .register-hero-orbit::before,
body.web3-pop .register-hero-orbit::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

body.web3-pop .register-hero-orbit::before {
    inset: 20px;
}

body.web3-pop .register-hero-orbit::after {
    inset: 47px;
}

body.web3-pop .register-hero-orbit > i {
    position: absolute;
    top: 74px;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b8f35b;
    box-shadow: 0 0 17px rgba(184, 243, 91, .8);
}

body.web3-pop .register-hero-content {
    position: relative;
    z-index: 2;
    width: calc(100% - 74px);
}

body.web3-pop .register-eyebrow {
    display: block;
    color: #b8f35b;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .18em;
}

body.web3-pop .register-hero h1 {
    margin: 8px 0 7px;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.02em;
}

body.web3-pop .register-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    line-height: 1.55;
}

body.web3-pop .register-benefits {
    display: flex;
    align-items: center;
    margin-top: 19px;
    gap: 7px;
}

body.web3-pop .register-benefits span {
    display: inline-flex;
    height: 27px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    font-size: 8px;
    font-weight: 800;
    gap: 4px;
}

body.web3-pop .register-benefits i {
    color: #b8f35b;
    font-size: 7px;
}

body.web3-pop .register-hero-symbol {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 23px;
    display: flex;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 12px 24px rgba(16, 8, 34, .2);
    transform: rotate(7deg);
}

body.web3-pop .register-hero-symbol span {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #b8f35b;
    color: #302345;
    font-size: 21px;
    box-shadow: 0 0 22px rgba(184, 243, 91, .22);
}

body.web3-pop .register-progress {
    display: flex;
    align-items: center;
    margin: 12px 0;
    padding: 13px 14px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 24px rgba(74, 52, 116, .06);
}

body.web3-pop .register-progress-item {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #aaa1b8;
    gap: 7px;
}

body.web3-pop .register-progress-item > span {
    display: flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4ddef;
    border-radius: 9px;
    background: #faf8fd;
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .register-progress-item strong {
    color: #7c718d;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

body.web3-pop .register-progress-item.is-active > span {
    border-color: #7c5cff;
    background: #7c5cff;
    color: #fff;
    box-shadow: 0 5px 12px rgba(124, 92, 255, .22);
}

body.web3-pop .register-progress-item.is-active strong {
    color: #302344;
}

body.web3-pop .register-progress > i {
    flex: 1;
    height: 1px;
    min-width: 9px;
    margin: 0 8px;
    background: linear-gradient(90deg, #cbbdff, #e7e0ef);
}

body.web3-pop .register-page .register-form {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

body.web3-pop .register-form-section {
    margin-bottom: 12px;
    padding: 17px 15px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(61, 42, 96, .07);
}

body.web3-pop .register-section-head {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

body.web3-pop .register-step-number {
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    border-radius: 11px;
    background: linear-gradient(145deg, #7c5cff, #a766d5);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 7px 14px rgba(124, 92, 255, .18);
}

body.web3-pop .register-section-head > div {
    min-width: 0;
}

body.web3-pop .register-section-head > div > span {
    display: block;
    color: #8a73ed;
    font-size: 7px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .14em;
}

body.web3-pop .register-section-head h2 {
    margin: 4px 0 0;
    color: #211634;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.15;
}

body.web3-pop .register-section-head > em {
    display: inline-flex;
    height: 26px;
    align-items: center;
    margin-left: auto;
    padding: 0 9px;
    border-radius: 9px;
    background: #f4f0ff;
    color: #776590;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

body.web3-pop .register-field {
    display: block;
    margin: 0 0 13px;
}

body.web3-pop .register-field:last-child {
    margin-bottom: 0;
}

body.web3-pop .register-field-label {
    display: block;
    margin-bottom: 7px;
    color: #524460;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .register-input-wrap {
    position: relative;
    display: block;
}

body.web3-pop .register-page .register-input-wrap .muiInput {
    width: 100%;
    height: 49px;
    margin: 0;
    padding: 0 42px 0 42px !important;
    border: 1px solid #e2daef !important;
    border-radius: 14px !important;
    background: linear-gradient(105deg, #fcfbff, #f7faff) !important;
    color: #2d223e !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 49px;
    box-shadow: inset 0 1px #fff !important;
}

body.web3-pop .register-page .register-input-wrap .muiInput::placeholder {
    color: #afa5b8;
    font-weight: 500;
}

body.web3-pop .register-input-wrap:focus-within .muiInput {
    border-color: #8e76ef !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .09) !important;
}

body.web3-pop .register-input-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    width: 15px;
    color: #8068df;
    font-size: 13px;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

body.web3-pop .register-input-state,
body.web3-pop .register-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 13px;
    display: flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: #f0ebff;
    color: #8169dc;
    font-size: 11px;
    transform: translateY(-50%);
}

body.web3-pop .register-password-toggle {
    padding: 0;
}

body.web3-pop .register-password-toggle.is-visible {
    background: #e9faf5;
    color: #3c9a80;
}

body.web3-pop .register-field > small {
    display: flex;
    align-items: center;
    margin-top: 6px;
    color: #a197aa;
    font-size: 8px;
    line-height: 1.4;
    gap: 5px;
}

body.web3-pop .register-password-match > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c8c0d0;
}

body.web3-pop .register-password-match.is-match {
    color: #39856f;
}

body.web3-pop .register-password-match.is-match > i {
    background: #64dfbd;
    box-shadow: 0 0 0 3px rgba(100, 223, 189, .12);
}

body.web3-pop .register-password-match.is-error {
    color: #c8527f;
}

body.web3-pop .register-password-match.is-error > i {
    background: #ff72a9;
}

body.web3-pop .register-page .register-code-wrap .muiInput {
    padding-right: 116px !important;
}

body.web3-pop .register-code-button {
    position: absolute;
    z-index: 3;
    top: 7px;
    right: 7px;
    display: flex;
    width: 100px;
    height: 35px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(105deg, #7c5cff, #b263d2);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(124, 92, 255, .18);
}

body.web3-pop .register-code-button.is-sending {
    background: #a99cbc;
    box-shadow: none;
}

body.web3-pop .register-page .register-captcha-wrap .muiInput {
    padding-right: 139px !important;
}

body.web3-pop .register-captcha-button {
    position: absolute;
    z-index: 3;
    top: 6px;
    right: 6px;
    display: flex;
    width: 125px;
    height: 37px;
    align-items: center;
    margin: 0;
    padding: 3px 6px 3px 3px;
    overflow: hidden;
    border: 1px solid rgba(124, 92, 255, .13);
    border-radius: 10px;
    background: #fff;
    color: #8068df;
    gap: 5px;
}

body.web3-pop .register-captcha-button img {
    display: block;
    width: 91px;
    height: 29px;
    object-fit: cover;
    border-radius: 7px;
}

body.web3-pop .register-captcha-button i {
    flex: 0 0 auto;
    font-size: 10px;
}

body.web3-pop .register-security-note {
    display: flex;
    align-items: center;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(100, 223, 189, .18);
    border-radius: 14px;
    background: linear-gradient(105deg, #f3fffb, #f4fbff);
    color: #3d927a;
    gap: 9px;
}

body.web3-pop .register-security-note > i {
    display: flex;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #dff8f1;
    font-size: 13px;
}

body.web3-pop .register-security-note span,
body.web3-pop .register-security-note strong,
body.web3-pop .register-security-note small {
    display: block;
}

body.web3-pop .register-security-note strong {
    color: #2e6859;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .register-security-note small {
    margin-top: 3px;
    color: #6f9d90;
    font-size: 8px;
    line-height: 1.4;
}

body.web3-pop .register-submit-area {
    padding: 1px 0 3px;
}

body.web3-pop .register-submit {
    display: flex;
    width: 100%;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(105deg, #7c5cff, #c25fd4 60%, #ff72b6);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 13px 25px rgba(150, 82, 203, .25), 0 5px 0 rgba(85, 57, 151, .15);
    gap: 9px;
}

body.web3-pop .register-submit:active {
    transform: translateY(2px);
    box-shadow: 0 8px 18px rgba(150, 82, 203, .22), 0 2px 0 rgba(85, 57, 151, .15);
}

body.web3-pop .register-submit.is-loading {
    opacity: .78;
    pointer-events: none;
}

body.web3-pop .register-submit.is-loading i {
    animation: register-submit-spin .8s linear infinite;
}

body.web3-pop .register-submit-area > p {
    margin: 13px 0 0;
    color: #93889f;
    font-size: 10px;
    text-align: center;
}

body.web3-pop .register-submit-area > p button {
    margin: 0;
    padding: 3px;
    border: 0;
    background: transparent;
    color: #7458dc;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .register-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 0 3px;
    color: #aaa0b4;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    gap: 8px;
}

body.web3-pop .register-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.web3-pop .register-footer > i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bbb1c4;
}

@keyframes register-submit-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 360px) {
    body.web3-pop .register-shell {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .register-brand-copy strong {
        max-width: 145px;
    }

    body.web3-pop .register-hero {
        min-height: 188px;
        padding: 20px 17px;
        border-radius: 24px;
    }

    body.web3-pop .register-hero h1 {
        font-size: 21px;
    }

    body.web3-pop .register-hero-content {
        width: calc(100% - 55px);
    }

    body.web3-pop .register-hero-symbol {
        right: 15px;
        bottom: 20px;
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

    body.web3-pop .register-hero-symbol span {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 17px;
    }

    body.web3-pop .register-benefits {
        gap: 4px;
    }

    body.web3-pop .register-benefits span {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 7px;
    }

    body.web3-pop .register-progress {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .register-progress-item {
        gap: 4px;
    }

    body.web3-pop .register-progress-item strong {
        font-size: 8px;
    }

    body.web3-pop .register-progress > i {
        margin-right: 5px;
        margin-left: 5px;
    }

    body.web3-pop .register-form-section {
        padding: 15px 13px;
    }

    body.web3-pop .register-page .register-code-wrap .muiInput {
        padding-right: 105px !important;
    }

    body.web3-pop .register-code-button {
        width: 90px;
        font-size: 8px;
    }

    body.web3-pop .register-page .register-captcha-wrap .muiInput {
        padding-right: 125px !important;
    }

    body.web3-pop .register-captcha-button {
        width: 112px;
    }

    body.web3-pop .register-captcha-button img {
        width: 79px;
    }
}

/* Account recovery */
body.web3-pop .recovery-page {
    position: relative;
    min-height: 100%;
    padding: 0 !important;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 114, 182, .2), transparent 28%),
        radial-gradient(circle at 0 36%, rgba(112, 223, 198, .16), transparent 28%),
        linear-gradient(180deg, #faf7ff 0%, #f3f6ff 54%, #f8fbff 100%) !important;
}

body.web3-pop .recovery-glow {
    position: absolute;
    border-radius: 50%;
    opacity: .35;
    pointer-events: none;
}

body.web3-pop .recovery-glow-one {
    top: 280px;
    right: -80px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(124, 92, 255, .3), rgba(124, 92, 255, 0) 70%);
}

body.web3-pop .recovery-glow-two {
    top: 770px;
    left: -82px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(100, 223, 189, .28), rgba(100, 223, 189, 0) 70%);
}

body.web3-pop .recovery-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 12px 28px;
}

body.web3-pop .recovery-nav {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

body.web3-pop .recovery-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

body.web3-pop .recovery-brand-mark {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 12px;
    background: linear-gradient(145deg, #7c5cff, #bc63d5);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(124, 92, 255, .2), inset 0 1px rgba(255, 255, 255, .28);
}

body.web3-pop .recovery-brand-copy {
    min-width: 0;
}

body.web3-pop .recovery-brand-copy strong,
body.web3-pop .recovery-brand-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .recovery-brand-copy strong {
    max-width: 180px;
    color: #261a3a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .recovery-brand-copy small {
    margin-top: 3px;
    color: #9a8da9;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

body.web3-pop .recovery-login-link {
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(124, 92, 255, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .84);
    color: #6c55c8;
    font-size: 10px;
    font-weight: 900;
    gap: 6px;
    box-shadow: 0 7px 16px rgba(74, 52, 116, .07);
}

body.web3-pop .recovery-hero {
    position: relative;
    min-height: 200px;
    padding: 22px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 12%, rgba(184, 243, 91, .31), transparent 27%),
        radial-gradient(circle at 10% 115%, rgba(100, 223, 189, .27), transparent 40%),
        linear-gradient(135deg, #19142d 0%, #302466 48%, #5f4bd0 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(62, 37, 112, .22), inset 0 1px rgba(255, 255, 255, .22);
}

body.web3-pop .recovery-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(100deg, #000, transparent 73%);
    mask-image: linear-gradient(100deg, #000, transparent 73%);
}

body.web3-pop .recovery-hero-orbit {
    position: absolute;
    top: -72px;
    right: -42px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
}

body.web3-pop .recovery-hero-orbit::before,
body.web3-pop .recovery-hero-orbit::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

body.web3-pop .recovery-hero-orbit::before {
    inset: 20px;
}

body.web3-pop .recovery-hero-orbit::after {
    inset: 47px;
}

body.web3-pop .recovery-hero-orbit > i {
    position: absolute;
    top: 74px;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b8f35b;
    box-shadow: 0 0 17px rgba(184, 243, 91, .8);
}

body.web3-pop .recovery-hero-content {
    position: relative;
    z-index: 2;
    width: calc(100% - 76px);
}

body.web3-pop .recovery-eyebrow,
body.web3-pop .recovery-panel-kicker {
    display: block;
    color: #b8f35b;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .18em;
}

body.web3-pop .recovery-hero h1 {
    margin: 8px 0 7px;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.02em;
}

body.web3-pop .recovery-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    line-height: 1.55;
}

body.web3-pop .recovery-status {
    display: inline-flex;
    height: 28px;
    align-items: center;
    margin-top: 18px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    gap: 6px;
}

body.web3-pop .recovery-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #70dfc6;
    box-shadow: 0 0 0 3px rgba(112, 223, 198, .13);
}

body.web3-pop .recovery-hero-symbol {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 23px;
    display: flex;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 12px 24px rgba(16, 8, 34, .2);
    transform: rotate(7deg);
}

body.web3-pop .recovery-hero-symbol span {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #b8f35b;
    color: #302345;
    font-size: 20px;
    box-shadow: 0 0 22px rgba(184, 243, 91, .22);
}

body.web3-pop .recovery-progress {
    display: flex;
    align-items: center;
    margin: 12px 0;
    padding: 13px 12px;
    border: 1px solid rgba(124, 92, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 10px 24px rgba(74, 52, 116, .06);
}

body.web3-pop .recovery-progress-item {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #aaa1b8;
    gap: 6px;
}

body.web3-pop .recovery-progress-item > span {
    display: flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4ddef;
    border-radius: 9px;
    background: #faf8fd;
    font-size: 8px;
    font-weight: 900;
}

body.web3-pop .recovery-progress-item div {
    min-width: 0;
}

body.web3-pop .recovery-progress-item strong,
body.web3-pop .recovery-progress-item small {
    display: block;
    white-space: nowrap;
}

body.web3-pop .recovery-progress-item strong {
    color: #776b87;
    font-size: 9px;
    line-height: 1.2;
}

body.web3-pop .recovery-progress-item small {
    margin-top: 2px;
    font-size: 7px;
}

body.web3-pop .recovery-progress-item.is-active > span {
    border-color: #7c5cff;
    background: #7c5cff;
    color: #fff;
    box-shadow: 0 5px 12px rgba(124, 92, 255, .22);
}

body.web3-pop .recovery-progress-item.is-active strong {
    color: #302344;
}

body.web3-pop .recovery-progress > i {
    flex: 1;
    height: 1px;
    min-width: 7px;
    margin: 0 6px;
    background: linear-gradient(90deg, #cbbdff, #e7e0ef);
}

body.web3-pop .recovery-panel,
body.web3-pop .recovery-security-note {
    margin-bottom: 12px;
    border: 1px solid rgba(124, 92, 255, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(61, 42, 96, .07);
}

body.web3-pop .recovery-panel {
    padding: 17px 15px;
}

body.web3-pop .recovery-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

body.web3-pop .recovery-panel-kicker {
    color: #8a73ed;
}

body.web3-pop .recovery-panel-head h2 {
    margin: 4px 0 0;
    color: #211634;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .recovery-online {
    display: inline-flex;
    height: 27px;
    align-items: center;
    padding: 0 9px;
    border-radius: 9px;
    background: #eefbf7;
    color: #3d876f;
    font-size: 8px;
    font-weight: 900;
    gap: 5px;
}

body.web3-pop .recovery-online i,
body.web3-pop .recovery-service-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64dfbd;
}

body.web3-pop .recovery-intro {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(124, 92, 255, .1);
    border-radius: 15px;
    background: linear-gradient(105deg, #f8f5ff, #f5fbff);
    gap: 10px;
}

body.web3-pop .recovery-intro > span {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ebe4ff;
    color: #7459d9;
    font-size: 15px;
}

body.web3-pop .recovery-intro strong {
    color: #493b5b;
    font-size: 10px;
    font-weight: 900;
}

body.web3-pop .recovery-intro p {
    margin: 4px 0 0;
    color: #887d94;
    font-size: 9px;
    line-height: 1.5;
}

body.web3-pop .recovery-service-list {
    display: grid;
    gap: 10px;
}

body.web3-pop .recovery-service-card {
    padding: 13px;
    overflow: hidden;
    border: 1px solid #ddd5f0;
    border-radius: 17px;
    background: linear-gradient(145deg, #faf8ff, #f6fbff);
    box-shadow: inset 0 1px #fff;
}

body.web3-pop .recovery-service-card.is-telegram {
    background:
        radial-gradient(circle at 100% 0, rgba(66, 169, 225, .13), transparent 36%),
        linear-gradient(145deg, #fafcff, #f2fbff);
}

body.web3-pop .recovery-service-card.is-discord {
    background:
        radial-gradient(circle at 100% 0, rgba(88, 101, 242, .13), transparent 36%),
        linear-gradient(145deg, #faf9ff, #f5f5ff);
}

body.web3-pop .recovery-service-main {
    display: flex;
    min-width: 0;
    align-items: center;
}

body.web3-pop .recovery-service-icon {
    display: flex;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #33a8e6, #168ac8);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 8px 18px rgba(31, 151, 215, .2);
}

body.web3-pop .is-discord .recovery-service-icon {
    background: linear-gradient(145deg, #7180ff, #5865f2);
    box-shadow: 0 8px 18px rgba(88, 101, 242, .2);
}

body.web3-pop .recovery-service-copy {
    min-width: 0;
    flex: 1;
    margin-left: 10px;
}

body.web3-pop .recovery-service-copy > span {
    display: block;
    color: #9b8da9;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
}

body.web3-pop .recovery-service-copy h3 {
    margin: 3px 0 2px;
    color: #2c203f;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

body.web3-pop .recovery-service-copy code {
    display: block;
    max-width: 170px;
    overflow: hidden;
    color: #756987;
    font-family: Arial, sans-serif;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.web3-pop .recovery-service-badge {
    display: inline-flex;
    flex: 0 0 auto;
    height: 24px;
    align-items: center;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 8px;
    background: #e8faf5;
    color: #3a806c;
    font-size: 8px;
    font-weight: 900;
    gap: 4px;
}

body.web3-pop .recovery-service-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
    gap: 8px;
}

body.web3-pop .recovery-copy,
body.web3-pop .recovery-contact {
    display: flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    gap: 6px;
}

body.web3-pop .recovery-copy {
    border: 1px solid #ddd5f0;
    background: #fff;
    color: #6e5a88;
}

body.web3-pop .recovery-copy.is-copied {
    border-color: rgba(100, 223, 189, .45);
    background: #eafaf5;
    color: #347965;
}

body.web3-pop .recovery-contact {
    border: 0;
    background: linear-gradient(105deg, #7c5cff, #b463d2);
    color: #fff !important;
    box-shadow: 0 7px 15px rgba(124, 92, 255, .18);
}

body.web3-pop .is-telegram .recovery-contact {
    background: linear-gradient(105deg, #279edb, #53bce8);
    box-shadow: 0 7px 15px rgba(39, 158, 219, .18);
}

body.web3-pop .is-discord .recovery-contact {
    background: linear-gradient(105deg, #5865f2, #7d86f7);
    box-shadow: 0 7px 15px rgba(88, 101, 242, .18);
}

body.web3-pop .recovery-service-actions > :only-child {
    grid-column: 1 / -1;
}

body.web3-pop .recovery-empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 18px;
    border: 1px dashed #dcd2f4;
    border-radius: 17px;
    background: #faf8fe;
    color: #8f849d;
    text-align: center;
}

body.web3-pop .recovery-empty > span {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 14px;
    background: #eee8ff;
    color: #7c5cff;
    font-size: 17px;
}

body.web3-pop .recovery-empty strong {
    color: #493d5e;
    font-size: 12px;
}

body.web3-pop .recovery-empty p {
    margin: 5px 0 0;
    font-size: 9px;
    line-height: 1.5;
}

body.web3-pop .recovery-security-note {
    display: flex;
    align-items: flex-start;
    padding: 14px;
    border-color: rgba(232, 190, 89, .2);
    background: linear-gradient(105deg, #fffdf5, #fff9ee);
    gap: 11px;
}

body.web3-pop .recovery-note-icon {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff0bb;
    color: #c88c16;
    font-size: 15px;
}

body.web3-pop .recovery-security-note strong {
    color: #4a3b26;
    font-size: 11px;
    font-weight: 900;
}

body.web3-pop .recovery-security-note ul {
    margin: 5px 0 0;
    padding-left: 14px;
    color: #88775c;
    font-size: 9px;
    line-height: 1.65;
}

body.web3-pop .recovery-back-login {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(124, 92, 255, .18);
    border-radius: 17px;
    background: rgba(255, 255, 255, .88);
    color: #684fc3;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(66, 46, 102, .08);
    gap: 7px;
}

body.web3-pop .recovery-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 0 3px;
    color: #aaa0b4;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    gap: 8px;
}

body.web3-pop .recovery-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.web3-pop .recovery-footer > i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bbb1c4;
}

@media (max-width: 360px) {
    body.web3-pop .recovery-shell {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .recovery-brand-copy strong {
        max-width: 140px;
    }

    body.web3-pop .recovery-hero {
        min-height: 188px;
        padding: 20px 17px;
        border-radius: 24px;
    }

    body.web3-pop .recovery-hero h1 {
        font-size: 21px;
    }

    body.web3-pop .recovery-hero-content {
        width: calc(100% - 55px);
    }

    body.web3-pop .recovery-hero-symbol {
        right: 15px;
        bottom: 20px;
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

    body.web3-pop .recovery-hero-symbol span {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 17px;
    }

    body.web3-pop .recovery-progress {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.web3-pop .recovery-progress-item div {
        display: none;
    }

    body.web3-pop .recovery-progress > i {
        margin-right: 8px;
        margin-left: 8px;
    }

    body.web3-pop .recovery-panel {
        padding: 15px 13px;
    }

    body.web3-pop .recovery-service-copy code {
        max-width: 135px;
    }

    body.web3-pop .recovery-service-badge {
        padding-right: 6px;
        padding-left: 6px;
    }
}