/* ============================================================================
   综合特效商城 · module.css
   类名一律 fxm- 前缀，不污染站点；颜色全部走 --fx-a / --fx-b 两个变量，
   由 shop.js 按后台「主题色 / 辅助色」写到根节点上。
   全站播放器壳（fxp-*）的样式由 player-shell.js 自己内联注入，
   因为它被注入到每一个页面，而 module.css 只在 /fx 路由加载。
   ============================================================================ */

.fxm-root {
    --fx-a: #7c5cff;
    --fx-b: #ff5ca8;
    --fx-ink: #1f1b2e;
    --fx-sub: #7b758c;
    --fx-line: rgba(124, 92, 255, .14);
    --fx-card: rgba(255, 255, 255, .86);
    --fx-bg: rgba(255, 255, 255, .55);
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 20px 60px;
    color: var(--fx-ink);
    font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.fxm-root *, .fxm-root *::before, .fxm-root *::after { box-sizing: border-box; }
.fxm-root button, .fxm-root input, .fxm-root select, .fxm-root textarea { font-family: inherit; }
.fxm-root h1, .fxm-root h3, .fxm-root p { margin: 0; }

/* ---------------------------------------------------------------- 页头 */
.fxm-head { margin-bottom: 22px; }
.fxm-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fxm-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fxm-brand-mark {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 18px;
    display: grid; place-items: center; color: #fff; font-size: 26px;
    background: linear-gradient(135deg, var(--fx-a), var(--fx-b));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--fx-a) 35%, transparent);
}
.fxm-title { font-size: 25px; font-weight: 800; letter-spacing: .5px; }
.fxm-intro { color: var(--fx-sub); font-size: 13px; margin-top: 2px; }
.fxm-wallet {
    display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-card);
    white-space: nowrap;
}
.fxm-wallet-label { color: var(--fx-sub); font-size: 12px; }
.fxm-wallet-num { font-size: 19px; font-weight: 800; color: var(--fx-a); }
.fxm-wallet-guest { color: var(--fx-sub); font-size: 12px; }

.fxm-tabs {
    display: flex; gap: 6px; margin-top: 20px; padding: 5px;
    border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-bg);
    overflow-x: auto; scrollbar-width: none;
}
.fxm-tabs::-webkit-scrollbar { display: none; }
.fxm-tab {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border: 0; border-radius: 10px; background: transparent;
    color: var(--fx-sub); font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .18s, color .18s;
}
.fxm-tab i { font-size: 17px; }
.fxm-tab:hover { color: var(--fx-a); }
.fxm-tab.is-on {
    color: #fff; background: linear-gradient(135deg, var(--fx-a), var(--fx-b));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--fx-a) 30%, transparent);
}

/* ---------------------------------------------------------------- 通用件 */
.fxm-btn, .fxm-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: transform .15s, opacity .15s;
    white-space: nowrap;
}
.fxm-btn {
    color: #fff; background: linear-gradient(135deg, var(--fx-a), var(--fx-b));
}
.fxm-btn:hover { transform: translateY(-1px); }
.fxm-btn.is-done { background: rgba(124, 92, 255, .12); color: var(--fx-a); }
.fxm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.fxm-ghost {
    color: var(--fx-a); border-color: var(--fx-line); background: rgba(255, 255, 255, .6);
}
.fxm-ghost:hover { border-color: var(--fx-a); }
.fxm-main { min-height: 320px; }
.fxm-footnote { margin-top: 26px; text-align: center; color: var(--fx-sub); font-size: 12px; }
.fxm-hint { color: var(--fx-sub); font-size: 13px; margin-bottom: 14px; }
.fxm-empty, .fxm-error {
    padding: 60px 20px; text-align: center; color: var(--fx-sub); font-size: 14px;
}
.fxm-error i { font-size: 34px; color: var(--fx-b); display: block; margin-bottom: 8px; }
.fxm-error .fxm-btn, .fxm-empty .fxm-btn { margin-top: 14px; }
.fxm-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 70px 0; color: var(--fx-sub); }
.fxm-spinner {
    width: 18px; height: 18px; border: 2px solid var(--fx-line);
    border-top-color: var(--fx-a); border-radius: 50%; animation: fxm-spin .8s linear infinite;
}
@keyframes fxm-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 筛选 */
.fxm-filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.fxm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fxm-chip {
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--fx-line);
    background: var(--fx-card); color: var(--fx-sub); font-size: 13px; cursor: pointer;
}
.fxm-chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--fx-a), var(--fx-b)); }
.fxm-wearing { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--fx-sub); font-size: 12px; }
.fxm-wear-chip {
    font-style: normal; padding: 3px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--fx-a) 12%, transparent); color: var(--fx-a);
}

/* ---------------------------------------------------------------- 商品网格 */
.fxm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fxm-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--fx-line); border-radius: 18px; background: var(--fx-card);
    box-shadow: 0 6px 20px rgba(31, 27, 46, .05); transition: transform .2s, box-shadow .2s;
}
.fxm-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(31, 27, 46, .11); }
.fxm-card-fx { position: relative; height: 150px; overflow: hidden; }
.fxm-kind {
    position: absolute; left: 10px; top: 10px; z-index: 2;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
    color: #fff; background: rgba(31, 27, 46, .42); backdrop-filter: blur(6px);
}
.fxm-badge-on, .fxm-badge-own {
    position: absolute; right: 10px; top: 10px; z-index: 2;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.fxm-badge-on { color: #fff; background: linear-gradient(135deg, var(--fx-a), var(--fx-b)); }
.fxm-badge-own { color: var(--fx-a); background: rgba(255, 255, 255, .9); }
.fxm-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.fxm-card-name { font-size: 15px; font-weight: 700; }
.fxm-card-meta { display: flex; align-items: baseline; gap: 8px; }
.fxm-price { font-size: 18px; font-weight: 800; color: var(--fx-a); }
.fxm-price-free { color: #16a34a; }
.fxm-origin { color: var(--fx-sub); font-size: 12px; }
.fxm-dur { margin-left: auto; color: var(--fx-sub); font-size: 12px; }
.fxm-tag { align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #fff4d9; color: #a16207; }
.fxm-card-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.fxm-card-acts .fxm-btn, .fxm-card-acts .fxm-ghost { flex: 1 1 auto; padding: 7px 10px; }

/* ---------------------------------------------------------------- 参数化特效预览 */
.fxm-fx {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: linear-gradient(135deg, var(--fx-a), var(--fx-b));
    display: grid; place-items: center;
}
.fxm-fx::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%);
    pointer-events: none;
}
.fxm-fx-big { min-height: 200px; border-radius: 14px; }
.fxm-fx-text {
    position: relative; z-index: 2; color: #fff; font-size: 17px; font-weight: 800;
    letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.fxm-fx-big .fxm-fx-text { font-size: 24px; }
.fxm-p {
    position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255, 255, 255, .85); animation: fxm-float 2.6s linear infinite;
}
.fxm-p-aurora { width: 3px; height: 22px; border-radius: 3px; filter: blur(1px); }
.fxm-p-petal { width: 8px; height: 8px; border-radius: 8px 0 8px 0; }
@keyframes fxm-float {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateY(-150px) scale(1.15); opacity: 0; }
}
.fxm-title-chip {
    position: relative; z-index: 2; padding: 7px 18px; border-radius: 999px;
    color: #fff; font-size: 15px; font-weight: 800;
    background: rgba(31, 27, 46, .28); border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); backdrop-filter: blur(4px);
}
.fxm-frame-ring {
    position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 50%;
    display: grid; place-items: center;
    border: 5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 2px rgba(31, 27, 46, .18), 0 8px 26px rgba(0, 0, 0, .22);
    animation: fxm-ring 6s linear infinite;
}
@keyframes fxm-ring { to { transform: rotate(360deg); } }
.fxm-avatar {
    width: 62px; height: 62px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6));
    animation: fxm-ring 6s linear infinite reverse;
}
.fxm-danmu {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px;
    padding: 5px 13px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600;
    background: rgba(31, 27, 46, .35); border: 1px solid rgba(255, 255, 255, .5);
    animation: fxm-danmu 5s linear infinite;
}
.fxm-danmu-2 { top: 62%; animation-delay: -2.5s; }
@keyframes fxm-danmu {
    from { transform: translateX(-120%); } to { transform: translateX(320%); }
}
.fxm-suit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; transform: rotate(-8deg); }
.fxm-suit-grid i {
    display: block; width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255, 255, 255, .8); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.fxm-suit-grid i:nth-child(2) { border-radius: 50%; }
.fxm-suit-grid i:nth-child(3) { border-radius: 999px; height: 18px; width: 54px; }
.fxm-suit-grid i:nth-child(4) { border-radius: 8px; }
.fxm-suit-name {
    position: absolute; bottom: 12px; z-index: 2; color: #fff; font-size: 12px;
    font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------- 提示 / 弹层 / 试玩 */
.fxm-toast {
    position: fixed; left: 50%; bottom: 34px; z-index: 9999;
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    padding: 10px 20px; border-radius: 12px; color: #fff; font-size: 14px;
    background: rgba(31, 27, 46, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    transition: opacity .22s, transform .22s;
}
.fxm-toast-on { opacity: 1; transform: translate(-50%, 0); }
.fxm-toast-ok { background: linear-gradient(135deg, var(--fx-a), var(--fx-b)); }
.fxm-toast-bad { background: #d1435b; }
.fxm-modal { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; }
.fxm-modal[hidden] { display: none; }
.fxm-modal-mask { position: absolute; inset: 0; background: rgba(20, 16, 32, .48); backdrop-filter: blur(3px); }
.fxm-modal-box {
    position: relative; z-index: 1; width: min(440px, calc(100vw - 32px));
    padding: 22px; border-radius: 18px; background: #fff; color: var(--fx-ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.fxm-modal-box h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.fxm-modal-body { font-size: 14px; line-height: 1.7; }
.fxm-modal-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.fxm-confirm .fxm-fx { height: 120px; border-radius: 12px; margin-bottom: 14px; }
.fxm-confirm p { color: var(--fx-sub); }
.fxm-preview-layer { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; pointer-events: none; }
.fxm-preview-layer[hidden] { display: none; }
.fxm-preview-card {
    pointer-events: auto; width: min(520px, calc(100vw - 32px)); padding: 16px;
    border-radius: 20px; background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 70px rgba(20, 16, 32, .32);
    border: 1px solid var(--fx-line);
}
.fxm-preview-fx { height: 210px; }
.fxm-preview-info { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.fxm-preview-info b { font-size: 16px; }
.fxm-preview-info span { color: var(--fx-sub); font-size: 12px; }
.fxm-preview-info em { font-style: normal; font-weight: 700; color: var(--fx-a); }

/* ---------------------------------------------------------------- 背包 */
.fxm-bag { display: flex; flex-direction: column; gap: 10px; }
.fxm-bag-row {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px;
    border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-card);
}
.fxm-bag-fx { flex: 0 0 90px; height: 68px; border-radius: 10px; overflow: hidden; }
.fxm-bag-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fxm-bag-info b { font-size: 15px; }
.fxm-bag-info span { color: var(--fx-sub); font-size: 12px; }
.fxm-bag-acts { display: flex; gap: 7px; }

/* ---------------------------------------------------------------- 工坊 */
.fxm-workshop { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fxm-ws-form { display: flex; flex-direction: column; gap: 14px; }
.fxm-ws-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fx-sub); }
.fxm-ws-form select, .fxm-ws-form input[type=text], .fxm-gift-form select,
.fxm-gift-form input, .fxm-gift-form textarea, .fxm-share input {
    padding: 9px 12px; border: 1px solid var(--fx-line); border-radius: 10px;
    background: #fff; color: var(--fx-ink); font-size: 14px; outline: none;
}
.fxm-ws-form select:focus, .fxm-ws-form input:focus, .fxm-gift-form input:focus,
.fxm-gift-form textarea:focus, .fxm-share input:focus { border-color: var(--fx-a); }
.fxm-ws-form input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--fx-line); border-radius: 10px; background: #fff; }
.fxm-ws-form input[type=range] { accent-color: var(--fx-a); }
.fxm-ws-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fxm-ws-hint { color: var(--fx-sub); font-size: 12px; }
.fxm-ws-preview {
    min-height: 260px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--fx-line); background: var(--fx-bg); padding: 12px;
}
.fxm-ws-label { font-size: 12px; color: var(--fx-sub); margin-bottom: 8px; }

/* ---------------------------------------------------------------- 赠送 / 榜单 */
.fxm-gift-form {
    max-width: 460px; display: flex; flex-direction: column; gap: 14px;
    padding: 22px; border: 1px solid var(--fx-line); border-radius: 18px; background: var(--fx-card);
}
.fxm-gift-form h3 { font-size: 17px; font-weight: 800; }
.fxm-gift-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fx-sub); }
.fxm-gift-form .fxm-btn { align-self: flex-start; }
.fxm-rank { display: flex; flex-direction: column; gap: 8px; }
.fxm-rank-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--fx-line); border-radius: 12px; background: var(--fx-card);
}
.fxm-rank-no { flex: 0 0 26px; font-weight: 800; color: var(--fx-a); text-align: center; }
.fxm-rank-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; background: #eee center/cover no-repeat; }
.fxm-rank-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fxm-rank-name b { font-size: 14px; }
.fxm-rank-name span { color: var(--fx-sub); font-size: 12px; }
.fxm-rank-score { font-size: 17px; color: var(--fx-a); }
.fxm-share { display: flex; gap: 9px; margin-top: 18px; }
.fxm-share input { flex: 1; }

/* ---------------------------------------------------------------- 移动端 / 窄屏 */
.fxm-mobile { padding: 12px 12px 46px; max-width: none; }
.fxm-shell { padding-top: 44px; }
.fxm-shell-self { min-height: 100%; }
.fxm-mobile .fxm-title { font-size: 20px; }
.fxm-mobile .fxm-brand-mark { flex-basis: 44px; width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
.fxm-mobile .fxm-head-inner { align-items: flex-start; }
.fxm-mobile .fxm-wallet { padding: 6px 10px; flex-wrap: wrap; justify-content: flex-end; }
.fxm-mobile .fxm-wallet-num { font-size: 16px; }
.fxm-mobile .fxm-tab { padding: 8px 11px; font-size: 13px; }
.fxm-mobile .fxm-tab i { font-size: 15px; }
.fxm-mobile .fxm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fxm-mobile .fxm-card-fx { height: 116px; }
.fxm-mobile .fxm-card-body { padding: 10px; gap: 7px; }
.fxm-mobile .fxm-card-name { font-size: 14px; }
.fxm-mobile .fxm-price { font-size: 16px; }
.fxm-mobile .fxm-card-acts .fxm-btn, .fxm-mobile .fxm-card-acts .fxm-ghost { padding: 6px 8px; font-size: 12px; }
.fxm-mobile .fxm-workshop { grid-template-columns: 1fr; }
.fxm-mobile .fxm-bag-row { flex-wrap: wrap; }
.fxm-mobile .fxm-bag-acts { width: 100%; }

@media (max-width: 900px) {
    .fxm-root { padding: 14px 14px 48px; }
    .fxm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .fxm-head-inner { flex-direction: column; align-items: stretch; }
    .fxm-wallet { align-self: flex-start; }
    .fxm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fxm-workshop { grid-template-columns: 1fr; }
    .fxm-wearing { width: 100%; }
}

/* ---------------------------------------------------------------- 移动端修版 1.0.7
   这几条必须放在所有 @media 之后：宿主单页壳的 navbar 是 absolute top:0 / z:50，
   而 .ls-page-scroller 从 top:0 起算。原来 `.fxm-shell{padding-top:44px}` 被后面
   `@media(max-width:900px) .fxm-root{padding:14px…}` 同特异性覆盖，页头被压掉 30px。
   用双类选择器提权，顺便吃掉刘海屏的 safe-area。 */
.fxm-root.fxm-shell {
    padding-top: calc(44px + env(safe-area-inset-top, 0px) + 12px);
}
.fxm-root.fxm-mobile {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    /* 底部让开宿主的 tabbar 与右下角 ads-fab 悬浮按钮，最后一排卡片不再被压住。 */
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
.fxm-mobile .fxm-head { margin-bottom: 14px; }

/* 五个页签默认全部可见：原来 flex:1 0 auto 让最后一个「穿搭榜」被裁成半个字。 */
.fxm-mobile .fxm-tabs { gap: 4px; padding: 4px; overflow-x: auto; }
.fxm-mobile .fxm-tab {
    flex: 1 1 0; min-width: 0; padding: 8px 2px; gap: 3px;
    font-size: 12px; white-space: nowrap;
}
.fxm-mobile .fxm-tab i { flex: 0 0 auto; font-size: 14px; }

/* 分类 chips 收成一条可横滑的行，「弹幕皮肤」不再孤零零掉到第二行。 */
.fxm-mobile .fxm-filters { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fxm-mobile .fxm-chips {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scrollbar-width: none; padding-bottom: 2px;
}
.fxm-mobile .fxm-chips::-webkit-scrollbar { display: none; }
/* 六个分类在这档字号下刚好一排全放下，不必再横滑找「弹幕皮肤」；
   更窄的屏仍由 overflow-x:auto 兜住。 */
.fxm-mobile .fxm-chip { flex: 0 0 auto; white-space: nowrap; padding: 5px 10px; font-size: 12px; }
.fxm-mobile .fxm-wearing { flex: 1 1 100%; }

/* 三个主按钮一行、套装的「一键换装」自动落到第二行，不再四个挤成一条；
   长名字不撑破；弹层在矮屏上可滚，不被截断。 */
.fxm-mobile .fxm-card-acts { flex-wrap: wrap; gap: 5px; }
.fxm-mobile .fxm-card-acts .fxm-btn,
.fxm-mobile .fxm-card-acts .fxm-ghost {
    flex: 1 1 auto; min-width: 0; padding: 6px 4px; font-size: 11px;
}
.fxm-mobile .fxm-card-name, .fxm-mobile .fxm-dur { overflow-wrap: anywhere; }
.fxm-mobile .fxm-modal-box { max-height: calc(100vh - 110px); overflow-y: auto; }
.fxm-mobile .fxm-preview-card { max-height: calc(100vh - 100px); overflow-y: auto; }
.fxm-mobile .fxm-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 360px) {
    .fxm-mobile .fxm-tab { font-size: 11px; }
    .fxm-mobile .fxm-tab i { display: none; }
    .fxm-mobile .fxm-title { font-size: 18px; }
}


/* ---------------------------------------------------------------- 1.3.2 全站装饰
   头像框：环带画在 SVG 半径 54~58，把整框放大到头像的 1.28 倍并居中，
   环带就落在头像外围一圈 —— 不再与头像等大、贴在边缘内侧显得「缩在头像里」。
   产品原生路径(.ls-avatar-frame)与前端兜底路径([data-fxm-frame])共用同一套
   定位，用 !important 盖过产品 CSS 的 1.6 倍缩放，双端所有头像容器统一。 */
.ls-avatar-frame,
[data-fxm-frame] {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    right: auto !important; bottom: auto !important;
    width: calc(100% * var(--fxm-frame-scale, 1.28)) !important;
    height: calc(100% * var(--fxm-frame-scale, 1.28)) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
.ls-avatar-frame > img,
[data-fxm-frame] > img {
    width: 100% !important; height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 4px rgba(120, 100, 220, .32));
}

/* 头衔徽章：渐变胶囊 + 宝石 + 白描边 + 顶部高光 + 柔和投影，
   替换原来「纯色方块 + 撞色文字」。颜色由商品双色参数经 --fxm-a/--fxm-b
   注入，与产品蓝色「1级」角标并排协调，不覆盖任何产品原有类名。 */
.ls-mark.fxm-badge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 16px !important;
    line-height: 1 !important;
    padding: 0 8px 0 19px !important;
    gap: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--fxm-a, #7c5cff), var(--fxm-b, #4ad6ff)) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    white-space: nowrap;
    vertical-align: middle;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    box-shadow: 0 2px 7px rgba(80, 60, 170, .28), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    margin-left: 4px !important;
}
.ls-mark.fxm-badge .fxm-badge-gem {
    position: absolute;
    left: 6px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    transform: rotate(45deg);
    border-radius: 1.5px;
    background: linear-gradient(135deg, #ffffff, #ffe9b0);
    box-shadow: 0 0 4px rgba(255, 255, 255, .95);
}
.ls-mark.fxm-badge .fxm-badge-txt { position: relative; z-index: 1; }
/* 后台若给头衔配了自定义图片，就退回纯图片、不套胶囊。 */
.ls-mark.fxm-badge-img {
    padding: 0 !important; background: none !important;
    border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; height: 16px !important;
}
.ls-mark.fxm-badge-img img {
    max-width: 64px !important; height: 16px !important;
    width: auto !important; object-fit: contain !important; display: block !important;
}
@media (min-width: 641px) {
    .ls-mark.fxm-badge {
        height: 18px !important; font-size: 11px !important;
        padding: 0 10px 0 21px !important; border-radius: 9px !important;
    }
    .ls-mark.fxm-badge .fxm-badge-gem { width: 8px; height: 8px; margin-top: -4px; }
    .ls-mark.fxm-badge-img, .ls-mark.fxm-badge-img img { height: 18px !important; }
}

/* ================================================================ 1.3.2 订单中心 / 管理后台
   放在全文件最后：7 个页签、表格、表单都要能压过前面的移动端修版规则。 */

/* 七个页签：宽屏均分、窄屏横滑，最后一个「管理」不被裁成半个字。 */
.fxm-tabs .fxm-tab { flex: 1 0 auto; min-width: 74px; }
.fxm-root.fxm-mobile .fxm-tabs { flex-wrap: nowrap; overflow-x: auto; }
.fxm-root.fxm-mobile .fxm-tab {
    flex: 1 0 auto; min-width: 52px; padding: 8px 4px;
    font-size: 11px; gap: 2px; white-space: nowrap;
}

.fxm-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.fxm-sec-head h3 { margin: 0; font-size: 17px; }
.fxm-sec-head > span { color: var(--fx-sub); font-size: 13px; }
.fxm-sec-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* -------- 订单列表 -------- */
.fxm-order-list { display: flex; flex-direction: column; gap: 10px; }
.fxm-order-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--fx-line);
    border-radius: 12px; background: var(--fx-bg);
}
.fxm-order-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fxm-order-main b { font-size: 14px; overflow-wrap: anywhere; }
.fxm-order-main span { color: var(--fx-sub); font-size: 11px; overflow-wrap: anywhere; }
.fxm-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fxm-order-amt { font-size: 15px; white-space: nowrap; }
.fxm-order-st { font-size: 11px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.fxm-order-st-paid { color: #0a8f5b; background: color-mix(in srgb, #12c97e 14%, transparent); }
.fxm-order-st-refunded { color: var(--fx-sub); background: var(--fx-line); }
.fxm-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-top: 16px; color: var(--fx-sub); font-size: 13px;
}

/* -------- 数据看板 -------- */
.fxm-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.fxm-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border: 1px solid var(--fx-line);
    border-radius: 12px; background: var(--fx-bg); min-width: 0;
}
.fxm-stat > span { color: var(--fx-sub); font-size: 12px; }
.fxm-stat > b { font-size: 19px; overflow-wrap: anywhere; }
.fxm-stat > i { color: var(--fx-sub); font-size: 11px; font-style: normal; }
.fxm-hot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fxm-hot > span { color: var(--fx-sub); font-size: 12px; }
.fxm-hot-chip {
    font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: 8px;
    background: color-mix(in srgb, var(--fx-a) 12%, transparent);
}
.fxm-warn {
    padding: 10px 12px; margin-bottom: 14px; border-radius: 10px;
    font-size: 12px; line-height: 1.6;
    color: #a35a00; background: color-mix(in srgb, #ffb020 16%, transparent);
}

/* -------- 商品表格 -------- */
.fxm-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--fx-line); border-radius: 12px; }
.fxm-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 13px; }
.fxm-table th, .fxm-table td {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--fx-line);
    vertical-align: middle;
}
.fxm-table th { color: var(--fx-sub); font-weight: 600; font-size: 12px; white-space: nowrap; }
.fxm-table tbody tr:last-child td { border-bottom: 0; }
.fxm-td-id { color: var(--fx-sub); font-size: 12px; }
.fxm-td-sub { display: block; color: var(--fx-sub); font-size: 11px; }
.fxm-td-acts { white-space: nowrap; }
.fxm-td-acts .fxm-ghost { margin-right: 6px; padding: 4px 9px; font-size: 12px; }
.fxm-price-in {
    width: 72px; padding: 5px 7px; border: 1px solid var(--fx-line);
    border-radius: 8px; background: var(--fx-bg); color: inherit; font-size: 13px;
}
.fxm-st-on { color: #0a8f5b; font-size: 12px; }
.fxm-st-off { color: var(--fx-sub); font-size: 12px; }
.fxm-admin-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; flex-wrap: wrap;
    color: var(--fx-sub); font-size: 12px;
}

/* -------- 编辑表单 -------- */
.fxm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fxm-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fx-sub); }
.fxm-form input, .fxm-form select, .fxm-form textarea {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--fx-line); border-radius: 9px;
    background: var(--fx-bg); color: inherit; font-size: 13px; font-family: inherit;
}
.fxm-form textarea { grid-column: 1 / -1; resize: vertical; }
.fxm-form label:has(textarea) { grid-column: 1 / -1; }
/* 1.4.3：后台表单按「付费 / 免费 / 任务」切换显隐。
   上面的 display:flex 会盖掉浏览器给 [hidden] 的 display:none，必须显式压回去。 */
.fxm-form label[hidden] { display: none !important; }

/* 1.4.6：VIP 折扣标。金色小胶囊，贴在折后价旁边。 */
/* 折后价旁边的小划线原价 */
.fxm-was {
    margin-left: 4px; font-size: 11px; font-weight: 400;
    color: var(--fx-sub); text-decoration: line-through; opacity: .8;
}
.fxm-vip-tag {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap;
    color: #7a5c00; background: linear-gradient(135deg, #ffe9a8, #ffd700);
}

/* -------- 移动端收敛 -------- */
@media (max-width: 640px) {
    .fxm-sec-head { gap: 8px; }
    .fxm-sec-head h3 { font-size: 15px; }
    .fxm-sec-acts { width: 100%; }
    .fxm-sec-acts .fxm-btn, .fxm-sec-acts .fxm-ghost { flex: 1 1 auto; font-size: 11px; padding: 6px 8px; }
    .fxm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fxm-stat { padding: 10px; }
    .fxm-stat > b { font-size: 16px; }
    .fxm-order-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .fxm-order-side { flex-direction: row; align-items: center; gap: 8px; }
    .fxm-form { grid-template-columns: 1fr; }
    .fxm-form textarea, .fxm-form label:has(textarea) { grid-column: 1; }
    .fxm-admin-foot { flex-direction: column; align-items: stretch; }
    .fxm-admin-foot .fxm-ghost { width: 100%; }

    /* 表格在窄屏改成一行一张卡片：列不再需要横滑，编辑/上下架按钮始终可见。
       用 display:block 解掉 table 布局，td 用 ::before 带出列名。 */
    .fxm-table-wrap { border: 0; border-radius: 0; overflow: visible; }
    .fxm-table { min-width: 0; display: block; }
    .fxm-table thead { display: none; }
    .fxm-table tbody { display: block; }
    .fxm-table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
        margin-bottom: 10px; padding: 12px; border: 1px solid var(--fx-line);
        border-radius: 12px; background: var(--fx-bg);
    }
    .fxm-table tbody td {
        display: flex; flex-direction: column; gap: 3px;
        padding: 0; border: 0; min-width: 0; font-size: 13px;
    }
    .fxm-table tbody td::before {
        content: attr(data-label); color: var(--fx-sub); font-size: 10px; font-weight: 600;
    }
    .fxm-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
    .fxm-table tbody td.fxm-td-id { display: none; }
    .fxm-table tbody td.fxm-td-acts {
        grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
        gap: 8px; margin-top: 2px;
        /* 宿主 ads-fab 是 fixed 在视口右下角（约 81×41，z-index 990），
           长列表滚动时始终压住右侧。让两个按钮靠左、右侧留出安全区，
           任何卡片滚到那个位置都不会盖住「编辑 / 上下架」。 */
        padding-right: 96px; box-sizing: border-box;
    }
    .fxm-table tbody td.fxm-td-acts::before { display: none; }
    .fxm-table tbody td.fxm-td-acts .fxm-ghost {
        flex: 1 1 0; max-width: 120px; margin: 0; padding: 7px 8px;
    }
    .fxm-table .fxm-price-in { width: 100%; }
}
@media (max-width: 420px) {
    .fxm-root.fxm-mobile .fxm-tab i { display: none; }
    .fxm-root.fxm-mobile .fxm-tab { min-width: 46px; padding: 8px 3px; font-size: 11px; }
}

/* ==========================================================================
   1.3.2 · PC 端界面重构
   布局参考官方头衔商城的三栏结构（左侧主面板 + 右侧信息栏），
   卡片改为「渐变预览区 + 名称 + 描述 + 价格/操作」四段式，
   并按普通 / 稀有 / 史诗 / 传说四档给出不同的色带与光效。
   ========================================================================== */

/* ---------------------------------------------------------------- 页面底色 */
.fxm-root.fxm-shell,
.fxm-root {
    --fxm-a: #7c5cff;
    --fxm-b: #4ad6ff;
    --fxm-t1: #8a90a6;
    --fxm-t2: #3b82f6;
    --fxm-t3: #8b5cf6;
    --fxm-t4: #f59e0b;
}
.fxm-root.fxm-shell {
    background:
        radial-gradient(900px 320px at 12% -8%, rgba(124, 92, 255, .10), transparent 70%),
        radial-gradient(760px 320px at 96% 4%, rgba(74, 214, 255, .10), transparent 66%),
        #f4f5fa;
    border-radius: 20px;
    padding: 16px;
}

/* ---------------------------------------------------------------- 顶部英雄区 */
.fxm-shell .fxm-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid rgba(124, 92, 255, .10);
    border-radius: 18px;
    background:
        radial-gradient(420px 140px at 8% 0%, rgba(124, 92, 255, .10), transparent 70%),
        linear-gradient(120deg, #ffffff, #fbfaff 62%, #f6fbff);
    box-shadow: 0 10px 30px rgba(58, 78, 112, .07);
}
.fxm-shell .fxm-hero-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fxm-shell .fxm-hero-mark {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg, #7c5cff, #4ad6ff);
    box-shadow: 0 8px 18px rgba(124, 92, 255, .32);
    color: #fff; font-size: 22px;
}
.fxm-shell .fxm-hero-copy { min-width: 0; }
.fxm-shell .fxm-title {
    margin: 0; font-size: 21px; line-height: 1.3; font-weight: 800;
    color: #171a2b; letter-spacing: -.2px;
}
.fxm-shell .fxm-intro {
    margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: #8a90a6;
    max-width: 640px;
}
.fxm-shell .fxm-hero-side { display: flex; align-items: center; gap: 10px; }
.fxm-shell .fxm-wallet {
    display: inline-flex; align-items: baseline; gap: 7px;
    height: 38px; padding: 0 15px; border-radius: 999px;
    background: #f2f0ff; border: 1px solid rgba(124, 92, 255, .16);
}
.fxm-shell .fxm-wallet-label { font-size: 11.5px; color: #7b7f96; }
.fxm-shell .fxm-wallet-num {
    font-size: 16px; font-weight: 800; color: #6d4dff;
    font-variant-numeric: tabular-nums;
}
.fxm-shell .fxm-wallet-guest { font-size: 11px; color: #a2a6ba; }
.fxm-shell .fxm-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #7c5cff, #9b6cff 55%, #5ac8ff);
    color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 18px rgba(124, 92, 255, .30);
    transition: transform .16s ease, box-shadow .16s ease;
}
.fxm-shell .fxm-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(124, 92, 255, .38); }

/* ---------------------------------------------------------------- 页签 */
.fxm-shell .fxm-tabs {
    margin: 14px 0 0; padding: 5px; gap: 4px;
    border: 1px solid rgba(124, 92, 255, .09);
    border-radius: 14px; background: #fff;
    box-shadow: 0 4px 14px rgba(58, 78, 112, .05);
}
.fxm-shell .fxm-tab {
    border-radius: 10px; font-weight: 600; color: #6b7089;
    transition: background .15s ease, color .15s ease;
}
.fxm-shell .fxm-tab:hover { background: #f4f2ff; color: #6d4dff; }
.fxm-shell .fxm-tab.is-on {
    background: linear-gradient(135deg, #7c5cff, #6d4dff);
    color: #fff; box-shadow: 0 6px 14px rgba(124, 92, 255, .28);
}

/* ---------------------------------------------------------------- 两栏骨架 */
.fxm-shell .fxm-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 306px;
    gap: 16px; align-items: start; margin-top: 16px;
}
.fxm-shell .fxm-col-main, .fxm-shell .fxm-col-side { min-width: 0; }
.fxm-shell .fxm-col-side { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------- 主面板 */
.fxm-shell .fxm-panel {
    padding: 16px 18px 18px;
    border: 1px solid rgba(124, 92, 255, .10);
    border-radius: 18px; background: #fff;
    box-shadow: 0 10px 30px rgba(58, 78, 112, .06);
}
.fxm-shell .fxm-panel-head {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px;
}
.fxm-shell .fxm-panel-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 11px;
    background: linear-gradient(135deg, #efe9ff, #e6f7ff);
    color: #7c5cff; font-size: 17px;
}
.fxm-shell .fxm-panel-copy { flex: 1 1 260px; min-width: 0; }
.fxm-shell .fxm-panel-copy h2 {
    margin: 0; font-size: 16px; font-weight: 800; color: #171a2b;
}
.fxm-shell .fxm-panel-copy p {
    margin: 3px 0 0; font-size: 12px; line-height: 1.65; color: #8a90a6;
}
.fxm-shell .fxm-panel-wear {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11px; color: #9aa0b4;
}
.fxm-shell .fxm-wear-chip {
    padding: 3px 9px; border-radius: 999px;
    background: #f3f1ff; color: #6d4dff;
    font-size: 11px; font-style: normal; font-weight: 600;
}
.fxm-shell .fxm-wear-chip.is-empty { background: #f4f5fa; color: #a2a6ba; font-weight: 500; }

/* ---------------------------------------------------------------- 工具栏 */
.fxm-shell .fxm-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 0 14px;
    border-top: 1px solid #f0f1f7;
}
.fxm-shell .fxm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fxm-shell .fxm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 13px; border-radius: 999px;
    border: 1px solid transparent; background: #f5f6fa;
    color: #6b7089; font-size: 12.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all .15s ease;
}
.fxm-shell .fxm-chip:hover { background: #efeaff; color: #6d4dff; }
.fxm-shell .fxm-chip.is-on {
    background: linear-gradient(135deg, #7c5cff, #6d4dff);
    color: #fff; box-shadow: 0 6px 14px rgba(124, 92, 255, .26);
}
.fxm-shell .fxm-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
    background: currentColor; opacity: .55;
}
.fxm-shell .fxm-chip.is-on .fxm-dot { background: #fff; opacity: .9; }
.fxm-shell .fxm-dot.d1 { background: #8a90a6; }
.fxm-shell .fxm-dot.d2 { background: #3b82f6; }
.fxm-shell .fxm-dot.d3 { background: #8b5cf6; }
.fxm-shell .fxm-dot.d4 { background: #f59e0b; }

.fxm-shell .fxm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fxm-shell .fxm-search {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; min-width: 208px;
    border: 1px solid #e8eaf2; border-radius: 999px; background: #fafbfe;
    color: #a2a6ba; transition: border-color .15s ease, background .15s ease;
}
.fxm-shell .fxm-search:focus-within {
    border-color: rgba(124, 92, 255, .45); background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .10);
}
.fxm-shell .fxm-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: 12.5px; color: #333a52;
}
.fxm-shell .fxm-select {
    height: 32px; padding: 0 28px 0 12px;
    border: 1px solid #e8eaf2; border-radius: 10px; background: #fafbfe;
    color: #5b6076; font-size: 12.5px; font-weight: 500; cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #a2a6ba 50%),
                      linear-gradient(135deg, #a2a6ba 50%, transparent 50%);
    background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.fxm-shell .fxm-select:focus { outline: 0; border-color: rgba(124, 92, 255, .45); }

/* ---------------------------------------------------------------- 卡片网格 */
.fxm-shell .fxm-panel .fxm-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.fxm-shell .fxm-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid #eef0f6; border-radius: 16px; background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fxm-shell .fxm-card:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 92, 255, .22);
    box-shadow: 0 14px 30px rgba(58, 78, 112, .12);
}
.fxm-shell .fxm-card.is-equipped {
    border-color: rgba(124, 92, 255, .42);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .10);
}

/* 预览区：按档次给不同底色，让「贵」一眼可辨 */
.fxm-shell .fxm-card-fx {
    position: relative; height: 126px; overflow: hidden;
    display: grid; place-items: center;
    background:
        radial-gradient(120px 88px at 50% 118%, rgba(124, 92, 255, .10), transparent 72%),
        #f7f8fd;
}
.fxm-shell .fxm-c-t2 .fxm-card-fx {
    background: radial-gradient(120px 88px at 50% 118%, rgba(59, 130, 246, .14), transparent 72%), #f6f9ff;
}
.fxm-shell .fxm-c-t3 .fxm-card-fx {
    background: radial-gradient(120px 88px at 50% 118%, rgba(139, 92, 246, .16), transparent 72%), #f8f5ff;
}
.fxm-shell .fxm-c-t4 .fxm-card-fx {
    background: radial-gradient(120px 88px at 50% 118%, rgba(245, 158, 11, .20), transparent 72%), #fffbf2;
}
.fxm-shell .fxm-c-t3 .fxm-card-fx::after,
.fxm-shell .fxm-c-t4 .fxm-card-fx::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120px 70px at 50% 118%, rgba(255, 255, 255, .9), transparent 70%);
}
.fxm-shell .fxm-card-tags {
    position: absolute; top: 8px; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    z-index: 2;
}
.fxm-shell .fxm-tier {
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: var(--fxm-t1); letter-spacing: .2px;
}
.fxm-shell .fxm-tier-2 { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.fxm-shell .fxm-tier-3 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.fxm-shell .fxm-tier-4 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.fxm-shell .fxm-live {
    padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #10b981, #34d399);
}
.fxm-shell .fxm-state {
    margin-left: auto; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    background: rgba(23, 26, 43, .06); color: #6b7089;
    backdrop-filter: blur(6px);
}
.fxm-shell .fxm-state.is-on {
    background: linear-gradient(135deg, #7c5cff, #6d4dff); color: #fff;
}

/* 卡片下半部 */
.fxm-shell .fxm-card-body { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 12px; }
.fxm-shell .fxm-card-name {
    display: flex; align-items: center; gap: 6px;
    margin: 0; font-size: 13.5px; font-weight: 700; color: #171a2b;
}
.fxm-shell .fxm-card-kind {
    padding: 1px 6px; border-radius: 6px;
    background: #f4f5fa; color: #9aa0b4;
    font-size: 9.5px; font-weight: 600;
}
.fxm-shell .fxm-card-desc {
    margin: 0; min-height: 30px;
    font-size: 11px; line-height: 1.55; color: #939ab0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fxm-shell .fxm-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-top: 2px; padding-top: 9px; border-top: 1px dashed #f0f1f7;
    flex-wrap: nowrap;
}
.fxm-shell .fxm-card-price {
    display: inline-flex; align-items: baseline; gap: 3px;
    min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap;
}
.fxm-shell .fxm-price {
    display: inline-flex; align-items: center; gap: 2px;
    color: #6d4dff; font-size: 14px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.fxm-shell .fxm-price i { font-size: 12px; color: #a78bfa; }
.fxm-shell .fxm-price-free { color: #10b981; }
.fxm-shell .fxm-origin { font-size: 10.5px; color: #c3c7d4; }
.fxm-shell .fxm-card-dur { font-size: 10px; color: #a2a6ba; flex: 0 0 auto; white-space: nowrap; }
.fxm-shell .fxm-vip {
    padding: 1px 5px; border-radius: 5px;
    background: #fff7e6; color: #d97706; font-size: 9.5px; font-weight: 700;
}
.fxm-shell .fxm-card-acts {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: nowrap; justify-content: flex-end; flex: 0 0 auto;
}
.fxm-shell .fxm-primary {
    height: 27px; padding: 0 11px; border: 0; border-radius: 8px;
    background: linear-gradient(135deg, #7c5cff, #6d4dff); color: #fff;
    font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 10px rgba(124, 92, 255, .26);
    transition: transform .14s ease, box-shadow .14s ease;
}
.fxm-shell .fxm-primary:hover { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(124, 92, 255, .34); }
.fxm-shell .fxm-mini {
    height: 27px; padding: 0 8px; border-radius: 8px;
    border: 1px solid #e8eaf2; background: #fff; color: #6b7089;
    font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: all .14s ease;
}
.fxm-shell .fxm-mini:hover { border-color: rgba(124, 92, 255, .4); color: #6d4dff; background: #faf9ff; }
.fxm-shell .fxm-mini.is-on { border-color: rgba(124, 92, 255, .4); color: #6d4dff; background: #f5f2ff; }
/* 次要动作收成方形图标，一行放得下，窄卡片也不再折行 */
.fxm-shell .fxm-mini.fxm-icon {
    width: 27px; padding: 0; display: inline-grid; place-items: center;
    font-size: 13px; color: #8b90a6;
}
.fxm-shell .fxm-mini.fxm-icon:hover { color: #6d4dff; }
.fxm-shell .fxm-mini.fxm-icon i { line-height: 1; }

.fxm-shell .fxm-footnote {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid #f4f5fa;
    font-size: 11px; line-height: 1.6; color: #a2a6ba;
}
.fxm-shell .fxm-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 56px 20px; color: #a2a6ba;
}
.fxm-shell .fxm-empty i { font-size: 30px; color: #c9cde0; }
.fxm-shell .fxm-empty p { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #6b7089; }
.fxm-shell .fxm-empty span { font-size: 11.5px; }

/* ---------------------------------------------------------------- 右侧栏 */
.fxm-shell .fxm-side {
    padding: 14px 15px 15px;
    border: 1px solid rgba(124, 92, 255, .10);
    border-radius: 16px; background: #fff;
    box-shadow: 0 8px 22px rgba(58, 78, 112, .05);
}
.fxm-shell .fxm-side h3 {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 9px; font-size: 13px; font-weight: 800; color: #171a2b;
}
.fxm-shell .fxm-side h3 i { color: #7c5cff; font-size: 15px; }
.fxm-shell .fxm-side-text {
    margin: 0; font-size: 11.5px; line-height: 1.75; color: #8a90a6;
}
.fxm-shell .fxm-side-text.is-muted { color: #b3b8c8; }

.fxm-shell .fxm-feed { display: flex; flex-direction: column; gap: 2px; }
.fxm-shell .fxm-feed-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 4px; border-radius: 9px;
    transition: background .14s ease;
}
.fxm-shell .fxm-feed-row:hover { background: #faf9ff; }
.fxm-shell .fxm-feed-ava {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 9px;
    background: linear-gradient(135deg, #efe9ff, #e6f7ff);
    color: #7c5cff; font-size: 11.5px; font-weight: 800;
}
.fxm-shell .fxm-feed-copy {
    display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
}
.fxm-shell .fxm-feed-copy b {
    font-size: 11.5px; font-weight: 700; color: #333a52;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fxm-shell .fxm-feed-copy span {
    font-size: 10.5px; color: #9aa0b4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fxm-shell .fxm-feed-row time { flex: 0 0 auto; font-size: 10px; color: #c3c7d4; }
.fxm-shell .fxm-feed-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.fxm-shell .fxm-feed-skel i {
    height: 26px; border-radius: 9px;
    background: linear-gradient(90deg, #f4f5fa 25%, #eceef6 37%, #f4f5fa 63%);
    background-size: 400% 100%;
    animation: fxm-skel 1.3s ease-in-out infinite;
}
@keyframes fxm-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   卡片内的动态预览（与线上 SVG SMIL 同一套观感）
   ========================================================================== */

/* —— 头衔：胶囊 + 宝石，高档位加流光 —— */
/* 基础 .fxm-fx 会给整块铺商品双色渐变（登场/弹幕要用），
   但头衔与头像框必须让「装饰本身」当主角，这里把底色和高光层撤掉。 */
.fxm-shell .fxm-fx-title,
.fxm-shell .fxm-fx-frame { background: none; }
.fxm-shell .fxm-fx-title::after,
.fxm-shell .fxm-fx-frame::after { display: none; }
.fxm-shell .fxm-fx-title { display: grid; place-items: center; padding: 8px; }
.fxm-shell .fxm-title-chip {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 13px;
    border-radius: 999px;
    background: linear-gradient(115deg, var(--fx-a), var(--fx-b));
    color: #fff; font-size: 12px; font-weight: 800;
    letter-spacing: .3px; white-space: nowrap;
    box-shadow: 0 5px 14px rgba(23, 26, 43, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.fxm-shell .fxm-m-shimmer .fxm-title-chip::after,
.fxm-shell .fxm-m-aura .fxm-title-chip::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .85) 48%, transparent 76%);
    transform: translateX(-120%);
    animation: fxm-shine 2.8s ease-in-out infinite;
}
@keyframes fxm-shine {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
.fxm-shell .fxm-m-aura .fxm-title-chip {
    animation: fxm-breathe 2.6s ease-in-out infinite;
}
@keyframes fxm-breathe {
    0%, 100% { box-shadow: 0 5px 14px rgba(23, 26, 43, .18); }
    50% { box-shadow: 0 5px 22px rgba(255, 190, 80, .55), 0 0 0 3px rgba(255, 255, 255, .28); }
}
.fxm-shell .fxm-t4 .fxm-title-chip {
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 6px 16px rgba(23, 26, 43, .26);
}
.fxm-shell .fxm-t4 .fxm-title-chip::before {
    content: '✦'; position: absolute; left: 4px; top: 50%;
    transform: translateY(-50%); font-size: 9px; color: rgba(255, 255, 255, .9);
}

/* —— 头像框：conic 渐变环 + 旋转 / 轨道 / 光场 —— */
.fxm-shell .fxm-fx-frame { display: grid; place-items: center; padding: 6px; }
.fxm-shell .fxm-frame-ring {
    position: relative;
    width: 72px; height: 72px; border-radius: 50%;
    display: grid; place-items: center;
}
/* 环带用蒙版环形铺渐变；inset 负值让环落在头像外圈，视觉上「包住」而不是「压住」 */
.fxm-shell .fxm-frame-ring::before {
    content: ''; position: absolute; inset: -11px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--fx-a), var(--fx-b), var(--fx-a));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    opacity: .96;
}
/* 外层：白色内衬细线，浅色底上也能看出「一圈框」 */
.fxm-shell .fxm-frame-ring::after {
    content: ''; position: absolute; inset: -12px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 1px rgba(23, 26, 43, .06), 0 6px 16px rgba(58, 78, 112, .14);
    pointer-events: none;
}
.fxm-shell .fxm-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, #ffffff55, transparent 55%),
        linear-gradient(160deg, #ffb27a, #ff8f5e 60%, #f2703f);
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .12);
}
.fxm-shell .fxm-frame-spark {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9);
    opacity: 0;
}
.fxm-shell .fxm-m-spin .fxm-frame-ring::before { animation: fxm-rot 6s linear infinite; }
.fxm-shell .fxm-m-spin .fxm-frame-ring::after { animation: fxm-rot 12s linear infinite reverse; }
.fxm-shell .fxm-m-orbit .fxm-frame-ring::after { animation: fxm-rot 9s linear infinite; }
.fxm-shell .fxm-m-orbit .fxm-frame-spark { opacity: 1; animation: fxm-orbit 6s linear infinite; }
.fxm-shell .fxm-m-aura .fxm-frame-ring::before { animation: fxm-rot 4.5s linear infinite; }
.fxm-shell .fxm-m-aura .fxm-frame-ring::after {
    animation: fxm-rot 7s linear infinite reverse;
    inset: -13px; opacity: .8; filter: blur(2.5px);
}
.fxm-shell .fxm-m-aura .fxm-frame-ring { animation: fxm-glow 2.6s ease-in-out infinite; }
.fxm-shell .fxm-m-aura .fxm-frame-spark { opacity: 1; animation: fxm-orbit 4.5s linear infinite; }
.fxm-shell .fxm-frame-spark.s1 { animation-delay: 0s; }
.fxm-shell .fxm-frame-spark.s2 { animation-delay: 1.5s; }
.fxm-shell .fxm-frame-spark.s3 { animation-delay: 3s; }
.fxm-shell .fxm-frame-spark.s4 { animation-delay: 4.5s; }
@keyframes fxm-rot { to { transform: rotate(360deg); } }
@keyframes fxm-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 200, 90, .35)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 200, 90, .75)); }
}
@keyframes fxm-orbit {
    0% { transform: rotate(0deg) translateX(46px) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: rotate(360deg) translateX(46px) rotate(-360deg); opacity: 0; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1180px) {
    .fxm-shell .fxm-panel .fxm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .fxm-shell .fxm-layout { grid-template-columns: minmax(0, 1fr); }
    .fxm-shell .fxm-col-side { flex-direction: row; flex-wrap: wrap; }
    .fxm-shell .fxm-col-side .fxm-side { flex: 1 1 260px; }
}
@media (max-width: 760px) {
    .fxm-shell .fxm-panel .fxm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fxm-shell .fxm-hero { padding: 14px; }
    .fxm-shell .fxm-intro { display: none; }
    .fxm-shell .fxm-toolbar { gap: 8px; }
    /* 搜索独占一行，下面两个下拉 + 兑换码平分 —— 挤成一行时搜索框只剩一个「搜」字 */
    .fxm-root.fxm-shell .fxm-tools {
        display: grid; grid-template-columns: 1fr 1fr auto;
        gap: 8px; width: 100%;
    }
    .fxm-root.fxm-shell .fxm-tools .fxm-search { grid-column: 1 / -1; width: 100%; min-width: 0; }
    .fxm-root.fxm-shell .fxm-tools .fxm-select { width: 100%; min-width: 0; }
    .fxm-root.fxm-shell .fxm-tools .fxm-code-btn { width: auto; }
    .fxm-shell .fxm-card-fx { height: 108px; }
    .fxm-shell .fxm-frame-ring { width: 70px; height: 70px; }
    .fxm-shell .fxm-avatar { width: 54px; height: 54px; }
}
@media (max-width: 480px) {
    .fxm-shell .fxm-panel { padding: 12px; }
    .fxm-shell .fxm-panel-wear { width: 100%; }
    .fxm-shell .fxm-card-acts { width: 100%; justify-content: flex-start; }
    .fxm-shell .fxm-card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ==========================================================================
   1.3.2 · 移动端适配
   1) 宿主顶部导航是 fixed，内容必须自己让出高度，否则英雄区被压住；
   2) 五个等级胶囊收小到一行放完；
   3) 搜索 + 类型 + 排序压到一行；
   4) 卡片操作按钮改左对齐，避开右下角固定的「投广告」悬浮按钮；
   5) 公告 / 动态栏在窄屏收起，优先保证商品区。
   ========================================================================== */
.fxm-root.fxm-mobile.fxm-shell {
    padding: 56px 12px calc(104px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: #f4f5fa;
}
.fxm-mobile .fxm-hero { padding: 13px 14px; border-radius: 16px; }
.fxm-mobile .fxm-hero-mark { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }
.fxm-mobile .fxm-title { font-size: 18px; }
.fxm-mobile .fxm-hero-side { gap: 8px; }
.fxm-mobile .fxm-wallet { height: 34px; padding: 0 12px; }
.fxm-mobile .fxm-wallet-num { font-size: 15px; }
.fxm-mobile .fxm-hero-btn { height: 34px; padding: 0 13px; font-size: 12px; }

/* 页签：一行放下七个 */
.fxm-mobile .fxm-tabs { margin-top: 12px; padding: 4px; gap: 2px; }
.fxm-mobile .fxm-tab { font-size: 12px; padding: 8px 4px; border-radius: 9px; }
.fxm-mobile .fxm-tab i { font-size: 14px; }

/* 主面板 */
.fxm-mobile .fxm-panel { padding: 13px 12px 14px; border-radius: 16px; }
.fxm-mobile .fxm-panel-head { gap: 9px; padding-bottom: 9px; }
.fxm-mobile .fxm-panel-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; }
.fxm-mobile .fxm-panel-copy h2 { font-size: 15px; }
.fxm-mobile .fxm-panel-copy p { font-size: 11px; line-height: 1.6; }
.fxm-mobile .fxm-panel-wear { width: 100%; font-size: 10.5px; }
.fxm-mobile .fxm-wear-chip { font-size: 10.5px; padding: 2px 8px; }

/* 等级胶囊：五个一行 */
.fxm-mobile .fxm-toolbar { padding: 9px 0 11px; gap: 8px; }
.fxm-mobile .fxm-chips { gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fxm-mobile .fxm-chips::-webkit-scrollbar { display: none; }
.fxm-mobile .fxm-chip {
    height: 27px; padding: 0 10px; font-size: 11.5px; gap: 4px; flex: 0 0 auto;
}
.fxm-mobile .fxm-dot { width: 5px; height: 5px; }

/* 搜索 + 类型 + 排序 一行 */
.fxm-mobile .fxm-tools { width: 100%; gap: 6px; flex-wrap: nowrap; }
.fxm-mobile .fxm-search { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px; }
.fxm-mobile .fxm-search input { font-size: 11.5px; }
.fxm-mobile .fxm-select {
    flex: 0 0 auto; height: 30px; font-size: 11px; max-width: 104px;
    padding: 0 22px 0 8px;
    background-position: calc(100% - 12px) 13px, calc(100% - 8px) 13px;
}

/* 卡片 */
.fxm-mobile .fxm-panel .fxm-grid { gap: 10px; }
.fxm-mobile .fxm-card { border-radius: 14px; }
.fxm-mobile .fxm-card-fx { height: 104px; }
.fxm-mobile .fxm-frame-ring { width: 62px; height: 62px; }
.fxm-mobile .fxm-avatar { width: 48px; height: 48px; }
.fxm-mobile .fxm-frame-ring::before { inset: -9px; }
.fxm-mobile .fxm-frame-ring::after { inset: -10px; }
.fxm-mobile .fxm-title-chip { height: 22px; padding: 0 11px; font-size: 11px; }
.fxm-mobile .fxm-card-body { padding: 9px 10px 10px; gap: 5px; }
.fxm-mobile .fxm-card-name { font-size: 12.5px; gap: 5px; }
.fxm-mobile .fxm-card-kind { font-size: 9px; padding: 1px 5px; }
.fxm-mobile .fxm-card-desc { font-size: 10.5px; min-height: 28px; }
/* 两行：价格一行、按钮一行靠左 —— 右下角固定的悬浮广告压在 x>290，
   按钮靠左就永远在安全区内。 */
.fxm-mobile .fxm-card-foot {
    flex-direction: column; align-items: stretch; gap: 7px;
}
.fxm-mobile .fxm-card-acts { justify-content: flex-start; gap: 5px; }
.fxm-mobile .fxm-primary { height: 26px; padding: 0 10px; font-size: 11px; }
.fxm-mobile .fxm-mini { height: 26px; padding: 0 8px; font-size: 11px; }
.fxm-mobile .fxm-mini.fxm-icon { width: 26px; font-size: 12px; }

/* 窄屏收起右侧信息栏 */
@media (max-width: 980px) {
    .fxm-mobile .fxm-col-side { display: none; }
}

/* ==========================================================================
   1.3.2 · PC 端细节收尾
   ========================================================================== */
/* 右侧栏跟随滚动；底部留出宿主悬浮按钮的位置，长页面滚到底也不会被压住。
   1.3.3 起电脑端有了 68px 固定页头，吸顶要让开它，否则滚到一半公告栏
   的顶部会钻到导航条底下去 —— 这正是补回页头后才暴露出来的问题。 */
.fxm-shell .fxm-col-side {
    position: sticky; top: calc(68px + 14px);
    padding-bottom: 56px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.fxm-shell .fxm-col-side::-webkit-scrollbar { width: 4px; }
.fxm-shell .fxm-col-side::-webkit-scrollbar-thumb { background: #e2e5f0; border-radius: 4px; }
@media (max-width: 980px) {
    .fxm-shell .fxm-col-side { position: static; padding-bottom: 0; max-height: none; overflow: visible; }
}

/* 登场动效 / 套装 / 弹幕皮肤仍铺商品渐变，把文字压深一档保证可读 */
.fxm-shell .fxm-fx-login .fxm-fx-text,
.fxm-shell .fxm-fx-suit .fxm-suit-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(23, 26, 43, .45), 0 0 12px rgba(23, 26, 43, .25);
    letter-spacing: .3px;
}
.fxm-shell .fxm-fx-login::after,
.fxm-shell .fxm-fx-suit::after {
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .22), transparent 58%),
                linear-gradient(180deg, rgba(23, 26, 43, .10), rgba(23, 26, 43, .22));
}

/* 弹幕皮肤 / 套装预览：浅色渐变底上文字容易糊，加一层稳定的深色衬底 */
.fxm-shell .fxm-fx-skin .fxm-danmu {
    background: rgba(23, 26, 43, .52);
    border-color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    box-shadow: 0 3px 10px rgba(23, 26, 43, .18);
}
.fxm-shell .fxm-fx-suit .fxm-suit-name {
    padding: 3px 11px; border-radius: 999px;
    background: rgba(23, 26, 43, .42);
    border: 1px solid rgba(255, 255, 255, .5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.fxm-shell .fxm-fx-suit .fxm-suit-grid i {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 12px rgba(23, 26, 43, .18);
}

/* ==========================================================================
   1.3.3 · 补回站点页头页脚后的衔接
   电脑端页头是宿主 fixed 的 68px 栏（body 已留出同高 padding），
   模块卡片从这里往下排；底部页脚由入口脚本收在内容之后，
   上下各留一段呼吸位，别让圆角卡片贴着页头、也别让页脚顶住最后一行。
   ========================================================================== */
@media (min-width: 901px) {
    .fxm-root.fxm-shell {
        margin: 10px auto 28px;
    }
}

/* ==========================================================================
   1.4.0 · 免费 / 付费 · 限时 / 终身
   卡片底部拆成「价格行 + 操作行」：价格行放双价切换或获取条件，
   操作行按钮均分整行 —— 之前价格和三个按钮挤在同一行，
   窄卡片上必然互相压。
   ========================================================================== */

/* 主内容区跟随父容器，别被主程序的 main{width:1200px} 撑破 */
.fxm-shell .fxm-main {
    width: 100%; max-width: 100%; min-width: 0;
}

.fxm-shell .fxm-card-body { gap: 8px; }
.fxm-shell .fxm-price-row {
    display: flex; align-items: center; gap: 6px;
    min-height: 30px; min-width: 0;
}
.fxm-shell .fxm-price-row.is-free { justify-content: flex-start; min-width: 0; }

/* —— 双价切换：限时 / 终身 —— */
.fxm-shell .fxm-plan {
    display: flex; gap: 4px; width: 100%;
    padding: 3px; border-radius: 9px; background: #f4f5fa;
}
.fxm-shell .fxm-plan-opt {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 24px; padding: 0 4px; border: 0; border-radius: 7px;
    background: transparent; color: #8b90a6; cursor: pointer;
    font-size: 10px; font-weight: 600; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.fxm-shell .fxm-plan-opt b {
    font-size: 12px; font-weight: 800; color: #5b5f75;
    font-variant-numeric: tabular-nums; margin-left: 2px;
}
.fxm-shell .fxm-plan-opt:hover { color: #6d4dff; }
.fxm-shell .fxm-plan-opt.is-on {
    background: #fff; color: #6d4dff;
    box-shadow: 0 2px 7px rgba(58, 78, 112, .12);
}
.fxm-shell .fxm-plan-opt.is-on b { color: #6d4dff; }
/* 1.5.0 多档档位条：可换行、两行也能摆下；促销档带橙角标。 */
.fxm-shell .fxm-plan.is-multi { flex-wrap: wrap; row-gap: 3px; }
.fxm-shell .fxm-plan.is-multi .fxm-plan-opt { flex: 1 1 30%; }
.fxm-shell .fxm-plan-opt.is-sale { color: #f97316; }
.fxm-shell .fxm-plan-opt.is-sale.is-on { color: #ea580c; }
.fxm-shell .fxm-plan-opt.is-sale.is-on b { color: #ea580c; }
.fxm-sale-mark {
    display: inline-block; margin-left: 2px; padding: 0 3px; border-radius: 4px;
    background: linear-gradient(135deg, #fb923c, #f43f5e);
    color: #fff; font-size: 8px; font-style: normal; font-weight: 800; line-height: 12px;
    vertical-align: 1px;
}

/* —— 1.5.0 标签：限时特惠 / 可体验 —— */
.fxm-shell .fxm-sale-tag {
    padding: 1px 6px; border-radius: 6px;
    background: linear-gradient(135deg, #fb923c, #f43f5e);
    color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
    box-shadow: 0 2px 6px rgba(244, 63, 94, .3);
}
.fxm-shell .fxm-trial-tag {
    padding: 1px 6px; border-radius: 6px;
    background: #eef7ff; border: 1px solid #c9e2ff; color: #2b7cd3;
    font-size: 9.5px; font-weight: 700;
}
.fxm-shell .fxm-mini.is-gift {
    background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd;
}

/* —— 免费款：标签 + 获取条件 —— */
.fxm-shell .fxm-free-tag {
    padding: 1px 6px; border-radius: 6px;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, .28);
}
.fxm-shell .fxm-free-badge {
    flex: 0 0 auto;
    padding: 2px 8px; border-radius: 6px;
    background: #e9f9f1; border: 1px solid #c6f0da; color: #0f9d58;
    font-size: 10px; font-weight: 800;
}
.fxm-shell .fxm-free-hint {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; color: #8a90a6;
}

/* —— 操作行：主按钮吃掉剩余宽度，图标按钮固定 —— */
.fxm-shell .fxm-card-acts {
    display: flex; align-items: center; gap: 4px;
    width: 100%; flex-wrap: nowrap; justify-content: flex-start;
}
.fxm-shell .fxm-card-acts .fxm-primary { flex: 1 1 auto; min-width: 0; }
.fxm-shell .fxm-primary.is-wait {
    background: #f3f0ff; color: #7c5cff; box-shadow: none;
    border: 1px dashed #c8b8ff;
}
.fxm-shell .fxm-primary.is-wait:hover { transform: none; box-shadow: none; }

/* —— 免费档筛选点 —— */
.fxm-shell .fxm-chip .fxm-dot.d5 { background: #10b981; }

/* —— 兑换码入口与弹层 —— */
.fxm-shell .fxm-code-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 12px; border-radius: 9px;
    border: 1px solid #e6e8f2; background: #fff; color: #6b7089;
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: all .15s ease;
}
.fxm-shell .fxm-code-btn:hover { border-color: rgba(124, 92, 255, .4); color: #6d4dff; background: #faf9ff; }
.fxm-shell .fxm-code-btn i { font-size: 14px; }
.fxm-shell .fxm-code-form input {
    width: 100%; height: 42px; padding: 0 14px;
    border: 1px solid #e4e7f1; border-radius: 11px; background: #fff;
    font-size: 15px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #171a2b; outline: none;
}
.fxm-shell .fxm-code-form input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.fxm-shell .fxm-code-hint { margin: 8px 0 0; font-size: 12px; color: #8a90a6; }

/* —— 任务说明 —— */
.fxm-shell .fxm-task-tip { text-align: center; padding: 6px 4px 2px; }
.fxm-shell .fxm-task-tip i { font-size: 28px; color: #7c5cff; }
.fxm-shell .fxm-task-tip p { margin: 8px 0 0; font-size: 13px; color: #5b5f75; line-height: 1.7; }
.fxm-shell .fxm-task-bar {
    position: relative; height: 8px; margin: 14px 0 6px;
    border-radius: 999px; background: #f0f1f8; overflow: hidden;
}
.fxm-shell .fxm-task-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #7c5cff, #4ad6ff);
}
.fxm-shell .fxm-task-now { font-size: 12px; color: #8a90a6; margin: 0; }
.fxm-shell .fxm-confirm-note { font-size: 12px; color: #8a90a6; }

/* —— 背包：时限 / 过期 —— */
.fxm-shell .fxm-bag-time { font-style: normal; color: #6b7089; font-weight: 600; }
.fxm-shell .fxm-bag-time.is-out { color: #e5484d; }
.fxm-shell .fxm-bag-forever {
    margin-left: 6px; padding: 1px 6px; border-radius: 5px;
    background: #eef2ff; color: #4f46e5; font-size: 9.5px; font-weight: 800;
    font-style: normal;
}
.fxm-shell .fxm-bag-row.is-expired { opacity: .62; }
.fxm-shell .fxm-bag-row.is-expired .fxm-bag-fx { filter: grayscale(.7); }

/* —— 管理页：兑换码 —— */
.fxm-shell .fxm-code-sec { margin: 18px 0 6px; }
.fxm-shell .fxm-code-gen {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid #eceefa; border-radius: 12px; background: #fbfbff;
}
.fxm-shell .fxm-code-gen select,
.fxm-shell .fxm-code-gen input {
    height: 32px; padding: 0 10px; border: 1px solid #e4e7f1; border-radius: 8px;
    background: #fff; font-size: 12px; color: #3f4357;
}
.fxm-shell .fxm-code-gen select { min-width: 170px; }
.fxm-shell .fxm-code-gen input[type="number"] { width: 68px; }
.fxm-shell .fxm-code-gen label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #6b7089;
}
.fxm-shell .fxm-code-list {
    margin-top: 10px; max-height: 240px; overflow-y: auto;
    border: 1px solid #f0f1f8; border-radius: 12px; background: #fff;
}
.fxm-shell .fxm-code-row {
    display: grid; grid-template-columns: 130px minmax(0, 1fr) 66px 78px;
    align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid #f6f7fb;
    font-size: 12px; color: #5b5f75;
}
.fxm-shell .fxm-code-row:last-child { border-bottom: 0; }
.fxm-shell .fxm-code-row code {
    font-size: 12px; font-weight: 800; letter-spacing: .4px;
    color: #3f4357; background: #f6f7fb; border-radius: 6px; padding: 2px 7px;
}
.fxm-shell .fxm-code-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-shell .fxm-code-st { font-style: normal; font-size: 11px; font-weight: 700; }
.fxm-shell .fxm-code-st-unused { color: #0f9d58; }
.fxm-shell .fxm-code-st-used { color: #b3b8c8; }
.fxm-shell .fxm-code-st-void { color: #e5484d; }
.fxm-shell .fxm-code-who { color: #a2a6ba; font-size: 11px; }
.fxm-shell .fxm-code-empty { margin: 0; padding: 18px 14px; font-size: 12px; color: #a2a6ba; }
.fxm-shell .fxm-td-free { color: #0f9d58; font-weight: 800; font-size: 12px; }

/* —— 移动端：双价两段压缩，别把字挤没 —— */
.fxm-root.fxm-mobile .fxm-plan-opt { font-size: 9px; gap: 2px; padding: 0 2px; }
.fxm-root.fxm-mobile .fxm-plan-opt b { font-size: 11px; }
.fxm-root.fxm-mobile .fxm-free-hint { font-size: 9.5px; }
.fxm-root.fxm-mobile .fxm-card-acts .fxm-primary { padding: 0 6px; font-size: 11px; }
.fxm-root.fxm-mobile .fxm-code-row { grid-template-columns: 104px minmax(0, 1fr) 58px; }
.fxm-root.fxm-mobile .fxm-code-who { display: none; }

/* ============================ 1.5.0 详情弹层 ============================ */
.fxm-shell .fxm-detail { display: flex; flex-direction: column; gap: 8px; }
.fxm-shell .fxm-detail h4 {
    margin: 2px 0 0; font-size: 12.5px; font-weight: 800; color: #3f4357;
}
.fxm-shell .fxm-detail-intro,
.fxm-shell .fxm-detail-howto {
    margin: 0; font-size: 12.5px; line-height: 1.7; color: #5b5f75;
}
.fxm-shell .fxm-detail-plans { width: 100%; border-collapse: collapse; }
.fxm-shell .fxm-detail-plans td {
    padding: 5px 8px; border-bottom: 1px dashed #e6e8f2;
    font-size: 12.5px; color: #5b5f75;
}
.fxm-shell .fxm-detail-plans td:first-child { width: 40%; color: #8b90a6; }
.fxm-shell .fxm-detail-plans b { color: #6d4dff; font-size: 13px; }
.fxm-shell .fxm-detail-sale,
.fxm-shell .fxm-detail-trial {
    margin: 0; padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.6;
}
.fxm-shell .fxm-detail-sale {
    background: #fff4ed; border: 1px solid #fed7aa; color: #c2410c;
}
.fxm-shell .fxm-detail-trial {
    background: #eef7ff; border: 1px solid #c9e2ff; color: #2b7cd3;
}
.fxm-shell .fxm-detail-meta {
    margin: 0; font-size: 11px; color: #a2a6ba; display: flex; gap: 10px; flex-wrap: wrap;
}

/* ============================ 1.5.0 每日一抽 ============================ */
.fxm-shell .fxm-lucky {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 14px; align-items: start;
}
.fxm-shell .fxm-lucky-stage {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 18px 14px; border-radius: 14px;
    background: linear-gradient(160deg, #f7f4ff, #fdf0f7);
}
.fxm-shell .fxm-lucky-wheel {
    position: relative; width: 210px; height: 210px; border-radius: 50%;
    background: conic-gradient(#7c5cff 0 45deg, #ff5ca8 45deg 90deg,
        #4ad6ff 90deg 135deg, #ffd166 135deg 180deg,
        #7c5cff 180deg 225deg, #ff5ca8 225deg 270deg,
        #4ad6ff 270deg 315deg, #ffd166 315deg 360deg);
    box-shadow: 0 12px 30px rgba(20, 16, 32, .22), inset 0 0 0 6px rgba(255, 255, 255, .5);
}
.fxm-shell .fxm-lucky-disc { position: absolute; inset: 0; border-radius: 50%; }
.fxm-shell .fxm-lucky-cell {
    position: absolute; left: 50%; top: 6px; transform-origin: 0 99px;
    padding: 2px 8px; border-radius: 99px;
    background: rgba(255, 255, 255, .88); color: #454a63;
    font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.fxm-shell .fxm-lucky-pin {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: #7c5cff; font-size: 24px;
    box-shadow: 0 6px 16px rgba(20, 16, 32, .25);
}
.fxm-shell .fxm-lucky-wheel.is-spinning { animation: fxm-spin 1.6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes fxm-spin {
    from { transform: rotate(0); } to { transform: rotate(1080deg); }
}
.fxm-shell .fxm-lucky-btn { padding: 9px 26px; font-size: 14px; }
.fxm-shell .fxm-lucky-done { margin: 0; font-size: 13px; color: #b3b8c8; font-weight: 700; }
.fxm-shell .fxm-lucky-left { margin: 0; font-size: 11.5px; color: #8b90a6; }
.fxm-shell .fxm-lucky-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fxm-shell .fxm-lucky-log {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-bottom: 1px dashed #e6e8f2; font-size: 12px; color: #5b5f75;
}
.fxm-shell .fxm-lucky-log.is-good { color: #b45309; font-weight: 700; }
.fxm-shell .fxm-lucky-log i { font-style: normal; font-size: 10.5px; color: #b3b8c8; flex: 0 0 auto; }
.fxm-shell .fxm-lucky-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.fxm-shell .fxm-lucky-result i { font-size: 44px; color: #f59e0b; }
.fxm-shell .fxm-lucky-result p { margin: 0; font-size: 15px; font-weight: 800; color: #3f4357; }
@media (max-width: 760px) {
    .fxm-shell .fxm-lucky { grid-template-columns: 1fr; }
    .fxm-shell .fxm-lucky-wheel { width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .fxm-shell .fxm-lucky-wheel.is-spinning { animation: none; }
}


/* —— 1.5.3 移动端细节：操作行换行、顶部 tab 横向滚动 —— */
.fxm-root.fxm-mobile .fxm-card-acts { flex-wrap: wrap; row-gap: 4px; }
.fxm-root.fxm-mobile .fxm-card-acts .fxm-primary { flex: 1 1 calc(50% - 4px); }
.fxm-root.fxm-mobile .fxm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fxm-root.fxm-mobile .fxm-tabs::-webkit-scrollbar { display: none; }
.fxm-root.fxm-mobile .fxm-plan-opt b { margin-left: 1px; }


/* ===================== 1.5.4 价格行重排 / 档位面板 / VIP 专区 ===================== */

/* —— 卡片价格行：一个主价当视点，六档收进面板 —— */
.fxm-shell .fxm-plan.is-slim { display: block; width: 100%; }
.fxm-shell .fxm-price-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.fxm-shell .fxm-price-num {
    display: inline-flex; align-items: baseline; cursor: pointer;
    color: var(--fx-ink, #1b1a22);
}
.fxm-shell .fxm-price-num b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.6px; }
.fxm-shell .fxm-price-num em { font-style: normal; font-size: 10px; color: var(--fx-sub, #8b879c); margin-left: 3px; }
.fxm-shell .fxm-price-num s { margin-left: 6px; font-size: 9.5px; font-weight: 400; color: #b9b4c7; opacity: .9; }
.fxm-shell .fxm-price-num:hover b { color: #6d4dff; }
.fxm-shell .fxm-plan.is-slim .fxm-was { margin-left: 3px; font-size: 10px; }
.fxm-shell .fxm-forever {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; cursor: pointer;
    border: 1px solid #e6dffa; background: #f8f5ff; color: #5b4bb5;
    font: 600 10px/1.7 inherit;
}
.fxm-shell .fxm-forever b { font-weight: 800; font-size: 11px; margin-left: 2px; }
.fxm-shell .fxm-forever:hover { background: #efe8ff; border-color: #cdbffa; }
.fxm-shell .fxm-plan-meta {
    display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 0;
    border: 0; background: none; cursor: pointer;
    font: 400 11px/1.5 inherit; color: var(--fx-sub, #8b879c);
}
.fxm-shell .fxm-plan-meta .fxm-meta-dot { font-style: normal; color: #c7c2d6; }
.fxm-shell .fxm-plan-meta .fxm-meta-more { color: #6d4dff; font-weight: 600; }
.fxm-shell .fxm-plan-meta i { font-size: 12px; color: #b3aec4; }
.fxm-shell .fxm-plan-meta:hover .fxm-meta-more { text-decoration: underline; }
.fxm-shell .fxm-plan-vip {
    display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; padding: 1px 7px;
    border: 1px solid #f2dfa6; border-radius: 999px; background: #fff9e8; cursor: pointer;
    font: 700 10px/1.6 inherit; color: #8a6a12;
}
.fxm-shell .fxm-plan-vip i { font-size: 11px; }
.fxm-shell .fxm-plan-vip:hover { background: #fff1c7; }

/* —— VIP 标：会员实心金，非会员浅金描边（点了才知道差多少） —— */
.fxm-vip-tag:not(.is-on) {
    color: #8a6a12; background: #fff8e3; border: 1px solid #f2dfa6; cursor: pointer;
}
.fxm-vip-tag:not(.is-on):hover { background: #fff1c7; }
.fxm-vip-free-tag {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 800; color: #5b3a00;
    background: linear-gradient(135deg, #ffe6a8, #ffc94d);
    box-shadow: 0 1px 4px rgba(180, 120, 0, .18);
}

/* —— VIP 专区横幅 —— */
.fxm-shell .fxm-vip-band {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px;
    border-radius: 14px; border: 1px solid #4c3f72; color: #f6f2ff;
    background: linear-gradient(120deg, #2a2140, #3b2f5c 55%, #4a3570);
}
.fxm-shell .fxm-vip-band-ic {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, #ffd970, #f0a33a); color: #3a2500; font-size: 20px; flex: 0 0 auto;
}
.fxm-shell .fxm-vip-band-tx { flex: 1 1 auto; min-width: 0; }
.fxm-shell .fxm-vip-band-tx b { display: block; font-size: 15px; font-weight: 800; }
.fxm-shell .fxm-vip-band-tx span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: #cfc6e6; }
.fxm-shell .fxm-vip-band-btn {
    flex: 0 0 auto; border: 0; font-weight: 800;
    background: linear-gradient(135deg, #ffd970, #f0a33a); color: #3a2500;
}
.fxm-shell .fxm-primary.is-vipfree { background: linear-gradient(135deg, #ffcf5c, #f0a33a); color: #3a2500; }
.fxm-shell .fxm-mini.is-vipfree { color: #8a6a12; border-color: #f0d79a; background: #fff9e8; }

/* —— 档位选择抽屉 —— */
.fxm-sheet { width: 100%; max-width: 440px; }
.fxm-sheet .fxm-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.fxm-sheet .fxm-sheet-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.fxm-sheet .fxm-sheet-x { border: 0; background: none; cursor: pointer; color: #a19cb3; font-size: 19px; padding: 2px; }
.fxm-sheet .fxm-modal-body { padding: 6px 14px 16px; }
.fxm-plan-list { display: flex; flex-direction: column; gap: 6px; }
.fxm-plan-row {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px;
    border: 1px solid #e9e5f3; border-radius: 12px; background: #fff; cursor: pointer;
    text-align: left; font: inherit; transition: border-color .15s, background .15s;
}
.fxm-plan-row:hover { border-color: #c9bcf7; background: #faf8ff; }
.fxm-plan-row.is-on { border-color: #7c5cff; background: #f5f1ff; box-shadow: 0 0 0 1px #7c5cff inset; }
.fxm-plan-row .fxm-pr-name {
    min-width: 58px; font-size: 13px; font-weight: 700; color: #2c2836;
    display: inline-flex; align-items: center; gap: 3px;
}
.fxm-plan-row .fxm-pr-per { flex: 1 1 auto; font-size: 11px; color: #9590a6; }
.fxm-plan-row .fxm-pr-price { font-size: 15px; font-weight: 800; color: #1b1a22; display: inline-flex; align-items: baseline; }
.fxm-plan-row .fxm-pr-price s { margin-left: 6px; font-size: 9.5px; font-weight: 400; color: #b9b4c7; }
.fxm-plan-row .fxm-pr-check { font-size: 16px; color: #7c5cff; opacity: 0; }
.fxm-plan-row.is-on .fxm-pr-check { opacity: 1; }
.fxm-sheet-tip { margin: 9px 3px 0; font-size: 11px; line-height: 1.65; color: #8b879c; }
.fxm-check { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.fxm-check input { width: 15px; height: 15px; accent-color: #7c5cff; }

/* 详情弹层里的 VIP 专享提示 */
.fxm-detail-vipfree {
    display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 9px 11px;
    border-radius: 10px; background: #fff8e3; border: 1px solid #f4e3ac;
    font-size: 12px; line-height: 1.6; color: #7a5c00;
}
.fxm-detail-vipfree i { font-size: 14px; margin-top: 1px; }

@media (max-width: 640px) {
    .fxm-root.fxm-mobile .fxm-price-num b { font-size: 20px; }
    .fxm-root.fxm-mobile .fxm-vip-band { flex-wrap: wrap; padding: 12px; gap: 9px; }
    .fxm-root.fxm-mobile .fxm-vip-band-btn { width: 100%; }
    .fxm-shell .fxm-sheet {
        align-self: end; border-radius: 18px 18px 0 0; max-height: 80vh; overflow-y: auto;
    }
}

/* 1.5.4 移动端：标签收窄一点，会员领取按钮独占一行 */
@media (max-width: 640px) {
    .fxm-root.fxm-mobile .fxm-card-tags { gap: 4px; top: 7px; left: 7px; right: 7px; }
    .fxm-root.fxm-mobile .fxm-card-tags > span { font-size: 9.5px; padding: 1px 6px; }
    .fxm-root.fxm-mobile .fxm-card-acts .fxm-primary.is-vipfree { flex: 1 1 100%; }
    .fxm-root.fxm-mobile .fxm-plan-vip { margin-top: 4px; }
}

/* 1.5.7：PC 四列卡片也不够宽，操作行必须能换行；会员领取按钮独占一行 */
.fxm-shell .fxm-card-acts { flex-wrap: wrap; row-gap: 4px; }
.fxm-shell .fxm-card-acts .fxm-primary.is-vipfree { flex: 1 1 100%; }


/* ===================== 1.5.8 两档价签 / 卡片瘦身 ===================== */

/* —— 价格行：并排两个价签（短档 / 终身），点选即切 —— */
.fxm-shell .fxm-plan.is-duo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%;
}
.fxm-shell .fxm-opt {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 7px 9px 8px; border: 1px solid #ece7f6; border-radius: 10px;
    background: #fbfaff; cursor: pointer; text-align: left; font: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.fxm-shell .fxm-opt:hover { border-color: #cdc2f6; background: #f8f5ff; }
.fxm-shell .fxm-opt.is-on {
    border-color: #7c5cff; background: #f5f1ff;
    box-shadow: 0 0 0 1px #7c5cff inset;
}
.fxm-shell .fxm-opt-k {
    display: flex; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 600; color: #8b879c; line-height: 1.2;
}
.fxm-shell .fxm-opt.is-on .fxm-opt-k { color: #6d4dff; }
.fxm-shell .fxm-opt-p {
    display: flex; align-items: baseline; gap: 2px; min-width: 0; line-height: 1.1;
}
.fxm-shell .fxm-opt-p b {
    font-size: 17px; font-weight: 800; letter-spacing: -.5px;
    color: #1b1a22; white-space: nowrap;
}
.fxm-shell .fxm-opt.is-on .fxm-opt-p b { color: #5b3ff0; }
.fxm-shell .fxm-opt-p s {
    margin-left: 2px; font-size: 9px; font-weight: 400; color: #bcb7c9;
    text-decoration-thickness: 1px;
}
.fxm-shell .fxm-opt-p i { font-style: normal; font-size: 9.5px; color: #9b96aa; }
.fxm-shell .fxm-opt-sale {
    display: inline-block; padding: 0 3px; border-radius: 3px;
    background: #ffe8e2; color: #d9482c; font-style: normal;
    font-size: 9px; font-weight: 800; line-height: 1.5;
}
.fxm-shell .fxm-plan-notes { margin-top: 5px; }
.fxm-shell .fxm-plan-note {
    display: inline-flex; align-items: center; gap: 4px; padding: 0;
    border: 0; background: none; cursor: pointer;
    font: 400 10.5px/1.6 inherit; color: #8b879c; text-align: left;
}
.fxm-shell .fxm-plan-note:hover { text-decoration: underline; }
.fxm-shell .fxm-plan-note.is-on,
.fxm-shell .fxm-plan-note.is-gold { color: #8a6a12; font-weight: 600; }
.fxm-shell .fxm-plan-note i { font-size: 11px; }

/* —— 详情弹层里的工具行（试玩 / 体验 / 赠送 / 工坊 / 换装） —— */
.fxm-detail-tools {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
    padding-top: 11px; border-top: 1px solid #f0ecf8;
}
.fxm-detail-tools button {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border: 1px solid #e9e4f4; border-radius: 9px;
    background: #fbfaff; color: #4b4560; cursor: pointer;
    font: 600 12px/1.4 inherit;
}
.fxm-detail-tools button:hover { border-color: #c9bcf7; background: #f6f2ff; color: #5b3ff0; }
.fxm-detail-tools i { font-size: 13px; }

@media (max-width: 640px) {
    .fxm-root.fxm-mobile .fxm-opt { padding: 6px 7px 7px; }
    .fxm-root.fxm-mobile .fxm-opt-p b { font-size: 16px; }
    .fxm-root.fxm-mobile .fxm-opt-p i { font-size: 9px; }
    .fxm-root.fxm-mobile .fxm-card-acts { flex-wrap: nowrap; }
    .fxm-root.fxm-mobile .fxm-card-acts .fxm-primary { flex: 1 1 auto; min-width: 0; }
    .fxm-root.fxm-mobile .fxm-card-acts .fxm-mini { flex: 0 0 auto; }
}

/* 1.6.0：价格行由 flex 改块级 —— 两个价签 + 会员提示必须各占一行，
   否则窄卡里价签被压成 30px，价格数字和天数都会竖排断行。 */
.fxm-shell .fxm-price-row:not(.is-free) {
    display: block; min-height: 0; width: 100%;
}
.fxm-shell .fxm-plan-notes { margin-top: 4px; }
.fxm-shell .fxm-opt-p { flex-wrap: nowrap; }
.fxm-root.fxm-mobile .fxm-opt-p b { font-size: 15px; }
.fxm-root.fxm-mobile .fxm-opt-k { font-size: 10px; }
.fxm-root.fxm-mobile .fxm-opt-p i { font-size: 8.5px; }

/* 1.6.1：会员提示压成一行，超出省略（卡片窄，两行会把按钮推下去） */
.fxm-shell .fxm-plan-note {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fxm-shell .fxm-plan-notes { min-width: 0; overflow: hidden; }
.fxm-shell .fxm-opt-p { white-space: nowrap; }
.fxm-shell .fxm-opt-p i { flex: 0 0 auto; }
.fxm-shell .fxm-opt { overflow: hidden; }

/* 1.6.2：详情价格表价格右对齐；描述最多两行，四列等高不歪 */
.fxm-shell .fxm-detail-plans td:last-child { text-align: right; }
.fxm-shell .fxm-detail-plans td:first-child { width: 50%; }
.fxm-shell .fxm-card-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fxm-shell .fxm-modal-foot .fxm-btn:only-child { min-width: 96px; }

/* 1.6.3：会员免费领与「详情」并排，不再各占一行（四列卡会因此高低不齐） */
.fxm-shell .fxm-card-acts .fxm-primary.is-vipfree,
.fxm-root.fxm-mobile .fxm-card-acts .fxm-primary.is-vipfree {
    flex: 1 1 auto; min-width: 0;
}

/* 1.6.4：描述固定两行高，四列卡的价格行与按钮行对齐 */
.fxm-shell .fxm-card-desc,
.fxm-root.fxm-mobile .fxm-card-desc { min-height: 2.9em; }

/* ===================== 1.6.5 会员标识重绘 / 专区并入全部 ===================== */
/* 设计口径：金只给「会员权益」，紫只给「普通商品」。一张卡上最多一枚金徽章，
   皇冠 + 双描边 + 内高光，任何缩放下都像金属牌，而不是一行黄色小字。 */

/* —— 等级胶囊条里的「VIP 专享」金胶囊 —— */
.fxm-shell .fxm-chip.is-vip {
    color: #7a5300; background: #fff8e6;
    box-shadow: inset 0 0 0 1px #f2dfa6;
}
.fxm-shell .fxm-chip.is-vip i { font-size: 13px; color: #d9a52c; }
.fxm-shell .fxm-chip.is-vip em {
    margin-left: 1px; padding: 0 5px; border-radius: 999px;
    background: #f9e6b8; color: #7a5300;
    font-style: normal; font-size: 10px; font-weight: 800; line-height: 1.5;
}
.fxm-shell .fxm-chip.is-vip:hover { background: #fdecc6; color: #7a5300; }
.fxm-shell .fxm-chip.is-vip.is-on {
    background: linear-gradient(135deg, #ffedbb, #f3bd57 58%, #dda02c);
    color: #402a00;
    box-shadow: 0 6px 16px rgba(196, 140, 30, .26),
                inset 0 1px 0 rgba(255, 255, 255, .8),
                inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.fxm-shell .fxm-chip.is-vip.is-on i { color: #5e3d00; }
.fxm-shell .fxm-chip.is-vip.is-on em { background: rgba(64, 42, 0, .16); color: #402a00; }

/* —— 卡片价格行的会员权益徽章 —— */
.fxm-shell .fxm-vip-pill {
    position: relative; display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%; height: 21px; padding: 0 9px 0 7px;
    border: 0; border-radius: 7px; overflow: hidden;
    font: 700 10.5px/1 inherit; white-space: nowrap; cursor: default;
    vertical-align: middle;
}
.fxm-shell button.fxm-vip-pill { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.fxm-shell button.fxm-vip-pill:hover { transform: translateY(-1px); }
.fxm-shell .fxm-vip-pill i { flex: 0 0 auto; font-size: 12px; }
.fxm-shell .fxm-vip-pill b { font-weight: 800; }
.fxm-shell .fxm-vip-pill em { font-style: normal; font-weight: 600; opacity: .86; }

.fxm-shell .fxm-vip-pill.is-gold {
    color: #4a2f00;
    background: linear-gradient(135deg, #fff2c8 0%, #ffdb8c 40%, #f2b648 100%);
    box-shadow: 0 2px 6px rgba(190, 130, 20, .22),
                inset 0 1px 0 rgba(255, 255, 255, .9),
                inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.fxm-shell .fxm-vip-pill.is-gold i { color: #8a5b00; }
.fxm-shell .fxm-vip-pill.is-gold.is-mine em { opacity: .95; }
/* 扫光只在悬停触发：几十张卡同时跑动画会掉帧 */
.fxm-shell .fxm-vip-pill.is-gold::after {
    content: ''; position: absolute; top: -40%; bottom: -40%; left: 0; width: 36%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: translateX(-160%) rotate(8deg); pointer-events: none;
}
.fxm-shell .fxm-vip-pill.is-gold:hover::after { animation: fxmShine .8s ease; }
@keyframes fxmShine {
    from { transform: translateX(-160%) rotate(8deg); }
    to   { transform: translateX(320%) rotate(8deg); }
}

.fxm-shell .fxm-vip-pill.is-soft {
    color: #8a6a12; background: #fffaec;
    box-shadow: inset 0 0 0 1px #f2dfa6;
}
.fxm-shell .fxm-vip-pill.is-soft i { color: #d9a52c; }
.fxm-shell .fxm-vip-pill.is-soft:hover { background: #fff3d4; }

.fxm-shell .fxm-vip-pill.is-level {
    color: #4a2f00;
    background: linear-gradient(135deg, #fff6d8, #ffe2a4);
    box-shadow: inset 0 0 0 1px #f0d79a, inset 0 1px 0 rgba(255, 255, 255, .8);
}
.fxm-shell .fxm-vip-pill.is-level em {
    padding: 1px 5px; margin-right: 1px; border-radius: 4px;
    background: linear-gradient(135deg, #3a2b5c, #241b38);
    color: #ffe2a1; font-size: 9px; font-weight: 800; letter-spacing: .4px;
    opacity: 1;
}
.fxm-shell .fxm-vip-pill.is-level span { font-size: 9.5px; font-weight: 600; opacity: .7; }

/* —— 封面右下角的 VIP 金印 —— */
.fxm-shell .fxm-vip-seal {
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
    height: 19px; padding: 0 7px;
    border-radius: 6px; overflow: hidden;
    background: linear-gradient(145deg, #fff0c6, #f4c65e 45%, #d99a2b);
    color: #4a2f00; font: 800 9.5px/1 inherit; letter-spacing: .6px;
    box-shadow: 0 2px 8px rgba(120, 80, 0, .24),
                inset 0 1px 0 rgba(255, 255, 255, .85),
                inset 0 0 0 1px rgba(255, 255, 255, .38);
}
.fxm-shell .fxm-vip-seal i { font-size: 11px; }
.fxm-shell .fxm-vip-seal::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, .55) 50%, transparent 66%);
    pointer-events: none;
}
.fxm-shell .fxm-card.is-vip { border-color: #f2ddb0; }
.fxm-shell .fxm-card.is-vip:hover { border-color: #e8c882; }

/* —— 顶部会员身份牌 —— */
.fxm-shell .fxm-vip-id {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px 0 5px;
    border-radius: 999px; border: 1px solid rgba(247, 212, 136, .42);
    background: linear-gradient(135deg, #241b3a, #3a2a5b 58%, #4a3170);
    color: #f6edff; cursor: default; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(56, 32, 96, .22), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.fxm-shell .fxm-vip-id-crown {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(145deg, #ffeec2, #eeb04a 62%, #c8851f);
    color: #4a2f00; font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.fxm-shell .fxm-vip-id-lv {
    font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #ffe2a1;
}
.fxm-shell .fxm-vip-id-sub { font-size: 10.5px; font-weight: 600; color: rgba(246, 237, 255, .78); }
.fxm-shell button.fxm-vip-id { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.fxm-shell button.fxm-vip-id:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(56, 32, 96, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fxm-shell .fxm-vip-id.is-off {
    border-color: #f0dba8;
    background: linear-gradient(135deg, #fffdf6, #fff5dc);
    color: #7a5300;
    box-shadow: 0 4px 12px rgba(190, 140, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.fxm-shell .fxm-vip-id.is-off .fxm-vip-id-lv { color: #7a5300; }
.fxm-shell .fxm-vip-id.is-off .fxm-vip-id-sub { color: #9b7a2e; }

/* —— 权益横幅：深紫底 + 金色光斑，右侧按钮即专区入口 —— */
.fxm-shell .fxm-vip-band {
    position: relative; overflow: hidden;
    align-items: center; gap: 13px; margin: 0 0 12px; padding: 13px 16px;
    border: 1px solid rgba(247, 212, 136, .26); border-radius: 14px;
    color: #f6f2ff;
    background:
        radial-gradient(240px 120px at 10% -10%, rgba(255, 212, 136, .22), transparent 70%),
        linear-gradient(115deg, #241b38, #33254f 55%, #402c63);
    box-shadow: 0 10px 24px rgba(48, 28, 88, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.fxm-shell .fxm-vip-band::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .06) 52%, transparent 66%);
}
.fxm-shell .fxm-vip-band-ic {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    flex: 0 0 auto; font-size: 20px; color: #4a2f00;
    background: linear-gradient(145deg, #ffeec2, #eeb04a 62%, #c8851f);
    box-shadow: 0 4px 12px rgba(200, 133, 31, .40), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.fxm-shell .fxm-vip-band-tx { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.fxm-shell .fxm-vip-band-tx b {
    display: block; font-size: 14.5px; font-weight: 800; letter-spacing: .2px;
    color: #ffe9b8;
}
.fxm-shell .fxm-vip-band-tx span {
    display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.6;
    color: rgba(236, 227, 255, .74);
}
.fxm-shell .fxm-vip-band-btn {
    position: relative; z-index: 1; flex: 0 0 auto; height: 30px; padding: 0 14px;
    border: 0; border-radius: 999px; font-weight: 800; font-size: 12px;
    background: linear-gradient(135deg, #ffeec2, #f0b64a 62%, #dd9b28);
    color: #402a00;
    box-shadow: 0 4px 12px rgba(200, 133, 31, .30), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.fxm-shell .fxm-vip-band-btn:hover { filter: brightness(1.04); }
.fxm-shell .fxm-panel-icon.is-vip {
    background: linear-gradient(145deg, #ffeec2, #eeb04a 62%, #c8851f);
    color: #4a2f00;
    box-shadow: 0 6px 14px rgba(200, 133, 31, .30);
}

/* —— 手机端：身份牌独占一行、徽章缩半档 —— */
.fxm-root.fxm-mobile .fxm-hero-side { flex-wrap: wrap; justify-content: flex-end; }
.fxm-root.fxm-mobile .fxm-vip-id {
    order: 3; flex: 1 1 100%; justify-content: center;
    height: 32px; padding: 0 12px 0 4px; gap: 5px;
}
.fxm-root.fxm-mobile .fxm-vip-id-crown { width: 24px; height: 24px; font-size: 12px; }
.fxm-root.fxm-mobile .fxm-vip-id-lv { font-size: 12px; }
.fxm-root.fxm-mobile .fxm-vip-id-sub { font-size: 10px; }
.fxm-root.fxm-mobile .fxm-vip-pill { height: 20px; font-size: 10px; padding: 0 8px 0 6px; }
.fxm-root.fxm-mobile .fxm-vip-pill i { font-size: 11px; }
.fxm-root.fxm-mobile .fxm-vip-seal { height: 17px; padding: 0 6px; font-size: 9px; }
.fxm-root.fxm-mobile .fxm-vip-seal i { font-size: 10px; }
.fxm-root.fxm-mobile .fxm-vip-band { margin-bottom: 10px; padding: 11px 12px; gap: 10px; }
.fxm-root.fxm-mobile .fxm-vip-band-ic { width: 34px; height: 34px; font-size: 17px; }
.fxm-root.fxm-mobile .fxm-vip-band-tx b { font-size: 13px; }
.fxm-root.fxm-mobile .fxm-vip-band-tx span { font-size: 10.5px; }
.fxm-root.fxm-mobile .fxm-vip-band-btn { height: 26px; padding: 0 11px; font-size: 11px; }
.fxm-root.fxm-mobile .fxm-vip-band-btn { width: auto; }

/* 1.6.8：划线原价与「金币」单位贴在一起像一串数字，给原价留出右间距 */
.fxm-shell .fxm-opt-p s { margin-right: 3px; }

/* 1.6.8：8 个页签在 430px 以内放不下，去掉图标只留文字，一行排满不横滑 */
@media (max-width: 430px) {
    .fxm-root.fxm-mobile .fxm-tabs { gap: 2px; overflow-x: visible; }
    .fxm-root.fxm-mobile .fxm-tab {
        flex: 1 1 0; min-width: 0; padding: 8px 1px; gap: 0; font-size: 11.5px;
    }
    .fxm-root.fxm-mobile .fxm-tab i { display: none; }
}