.xz-mall-page{padding:40px 0 80px;background:linear-gradient(180deg,#0f1419 0%,#1a2230 50%,#121820 100%);min-height:70vh;color:#e8eef6}
.xz-mall-page .container{max-width:960px;margin:0 auto;padding:0 16px}
.xz-mall-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px 24px 36px;backdrop-filter:blur(8px)}
.xz-mall-head h1{margin:0 0 8px;font-size:28px;font-weight:700;color:#fff}
.xz-mall-tip{margin:0;color:#9bb0c7;line-height:1.6}
.xz-mall-alert{margin-top:20px;padding:14px 16px;border-radius:10px;background:rgba(220,80,60,.15);border:1px solid rgba(220,80,60,.35);color:#ffb4a8}
.xz-mall-ok{margin-top:16px;padding:14px 16px;border-radius:10px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.35);color:#99f6e4}
.xz-muted{color:#7f93a8;font-size:13px}
.xz-mall-form{margin-top:24px;display:grid;gap:16px}
.xz-mall-field label{display:block;margin-bottom:6px;font-size:13px;color:#c5d4e6}
.xz-mall-field label span{color:#ff6b6b}
.xz-mall-field input[type=text]{width:100%;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff;padding:0 12px}
.xz-mall-field small{display:block;margin-top:6px;color:#7f93a8;font-size:12px}
.xz-mall-channels{display:flex;gap:10px;flex-wrap:wrap}
.xz-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);cursor:pointer;color:#d7e3f0;background:rgba(255,255,255,.03)}
.xz-chip.active,.xz-chip:has(input:checked){border-color:#5eead4;background:rgba(94,234,212,.12);color:#fff}
.xz-chip input{accent-color:#5eead4}
.xz-mall-pkgs{margin-top:28px}
.xz-mall-pkgs h2{font-size:18px;margin:0 0 12px;color:#fff}
.xz-pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.xz-pkg{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;cursor:pointer;background:rgba(0,0,0,.2);transition:.15s ease}
.xz-pkg:hover{border-color:rgba(94,234,212,.45)}
.xz-pkg.active{border-color:#5eead4;box-shadow:0 0 0 1px rgba(94,234,212,.35) inset;background:rgba(94,234,212,.08)}
.xz-pkg .n{font-weight:600;color:#fff;margin-bottom:6px}
.xz-pkg .p{color:#5eead4;font-size:20px;font-weight:700}
.xz-pkg .j{color:#9bb0c7;font-size:12px;margin-top:4px}
.xz-mall-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.xz-btn{appearance:none;border:0;border-radius:12px;height:44px;padding:0 18px;background:linear-gradient(135deg,#2dd4bf,#0ea5e9);color:#06202a;font-weight:700;cursor:pointer}
.xz-btn:disabled{opacity:.55;cursor:not-allowed}
.xz-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e8eef6}
.xz-mall-msg{min-height:22px;margin:12px 0 0;color:#7dd3fc}
.xz-mall-msg.err{color:#fda4af}
.xz-mall-pay{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.xz-mall-pay h2{margin:0 0 10px;color:#fff}
.xz-pay-meta{color:#9bb0c7;margin-bottom:14px;line-height:1.7}
.xz-pay-body{display:flex;justify-content:center}
.xz-pay-body .pay-body-html{background:rgba(255,255,255,.96);color:#222;border-radius:14px;padding:16px 18px;max-width:320px}
.xz-pay-body .pay-body-html .pay-icon{height:28px;margin-bottom:8px}
.xz-pay-body .pay-body-html .qrcode img,.xz-pay-body img{width:min(260px,70vw);height:auto;border-radius:8px;background:#fff}
.xz-pay-body .pay-body-html .title{font-size:15px;margin-bottom:8px}
.xz-pay-body .pay-body-html .desc{font-size:12px;color:#666;margin-top:8px}
.xz-pay-note{color:#7f93a8;font-size:13px;margin-top:12px}
.xz-mall-content{margin-top:28px;color:#c5d4e6}

/* admin */
.xz-mall-admin .xz-mall-toolbar{display:flex;gap:12px;align-items:center;margin:16px 0}
.xz-mall-admin .xz-mall-msg{margin-left:8px;color:#2271b1}
.xz-mall-admin .xz-act{display:inline-flex;gap:6px}