/* Player commerce surfaces. Keep JS-controlled display / hidden states intact. */
body.xj-mall{--paper:#f5f1e8;--paper2:#eeeadf;--ink:#263d36;--muted:#66736a;--red:#285c4f;--red-dark:#204a40;--green:#285c4f;--line:#ded9cb;color:var(--ink);padding:32px 20px calc(106px + env(safe-area-inset-bottom));line-height:1.6}
.xj-mall :is(h1,h2,.title,.section-title,.modal-title,.activity-title){font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;color:var(--ink)}
.xj-mall :is(button,input,a){-webkit-tap-highlight-color:transparent}
.xj-mall :is(button,a,input):focus-visible{outline:3px solid #aa874e;outline-offset:3px}
.xj-mall :is(button,.buy,.confirm,.modal-close,.action,.reselect,.link,.logout,.method,.mall-return-link){min-height:44px}
.xj-mall button{font-family:inherit;cursor:pointer}
.xj-mall button:disabled{cursor:not-allowed;opacity:.65;box-shadow:none}
.xj-mall .mall-eyebrow{font-size:12px;letter-spacing:.18em;color:#8b703e;font-weight:700;text-align:center;margin-bottom:8px}
.xj-mall .mall-lead{color:var(--muted);font-size:14px;line-height:1.7;margin:8px 0 20px;text-align:center}
.xj-mall .mall-heading{padding:16px 0 26px}
.xj-mall .title{font-size:clamp(30px,4vw,42px);margin:0;text-align:center;letter-spacing:.08em;line-height:1.4}
.xj-mall .mall-heading .mall-lead{margin-bottom:0}
.xj-mall :is(.panel,.box,.page>.section){background:rgba(255,253,247,.95);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 45px #263d360a}
.xj-mall .shell{max-width:1040px}
.xj-mall .shell>.panel{padding:28px}
.xj-mall .top-actions{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.xj-mall :is(.logout,.top-action-link,.reselect,.link,.mall-back,.mall-return-link){border:1px solid var(--line);background:#faf8f1;color:var(--red);border-radius:9px;box-shadow:none;padding:10px 14px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.xj-mall .section-title{font-size:24px;margin:8px 0 10px}
.xj-mall .section-title:before{background:#aa874e;border-radius:1px;transform:rotate(45deg)}
.xj-mall .sub{color:var(--muted);line-height:1.7}
.xj-mall .dash{border-color:var(--line);margin:20px 0}
.xj-mall .shell .role{background:linear-gradient(110deg,#eaf0e8,#f6f3e9);border:1px solid #cbd7c9;border-left:4px solid #aa874e;border-radius:12px;padding:20px;margin-bottom:28px}
.xj-mall :is(.role-label,.role-main,.name,.group h2,.milestone-title,.activity-title,.rank-no,.order-amount,.total-recharge,.result-block-title){color:var(--red)}
.xj-mall .role-main{font-size:clamp(19px,3vw,25px);line-height:1.5;overflow-wrap:anywhere}
.xj-mall :is(.role-meta,.order-meta,.order-no,.rank-reward-title,.result-message){color:var(--muted)}
.xj-mall .reselect{max-width:180px;margin-top:14px;border-width:1px}
.xj-mall .role-transfer-button{border-radius:10px;box-shadow:none;min-height:90px}
.xj-mall :is(.gift-category-button,.activity-view-button,.region-tab){min-height:46px;border-radius:8px;border-color:var(--line);background:#f8f6ef;color:var(--muted);font-weight:700;padding:10px 14px}
.xj-mall :is(.gift-category-button,.activity-view-button,.region-tab).active{color:#fff;border-color:var(--red);background:var(--red);box-shadow:none}
.xj-mall .group{margin:24px 0 12px}
.xj-mall .group h2{font-size:19px;margin-bottom:16px}
.xj-mall .group>.card{background:#fffdf7;border:1px solid var(--line);border-radius:12px;padding:20px;margin:14px 0;position:relative;display:flex;flex-direction:column}
.xj-mall .card-head{gap:12px;flex-wrap:wrap}
.xj-mall .name{font-size:20px}
.xj-mall .badge{background:#efe7d4;color:#806128;border:1px solid #dfd0ad;max-width:100%;white-space:normal}
.xj-mall :is(.chip,.badge){border-radius:5px;line-height:1.6;overflow-wrap:anywhere}
.xj-mall .chip{background:#f0eee5;color:#4e6256;border:1px solid #e4e2d7;padding:5px 9px}
.xj-mall .group>.card>.items{margin:14px 0;flex:1}
.xj-mall .price{color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.xj-mall .price strong{color:#8c6b32;font-size:28px;font-weight:750}
.xj-mall :is(.buy,.confirm,.modal-close,.claim,.btn,.notice-dialog-confirm,.xj-mall-login button){background:var(--red);border:1px solid var(--red);border-radius:9px;color:#fff;box-shadow:none;font-weight:700;line-height:1.5;padding:12px 16px}
.xj-mall :is(.buy,.confirm):disabled{background:#e1e3da;border-color:#d4d8cd;color:#5e6a60;opacity:1}
.xj-mall .claim-not-reached:disabled{background:#e7e5dc;color:#667065;border-color:#d9d9ce;opacity:1}
.xj-mall .claim-claimed:disabled{background:#dce8dd;color:#43634b;border-color:#c7d6c8;opacity:1}
.xj-mall :is(.order,.milestone,.activity-hero,.rank-row,.result-block){border-radius:11px;background:#faf9f2;border-color:var(--line);padding:17px}
.xj-mall .order-pay-link{border-color:#b7c8b5;background:#f0f5ec}
.xj-mall .order-title{font-size:17px}
.xj-mall .order-action{color:var(--red);display:inline-flex;padding:5px 10px;background:#e1ebdd;border-radius:6px;margin-top:8px;min-height:32px;align-items:center}
.xj-mall .rank-me{border-color:#aa874e;background:#f4f2e7}
.xj-mall .rank-row{grid-template-columns:74px minmax(0,1fr)}
.xj-mall .empty{border:1px dashed #cccdbd;border-radius:12px;background:#f8f7ef;padding:36px 18px;color:var(--muted);line-height:1.8}
.xj-mall .empty strong,.xj-mall .empty span{display:block}.xj-mall .empty strong{color:var(--ink);font-size:18px;margin-bottom:7px}
.xj-mall .tabs{z-index:25;background:rgba(251,249,241,.98);border-color:var(--line);box-shadow:0 -8px 28px #263d3608;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
.xj-mall .tab{color:#67766b;font-size:14px;min-height:60px;border-radius:10px;max-width:160px;padding:8px 4px}
.xj-mall .tab.active{color:var(--red);background:#e8eee3;border-color:#cfdbc9}
.xj-mall .tab span{font-weight:400}
.xj-mall .modal{background:#172d26a6;padding:20px 14px}
.xj-mall .modal-card{border:1px solid #d5c6a4;border-radius:16px;background:#fdfbf4;padding:24px;margin:4vh auto calc(24px + env(safe-area-inset-bottom));box-shadow:0 25px 80px #10271e3d;max-width:560px}
.xj-mall .modal-title{color:var(--red);font-size:24px;line-height:1.4}
.xj-mall .modal-x{min-width:44px;height:44px;background:#efeee5;border-color:var(--line);color:var(--ink);flex:none}
.xj-mall .confirm-cell{background:#f5f4eb;border-color:var(--line);border-radius:7px;padding:12px;overflow-wrap:anywhere}.xj-mall .confirm-cell span{color:var(--muted)}
.xj-mall .purchase-actions{background:#fdfbf4;padding-bottom:env(safe-area-inset-bottom)}
.xj-mall :is(.errors,.error,.err){color:#a33f36;background:#fcf0e9;border-color:#e2bfb2;border-radius:9px;padding:12px 14px;line-height:1.6}
.xj-mall :is(.ok,.notice){background:#edf3e8;color:#285c4f;border:1px solid #c9d8bf;border-radius:9px;padding:12px 14px;line-height:1.6}
.xj-mall :is(.muted,.hint,.account,.region-code,.region,.message){color:var(--muted)}
body.xj-mall-login,body.xj-mall-roles,body.xj-mall-error{display:flex;align-items:center;justify-content:center;padding:32px 18px;min-height:100svh}
.xj-mall-login>.card{max-width:440px;padding:32px}.xj-mall-login h1{margin:0;font-size:34px}
.xj-mall-login label{color:var(--ink);font-size:14px;margin-top:20px}
.xj-mall-login input{border-radius:8px;background:#fffef9;border-color:var(--line);min-height:48px;color:var(--ink)}
.xj-mall-login input:focus{border-color:var(--red);box-shadow:0 0 0 3px #285c4f15}
.xj-mall-login button{background:var(--red);border:1px solid var(--red);border-radius:8px;box-shadow:none;margin-top:24px}
.xj-mall-roles>.card{max-width:880px;padding:28px}.xj-mall-roles h1{font-size:32px}
.xj-mall-roles .account{background:#eeefe5;border-radius:7px;padding:10px;overflow-wrap:anywhere}
.xj-mall .step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e8ece0;color:#67805e;font-size:13px;font-family:system-ui,sans-serif;margin-right:6px;flex:none}
.xj-mall-roles .section-title{margin:24px 0 12px;font-size:19px}.xj-mall-roles .section-title:before{display:none}
.xj-mall-roles .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
.xj-mall-roles .region-link{border-radius:9px;background:#faf9f2;border-color:var(--line);padding:16px}
.xj-mall-roles .region-link.active{border-color:var(--red);background:#edf2e8;box-shadow:inset 3px 0 var(--red)}
.xj-mall-roles .region-name{color:var(--red);font-size:17px}
.xj-mall-roles .role{border-radius:10px;background:#faf9f2;border-color:var(--line);overflow:hidden}.xj-mall-roles .role button{padding:18px}
.xj-mall-roles .level{color:#7c6233;background:#efe8d6}.xj-mall-roles .region{display:block;overflow-wrap:anywhere}
.xj-mall-pay .box{max-width:520px;padding:32px;margin:4vh auto}.xj-mall-pay h1{font-size:30px;margin:4px 0}
.xj-mall-pay .amt{font-size:42px;color:#8c6b32;padding:20px 0;margin:16px 0;border-block:1px solid var(--line)}
.xj-mall-pay .box>.muted{overflow-wrap:anywhere}.xj-mall-pay :is(button,a.btn){background:var(--red);border-radius:8px;box-shadow:none;color:#fff;min-height:46px}
.xj-mall-pay a.method{min-height:52px;border-radius:9px}.xj-mall-pay .pay-fallback{padding:12px;color:var(--red)}
.xj-mall .checkout-return{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;display:grid;gap:12px}.xj-mall-pay .mall-back{color:var(--red);background:#f2f3e9;border:1px solid var(--line);margin:0}
.xj-mall-error>.card{padding:32px;border-radius:16px}.xj-mall-error .action{border-radius:8px;padding:12px;background:var(--red);color:#fff}.xj-mall-error .detail{background:#f5f3e9;color:var(--muted);border-color:var(--line);border-radius:8px}
.xj-mall-transfer .page{max-width:1000px;padding:0;margin:0 auto}.xj-mall-transfer .head{padding:12px 2px 20px}.xj-mall-transfer .head>.mall-eyebrow{text-align:left}
.xj-mall-transfer .section{padding:24px;border-color:var(--line);background:#fdfbf5;box-shadow:0 10px 28px #263d3606;border-radius:13px}
.xj-mall-transfer .transfer-section-title{font-size:20px;margin:0 0 16px}.xj-mall-transfer .transfer-source>.mall-lead{text-align:left}
.xj-mall-transfer .transfer-target{border-top:3px solid #aa874e}
.xj-mall-transfer .row{grid-template-columns:100px minmax(0,1fr);border-color:var(--line)}.xj-mall-transfer .value{overflow-wrap:anywhere}
.xj-mall-transfer :is(.label,label,.transfer-card-help,.picker-option-meta,.metric span,.package-price){color:var(--muted)}
.xj-mall-transfer :is(.picker-trigger,.transfer-card-choice,.package,.metric){border-color:var(--line);background:#fcfbf5;color:var(--ink);border-radius:9px}
.xj-mall-transfer .picker-trigger{min-height:50px;padding:10px 14px}
.xj-mall-transfer .transfer-card-choice.active{background:#edf2e8;border-color:var(--red);box-shadow:0 0 0 2px #285c4f12}
.xj-mall-transfer .transfer-card-count{color:var(--red);background:#e4ebdf}
.xj-mall-transfer .metric strong{color:var(--red);overflow-wrap:anywhere}
.xj-mall-transfer .selected-total{border-color:#cbd8bf;background:#edf2e8;color:var(--red)}
.xj-mall-transfer .quantity-control{grid-template-columns:44px 44px 44px;gap:2px}.xj-mall-transfer .quantity-btn{width:44px;height:44px;border-color:var(--line);background:#edf1e7;color:var(--red)}.xj-mall-transfer .quantity-value{width:44px;height:44px;border-color:var(--line);color:var(--ink)}
.xj-mall-transfer .package{grid-template-columns:minmax(0,1fr) 136px}.xj-mall-transfer .package-name{overflow-wrap:anywhere}
.xj-mall-transfer .btn.secondary{background:#f0f1e6;border:1px solid #ccd4c4;color:var(--red)}.xj-mall-transfer .btn:disabled{background:#dce0d4;color:#687162;border-color:#d0d6c8}
.xj-mall-transfer :is(.picker-panel,.notice-dialog-panel){background:#fdfbf5;border:1px solid var(--line)}.xj-mall-transfer .picker-panel{padding-bottom:env(safe-area-inset-bottom)}
.xj-mall-transfer .picker-head{border-color:var(--line)}.xj-mall-transfer .picker-option{color:var(--ink);background:#fdfbf5;border-color:var(--line);min-height:62px}.xj-mall-transfer .picker-option.active{color:var(--red);background:#eaf0e3}.xj-mall-transfer .picker-close{color:var(--red);background:#e9eee1}
.xj-mall-transfer .notice-dialog-icon{color:#8c6b32;background:#f1e8d3}.xj-mall-transfer .notice-dialog-title{color:var(--ink)}.xj-mall-transfer .notice-dialog-message{color:var(--muted)}
@media(min-width:800px){.xj-mall .gift-category-panel>.group,.xj-mall .panel>.group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.xj-mall .group>h2{grid-column:1/-1;margin-bottom:0}.xj-mall .group>.card{margin:0}.xj-mall .milestones,.xj-mall .orders{grid-template-columns:repeat(2,minmax(0,1fr))}.xj-mall-roles .roles{grid-template-columns:repeat(2,minmax(0,1fr))}.xj-mall-transfer .page{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:22px;align-items:start}.xj-mall-transfer .head{grid-column:1/-1}.xj-mall-transfer .section{margin:0}.xj-mall-transfer .transfer-target{position:sticky;top:24px}}
@media(max-width:480px){body.xj-mall{padding:18px 12px calc(98px + env(safe-area-inset-bottom))}.xj-mall .shell>.panel{padding:16px}.xj-mall .mall-heading{padding:12px 0 22px}.xj-mall .role-with-transfer{grid-template-columns:minmax(0,1fr) 82px;gap:12px}.xj-mall .shell .role{padding:14px}.xj-mall .reselect{max-width:none}.xj-mall .role-transfer-button{font-size:17px}.xj-mall .group>.card{padding:16px}.xj-mall .tabs{padding-inline:6px;gap:2px}.xj-mall .tab{font-size:12px}.xj-mall .modal-card{padding:18px}.xj-mall .confirm-grid{grid-template-columns:1fr 1fr}.xj-mall .confirm-cell{padding:9px}.xj-mall :is(.milestone-head,.head-top){flex-wrap:wrap}.xj-mall .activity-view-switcher{gap:6px}.xj-mall .rank-row{grid-template-columns:60px minmax(0,1fr);padding:12px;gap:8px}.xj-mall-login>.card,.xj-mall-roles>.card{padding:24px 18px}.xj-mall-roles .regions{grid-template-columns:1fr}.xj-mall-pay .box{padding:24px 18px;margin:14px auto}.xj-mall-transfer .section{padding:18px 14px}.xj-mall-transfer .transfer-card-grid{gap:8px}.xj-mall-transfer .transfer-card-choice{padding:10px}.xj-mall-transfer .transfer-card-title{font-size:15px}.xj-mall-transfer .package{grid-template-columns:1fr;gap:12px}.xj-mall-transfer .quantity-control{justify-self:end}.xj-mall-transfer .actions{padding-bottom:env(safe-area-inset-bottom)}body.xj-mall-login,body.xj-mall-roles,body.xj-mall-error{padding-bottom:32px}}
@media(prefers-reduced-motion:reduce){.xj-mall *{scroll-behavior:auto;transition:none;animation:none}}

.xj-mall-login .password-toggle{width:auto;min-height:44px;margin:8px 0 0;padding:8px 12px;background:transparent;color:var(--red);border:1px solid var(--line);font-size:14px}
.xj-mall-index .wrap{max-width:780px;padding:28px;background:#fdfbf4;border:1px solid var(--line);border-radius:16px}.xj-mall-index .head h1{color:var(--ink);font-size:30px}.xj-mall-index .tip{background:#eeefe3;color:var(--muted);padding:12px;font-size:14px}.xj-mall-index .who{padding:16px;background:#f1f3e9;font-size:14px;overflow-wrap:anywhere}.xj-mall-index .who b{color:var(--red)}.xj-mall-index .paybtn{background:var(--red);box-shadow:none;min-height:48px}.xj-mall-index .price,.xj-mall-index .oneprice{color:#8c6b32;background:#eeeadb}.xj-mall-index .grid .card{border-color:var(--line);background:#fffdf7}.xj-mall-index .grid .price{margin-bottom:0}.xj-mall-index .coin{background:radial-gradient(circle at 35% 30%,#d8c493,#aa874e)}
.xj-mall-transfer-error .wrap{max-width:540px;padding:32px 0}.xj-mall-transfer-error .panel{padding:32px 24px}.xj-mall-transfer-error .detail{background:#f2f1e7;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:480px){.xj-mall-index .wrap{padding:18px 14px}}
.xj-mall>.card,.xj-mall>form.card{background:rgba(255,253,247,.95);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 45px #263d360a}

.xj-mall-transfer .transfer-approval-details{margin:0;text-align:left;border-block:1px solid var(--line);padding:6px 0}.xj-mall-transfer .transfer-approval-details>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0}.xj-mall-transfer .transfer-approval-details dt{color:var(--muted);font-size:14px}.xj-mall-transfer .transfer-approval-details dd{margin:0;font-weight:700;color:var(--ink);overflow-wrap:anywhere}