/* 木阳软件与技术服务 · 前台样式基座
 *
 * 本主题不加载卡网默认皮肤 assets/user/css/index.css，页面骨架、排版规范
 * 以及 item.js / query.js 注入的组件样式全部在本文件内自建。
 * 底层只依赖 bootstrap（栅格、下拉、表单基类）与 _.css（layer/toastr/select2 等供应商合集）。
 *
 * 配色是浅灰底加浮白卡：页面底 #f5f6f8，内容一律装进白卡靠细描边和轻投影分层，
 * 这样彩色商品封面才是整页最跳的东西。
 */

:root {
    color-scheme: light;

    /* 页面底是浅灰而不是纯白，白卡才浮得起来；elevated 就是卡片的白。
       surface 系列是白卡内部的淡底，用来区分表头、代码块、小徽章这类次级块 */
    --mu-bg: #f5f6f8;
    --mu-surface: #f7f8fa;
    --mu-surface-2: #eef0f4;
    --mu-elevated: #ffffff;
    --mu-border: #e6e8ec;
    --mu-border-strong: #d5d9e0;
    --mu-text: #111827;
    --mu-text-2: #374151;
    --mu-muted: #6b7280;
    --mu-faint: #9ca3af;
    --mu-accent: #4f46e5;
    --mu-accent-strong: #4338ca;
    --mu-accent-soft: #eef0fe;
    --mu-accent-2: #6366f1;
    --mu-on-accent: #ffffff;
    --mu-glow: rgba(79, 70, 229, 0.28);
    --mu-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --mu-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
    /* 商品封面区的垫底色，浅灰能兜住透明 PNG 也不抢彩色封面 */
    --mu-media: #f2f4f7;
    /* 主色是靛蓝，成功态另给一套绿，不然"已支付""自动发货"跟品牌色混在一起看不出状态 */
    --mu-ok: #05803f;
    --mu-ok-soft: #e7f7ef;
    --mu-ok-border: #a7dfc8;
    --mu-warn: #b45309;
    --mu-warn-soft: #fdf4e7;
    --mu-danger: #b42318;
    --mu-danger-soft: #fdecec;
    --mu-radius: 6px;
    --mu-radius-lg: 8px;
    --mu-shell: 1120px;
    --mu-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mu-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   基础
   ========================================================================== */

/* bootstrap 的 reboot 也会设，这里自己再设一次：
   .mu-shell 是 width:100% 加左右内边距，少了 border-box 会整页横向溢出 */
.muyang-site *,
.muyang-site *::before,
.muyang-site *::after {
    box-sizing: border-box;
}

body.muyang-site,
body.mu-authbody {
    margin: 0;
    color: var(--mu-text);
    background: var(--mu-bg);
    font-family: var(--mu-sans);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.muyang-site a {
    color: var(--mu-accent);
    text-decoration: none;
}

.muyang-site a:hover {
    color: var(--mu-accent-strong);
    text-decoration: underline;
}

.muyang-site h1,
.muyang-site h2,
.muyang-site h3,
.muyang-site h4 {
    margin: 0;
    color: var(--mu-text);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.muyang-site img {
    max-width: 100%;
}

.mu-shell {
    width: 100%;
    max-width: var(--mu-shell);
    margin: 0 auto;
    padding: 0 24px;
}

.mu-page {
    padding: 26px 0 56px;
}

.mu-narrow {
    max-width: 840px;
}

.mu-mono {
    font-family: var(--mu-mono);
}

.icon-spin {
    display: inline-block;
    animation: mu-spin 1s linear infinite;
}

@keyframes mu-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   顶栏
   ========================================================================== */

.mu-topbar {
    position: sticky;
    z-index: 1030;
    top: 0;
    border-bottom: 1px solid var(--mu-border);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
}

/* 不支持毛玻璃的浏览器换回不透明白，否则内容会从半透明顶栏后面透出来 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .mu-topbar {
        background: #ffffff;
    }
}

.mu-topbar__inner {
    display: flex;
    gap: 20px;
    align-items: center;
    height: 56px;
}

.mu-brand {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    flex: none;
    color: var(--mu-text) !important;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-decoration: none !important;
}

/* LOGO 是后台上传的图，底色和形状都不受控，这里只固定尺寸和圆角，
   不再画品牌色底：圆形 LOGO 压在色块上四个角会露出来 */
.mu-brand__mark {
    display: block;
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 7px;
    object-fit: cover;
}

.mu-brand__name {
    font-size: 15px;
}

.mu-topnav {
    display: flex;
    gap: 2px;
    align-items: center;
    /* flex 子项默认不肯收窄，不给 min-width:0 的话导航条会把顶栏顶出屏幕，
       overflow-x 也就永远滚不起来 */
    min-width: 0;
    margin-right: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.mu-topnav::-webkit-scrollbar {
    display: none;
}

.mu-topnav a {
    padding: 6px 10px;
    border-radius: 5px;
    color: var(--mu-muted) !important;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none !important;
}

.mu-topnav a:hover {
    color: var(--mu-text) !important;
    background: var(--mu-surface);
}

.mu-topnav a.active {
    color: var(--mu-text) !important;
    box-shadow: inset 0 -2px 0 var(--mu-accent);
    font-weight: 600;
}

.mu-topnav .nav-icon {
    margin-right: 5px;
    color: var(--mu-faint);
}

.mu-topbar__side {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: none;
}

.mu-linkbtn,
.mu-topbar__side .btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2) !important;
    background: #ffffff;
    font-size: 13px;
    text-decoration: none !important;
    box-shadow: var(--mu-shadow);
}

.mu-linkbtn:hover,
.mu-topbar__side .btn:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent) !important;
    background: var(--mu-accent-soft);
}

.mu-linkbtn.is-solid {
    border-color: transparent;
    color: var(--mu-on-accent) !important;
    background: var(--mu-accent);
    font-weight: 600;
    box-shadow: 0 2px 8px -2px var(--mu-glow);
}

.mu-linkbtn.is-solid:hover {
    border-color: transparent;
    color: var(--mu-on-accent) !important;
    background: var(--mu-accent-strong);
    box-shadow: 0 4px 12px -2px var(--mu-glow);
}

.mu-user {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2) !important;
    background: #ffffff;
    font-size: 13px;
}

.mu-user__avatar {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.mu-user__balance {
    color: var(--mu-accent);
    font-family: var(--mu-mono);
}

.muyang-site .dropdown-menu {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2);
    background: #ffffff;
    box-shadow: var(--mu-shadow-lg);
    font-size: 14px;
}

.muyang-site .dropdown-item {
    color: var(--mu-text-2);
}

.muyang-site .dropdown-item:hover,
.muyang-site .dropdown-item:focus {
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

.muyang-site .dropdown-item:active {
    color: var(--mu-on-accent);
    background: var(--mu-accent);
}

/* ==========================================================================
   通用块
   ========================================================================== */

.mu-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--mu-border);
    border-left: 3px solid var(--mu-accent);
    border-radius: 0 var(--mu-radius) var(--mu-radius) 0;
    color: var(--mu-text-2);
    background: var(--mu-accent-soft);
    font-size: 13px;
    line-height: 1.65;
}

/* 首页没有品牌栏了，公告是页面第一个块，上边距交给 .mu-page 的内边距 */
.mu-page > .mu-notice:first-child {
    margin-top: 0;
}

.mu-notice > i {
    margin-top: 3px;
    color: var(--mu-accent);
}

.mu-notice p {
    margin: 0;
}

/* ==========================================================================
   分类工具条
   ========================================================================== */

.mu-toolbar {
    display: flex;
    gap: 12px 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0 16px;
}

.mu-chips {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
}

.mu-chips a {
    display: inline-flex;
    height: 30px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--mu-border);
    border-radius: 999px;
    color: var(--mu-muted) !important;
    background: #ffffff;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mu-chips a:hover {
    border-color: var(--mu-border-strong);
    color: var(--mu-text) !important;
    background: #ffffff;
}

.mu-chips a.is-active {
    border-color: transparent;
    color: var(--mu-on-accent) !important;
    background: var(--mu-accent);
    font-weight: 600;
    box-shadow: 0 2px 8px -2px var(--mu-glow);
}

.mu-search {
    display: flex;
    gap: 0;
    align-items: center;
    width: 268px;
    max-width: 100%;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    background: #ffffff;
    overflow: hidden;
}

.mu-search:focus-within {
    border-color: var(--mu-accent);
    box-shadow: 0 0 0 3px var(--mu-accent-soft);
}

.mu-search input {
    width: 100%;
    padding: 6px 10px;
    border: 0;
    outline: none;
    color: var(--mu-text);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
}

.mu-search button {
    flex: none;
    padding: 6px 12px;
    border: 0;
    border-left: 1px solid var(--mu-border);
    color: var(--mu-muted);
    background: var(--mu-surface);
    font-size: 13px;
    cursor: pointer;
}

.mu-search button:hover {
    color: var(--mu-accent);
}

/* 「只看有货」做成纯前端开关而不是 URL 参数：/cat/{id} 是服务器上的
   nginx rewrite，往重写过的路径挂查询参数有被规则吞掉的风险，切类目也不必整页刷新 */
.mu-filter {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 0 13px;
    border: 1px solid var(--mu-border);
    border-radius: 999px;
    color: var(--mu-muted);
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* inline-flex 会盖掉 [hidden] 的 UA display:none，得显式补一条 */
.mu-filter[hidden] {
    display: none;
}

.mu-filter:hover {
    border-color: var(--mu-border-strong);
    color: var(--mu-text);
}

.mu-filter.is-active {
    border-color: var(--mu-ok-border);
    color: var(--mu-ok);
    background: var(--mu-ok-soft);
    font-weight: 600;
}

.mu-filter__dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.mu-filter.is-active .mu-filter__dot {
    opacity: 1;
}

/* ==========================================================================
   商品栅格
   ========================================================================== */

.mu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.mu-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    color: inherit !important;
    background: #ffffff;
    box-shadow: var(--mu-shadow);
    text-decoration: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mu-card:hover {
    border-color: var(--mu-border-strong);
    box-shadow: var(--mu-shadow-lg);
    transform: translateY(-2px);
}

.mu-card__top {
    position: relative;
}

.mu-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--mu-border);
    background: var(--mu-media);
}

.mu-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.mu-card:hover .mu-card__media img {
    transform: scale(1.03);
}

/* 商品没传封面时不回退到站点图标，画一个同色系占位，免得大图位糊成一团 */
.mu-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mu-accent);
    background: radial-gradient(120% 120% at 50% 20%, var(--mu-accent-soft), transparent 72%), var(--mu-media);
}

.mu-card__media--empty svg {
    width: 30%;
    height: 30%;
    opacity: 0.55;
}

/* 标签压在封面左上角，正文因此少一行，四列窄卡才留得住图 */
.mu-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    max-width: calc(100% - 16px);
    overflow: hidden;
}

/* 标签压在彩色封面上，加一层不透明白底和投影才读得清 */
.mu-card__badges .commodity-tag {
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.24);
}

.mu-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.mu-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mu-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mu-card:hover .mu-card__title {
    color: var(--mu-accent);
}

.mu-card__foot {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--mu-border);
}

.mu-card__price {
    color: var(--mu-accent);
    font-family: var(--mu-mono);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.mu-card__price .unit {
    margin-right: 1px;
    color: var(--mu-accent);
    font-size: 13px;
    opacity: 0.7;
}

.mu-card__price .range {
    color: var(--mu-muted);
    font-size: 14px;
    font-weight: 400;
}

.mu-card__stat {
    display: flex;
    gap: 2px 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
    color: var(--mu-faint);
    font-size: 12px;
}

/* 库存是这一行唯一上色的元素。之前它和「自动发货」「已售」同为浅灰同字号，
   访客扫列表时根本分不出有货没货，只能逐个点进详情页 */
.mu-stock {
    display: inline-flex;
    height: 19px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mu-stock--ok {
    border-color: var(--mu-ok-border);
    color: var(--mu-ok);
    background: var(--mu-ok-soft);
}

.mu-stock--warn {
    border-color: rgba(180, 83, 9, 0.3);
    color: var(--mu-warn);
    background: var(--mu-warn-soft);
}

.mu-stock--out {
    border-color: rgba(180, 35, 24, 0.28);
    color: var(--mu-danger);
    background: var(--mu-danger-soft);
}

/* 售罄卡刻意不置灰封面：店里售罄占比一高，整屏灰卡把页面压得毫无生气。
   信号全交给封面上那块红牌和底部的红色色块，这里只把价格收淡一档、去掉 hover 上浮 */
.mu-card--soldout .mu-card__price,
.mu-card--soldout .mu-card__price .unit {
    color: var(--mu-muted);
}

.mu-card--soldout:hover {
    transform: none;
    box-shadow: var(--mu-shadow);
}

.mu-card--soldout:hover .mu-card__media img {
    transform: none;
}

/* 封面正中的售罄牌，底部色块字号太小，隔着一屏看不见。
   红底白字是因为商品封面多半是深色，半透明深色牌会直接糊在图上；
   白环帮它在黑封面上脱开，投影帮它在浅封面上浮起来 */
.mu-card__sold {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mu-card__sold span {
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #ffffff;
    background: var(--mu-danger);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.35);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.12em;
}

.mu-grid.is-instock-only .mu-card--soldout {
    display: none;
}

.mu-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mu-empty {
    padding: 44px 20px;
    border: 1px dashed var(--mu-border-strong);
    border-radius: var(--mu-radius-lg);
    color: var(--mu-muted);
    text-align: center;
}

/* 「只看有货」把整屏都筛没了的兜底，默认不占位，由脚本按需放出来 */
.mu-empty--filtered {
    display: none;
    margin-top: 14px;
}

.mu-empty--filtered.is-shown {
    display: block;
}

.mu-tip {
    margin: 18px 0 0;
    color: var(--mu-faint);
    font-size: 13px;
}

/* ==========================================================================
   商品标签（色值 token 由主题自定义，见 Commodity::TAG_COLORS）
   ========================================================================== */

.commodity-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
}

.commodity-tag--red {
    border-color: #f5c2c0;
    color: #b42318;
    background: #fdecec;
}

.commodity-tag--orange {
    border-color: #f3d1a6;
    color: #b45309;
    background: #fdf4e7;
}

.commodity-tag--green {
    border-color: #a7dfc8;
    color: #05803f;
    background: #e7f7ef;
}

.commodity-tag--cyan {
    border-color: #a5d9e6;
    color: #0e7490;
    background: #e6f5fa;
}

.commodity-tag--blue {
    border-color: #b6c9f5;
    color: #1d4ed8;
    background: #eaf0fe;
}

.commodity-tag--purple {
    border-color: #c8bdf5;
    color: #6d28d9;
    background: #f1ecfe;
}

.commodity-tag--pink {
    border-color: #f3bcd4;
    color: #be185d;
    background: #fdeaf3;
}

.commodity-tag--gray {
    border-color: var(--mu-border-strong);
    color: var(--mu-muted);
    background: var(--mu-surface-2);
}

/* ==========================================================================
   正文排版（商品详情与政策页共用）
   ========================================================================== */

.mu-prose {
    color: var(--mu-text-2);
    font-size: 15px;
    line-height: 1.85;
}

.mu-prose > *:first-child {
    margin-top: 0;
}

.mu-prose h2 {
    margin: 30px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mu-border);
    font-size: 17px;
}

.mu-prose h3 {
    margin: 22px 0 8px;
    font-size: 15px;
}

.mu-prose p {
    margin: 0 0 14px;
}

.mu-prose ul,
.mu-prose ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.mu-prose ul {
    list-style: disc outside;
}

.mu-prose ol {
    list-style: decimal outside;
}

.mu-prose li {
    margin-bottom: 6px;
}

.mu-prose li::marker {
    color: var(--mu-accent);
}

.mu-prose code {
    padding: 1px 5px;
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    color: var(--mu-accent-strong);
    background: var(--mu-surface);
    font-family: var(--mu-mono);
    font-size: 13px;
}

.mu-prose table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 14px;
}

.mu-prose th,
.mu-prose td {
    padding: 8px 10px;
    border: 1px solid var(--mu-border);
    text-align: left;
}

.mu-prose th {
    background: var(--mu-surface);
    font-weight: 650;
}

.mu-prose img {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
}

.mu-prose blockquote {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--mu-accent);
    color: var(--mu-muted);
    background: var(--mu-surface);
}

/* ==========================================================================
   商品详情页
   ========================================================================== */

.mu-crumb {
    margin-bottom: 16px;
    color: var(--mu-faint);
    font-size: 13px;
}

.mu-crumb a {
    color: var(--mu-muted);
}

.mu-crumb span {
    margin: 0 7px;
}

.mu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 34px;
    align-items: start;
}

.mu-item__hero {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mu-border);
}

.mu-item__cover {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    background: var(--mu-media);
    box-shadow: var(--mu-shadow-lg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mu-item__cover:hover {
    border-color: var(--mu-border-strong);
}

.mu-item__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mu-item__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mu-accent);
    background: radial-gradient(120% 120% at 50% 20%, var(--mu-accent-soft), transparent 72%), var(--mu-media);
}

.mu-item__cover--empty svg {
    width: 32%;
    height: 32%;
    opacity: 0.55;
}

.mu-item__intro h1 {
    margin-bottom: 10px;
    font-size: 23px;
}

.mu-item__intro .mu-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mu-item__notice {
    margin: 12px 0 0;
    color: var(--mu-muted);
    font-size: 13px;
}

.mu-item__section {
    margin-top: 26px;
}

.mu-item__section > h2 {
    margin-bottom: 12px;
    color: var(--mu-faint);
    font-family: var(--mu-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mu-buy {
    position: sticky;
    top: 76px;
    padding: 18px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    background: #ffffff;
    box-shadow: var(--mu-shadow-lg);
}

.mu-buy__price {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mu-border);
}

.mu-buy__price .price {
    color: var(--mu-accent);
    font-family: var(--mu-mono);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.mu-buy__price .price .unit {
    margin-right: 2px;
    color: var(--mu-accent);
    font-size: 16px;
    opacity: 0.7;
}

.mu-buy__hint {
    margin: 4px 0 0;
    color: var(--mu-faint);
    font-size: 12px;
}

.mu-buy .vstack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.mu-buy .form-label {
    display: block;
    margin-bottom: 5px;
    color: var(--mu-muted);
    font-size: 12px;
    font-weight: 600;
}

/* 开了「游客下单强制登录」时占掉付款区的位置：游客照样能看价格和库存，
   但下单入口换成登录，省得填完一整张表才被接口拒掉 */
.mu-buy__gate {
    margin-top: 4px;
    padding: 14px;
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: var(--mu-radius);
    background: var(--mu-accent-soft);
}

.mu-buy__gate p {
    margin: 0 0 12px;
    color: var(--mu-text-2);
    font-size: 13px;
    line-height: 1.7;
}

.mu-buy__gate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mu-buy__gate-actions .btn {
    width: 100%;
}

.mu-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mu-border);
    color: var(--mu-faint);
    font-size: 12px;
    line-height: 1.65;
}

/* ==========================================================================
   表单与脚本注入的下单组件
   ========================================================================== */

.muyang-site .form-control {
    padding: 7px 10px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-text);
    background: #ffffff;
    font-size: 14px;
    box-shadow: none;
}

.muyang-site .form-control::placeholder {
    color: var(--mu-faint);
}

.muyang-site .form-control:focus {
    border-color: var(--mu-accent);
    color: var(--mu-text);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--mu-accent-soft);
}

.muyang-site .btn {
    border-radius: var(--mu-radius);
    font-size: 14px;
}

.muyang-site .btn-primary {
    border-color: transparent;
    color: var(--mu-on-accent);
    background: var(--mu-accent);
    font-weight: 600;
    box-shadow: 0 2px 8px -2px var(--mu-glow);
}

.muyang-site .btn-primary:hover,
.muyang-site .btn-primary:focus,
.muyang-site .btn-primary:active {
    border-color: transparent !important;
    color: var(--mu-on-accent) !important;
    background: var(--mu-accent-strong) !important;
    box-shadow: 0 4px 12px -2px var(--mu-glow) !important;
}

.muyang-site .btn-outline-primary {
    border-color: var(--mu-border-strong);
    color: var(--mu-text-2);
    background: #ffffff;
}

.muyang-site .btn-outline-primary:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

.sku-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sku {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2) !important;
    background: var(--mu-surface-2);
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
}

.sku:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent) !important;
}

.sku.is-primary {
    border-color: var(--mu-accent);
    color: var(--mu-accent) !important;
    background: var(--mu-accent-soft);
    font-weight: 600;
}

.sku .badge-money,
.sku .badge-moeny {
    padding: 0 5px;
    border-radius: 4px;
    color: var(--mu-muted);
    background: var(--mu-surface-2);
    font-family: var(--mu-mono);
    font-size: 12px;
}

.sku.is-primary .badge-money,
.sku.is-primary .badge-moeny {
    color: var(--mu-on-accent);
    background: var(--mu-accent);
}

.qty-group {
    display: flex;
    width: 138px;
    align-items: stretch;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    overflow: hidden;
}

.qty-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    font-family: var(--mu-mono);
    text-align: center;
}

.qty-group .form-control:focus {
    box-shadow: none;
}

.change-num-sub,
.change-num-add {
    flex: none;
    width: 34px;
    border: 0;
    color: var(--mu-muted);
    background: var(--mu-surface);
    font-size: 15px;
    cursor: pointer;
}

.change-num-sub:hover,
.change-num-add:hover {
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

.wholesale-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 12px;
}

.wholesale-table th,
.wholesale-table td {
    padding: 4px 8px;
    border: 1px solid var(--mu-border);
    color: var(--mu-muted);
}

.wholesale-table thead th {
    background: var(--mu-surface);
}

.optional-card {
    width: 100%;
    padding: 7px 10px;
    border: 1px dashed var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-muted);
    background: #ffffff;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.optional-card:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

.captcha-img {
    padding: 0;
    border: 1px solid var(--mu-border-strong);
    border-left: 0;
    border-radius: 0 var(--mu-radius) var(--mu-radius) 0;
    background: #fff;
    cursor: pointer;
}

.cash-pay {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--mu-border);
}

.pay-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pay-list .pay {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2) !important;
    background: var(--mu-surface-2);
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
}

.pay-list .pay:hover {
    border-color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

.pay-list .pay img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.pay-list .pay.is-primary,
.pay-list .pay.active,
.pay-list .pay.selected {
    border-color: var(--mu-accent);
    background: var(--mu-accent-soft);
    font-weight: 600;
}

/* ==========================================================================
   徽章
   ========================================================================== */

.badge-soft {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid var(--mu-border-strong);
    border-radius: 4px;
    color: var(--mu-muted);
    background: var(--mu-surface-2);
    font-family: var(--mu-mono);
    font-size: 12px;
    line-height: 1.7;
}

.badge-soft-primary,
.badge-soft-success,
.badge-soft-info {
    border-color: var(--mu-ok-border);
    color: var(--mu-ok);
    background: var(--mu-ok-soft);
}

.badge-soft-warning {
    border-color: #f3d1a6;
    color: var(--mu-warn);
    background: var(--mu-warn-soft);
}

.badge-soft-danger {
    border-color: #f5c2c0;
    color: var(--mu-danger);
    background: var(--mu-danger-soft);
}

.badge-soft-muted {
    color: var(--mu-faint);
    background: var(--mu-surface);
}

.shared-button {
    cursor: pointer;
}

/* ==========================================================================
   订单查询
   ========================================================================== */

.order-query-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    background: #ffffff;
    box-shadow: var(--mu-shadow);
}

.order-query-form .form-control {
    width: 320px;
    max-width: 100%;
}

.order-results,
.no-results,
.loading-state {
    margin-top: 22px;
}

.no-results,
.loading-state {
    padding: 40px 20px;
    border: 1px dashed var(--mu-border-strong);
    border-radius: var(--mu-radius-lg);
    color: var(--mu-muted);
    text-align: center;
}

.no-results h2 {
    margin-bottom: 4px;
    font-size: 15px;
}

.no-results p,
.loading-state p {
    margin: 0;
    color: var(--mu-faint);
    font-size: 13px;
}

.mu-empty-icon,
.mu-loading-icon {
    display: block;
    margin-bottom: 10px;
    color: var(--mu-border-strong);
    font-size: 26px;
}

.order-item {
    margin-bottom: 16px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    background: var(--mu-elevated);
    overflow: hidden;
}

.order-header {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mu-border);
    background: var(--mu-surface);
}

.order-status {
    margin-bottom: 8px;
}

.status-badge {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--mu-border-strong);
    border-radius: 4px;
    color: var(--mu-muted);
    background: var(--mu-surface-2);
    font-size: 12px;
}

.status-badge.status-paid,
.status-badge.status-completed,
.status-badge.status-shipped {
    border-color: var(--mu-ok-border);
    color: var(--mu-ok);
    background: var(--mu-ok-soft);
}

.status-badge.status-pending,
.status-badge.status-waiting-shipment {
    border-color: #f3d1a6;
    color: var(--mu-warn);
    background: var(--mu-warn-soft);
}

.status-badge.status-cancelled {
    border-color: #f5c2c0;
    color: var(--mu-danger);
    background: var(--mu-danger-soft);
}

.order-basic {
    color: var(--mu-muted);
    font-size: 13px;
}

.order-no {
    color: var(--mu-text);
    font-family: var(--mu-mono);
    font-size: 13px;
}

.order-time,
.payment-time,
.payment-dst {
    margin-top: 2px;
}

.order-time-text,
.payment-time-text {
    font-family: var(--mu-mono);
}

.payment-method {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.payment-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.order-right {
    text-align: right;
}

.amount-label {
    display: block;
    color: var(--mu-faint);
    font-size: 12px;
}

.amount-value {
    color: var(--mu-accent-strong);
    font-family: var(--mu-mono);
    font-size: 20px;
    font-weight: 650;
}

.goods-section {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
}

.goods-thumb {
    flex: none;
}

.goods-image {
    width: 54px;
    height: 54px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    object-fit: cover;
}

.goods-details {
    min-width: 0;
}

.goods-name {
    margin-bottom: 6px;
    color: var(--mu-text);
    font-size: 14px;
    font-weight: 650;
}

.goods-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* query.js 给规格标签同时挂了 goods-sku 与供应商合集里的 a-badge，
   这里统一压成本站的徽章外观，避免混进另一套配色 */
.goods-sku,
.goods-meta .a-badge {
    display: inline-flex;
    padding: 1px 7px !important;
    border: 1px solid var(--mu-border-strong) !important;
    border-radius: 4px !important;
    color: var(--mu-muted) !important;
    background: var(--mu-surface-2) !important;
    font-family: var(--mu-mono);
    font-size: 12px !important;
    font-weight: 400 !important;
}

.goods-price {
    margin-top: 6px;
    color: var(--mu-muted);
    font-family: var(--mu-mono);
    font-size: 13px;
}

.card-section {
    padding: 0 18px 18px;
}

.card-section .card-header {
    padding: 0 0 8px;
    border: 0;
    background: none;
}

.shipment-content {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.shipment-title {
    color: var(--mu-text);
    font-size: 14px;
    font-weight: 650;
}

.shipment-badge {
    display: inline-flex;
    padding: 2px 8px;
    border: 1px solid var(--mu-border-strong);
    border-radius: 4px;
    color: var(--mu-muted);
    background: var(--mu-surface-2);
    font-size: 12px;
}

.shipment-badge.shipment-shipped,
.shipment-badge.shipment-paid {
    border-color: var(--mu-ok-border);
    color: var(--mu-ok);
    background: var(--mu-ok-soft);
}

.shipment-badge.shipment-waiting,
.shipment-badge.shipment-pending {
    border-color: #f3d1a6;
    color: var(--mu-warn);
    background: var(--mu-warn-soft);
}

.password-form .input-group {
    max-width: 420px;
}

/* 卡密正文用淡底加等宽字圈出来，方便一眼定位和整段复制 */
.card-display,
.card-content-no-password .card-display {
    padding: 12px 14px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    color: var(--mu-text);
    background: var(--mu-surface);
    font-family: var(--mu-mono);
    font-size: 13px;
    line-height: 1.8;
    word-break: break-all;
    white-space: pre-wrap;
}

.card-loading {
    padding: 16px;
    color: var(--mu-muted);
    text-align: center;
}

.card-content {
    margin-top: 8px;
}

/* ==========================================================================
   政策页
   ========================================================================== */

.mu-policy__head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mu-border);
}

.mu-policy__head span {
    display: block;
    margin-bottom: 6px;
    color: var(--mu-accent);
    font-family: var(--mu-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mu-policy__head h1 {
    font-size: 24px;
}

.mu-policy__head p {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--mu-muted);
    font-size: 14px;
}

.mu-policy__body {
    margin-top: 22px;
}

.mu-fineprint {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--mu-border);
    color: var(--mu-faint);
    font-size: 12px;
}

/* ==========================================================================
   登录 / 注册 / 找回密码
   ========================================================================== */

/* 登录页是全站唯一一处整屏插画：场景图铺满视口，登录卡以半透明玻璃浮在右侧留白区。
   插画本身右三分之一是刻意留白的，表单压上去才读得清 */
body.mu-authbody {
    min-height: 100vh;
    /* 渐变垫在图下面，图没加载完或加载失败时页面仍是完整的浅紫底而不是白板 */
    background:
            url("auth-scene.jpg") center center / cover no-repeat,
            radial-gradient(78rem 46rem at 10% -12%, rgba(99, 102, 241, 0.16), transparent 60%),
            radial-gradient(58rem 38rem at 94% 110%, rgba(129, 140, 248, 0.14), transparent 62%),
            var(--mu-bg);
    background-attachment: fixed;
}

/* 品牌行是绝对定位的，流内只剩登录卡一个元素，所以这里用 flex 直接把它推到右侧留白区，
   不用栅格——单个子元素配两列栅格只会落进第一列 */
.mu-auth {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px 48px;
}

/* 没有标语，品牌就不该悬在半空，收到页面左上角当常规站标 */
.mu-auth__brand {
    position: absolute;
    top: 32px;
    left: 48px;
}

.mu-auth__brand .mu-brand__mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.mu-auth__brand .mu-brand__name {
    font-size: 19px;
    font-weight: 700;
}

.mu-auth__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: none;
    width: 420px;
    max-width: 100%;
}

/* 卡片压在插画上，做成半透明毛玻璃才有层次；描边用白而不是灰，
   否则灰边在彩色插画上会显脏 */
.mu-auth__card {
    padding: 28px 28px 26px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

/* 不支持 backdrop-filter 时半透明会直接透出插画细节，表单没法读，退回实白 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mu-auth__card {
        border-color: var(--mu-border);
        background: var(--mu-elevated);
    }
}

.mu-auth__card h1 {
    font-size: 21px;
}

.mu-auth__sub {
    margin: 6px 0 22px;
    color: var(--mu-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mu-field {
    margin-bottom: 16px;
}

.mu-field .form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--mu-muted);
    font-size: 12px;
    font-weight: 600;
}

.mu-captcha {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.mu-captcha .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.mu-captcha .image-code {
    flex: none;
    width: 108px;
    height: 40px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    background: #fff;
    object-fit: cover;
    cursor: pointer;
}

.mu-captcha .btn {
    flex: none;
    white-space: nowrap;
}

.mu-auth__row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 20px;
    font-size: 13px;
}

.mu-check {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--mu-muted);
    cursor: pointer;
}

.mu-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--mu-accent);
}

.mu-auth__submit {
    width: 100%;
    height: 42px;
    color: var(--mu-on-accent);
    font-weight: 600;
}

.mu-auth__passkey {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    margin-top: 10px;
    font-weight: 500;
}

/* 上面的 display: flex 会盖过 hidden 属性，不支持通行密钥的浏览器上按钮必须保持隐藏 */
.mu-auth__passkey[hidden] {
    display: none;
}

.mu-auth__passkey-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.mu-auth__passkey.is-busy {
    cursor: progress;
    opacity: 0.7;
}

/* 分隔线用两段 flex 线而不是给文字垫底色，卡片是半透明的，垫底色会露出色块 */
.mu-auth__divider {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 20px 0;
    color: var(--mu-faint);
    font-size: 12px;
    text-align: center;
}

.mu-auth__divider::before,
.mu-auth__divider::after {
    flex: 1 1 auto;
    border-top: 1px solid var(--mu-border);
    content: "";
}

.mu-auth__divider span {
    flex: none;
}

.mu-auth__switch {
    margin: 18px 0 0;
    color: var(--mu-muted);
    font-size: 13px;
    text-align: center;
}

/* 这一行在卡片外面，直接压在插画上，浅灰字会糊掉，所以加深并垫一层白 */
.mu-auth__legal {
    display: flex;
    gap: 6px 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--mu-text-2);
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 12px;
}

.mu-auth__legal a {
    color: var(--mu-text-2);
}

/* ==========================================================================
   客服弹窗
   ========================================================================== */

.mu-contact .modal-content {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg);
    color: var(--mu-text-2);
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.16);
}

.mu-contact .modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mu-border);
}

.mu-contact .btn-close {
    opacity: 0.5;
}

.mu-contact .btn-close:hover {
    opacity: 1;
}

.mu-contact .modal-title {
    font-size: 15px;
}

.mu-contact .modal-body {
    padding: 16px 18px 18px;
}

.mu-contact__row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--mu-border);
    font-size: 14px;
}

.mu-contact__row > span {
    flex: none;
    width: 68px;
    color: var(--mu-faint);
    font-size: 13px;
}

.mu-contact__row > b {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mu-text);
    font-family: var(--mu-mono);
    font-weight: 600;
    word-break: break-all;
}

.mu-contact__qr {
    display: block;
    width: 168px;
    margin: 16px auto 0;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
}

.mu-contact__tip {
    margin: 14px 0 0;
    color: var(--mu-faint);
    font-size: 12px;
}

button.mu-copy {
    flex: none;
    padding: 2px 10px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-muted);
    background: var(--mu-surface-2);
    font-size: 12px;
    cursor: pointer;
}

button.mu-copy:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

b.mu-copy {
    border-bottom: 1px dashed var(--mu-border-strong);
    cursor: pointer;
}

b.mu-copy:hover {
    color: var(--mu-accent);
}

/* ==========================================================================
   layer 弹层外壳（卡密弹窗、自选卡密由脚本调起，外壳来自 _.css）
   ========================================================================== */

/* 只改外壳配色，弹层内部是脚本注入的中性灰，会自动跟着走 */
.layui-layer {
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-lg) !important;
    color: var(--mu-text-2);
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.16) !important;
}

.layui-layer-title {
    height: 46px;
    padding: 0 60px 0 18px;
    border-bottom: 1px solid var(--mu-border) !important;
    color: var(--mu-text) !important;
    background: transparent !important;
    font-size: 15px;
    line-height: 46px;
}

.layui-layer-content {
    color: var(--mu-text-2);
}

.layui-layer-btn {
    border-top: 1px solid var(--mu-border);
}

.layui-layer-btn a {
    border: 1px solid var(--mu-border-strong) !important;
    color: var(--mu-text-2) !important;
    background: var(--mu-surface-2) !important;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: transparent !important;
    color: var(--mu-on-accent) !important;
    background: var(--mu-accent) !important;
}

.layui-layer-setwin .layui-layer-close1 {
    opacity: 0.65;
}

.layui-layer-setwin .layui-layer-close1:hover {
    opacity: 1;
}

/* ==========================================================================
   页脚
   ========================================================================== */

.mu-footer {
    margin-top: 48px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--mu-border);
    color: var(--mu-muted);
    background: #ffffff;
    font-size: 13px;
}

.mu-footer__line {
    display: flex;
    gap: 6px 18px;
    flex-wrap: wrap;
    align-items: center;
}

.mu-footer__line b {
    color: var(--mu-text-2);
    font-family: var(--mu-mono);
    font-weight: 600;
}

.mu-footer__line.is-muted {
    margin-top: 8px;
    color: var(--mu-faint);
    font-size: 12px;
}

.mu-footer a {
    color: var(--mu-muted);
}

.mu-footer a:hover {
    color: var(--mu-accent);
}

.mu-footer__btn {
    padding: 2px 10px;
    border: 1px solid var(--mu-border-strong);
    border-radius: var(--mu-radius);
    color: var(--mu-text-2);
    background: var(--mu-surface-2);
    font-size: 12px;
    cursor: pointer;
}

.mu-footer__btn:hover {
    border-color: var(--mu-accent);
    color: var(--mu-accent);
    background: var(--mu-accent-soft);
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1199.98px) {
    .mu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .mu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 16:9 的插画裁进竖屏只剩中间一小块，窄屏退回纯渐变；
       fixed 背景在移动端滚动会撕裂，一并改回 scroll */
    body.mu-authbody {
        background:
                radial-gradient(78rem 46rem at 10% -12%, rgba(99, 102, 241, 0.18), transparent 60%),
                radial-gradient(58rem 38rem at 94% 110%, rgba(129, 140, 248, 0.16), transparent 62%),
                var(--mu-bg);
        background-attachment: scroll;
    }

    /* 窄屏不再靠右，登录卡满宽居中；顶部留出品牌行的位置，它是绝对定位的不占流 */
    .mu-auth {
        justify-content: center;
        align-items: flex-start;
        max-width: 480px;
        padding: 88px 20px 32px;
    }

    .mu-auth__panel {
        width: 100%;
    }

    .mu-auth__brand {
        left: 20px;
    }

    .mu-item {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mu-buy {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .mu-shell {
        padding: 0 16px;
    }

    .mu-topbar__inner {
        gap: 12px;
    }

    /* 只收顶栏的站名，登录页左侧品牌区没有顶栏，站名要留着 */
    .mu-topbar .mu-brand__name {
        display: none;
    }

    /* 窄屏顶栏优先保住"联系客服"，语言切换与注册入口收起 */
    .mu-lang,
    .mu-register {
        display: none;
    }

    .mu-policy__head h1 {
        font-size: 19px;
    }

    /* 窄屏封面不铺满，收成缩略图，标题和价格才留得住首屏 */
    .mu-item__hero {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 14px;
    }

    .mu-item__intro h1 {
        font-size: 18px;
    }

    .mu-grid {
        gap: 12px;
    }

    .mu-card__body {
        gap: 6px;
        padding: 10px;
    }

    .mu-card__title {
        font-size: 13px;
    }

    .mu-card__price {
        font-size: 17px;
    }

    .mu-search {
        width: 100%;
    }

    .mu-auth__card {
        padding: 22px 18px 20px;
    }

    .pay-list {
        grid-template-columns: 1fr;
    }

    .order-header,
    .goods-section {
        padding: 14px;
    }

    .order-right {
        text-align: left;
    }
}