/* =====================================================================
 * v1.21.61 前台视觉重构样式（首页 / 分类页 / 顶栏搜索 / 快捷弹窗 / 在线客服）
 * 复用 app.css 的设计变量（--primary 等），全部图标为内联 SVG。
 * ===================================================================== */

/* ---------- 通用图标块 ---------- */
.mx-ico{display:inline-grid;place-items:center;border-radius:14px;flex:0 0 auto;overflow:hidden}
.mx-ico svg{width:56%;height:56%}
.mx-ico img{width:100%;height:100%;object-fit:cover}
.mx-ico-sm{width:34px;height:34px;border-radius:10px}
.mx-ico-md{width:42px;height:42px}
.mx-ico-lg{width:50px;height:50px;border-radius:15px}
.mx-rot90l{transform:rotate(90deg)}
.mx-rot90r{transform:rotate(-90deg)}

.mx-pcover{display:grid;place-items:center;border-radius:14px;overflow:hidden}
.mx-pcover svg{width:46%;height:46%}
.mx-pcover img{width:100%;height:100%;object-fit:cover}
.mx-pcover-md{width:62px;height:62px;border-radius:16px}
.mx-pcover-lg{width:100%;aspect-ratio:1/1;border-radius:14px}

/* =====================================================================
 * 顶栏：搜索框 + 用户操作区
 * ===================================================================== */
/* 覆盖 app.css 中 .front-nav-v1210 的三列 grid，改为可容纳搜索框的弹性布局 */
.front-nav-v1210.mx-nav{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;grid-template-columns:none}
.mx-nav .mx-navlinks{flex:0 0 auto;justify-content:center;overflow:visible;min-width:max-content}
.mx-nav .mx-user-actions{flex:0 0 auto;margin-left:0}
.mx-header-search{position:relative;flex:1 1 auto;max-width:440px;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 5px 5px 14px;transition:border-color .18s,box-shadow .18s}
.mx-header-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.mx-search-ico{display:grid;place-items:center;color:var(--soft);flex:0 0 auto}
.mx-search-ico svg{width:18px;height:18px}
.mx-header-search input{flex:1 1 auto;border:0;outline:0;background:transparent;padding:8px 10px;font-size:14px;min-width:60px}
.mx-header-search button[type=submit]{flex:0 0 auto;border:0;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;padding:9px 20px;cursor:pointer;min-height:38px;transition:background .18s}
.mx-header-search button[type=submit]:hover{background:var(--primary-2)}
.mx-search-suggest{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;z-index:60;max-height:380px;overflow:auto}
.mx-search-suggest[hidden]{display:none}
.mx-suggest-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;color:var(--text)}
.mx-suggest-item:hover{background:var(--primary-soft)}
.mx-suggest-item .mx-pcover{width:36px;height:36px;border-radius:10px}
.mx-suggest-item .mx-suggest-name{flex:1 1 auto;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-suggest-item .mx-suggest-price{color:var(--danger);font-weight:800;font-size:14px}
.mx-suggest-more{display:block;text-align:center;color:var(--primary);font-weight:700;font-size:13px;padding:10px;border-top:1px solid var(--line);margin-top:4px}
.mx-suggest-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}

.mx-user-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mx-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:13px;font-weight:600;transition:.18s}
.mx-pill:hover{border-color:#cdddff;background:var(--primary-soft);color:var(--primary)}
.mx-pill .mx-pill-ico{display:grid;place-items:center;color:var(--soft)}
.mx-pill .mx-pill-ico svg{width:16px;height:16px}
.mx-pill:hover .mx-pill-ico{color:var(--primary)}
.mx-balance-pill strong{color:var(--danger)}
.mx-cart-pill .mx-cart-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;display:inline-grid;place-items:center;font-size:12px}
.mx-login-pill svg{width:16px;height:16px}
.mx-reg-pill{background:var(--primary);color:#fff;border-color:var(--primary)}
.mx-reg-pill:hover{background:var(--primary-2);color:#fff}

.mx-user-menu{position:relative}
.mx-user-trigger{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.mx-user-trigger:hover{border-color:#cdddff}
.mx-user-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff}
.mx-user-avatar svg{width:17px;height:17px}
.mx-user-caret svg{width:15px;height:15px;color:var(--soft);transition:transform .2s}
.mx-user-menu.open .mx-user-caret svg{transform:rotate(180deg)}
.mx-user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:60;display:none}
.mx-user-menu.open .mx-user-dropdown{display:block}
.mx-user-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);font-size:14px}
.mx-user-dropdown a svg{width:18px;height:18px;color:var(--soft)}
.mx-user-dropdown a:hover{background:var(--primary-soft);color:var(--primary)}
.mx-user-dropdown a:hover svg{color:var(--primary)}
.mx-user-dropdown-logout{border-top:1px solid var(--line);margin-top:4px;color:var(--danger)!important}
.mx-user-dropdown-logout svg{color:var(--danger)!important}

/* =====================================================================
 * 首页
 * ===================================================================== */
.mx-home{padding:22px 0 40px}
.mx-home-shell{display:flex;flex-direction:column;gap:18px}

/* 左侧快捷导航（仅在顶部行，与轮播图/用户卡片等高） */
.mx-side{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}
.mx-side-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:12px;color:var(--text)}
.mx-side-title svg{width:18px;height:18px;color:var(--primary)}
.mx-side-nav{display:grid;gap:4px}
.mx-side-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--muted);font-size:14px;transition:.16s}
.mx-side-link strong{font-weight:600}
.mx-side-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.mx-side-ico svg{width:17px;height:17px}
.mx-side-link:hover{background:var(--surface-2);color:var(--text)}
.mx-side-link.active{background:var(--primary-soft);color:var(--primary)}
.mx-side-link.active strong{font-weight:800}
.mx-side-more{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);color:var(--primary);font-size:13px;font-weight:700}
.mx-side-more svg{width:15px;height:15px}

/* 顶部行：快捷导航 + 轮播图 + 用户卡片，三列等高 */
.mx-top-row{display:grid;grid-template-columns:200px 1fr 340px;gap:18px;align-items:stretch}
/* 轮播图 */
.mx-carousel{position:relative;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px rgba(37,99,235,.22)}
.mx-carousel-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.mx-slide{position:relative;flex:0 0 100%;min-width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(115deg,#4f78ea 0%,#6b8ff4 52%,#88a6ff 100%);padding:36px 44px;color:#fff;min-height:300px;background-size:cover;background-position:center;text-decoration:none}
.mx-slide:before{content:"";position:absolute;right:-50px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.13)}
.mx-slide.has-img{align-items:flex-end}
.mx-slide.has-img:before{display:none}
.mx-slide.has-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,40,.55) 0%,rgba(16,24,40,.18) 50%,transparent 100%)}
.mx-slide-body{position:relative;z-index:1}
.mx-slide.has-img .mx-slide-body{margin-bottom:8px}
.mx-hero-eyebrow{display:inline-block;font-size:13px;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.mx-slide h1{margin:0 0 14px;font-size:36px;line-height:1.22;letter-spacing:-.01em;font-weight:850;max-width:340px}
.mx-slide.has-img h1{font-size:30px;max-width:460px}
.mx-slide p{margin:0 0 22px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.92);max-width:430px}
.mx-hero-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--primary);font-weight:800;padding:11px 22px;border-radius:999px;font-size:15px;transition:transform .18s,box-shadow .18s}
.mx-hero-btn svg{width:17px;height:17px}
.mx-slide:hover .mx-hero-btn{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mx-hero-art{position:relative;z-index:1;width:200px;flex:0 0 auto}
.mx-hero-art svg{width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.18))}
.mx-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.28);backdrop-filter:blur(4px);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:3;opacity:0;transition:opacity .2s,background .2s}
.mx-carousel:hover .mx-carousel-arrow{opacity:1}
.mx-carousel-arrow:hover{background:rgba(255,255,255,.5)}
.mx-carousel-arrow svg{width:20px;height:20px}
.mx-carousel-arrow.prev{left:14px}
.mx-carousel-arrow.next{right:14px}
.mx-carousel-dots{position:absolute;left:38px;bottom:18px;display:flex;gap:8px;z-index:3}
.mx-carousel-dots button{width:9px;height:9px;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:width .2s,background .2s}
.mx-carousel-dots button.active{width:22px;background:#fff}

.mx-usercard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.mx-uc-head{display:flex;align-items:center;gap:12px}
.mx-uc-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;flex:0 0 auto}
.mx-uc-avatar svg{width:24px;height:24px}
.mx-uc-head strong{display:block;font-size:16px;font-weight:800}
.mx-uc-level{display:inline-block;font-size:11px;background:#fff4e2;color:#b54708;padding:1px 8px;border-radius:999px;margin:2px 0}
.mx-uc-head small{display:block;color:var(--muted);font-size:12px}
.mx-uc-rights{background:var(--surface-2);border-radius:14px;padding:12px}
.mx-uc-rights-title{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text)}
.mx-uc-rights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}

.mx-usercard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.mx-uc-head{display:flex;align-items:center;gap:12px}
.mx-uc-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;flex:0 0 auto}
.mx-uc-avatar svg{width:24px;height:24px}
.mx-uc-head strong{display:block;font-size:16px;font-weight:800}
.mx-uc-level{display:inline-block;font-size:11px;background:#fff4e2;color:#b54708;padding:1px 8px;border-radius:999px;margin:2px 0}
.mx-uc-head small{display:block;color:var(--muted);font-size:12px}
.mx-uc-rights{background:var(--surface-2);border-radius:14px;padding:12px}
.mx-uc-rights-title{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text)}
.mx-uc-rights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.mx-uc-rights-grid div{display:flex;flex-direction:column;align-items:center;gap:5px}
.mx-uc-rights-grid span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
.mx-uc-rights-grid span svg{width:19px;height:19px}
.mx-uc-rights-grid b{font-size:12px;font-weight:600;color:var(--muted)}
.mx-uc-balance{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#eef4ff,#f7faff);border:1px solid #e1ebff;border-radius:14px;padding:12px 14px}
.mx-uc-balance small{color:var(--muted);font-size:12px}
.mx-uc-balance strong{display:block;font-size:22px;font-weight:850;color:var(--text)}
.mx-uc-recharge{background:var(--primary);color:#fff;font-weight:700;padding:9px 20px;border-radius:999px;font-size:14px;transition:background .18s}
.mx-uc-recharge:hover{background:var(--primary-2)}
.mx-uc-extra{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mx-uc-extra a{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:12px;padding:10px 14px;color:var(--muted);font-size:13px}
.mx-uc-extra a b{color:var(--text);font-size:16px;font-weight:800}
.mx-uc-extra a:hover{background:var(--primary-soft);color:var(--primary)}
.mx-uc-guest-actions{display:flex;gap:10px}
.mx-uc-guest-actions .mx-uc-recharge{flex:1;text-align:center}
.mx-uc-guest-reg{flex:1;text-align:center;border:1px solid #d6e3ff;color:var(--primary);font-weight:700;padding:9px 0;border-radius:999px;font-size:14px}
.mx-uc-guest-reg:hover{background:var(--primary-soft)}

/* 公告 */
.mx-announce{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:var(--shadow-sm);color:var(--text)}
.mx-announce-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff4e2;color:#f59e0b;flex:0 0 auto}
.mx-announce-ico svg{width:17px;height:17px}
.mx-announce strong{flex:0 0 auto;font-size:14px}
.mx-announce-text{flex:1 1 auto;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-announce-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-size:13px;font-weight:700}
.mx-announce-more svg{width:14px;height:14px}

/* 通用区块 */
.mx-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.mx-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mx-block-head h2{margin:0;font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px}
.mx-block-flag{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.mx-block-flag svg{width:17px;height:17px}
.mx-block-more{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px;font-weight:600}
.mx-block-more svg{width:15px;height:15px}
.mx-block-more:hover{color:var(--primary)}

/* 热门推荐 */
.mx-hot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mx-hot-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px 10px;border:1px solid var(--line);border-radius:14px;transition:.18s;background:#fff}
.mx-hot-card:hover{border-color:#bcd3ff;box-shadow:0 10px 22px rgba(37,99,235,.12);transform:translateY(-2px)}
.mx-hot-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.mx-hot-meta{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.mx-hot-meta strong{color:var(--danger);font-size:16px;font-weight:850}
.mx-hot-meta small{color:var(--soft);font-size:11px}

/* 分类芯片 */
.mx-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.mx-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:14px;font-weight:600;transition:.16s}
.mx-chip svg{width:17px;height:17px}
.mx-chip:hover{border-color:#bcd3ff;background:var(--primary-soft);color:var(--primary)}
.mx-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.mx-chip.active svg{color:#fff!important}

/* 商品列表区 */
.mx-list-block{padding-bottom:22px}
.mx-list-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mx-list-bar h2{margin:0;font-size:18px;font-weight:800;flex:0 0 auto}
.mx-sort-tabs{display:flex;gap:4px;flex:1 1 auto}
.mx-sort-tabs a{padding:6px 14px;border-radius:999px;font-size:14px;color:var(--muted);font-weight:600}
.mx-sort-tabs a:hover{color:var(--text)}
.mx-sort-tabs a.active{background:var(--primary-soft);color:var(--primary)}
.mx-view-toggle{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:3px;flex:0 0 auto}
.mx-view-toggle button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--soft);font-size:13px;font-weight:600}
.mx-view-toggle button svg{width:17px;height:17px}
.mx-view-toggle button.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
.mx-filter-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.mx-filter-tabs a{position:relative;padding:8px 2px;font-size:14px;color:var(--muted);font-weight:600}
.mx-filter-tabs a:hover{color:var(--text)}
.mx-filter-tabs a.active{color:var(--primary)}
.mx-filter-tabs a.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--primary)}

/* 商品网格 + 卡片 */
.mx-product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.mx-catalog-grid{grid-template-columns:repeat(6,1fr)}
.mx-product-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;transition:.18s}
.mx-product-card:hover{border-color:#bcd3ff;box-shadow:0 12px 26px rgba(37,99,235,.12);transform:translateY(-3px)}
.mx-product-cover{display:block;margin-bottom:10px}
.mx-product-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mx-product-sub{margin:4px 0 10px;font-size:12px;color:var(--soft);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:17px}
.mx-product-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.mx-product-price{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.mx-product-price strong{color:var(--danger);font-size:17px;font-weight:850}
.mx-product-price small{color:var(--soft);font-size:11px;white-space:nowrap}
.mx-buy-btn{width:100%;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;padding:9px 0;cursor:pointer;font-size:14px;transition:background .18s}
.mx-buy-btn:hover{background:var(--primary-2)}
.mx-product-ops{display:flex;gap:8px}
.mx-product-ops .mx-buy-btn{flex:1}
.mx-cart-icon-btn{flex:0 0 auto;width:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.mx-cart-icon-btn svg{width:19px;height:19px}
.mx-cart-icon-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

/* 列表视图 */
.mx-product-grid.is-list{display:flex;flex-direction:column;gap:10px}
.mx-product-grid.is-list .mx-product-card{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
.mx-product-grid.is-list .mx-product-cover{margin:0;width:60px;flex:0 0 auto}
.mx-product-grid.is-list .mx-pcover-lg{width:60px;height:60px;aspect-ratio:auto}
.mx-product-grid.is-list .mx-product-name{flex:0 0 auto;width:auto}
.mx-product-grid.is-list .mx-product-card>a.mx-product-name{order:2}
.mx-product-grid.is-list .mx-product-sub{order:3;flex:1 1 auto;margin:0;-webkit-line-clamp:2}
.mx-product-grid.is-list .mx-product-foot{order:4;margin:0;flex-direction:row;align-items:center;gap:16px;flex:0 0 auto}
.mx-product-grid.is-list .mx-product-price{flex-direction:column;align-items:flex-end;gap:0}
.mx-product-grid.is-list .mx-buy-btn{width:auto;padding:9px 22px}
.mx-product-grid.is-list .mx-product-ops{flex:0 0 auto}

/* 分页 */
.mx-pager{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:20px}
.mx-page-btn,.mx-page-num{min-width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:14px;font-weight:600;background:#fff;padding:0 8px}
.mx-page-btn svg{width:16px;height:16px}
.mx-page-num:hover,.mx-page-btn:hover{border-color:var(--primary);color:var(--primary)}
.mx-page-num.active{background:var(--primary);border-color:var(--primary);color:#fff}
.mx-page-btn.disabled{opacity:.45;pointer-events:none}
.mx-page-dots{color:var(--soft);padding:0 4px}
.mx-page-total,.mx-page-size{color:var(--muted);font-size:13px;margin:0 6px}

/* =====================================================================
 * 分类页
 * ===================================================================== */
.mx-catalog{padding:22px 0 40px}
.mx-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:16px}
.mx-crumb a{color:var(--muted)}
.mx-crumb a:hover{color:var(--primary)}
.mx-crumb span{color:var(--text);font-weight:600}
.mx-crumb-sep{width:14px;height:14px;color:var(--soft)}
.mx-cat-head{margin-bottom:14px}
.mx-cat-head-title h1{margin:0;font-size:24px;font-weight:850}
.mx-cat-head-title p{margin:6px 0 0;color:var(--muted);font-size:14px}
.mx-cat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.mx-cat-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:.18s}
.mx-cat-card:hover{border-color:#bcd3ff;box-shadow:0 12px 26px rgba(37,99,235,.12);transform:translateY(-2px)}
.mx-cat-card.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.mx-cat-card strong{display:block;font-size:16px;font-weight:800}
.mx-cat-card span:last-child{color:var(--muted);font-size:13px}
.mx-cat-card>div,.mx-cat-card>strong{display:flex;flex-direction:column}

.mx-filter-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:18px;display:grid;gap:12px}
.mx-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mx-field{display:flex;align-items:center;gap:8px}
.mx-field>span{font-size:13px;color:var(--muted);flex:0 0 auto}
.mx-field select,.mx-field input,.mx-field-grow input{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff;min-height:40px;color:var(--text)}
.mx-field select:focus,.mx-field input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.mx-field-grow{flex:1 1 260px}
.mx-field-grow input{width:100%}
.mx-filter-search{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;padding:0 22px;min-height:40px;cursor:pointer;font-size:14px}
.mx-filter-search svg{width:16px;height:16px}
.mx-filter-search:hover{background:var(--primary-2)}
.mx-price-range{display:flex;align-items:center;gap:8px}
.mx-price-range>span{font-size:13px;color:var(--muted)}
.mx-price-range input{width:120px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-height:40px;font-size:14px}
.mx-price-range i{color:var(--soft);font-style:normal}
.mx-filter-row-2{justify-content:flex-start}
.mx-filter-row-2 .mx-view-toggle{margin-left:auto}

.mx-catalog-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.mx-catalog-pager .mx-pager{margin-top:0}

/* =====================================================================
 * 商品快捷查看弹窗
 * ===================================================================== */
.mx-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.mx-modal.open{display:flex}
.mx-modal-mask{position:absolute;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(2px)}
.mx-modal-card{position:relative;width:min(420px,100%);background:#fff;border-radius:20px;padding:24px;box-shadow:var(--shadow);animation:mxPop .2s ease}
@keyframes mxPop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.mx-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;background:var(--surface-2);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.mx-modal-close svg{width:18px;height:18px}
.mx-modal-close:hover{background:#e7ecf5;color:var(--text)}
.mx-qv-top{display:flex;gap:16px;margin-bottom:18px}
.mx-qv-cover{width:88px;height:88px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.mx-qv-cover img{width:100%;height:100%;object-fit:cover}
.mx-qv-cover svg{width:46%;height:46%}
.mx-qv-info{flex:1 1 auto;min-width:0}
.mx-qv-title{display:block;font-size:17px;font-weight:800;line-height:1.4;margin-bottom:6px}
.mx-qv-price{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.mx-qv-price b{color:var(--danger);font-size:22px;font-weight:850}
.mx-qv-stock{color:var(--soft);font-size:12px}
.mx-qv-tags{display:flex;flex-wrap:wrap;gap:6px}
.mx-qv-tags span{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:600}
.mx-qv-desc{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-qv-qty{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.mx-qv-qty>span{font-size:14px;font-weight:600}
.mx-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mx-stepper button{width:34px;height:34px;border:0;background:var(--surface-2);cursor:pointer;display:grid;place-items:center;color:var(--text)}
.mx-stepper button svg{width:16px;height:16px}
.mx-stepper button:hover{background:#e7ecf5}
.mx-stepper input{width:50px;height:34px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:14px;font-weight:700}
.mx-qv-limit{color:var(--soft);font-size:12px;margin-left:auto}
.mx-qv-actions{display:flex;gap:12px}
.mx-qv-cancel{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 0;font-weight:700;cursor:pointer;color:var(--text);font-size:15px}
.mx-qv-cancel:hover{background:var(--surface-2)}
.mx-qv-buy{flex:2;text-align:center;background:var(--primary);color:#fff;border-radius:12px;padding:12px 0;font-weight:800;font-size:15px;transition:background .18s}
.mx-qv-buy:hover{background:var(--primary-2)}

/* =====================================================================
 * 在线客服弹层
 * ===================================================================== */
.mx-service{position:fixed;right:22px;bottom:24px;z-index:150}
.mx-service-fab{display:flex;flex-direction:column;align-items:center;gap:2px;width:60px;height:60px;border:0;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer;box-shadow:0 12px 28px rgba(37,99,235,.4);transition:transform .18s}
.mx-service-fab svg{width:24px;height:24px}
.mx-service-fab span{font-size:11px;font-weight:600}
.mx-service-fab:hover{transform:translateY(-3px)}
.mx-service-panel{position:absolute;right:0;bottom:74px;width:300px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;animation:mxPop .2s ease}
.mx-service-panel[hidden]{display:none}
.mx-service-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(120deg,var(--primary),#4f7ff0);color:#fff}
.mx-service-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto}
.mx-service-avatar svg{width:22px;height:22px}
.mx-service-head strong{display:block;font-size:15px}
.mx-service-head small{font-size:12px;opacity:.9}
.mx-service-x{margin-left:auto;width:26px;height:26px;border:0;background:rgba(255,255,255,.18);border-radius:50%;color:#fff;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.mx-service-x svg{width:15px;height:15px}
.mx-service-body{padding:14px 16px;max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.mx-service-bubble{background:#fff;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--text);box-shadow:var(--shadow-sm);align-self:flex-start;max-width:90%}
.mx-service-bubble.me{align-self:flex-end;background:var(--primary);color:#fff}
.mx-service-quick{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.mx-service-quick button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--text)}
.mx-service-quick button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.mx-service-human{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--line);color:var(--primary);font-weight:700;font-size:14px}
.mx-service-human svg{width:17px;height:17px}
.mx-service-human:hover{background:var(--primary-soft)}

/* =====================================================================
 * 响应式
 * ===================================================================== */
@media (max-width:1080px){
  .mx-header-search{max-width:300px}
  .mx-hot-grid,.mx-product-grid,.mx-catalog-grid{grid-template-columns:repeat(4,1fr)}
  .mx-cat-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .mx-home-shell{grid-template-columns:1fr}
  .mx-side{position:static;display:none}
  .mx-top-row{grid-template-columns:1fr}
  .mx-header-search{order:5;max-width:none;flex-basis:100%;margin-top:8px}
}
@media (max-width:680px){
  .mx-hot-grid,.mx-product-grid,.mx-catalog-grid{grid-template-columns:repeat(2,1fr)}
  .mx-slide{flex-direction:column;text-align:center;min-height:240px;padding:24px}
  .mx-hero-art{display:none}
  .mx-carousel-dots{left:50%;transform:translateX(-50%)}
  .mx-list-bar{flex-wrap:wrap}
  .mx-pill span:not(.mx-pill-ico):not(.mx-cart-count){display:none}
  .mx-balance-pill strong,.mx-cart-pill .mx-cart-count{display:inline-grid}
  .mx-filter-row{flex-direction:column;align-items:stretch}
  .mx-field-grow{flex-basis:auto}
  .mx-service-panel{width:280px}
}

/* =====================================================================
 * 商品详情页（卡密 / 直充）
 * ===================================================================== */
.mxd{padding:22px 0 44px}
.mxd-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:16px}
.mxd-crumb a{color:var(--muted)}
.mxd-crumb a:hover{color:var(--primary)}
.mxd-crumb em{color:var(--text);font-style:normal;font-weight:600}
.mxd-crumb-sep{width:13px;height:13px;color:var(--soft);flex:0 0 auto}
.mxd-top{display:grid;grid-template-columns:330px 1fr 282px;gap:18px;align-items:stretch;margin-bottom:18px}

/* 商品图 */
.mxd-gallery{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.mxd-gallery .mxd-poster{flex:0 0 auto}
.mxd-poster{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:var(--surface-2)}
.mxd-poster img{width:100%;height:100%;object-fit:cover}
.mxd-poster-badge{position:absolute;top:10px;right:10px;z-index:2;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px}
.mxd-poster-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mxd-poster-fallback svg{width:64px;height:64px}
.mxd-poster-fallback strong{font-size:17px;color:var(--text)}
.mxd-poster-fallback small{font-size:12px;color:var(--muted)}
.mxd-sku{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;color:var(--muted);font-size:13px}
.mxd-sku button{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;color:var(--muted);font-size:13px}
.mxd-sku button svg{width:14px;height:14px}
.mxd-sku button:hover{border-color:var(--primary);color:var(--primary)}

/* 决策区 */
.mxd-main{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow-sm);min-width:0}
.mxd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mxd-tags span{font-size:12px;font-weight:600;padding:3px 11px;border-radius:8px;background:var(--surface-2);color:var(--muted)}
.mxd-tags span.is-primary{background:var(--primary-soft);color:var(--primary)}
.mxd-title{font-size:22px;font-weight:850;margin:0 0 14px;line-height:1.45}
.mxd-features{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:18px}
.mxd-features span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.mxd-feat-ico{width:16px;height:16px;color:var(--success);flex:0 0 auto}
.mxd-priceband{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,#fff5f5,#fff9f7);border:1px solid #ffe2dd;border-radius:14px;padding:16px 20px;margin-bottom:16px}
.mxd-price{display:flex;flex-direction:column;gap:2px}
.mxd-price small{color:var(--muted);font-size:12px}
.mxd-price strong{color:var(--danger);font-size:30px;font-weight:850;line-height:1}
.mxd-price em{color:var(--soft);font-size:12px;font-style:normal}
.mxd-price-meta{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.mxd-price-meta div{display:flex;flex-direction:column;gap:3px}
.mxd-price-meta span{color:var(--muted);font-size:12px}
.mxd-price-meta b{color:var(--text);font-size:14px;font-weight:700}
.mxd-alert{display:flex;align-items:center;gap:8px;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.mxd-alert svg{width:18px;height:18px;flex:0 0 auto}
.mxd-alert.success{background:#e8f7ee;color:var(--success)}
.mxd-alert.danger{background:#fdecec;color:var(--danger)}
.mxd-qty-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.mxd-qty-label{font-size:14px;font-weight:600}
.mxd-stepper input{width:64px}
.mxd-pay-total{margin-left:auto;display:flex;align-items:baseline;gap:8px}
.mxd-pay-total span{color:var(--muted);font-size:13px}
.mxd-pay-total strong{color:var(--danger);font-size:20px;font-weight:850}
.mxd-stock-tip{display:inline-flex;align-items:center;gap:5px;color:var(--success);font-size:13px}
.mxd-stock-tip svg{width:16px;height:16px}
.mxd-notice-bar{display:flex;gap:10px;align-items:flex-start;background:#fff8ec;border:1px solid #ffe7bd;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:#9a6a12}
.mxd-notice-bar strong{flex:0 0 auto;color:#b54708}
.mxd-notice-link{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:14px}
.mxd-notice-link svg{width:16px;height:16px}
.mxd-fields{background:var(--surface-2);border-radius:14px;padding:16px;margin-bottom:16px}
.mxd-fields-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.mxd-fields-head strong{font-size:14px}
.mxd-fields-head span{color:var(--muted);font-size:12px}
.mxd-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mxd-field{display:flex;flex-direction:column;gap:6px}
.mxd-field>span{font-size:13px;color:var(--text);font-weight:600}
.mxd-field>span em{color:var(--danger);font-style:normal}
.mxd-field input,.mxd-field select,.mxd-field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;width:100%;min-height:42px}
.mxd-field input:focus,.mxd-field select:focus,.mxd-field textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.mxd-field-full{grid-column:1/-1}
.mxd-card-note{display:flex;gap:12px;align-items:flex-start;background:#eef4ff;border:1px solid #d9e6ff;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.mxd-card-note-ico{color:var(--primary);flex:0 0 auto}
.mxd-card-note-ico svg{width:22px;height:22px}
.mxd-card-note strong{display:block;font-size:14px;color:var(--text);margin-bottom:2px}
.mxd-card-note span{font-size:13px;color:var(--muted);line-height:1.6}
.mxd-actions{display:flex;gap:12px}
.mxd-buy{flex:1.6;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;font-size:15px;padding:13px;cursor:pointer;transition:background .18s}
.mxd-buy:hover{background:var(--primary-2)}
.mxd-addcart{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cdddff;border-radius:12px;background:#fff;color:var(--primary);font-weight:700;font-size:15px;padding:13px;cursor:pointer;transition:.18s}
.mxd-addcart svg{width:18px;height:18px}
.mxd-addcart:hover{background:var(--primary-soft)}
.mxd-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mxd-trust span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}

/* 服务保障 */
.mxd-service{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.mxd-service-extra{margin-top:auto}
.mxd-service-title{font-weight:800;font-size:15px;margin-bottom:14px}
.mxd-service-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:14px}
.mxd-service-list li{display:flex;gap:11px;align-items:flex-start}
.mxd-service-ico{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:0 0 auto}
.mxd-service-ico svg{width:18px;height:18px}
.mxd-service-list b{display:block;font-size:14px;color:var(--text)}
.mxd-service-list small{font-size:12px;color:var(--muted);line-height:1.5}
.mxd-service-extra{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:11px;margin-bottom:14px}
.mxd-service-extra b{display:block;font-size:13px;color:var(--text)}
.mxd-service-extra small{font-size:12px;color:var(--muted)}
.mxd-service-primary{display:block;text-align:center;background:var(--primary);color:#fff;border-radius:10px;padding:11px;font-weight:700;font-size:14px;margin-bottom:8px;transition:background .18s}
.mxd-service-primary:hover{background:var(--primary-2)}
.mxd-service-secondary{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:11px;font-weight:700;font-size:14px;color:var(--text)}
.mxd-service-secondary:hover{background:var(--surface-2)}

/* 详情 + 购买说明 */
.mxd-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mxd-doc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.mxd-doc h2{margin:0 0 12px;font-size:17px;font-weight:800;padding-left:11px;border-left:4px solid var(--primary);line-height:1.2}
.mxd-doc p{margin:0;font-size:14px;line-height:1.9;color:var(--muted)}

@media (max-width:980px){
  .mxd-top{grid-template-columns:1fr}
  .mxd-bottom{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mxd-fields-grid{grid-template-columns:1fr}
  .mxd-actions{flex-direction:column}
  .mxd-price-meta{gap:16px}
}

/* =====================================================================
 * 结算 / 确认支付页
 * ===================================================================== */
.mxc{padding:22px 0 44px}
.mxc-steps{display:flex;align-items:center;justify-content:center;margin:6px 0 22px}
.mxc-steps>div{display:flex;align-items:center;gap:8px}
.mxc-steps>div b{width:26px;height:26px;border-radius:50%;background:#e5eaf2;color:var(--soft);display:grid;place-items:center;font-size:13px;font-weight:700}
.mxc-steps>div span{font-size:14px;color:var(--soft);font-weight:600}
.mxc-steps>div.is-active b{background:var(--primary);color:#fff}
.mxc-steps>div.is-active span{color:var(--text)}
.mxc-step-line{width:64px;height:2px;background:#e5eaf2;margin:0 14px}
.mxc-step-line.is-active{background:var(--primary)}
.mxc-grid{display:grid;grid-template-columns:1fr 1fr 320px;gap:18px;align-items:stretch}
.mxc-pay{display:flex;flex-direction:column}
.mxc-pay-tip{margin-top:auto!important}
.mxc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.mxc-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mxc-card-head h2{margin:0;font-size:17px;font-weight:800}
.mxc-card-head em{color:var(--muted);font-size:13px;font-style:normal}

/* 订单商品 */
.mxc-item{display:flex;gap:12px;margin-bottom:14px}
.mxc-item-cover{width:60px;height:60px;border-radius:12px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.mxc-item-cover img{width:100%;height:100%;object-fit:cover}
.mxc-item-cover svg{width:46%;height:46%}
.mxc-item-info{flex:1;min-width:0}
.mxc-item-top{display:flex;justify-content:space-between;gap:10px}
.mxc-item-top strong{font-size:14px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mxc-item-top b{color:var(--danger);font-size:15px;font-weight:850;white-space:nowrap}
.mxc-item-sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;color:var(--soft);font-size:12px}
.mxc-locked{background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.mxc-locked-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mxc-locked-head strong{font-size:13px}
.mxc-locked-tag{font-size:11px;color:#b54708;background:#fff4e2;padding:2px 9px;border-radius:999px}
.mxc-locked-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0}
.mxc-locked-row span{color:var(--muted)}
.mxc-locked-row b{color:var(--text);font-weight:600;text-align:right;word-break:break-all}
.mxc-note-line{display:flex;gap:8px;align-items:flex-start;background:#fff8ec;border:1px solid #ffe7bd;border-radius:12px;padding:10px 12px;font-size:13px;color:#9a6a12}
.mxc-note-line svg{width:18px;height:18px;color:#f59e0b;flex:0 0 auto}

/* 支付方式 */
.mxc-methods{display:grid;gap:12px}
.mxc-method{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.16s}
.mxc-method:hover{border-color:#cdddff}
.mxc-method.is-active{border-color:var(--primary);background:var(--primary-soft)}
.mxc-method input{position:absolute;opacity:0;pointer-events:none}
.mxc-method-radio{width:18px;height:18px;border-radius:50%;border:2px solid #c7d2e0;flex:0 0 auto;display:grid;place-items:center}
.mxc-method.is-active .mxc-method-radio{border-color:var(--primary)}
.mxc-method.is-active .mxc-method-radio:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary)}
.mxc-method-body{flex:1;min-width:0}
.mxc-method-body b{font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700}
.mxc-method-body b small{color:var(--muted);font-weight:500;font-size:12px}
.mxc-method-body>small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mxc-method-warn{display:inline-block;color:var(--danger);font-size:12px;font-style:normal;margin-top:2px}
.mxc-method-rec{font-size:11px;color:var(--primary);background:#fff;border:1px solid #cdddff;padding:0 7px;border-radius:6px;font-style:normal;font-weight:600}
.mxc-method-recharge{color:var(--danger);font-size:13px;font-weight:700;flex:0 0 auto}
.mxc-method-recharge:hover{text-decoration:underline}
.mxc-method-brands{display:flex;gap:6px;flex:0 0 auto}
.mxc-method-brands svg{width:24px;height:24px}
.mxc-pay-tip{display:flex;align-items:center;gap:6px;margin-top:14px;color:var(--muted);font-size:12px}
.mxc-tip-ico{width:15px;height:15px;color:var(--primary);flex:0 0 auto}

/* 支付明细 */
.mxc-detail-lines{display:grid;gap:12px;margin-bottom:14px}
.mxc-detail-lines>div{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted)}
.mxc-detail-lines b{color:var(--text);font-weight:700}
.mxc-discount{color:var(--success)!important}
.mxc-detail-total{padding-top:12px;border-top:1px solid var(--line)}
.mxc-detail-total b{color:var(--danger);font-size:18px;font-weight:850}
.mxc-detail-due{padding-top:4px}
.mxc-detail-due b{color:var(--danger);font-size:22px;font-weight:850}
.mxc-shortage{display:flex;gap:8px;align-items:flex-start;background:#fff8ec;border:1px solid #ffe7bd;border-radius:10px;padding:10px 12px;font-size:12px;color:#9a6a12;margin-bottom:14px;line-height:1.6}
.mxc-shortage svg{width:16px;height:16px;color:#f59e0b;flex:0 0 auto}
.mxc-remark{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mxc-remark span{font-size:13px;color:var(--muted)}
.mxc-remark textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;resize:vertical;min-height:64px}
.mxc-remark textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.mxc-submit{width:100%;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;font-size:15px;padding:13px;cursor:pointer;transition:background .18s}
.mxc-submit:hover{background:var(--primary-2)}
.mxc-submit:disabled{background:#cbd5e1;cursor:not-allowed}
.mxc-recharge-btn{display:block;text-align:center;margin-top:10px;border:1px solid #cdddff;border-radius:12px;padding:11px;color:var(--primary);font-weight:700;font-size:14px}
.mxc-recharge-btn:hover{background:var(--primary-soft)}
.mxc-back{display:block;text-align:center;margin-top:10px;color:var(--muted);font-size:13px}
.mxc-back:hover{color:var(--primary)}
.mxc-guarantee{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.mxc-guarantee li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.mxc-guarantee svg{width:16px;height:16px;color:var(--primary);flex:0 0 auto}

@media (max-width:980px){
  .mxc-grid{grid-template-columns:1fr}
  .mxc-step-line{width:36px;margin:0 8px}
}

/* =====================================================================
 * 用户中心 - 我的订单列表操作列修正（防止长订单号换行挤压操作列）
 * ===================================================================== */
.front-v1210 .uc2-order-no{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.front-v1210 .uc2-order-op{justify-self:end}
.front-v1210 .uc2-order-op a{white-space:nowrap}
.front-v1210 .uc2-order-head,.front-v1210 .uc2-order-row{grid-template-columns:minmax(190px,1.6fr) 92px 90px minmax(130px,1fr) 104px}
@media (max-width:760px){
  .front-v1210 .uc2-order-head,.front-v1210 .uc2-order-row{grid-template-columns:minmax(150px,1.4fr) 80px 84px minmax(110px,1fr) 96px}
}

/* =====================================================================
 * v1.21.62 根因修复：结算支付通道拆分 / 控制台订单操作列防溢出 / 分站信息行稳定
 * ===================================================================== */
.front-v1210 .mxc-method-online .mxc-method-body b{font-weight:800;}
.front-v1210 .mxc-method-online .mxc-method-body>small{line-height:1.45;}
.front-v1210 .mxc-method-online .mxc-method-brands{margin-left:auto;}
.front-v1210 .mxc-method-online .mxc-method-brands svg{width:26px;height:26px;}

.front-v1210 .uc2-orders-card{min-width:0;overflow:hidden;}
.front-v1210 .uc2-order-table{width:100%;min-width:0;overflow:hidden;}
.front-v1210 .uc2-order-head,
.front-v1210 .uc2-order-row{grid-template-columns:minmax(160px,1.55fr) 84px 82px minmax(108px,.9fr) 92px;gap:10px;min-width:0;}
.front-v1210 .uc2-order-head>span,
.front-v1210 .uc2-order-row>span,
.front-v1210 .uc2-order-row>strong{min-width:0;}
.front-v1210 .uc2-order-no{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.front-v1210 .uc2-order-op{justify-self:end;max-width:92px;overflow:hidden;}
.front-v1210 .uc2-order-op a{height:30px;padding:0 9px;border-radius:999px;background:#eef4ff;border:1px solid #dbe8ff;color:#2563eb;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.front-v1210 .uc2-order-op a svg{width:14px;height:14px;flex:0 0 14px;}
@media (max-width:1180px){
  .front-v1210 .uc2-body{grid-template-columns:1fr;}
  .front-v1210 .uc2-side{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .front-v1210 .uc2-order-table{overflow-x:auto;}
  .front-v1210 .uc2-order-head,
  .front-v1210 .uc2-order-row{grid-template-columns:minmax(150px,1.4fr) 76px 82px 110px 90px;min-width:620px;}
  .front-v1210 .uc2-side{grid-template-columns:1fr;}
}
.front-v1210 .uc3-info-grid>div{min-width:0;}
.front-v1210 .uc3-info-grid b{min-width:0;text-align:right;overflow-wrap:anywhere;}