@charset "UTF-8";
/* ============================================================================
   NovaMall Design System  ·  nm-surfaces.css
   ----------------------------------------------------------------------------
   将 nm-design.css 的材质 / 组件语言落到三端真实页面上：
     B. 后台（.app 体系）
     C. 前台 PC（.shop-body / b2b-* / hv2-*）
     D. 移动端（.m-body / m-* / mh-*）
     E. 清理层（去除廉价装饰，统一视觉密度）
   原则：保留品牌色作为点缀，交互与中性面统一到设计系统，视觉权重重新分配。
   ========================================================================== */

/* ==========================================================================
   A. 通用骨架
   ========================================================================== */
.nm-container {
    width: 100%;
    max-width: var(--nm-container);
    margin-inline: auto;
    padding-inline: var(--nm-s6);
}

/* 区块标题：统一层级（大标题 / 说明 / 操作） */
.nm-sec-head {
    display: flex;
    align-items: baseline;
    gap: var(--nm-s3);
    margin-bottom: var(--nm-s5);
}
.nm-sec-title {
    font-size: var(--nm-fs-20);
    font-weight: 700;
    letter-spacing: var(--nm-track-tight);
    color: var(--nm-label);
}
.nm-sec-sub {
    font-size: var(--nm-fs-13);
    color: var(--nm-label-3);
}

/* 品牌色约束：默认统一系统蓝，商户显式启用品牌色时再走 --primary */
.shop-body, .m-body { --nm-tint: var(--nm-blue); }
/* 品牌自定义色不再劫持主色（保持全站统一红色主题） */

/* ==========================================================================
   B. 后台  .app
   ========================================================================== */

/* ---- B.1 布局骨架：侧栏独立玻璃面，主区浮起 ---- */
.app {
    background: var(--nm-bg);
    color: var(--nm-label);
    font-family: var(--nm-font);
}
.app .sidebar {
    background: var(--nm-mat-light);
    -webkit-backdrop-filter: var(--nm-blur);
    backdrop-filter: var(--nm-blur);
    border-right: 0.5px solid var(--nm-sep) !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.app .sidebar .brand {
    padding: 13px 14px !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
    gap: 10px !important;
}
.app .sidebar .brand img {
    width: 34px !important; height: 34px !important;
    border-radius: 9px !important;
    box-shadow: var(--nm-shadow-1);
}
.app .sidebar .brand-text b {
    font-size: var(--nm-fs-15) !important;
    font-weight: 680 !important;
    letter-spacing: var(--nm-track-tight);
    color: var(--nm-label) !important;
}
.app .sidebar .brand-text span {
    font-size: var(--nm-fs-11) !important;
    color: var(--nm-label-3) !important;
    letter-spacing: 0;
}

/* 菜单：紧凑密度（对标企业后台 32px 行高） */
.app .menu { padding: 6px 0 12px !important; }
.app .menu-group {
    padding: 9px 16px 3px !important;
    font-size: var(--nm-fs-11) !important;
    font-weight: 640 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: var(--nm-label-3) !important;
}
.app .menu-item {
    margin: 1px 8px !important;
    padding: 6px 11px !important;
    border-radius: var(--nm-r-sm) !important;
    font-size: var(--nm-fs-13) !important;
    font-weight: 520 !important;
    color: var(--nm-label-2) !important;
    gap: 8px !important;
    line-height: 1.35 !important;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out),
                color var(--nm-dur-2) var(--nm-ease-out);
}
.app .menu-item:hover {
    background: var(--nm-fill) !important;
    color: var(--nm-label) !important;
}
.app .menu-item.active {
    background: var(--nm-tint-soft) !important;
    color: var(--nm-tint) !important;
    font-weight: 620 !important;
    box-shadow: inset 2.5px 0 0 var(--nm-tint);
}
.app .menu-item.active::after { display: none !important; }
.app .menu-item .icon, .app .menu-item svg {
    width: 17px !important; height: 17px !important;
    stroke-width: 1.75;
    opacity: 0.9;
    flex: none;
}
.app .menu-item.active .icon { opacity: 1; }
.app .menu-item .badge {
    margin-left: auto;
    height: 18px !important;
    min-width: 18px;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    border-radius: 99px !important;
    background: var(--nm-red) !important;
    color: #fff !important;
    border: none !important;
    display: inline-grid;
    place-items: center;
}
.app .submenu {
    margin: 1px 8px 3px 27px !important;
    border-left: 1px solid var(--nm-sep) !important;
    padding-left: 9px !important;
}
.app .submenu a {
    font-size: 12.5px !important;
    padding: 4.5px 8px !important;
    border-radius: 7px;
    color: var(--nm-label-2);
    line-height: 1.35 !important;
}
.app .submenu a:hover { background: var(--nm-fill); color: var(--nm-label); }
.app .submenu a.active { color: var(--nm-tint) !important; font-weight: 600; }

.app .sidebar-footer {
    border-top: 0.5px solid var(--nm-sep) !important;
    padding: 9px 12px !important;
    background: transparent !important;
}
.app .tenant-tag {
    font-size: var(--nm-fs-11) !important;
    padding: 5px 9px !important;
    border-radius: 99px !important;
    background: var(--nm-fill) !important;
    color: var(--nm-label-2) !important;
    border: 0.5px solid var(--nm-sep);
}

/* ---- B.2 顶栏：悬浮玻璃，去掉厚重阴影 ---- */
.app .topbar {
    height: 58px !important;
    padding: 0 20px !important;
    background: var(--nm-mat-light) !important;
    -webkit-backdrop-filter: var(--nm-blur);
    backdrop-filter: var(--nm-blur);
    border-bottom: 0.5px solid var(--nm-sep) !important;
    box-shadow: none !important;
    position: sticky;
    top: 0;
    z-index: 3000;
}
.app .crumb-title {
    font-size: var(--nm-fs-15) !important;
    font-weight: 640 !important;
    letter-spacing: var(--nm-track-normal);
}
.app .icon-btn {
    width: 34px !important; height: 34px !important;
    border-radius: 9px !important;
    display: inline-grid !important;
    place-items: center;
    background: transparent !important;
    border: none !important;
    color: var(--nm-label-2) !important;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out);
}
.app .icon-btn:hover { background: var(--nm-fill) !important; color: var(--nm-label) !important; }

.app .env-badge {
    height: 22px !important;
    padding: 0 9px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    letter-spacing: 0.01em;
}
.app .env-platform { background: var(--nm-tint-soft) !important; color: var(--nm-tint) !important; }

.app .lang-trigger, .app .user-trigger {
    height: 34px !important;
    padding: 0 11px !important;
    border-radius: 99px !important;
    border: 0.5px solid var(--nm-sep) !important;
    background: var(--nm-bg-2) !important;
    font-size: var(--nm-fs-13) !important;
    color: var(--nm-label) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    transition: border-color var(--nm-dur-2) var(--nm-ease-out),
                box-shadow var(--nm-dur-2) var(--nm-ease-out);
}
.app .lang-trigger:hover, .app .user-trigger:hover {
    border-color: var(--nm-sep-opaque) !important;
    box-shadow: var(--nm-shadow-1);
}
.app .avatar {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    border: none !important;
}
.app .lang-dropdown, .app .user-dropdown {
    border-radius: var(--nm-r-lg) !important;
    border: 0.5px solid var(--nm-sep) !important;
    background: var(--nm-mat-light-strong) !important;
    -webkit-backdrop-filter: var(--nm-blur-lg);
    backdrop-filter: var(--nm-blur-lg);
    box-shadow: var(--nm-shadow-3) !important;
    padding: 6px !important;
    overflow: hidden;
}
.app .dropdown-head {
    padding: 10px 12px !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
}
.app .dropdown-item {
    padding: 8px 12px !important;
    border-radius: var(--nm-r-sm) !important;
    font-size: var(--nm-fs-13) !important;
    color: var(--nm-label) !important;
    transition: background-color var(--nm-dur-1) var(--nm-ease-out);
}
.app .dropdown-item:hover { background: var(--nm-fill) !important; }

/* ---- B.3 内容区与页面头 ---- */
.app .main-area { background: transparent !important; }
.app .content, .app .main-content, .app .page-wrap {
    padding: 22px 24px 40px !important;
    background: transparent !important;
}
.app .page-head { margin-bottom: 18px !important; }
.app .page-head h1, .app .page-head h2, .app .page-head .title {
    font-size: var(--nm-fs-24) !important;
    font-weight: 720 !important;
    letter-spacing: -0.025em !important;
    color: var(--nm-label) !important;
}
.app .page-head p, .app .page-head .sub {
    font-size: var(--nm-fs-13) !important;
    color: var(--nm-label-3) !important;
    margin-top: 5px !important;
}

/* ---- B.4 卡片 ---- */
.app .card {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    border-radius: var(--nm-r-lg) !important;
    box-shadow: var(--nm-shadow-1) !important;
    overflow: hidden;
}
.app .card-title, .app .panel-title, .app .card > h3 {
    font-size: var(--nm-fs-15) !important;
    font-weight: 650 !important;
    letter-spacing: var(--nm-track-normal) !important;
    color: var(--nm-label) !important;
}
.app .card-head, .app .card-header {
    padding: 15px 20px !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
    background: transparent !important;
}

/* 过滤条：贴合卡片化表单 */
.app .filter-bar { padding: 16px 20px !important; }
.app .filter-item label {
    display: block;
    font-size: var(--nm-fs-12) !important;
    font-weight: 560 !important;
    color: var(--nm-label-2) !important;
    margin-bottom: 6px !important;
    letter-spacing: 0;
}

/* ---- B.5 表单控件 ---- */
.app .form-control, .app .form-select, .app textarea.form-control,
.app input[type="text"], .app input[type="number"], .app input[type="password"],
.app input[type="email"], .app input[type="date"], .app select, .app textarea {
    height: 38px !important;
    min-height: 38px;
    padding: 8px 12px !important;
    font-family: var(--nm-font) !important;
    font-size: var(--nm-fs-13) !important;
    color: var(--nm-label) !important;
    background-color: var(--nm-bg-2) !important;
    border: 1px solid var(--nm-sep-opaque) !important;
    border-radius: var(--nm-r-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--nm-dur-2) var(--nm-ease-out),
                box-shadow var(--nm-dur-2) var(--nm-ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.app textarea.form-control, .app textarea { height: auto !important; min-height: 88px; }
.app .form-control:focus, .app select:focus, .app textarea:focus {
    outline: none !important;
    border-color: var(--nm-tint) !important;
    box-shadow: var(--nm-ring) !important;
}
.app select {
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    cursor: pointer;
}
.app input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important; height: 18px !important;
    border: 1.5px solid var(--nm-sep-opaque) !important;
    border-radius: 5px !important;
    background: var(--nm-bg-2) !important;
    position: relative;
    cursor: pointer;
    vertical-align: -3px;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out),
                border-color var(--nm-dur-2) var(--nm-ease-out);
}
.app input[type="checkbox"]:checked {
    background: var(--nm-tint) !important;
    border-color: var(--nm-tint) !important;
}
.app input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute;
    left: 5px; top: 1.5px;
    width: 4.5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
    border-radius: 1px;
}
.app input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important; height: 18px !important;
    border: 1.5px solid var(--nm-sep-opaque) !important;
    border-radius: 50% !important;
    background: var(--nm-bg-2) !important;
    position: relative;
}
.app input[type="radio"]:checked { border-color: var(--nm-tint) !important; }
.app input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute; inset: 3.5px;
    border-radius: 50%;
    background: var(--nm-tint) !important;
}

/* ---- B.6 按钮 ---- */
.app .btn {
    height: 36px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--nm-font) !important;
    font-size: var(--nm-fs-13) !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    border-radius: var(--nm-r-pill) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out),
                color var(--nm-dur-2) var(--nm-ease-out),
                transform var(--nm-dur-1) var(--nm-ease-out),
                box-shadow var(--nm-dur-2) var(--nm-ease-out),
                border-color var(--nm-dur-2) var(--nm-ease-out);
    background: var(--nm-fill) !important;
    color: var(--nm-label) !important;
}
.app .btn:hover { background: var(--nm-fill-2) !important; }
.app .btn:active { transform: scale(0.972); }
.app .btn-primary, .app .btn.btn-primary {
    background: var(--nm-tint) !important;
    color: #fff !important;
    box-shadow: var(--nm-shadow-tint) !important;
}
.app .btn-primary:hover { background: var(--nm-tint-strong) !important; }
.app .btn-default, .app .btn.btn-default {
    background: var(--nm-bg-2) !important;
    border-color: var(--nm-sep-opaque) !important;
    color: var(--nm-label) !important;
}
.app .btn-default:hover { border-color: var(--nm-tint) !important; color: var(--nm-tint) !important; }
.app .btn-danger, .app .btn.btn-danger {
    background: var(--nm-red) !important;
    color: #fff !important;
}
.app .btn-success { background: var(--nm-green) !important; color: #fff !important; }
.app .btn-warning { background: var(--nm-orange) !important; color: #fff !important; }
.app .btn-sm, .app .btn.btn-sm { height: 28px !important; padding: 0 12px !important; font-size: 12px !important; }
.app .btn-xs { height: 24px !important; padding: 0 10px !important; font-size: 11.5px !important; }
.app .btn-link {
    background: transparent !important;
    color: var(--nm-tint) !important;
    padding: 0 4px !important;
    height: auto !important;
}
.app .row-btn {
    height: 27px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    background: var(--nm-fill) !important;
    color: var(--nm-label-2) !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out),
                color var(--nm-dur-2) var(--nm-ease-out);
}
.app .row-btn:hover { background: var(--nm-tint-soft) !important; color: var(--nm-tint) !important; }
.app .row-btn.danger:hover { background: color-mix(in srgb, var(--nm-red) 12%, transparent) !important; color: var(--nm-red) !important; }

/* ---- B.7 表格：去斑马纹，改为行悬浮 ---- */
.app table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: var(--nm-fs-13);
}
.app table thead th {
    padding: 10px 14px !important;
    font-size: var(--nm-fs-12) !important;
    font-weight: 600 !important;
    color: var(--nm-label-3) !important;
    background: var(--nm-bg-3) !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
    text-align: left;
    white-space: nowrap;
}
.app table tbody td {
    padding: 12px 14px !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
    color: var(--nm-label) !important;
    vertical-align: middle;
}
.app table tbody tr:nth-child(even) td { background: transparent !important; }
.app table tbody tr:hover td { background: var(--nm-tint-softer) !important; }
.app table tbody tr:last-child td { border-bottom: none !important; }
.app .cell-title {
    font-weight: 560 !important;
    color: var(--nm-label) !important;
    font-size: var(--nm-fs-13) !important;
}
.app .cell-sub { font-size: var(--nm-fs-12) !important; color: var(--nm-label-3) !important; }
.app .cell-thumb, .app .cell-thumb img {
    border-radius: 8px !important;
    box-shadow: 0 0 0 0.5px var(--nm-sep);
    object-fit: cover;
}

/* ---- B.8 徽章 ---- */
.app .badge {
    display: inline-flex !important;
    align-items: center;
    height: 21px !important;
    padding: 0 8px !important;
    border-radius: 99px !important;
    font-size: 11.5px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    border: none !important;
    background: var(--nm-fill) !important;
    color: var(--nm-label-2) !important;
    box-shadow: none !important;
}
.app .badge::before { display: none !important; }
.app .badge-success { background: color-mix(in srgb, var(--nm-green) 15%, transparent) !important; color: #1f8f42 !important; }
.app .badge-warning { background: color-mix(in srgb, var(--nm-orange) 16%, transparent) !important; color: #b26a00 !important; }
.app .badge-danger  { background: color-mix(in srgb, var(--nm-red) 13%, transparent) !important; color: var(--nm-red) !important; }
.app .badge-info    { background: var(--nm-tint-soft) !important; color: var(--nm-tint) !important; }
.app .badge-gray    { background: var(--nm-fill) !important; color: var(--nm-label-2) !important; }
.app .badge.warn    { background: var(--nm-red) !important; color: #fff !important; }

/* ---- B.9 分页 ---- */
.app .pagination, .app .pager {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 20px;
    flex-wrap: wrap;
}
.app .pagination a, .app .pagination span, .app .page {
    min-width: 32px;
    height: 32px;
    padding: 0 10px !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 9px !important;
    font-size: var(--nm-fs-13) !important;
    font-weight: 550;
    color: var(--nm-label-2) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out);
}
.app .pagination a:hover { background: var(--nm-fill) !important; color: var(--nm-label) !important; }
.app .pagination .current, .app .page.current, .app .pagination .active {
    background: var(--nm-tint) !important;
    color: #fff !important;
    font-weight: 620;
}

/* ---- B.10 工作台 kpi（覆盖视图内联样式）---- */
.app .dash-kpi {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    border-radius: var(--nm-r-lg) !important;
    box-shadow: var(--nm-shadow-1) !important;
    padding: 18px 20px !important;
}
.app .dash-kpi::before, .app .dash-kpi::after { display: none !important; }
.app .dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--nm-shadow-2) !important;
}
.app .dash-kpi-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--c, var(--nm-blue)) 12%, transparent) !important;
    color: var(--c, var(--nm-blue)) !important;
    box-shadow: none !important;
}
.app .dash-kpi-icon svg, .app .dash-kpi-icon .icon {
    width: 20px !important; height: 20px !important;
    stroke-width: 1.75;
}
.app .dash-kpi-val {
    font-family: var(--nm-font) !important;
    font-size: 25px !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    color: var(--nm-label) !important;
}
.app .dash-kpi-lbl { font-size: 12.5px !important; font-weight: 560 !important; color: var(--nm-label-3) !important; }
.app .dash-card {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    border-radius: var(--nm-r-lg) !important;
    box-shadow: var(--nm-shadow-1) !important;
}
.app .dash-range {
    height: 29px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    border: 0.5px solid var(--nm-sep) !important;
    background: var(--nm-bg-2) !important;
    color: var(--nm-label-2) !important;
}
.app .dash-range.on {
    background: var(--nm-tint) !important;
    color: #fff !important;
    border-color: var(--nm-tint) !important;
}
.app .dash-table thead th {
    background: var(--nm-bg-3) !important;
    font-weight: 600 !important;
    color: var(--nm-label-3) !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
}
.app .dash-table tbody td { border-bottom: 0.5px solid var(--nm-sep) !important; }

/* ---- B.11 弹窗 / 提示（后台原生）---- */
.app .modal-mask, .app .modal-backdrop {
    background: color-mix(in srgb, #000 32%, transparent) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.app .modal, .app .modal-box, .app .dialog {
    border-radius: var(--nm-r-xl) !important;
    border: 0.5px solid var(--nm-sep) !important;
    box-shadow: var(--nm-shadow-4) !important;
    background: var(--nm-bg-2) !important;
    overflow: hidden;
}
.app .alert, .app .flash {
    border-radius: var(--nm-r-md) !important;
    border: 0.5px solid var(--nm-sep) !important;
    font-size: var(--nm-fs-13) !important;
}

/* ==========================================================================
   C. 前台 PC  .shop-body
   ========================================================================== */

/* ---- C.1 头部：三层收敛为一层玻璃，去掉生硬分隔 ---- */
.shop-body .b2b-header {
    position: sticky;
    top: 0;
    z-index: var(--nm-z-header);
    background: var(--nm-mat-light) !important;
    -webkit-backdrop-filter: var(--nm-blur);
    backdrop-filter: var(--nm-blur);
    border-bottom: 0.5px solid var(--nm-sep) !important;
    box-shadow: none !important;
}
.shop-body .b2b-topbar {
    background: transparent !important;
    border-bottom: 0.5px solid var(--nm-sep) !important;
    height: 34px !important;
    font-size: 12px !important;
    color: var(--nm-label-3) !important;
}
.shop-body .b2b-topbar a { color: var(--nm-label-3) !important; }
.shop-body .b2b-topbar a:hover { color: var(--nm-tint) !important; }
.shop-body .b2b-mainbar {
    background: transparent !important;
    border-bottom: none !important;
    height: auto !important;
    padding: 12px 0 !important;
}
.shop-body .b2b-mainbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}
.shop-body .b2b-logo-text, .shop-body .logo-text {
    font-size: 19px !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    color: var(--nm-label) !important;
    white-space: nowrap;
}
/* 搜索框：回归原站几何（48px 高、2px 深色描边、按钮整块贴合右端），仅按钮用品牌红 */
.shop-body .b2b-searchbox {
    flex: 1 1 auto;
    min-width: 220px;
    height: 48px !important;
    display: flex;
    align-items: center;
    border-radius: 8px !important;
    border: 2px solid #1f2533 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px -6px rgba(15, 23, 42, 0.18) !important;
    transition: box-shadow var(--nm-dur-3) var(--nm-ease-out);
}
.shop-body .b2b-searchbox:focus-within {
    border-color: var(--nm-tint) !important;
    box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--nm-tint) 40%, transparent) !important;
}
.shop-body .b2b-search-form, .shop-body .b2b-searchbox input {
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: var(--nm-fs-13) !important;
    padding-left: 18px !important;
    color: var(--nm-label) !important;
    box-shadow: none !important;
}
.shop-body .b2b-search-btn {
    width: 64px !important;
    height: 100% !important;
    flex: none;
    margin: 0 !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 84%, white), var(--nm-tint)) !important;
    color: #fff !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: grid !important;
    place-items: center;
    transition: filter var(--nm-dur-2) var(--nm-ease-out);
}
.shop-body .b2b-search-btn:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 78%, black)) !important; }

.shop-body .b2b-actions {
    display: flex;
    align-items: center;
    gap: 8px !important;
    flex-wrap: nowrap;
    flex: none;
}
.shop-body .b2b-action-btn, .shop-body .b2b-actions > a {
    height: 34px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--nm-r-pill) !important;
    font-size: 13px !important;
    font-weight: 570 !important;
    white-space: nowrap !important;
    flex: none !important;
    text-orientation: mixed !important;
    writing-mode: horizontal-tb !important;
    border: 0.5px solid var(--nm-sep) !important;
    background: var(--nm-bg-2) !important;
    color: var(--nm-label) !important;
    box-shadow: none !important;
    transition: all var(--nm-dur-2) var(--nm-ease-out);
}
.shop-body .b2b-action-btn:hover, .shop-body .b2b-actions > a:hover {
    border-color: var(--nm-tint) !important;
    color: var(--nm-tint) !important;
    background: var(--nm-tint-softer) !important;
}
.shop-body .b2b-action-btn--primary, .shop-body .b2b-actions > a.is-primary {
    background: var(--nm-tint) !important;
    color: #fff !important;
    border-color: var(--nm-tint) !important;
    box-shadow: var(--nm-shadow-tint) !important;
}
.shop-body .b2b-lang-wrap > a, .shop-body .lang-trigger {
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 99px !important;
    border: 0.5px solid var(--nm-sep) !important;
    background: transparent !important;
    color: var(--nm-label-2) !important;
    font-size: 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.shop-body .b2b-cart-badge {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 10.5px !important;
    font-weight: 650;
    border-radius: 99px !important;
    background: var(--nm-red) !important;
    color: #fff !important;
    display: inline-grid;
    place-items: center;
    padding: 0 4px;
}
/* 类目按钮：原站分段式（通栏高度、右侧分隔线、深色文字） */
.shop-body .b2b-cat-btn {
    height: 100% !important;
    padding: 0 16px !important;
    border-radius: 6px 0 0 6px !important;
    color: #1f2533 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border-right: 1px solid #e5e7eb !important;
    gap: 6px !important;
}
/* 导航行：完全回归原站（12.5px、竖线分隔、无胶囊底） */
.shop-body .b2b-nav-row { background: #fff !important; border-bottom: 1px solid #f1f5f9 !important; }
.shop-body .b2b-nav-link {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 32px !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: color .15s !important;
    white-space: nowrap !important;
}
.shop-body .b2b-nav-link:hover { background: transparent !important; color: var(--nm-tint) !important; }
.shop-body .b2b-nav-link.active, .shop-body .b2b-nav-link.on {
    color: #0f172a !important;
    background: transparent !important;
    font-weight: 700 !important;
}
.shop-body .b2b-nav-inner > .b2b-nav-link + .b2b-nav-link::before {
    content: '|' !important;
    color: #e2e8f0 !important;
    margin: 0 14px !important;
    font-weight: 400 !important;
}

/* ---- C.2 首页区块（hv2-*）---- */
.shop-body .hv2-section { margin: 0 0 40px !important; }
.shop-body .hv2-section-title {
    font-size: var(--nm-fs-24) !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    color: var(--nm-label) !important;
}
.shop-body .hv2-section-sub { font-size: var(--nm-fs-13) !important; color: var(--nm-label-3) !important; }
.shop-body .hv2-section-more {
    font-size: var(--nm-fs-13) !important;
    font-weight: 560 !important;
    color: var(--nm-tint) !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: gap var(--nm-dur-2) var(--nm-ease-out);
}
.shop-body .hv2-section-more:hover { gap: 7px; }

/* 商品卡 */
.shop-body .hv2-product {
    border-radius: var(--nm-r-lg) !important;
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    box-shadow: var(--nm-shadow-1) !important;
    overflow: hidden;
    transition: transform var(--nm-dur-3) var(--nm-ease-out),
                box-shadow var(--nm-dur-3) var(--nm-ease-out),
                border-color var(--nm-dur-3) var(--nm-ease-out);
}
.shop-body .hv2-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--nm-shadow-3) !important;
    border-color: color-mix(in srgb, var(--nm-tint) 20%, var(--nm-sep)) !important;
}
.shop-body .hv2-product-img, .shop-body .hv2-product-imgwrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--nm-fill);
}
.shop-body .hv2-product-img img { transition: transform 600ms var(--nm-ease-out); }
.shop-body .hv2-product:hover .hv2-product-img img { transform: scale(1.045); }
.shop-body .hv2-product-name {
    font-size: var(--nm-fs-13) !important;
    font-weight: 520 !important;
    line-height: 1.45 !important;
    color: var(--nm-label) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-body .hv2-product-price {
    font-size: var(--nm-fs-17) !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    color: var(--nm-label) !important;
    font-variant-numeric: tabular-nums;
}
.shop-body .hv2-product-sales { font-size: 11.5px !important; color: var(--nm-label-3) !important; }
.shop-body .hv2-product-shop { font-size: 11.5px !important; color: var(--nm-label-3) !important; }

/* 分类侧栏 */
.shop-body .b2b-cat-side, .shop-body .b2b-cat-group, .shop-body .b2b-cat-sub-panel {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    border-radius: var(--nm-r-lg) !important;
    box-shadow: var(--nm-shadow-1) !important;
}
.shop-body .b2b-cat-item, .shop-body .b2b-cat-l1, .shop-body .b2b-cat-l2 {
    border-radius: var(--nm-r-sm) !important;
    transition: background-color var(--nm-dur-1) var(--nm-ease-out);
}
.shop-body .b2b-cat-item:hover, .shop-body .b2b-cat-l1:hover, .shop-body .b2b-cat-l2:hover {
    background: var(--nm-tint-softer) !important;
}

/* 榜单 / 媒体卡 */
.shop-body .hv2-rank-card, .shop-body .hv2-media-card {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    border-radius: var(--nm-r-lg) !important;
    box-shadow: var(--nm-shadow-1) !important;
    overflow: hidden;
    transition: transform var(--nm-dur-3) var(--nm-ease-out),
                box-shadow var(--nm-dur-3) var(--nm-ease-out);
}
.shop-body .hv2-rank-card:hover, .shop-body .hv2-media-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nm-shadow-3) !important;
}
.shop-body .hv2-rank-num {
    width: 22px !important; height: 22px !important;
    display: inline-grid;
    place-items: center;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    background: var(--nm-fill) !important;
    color: var(--nm-label-2) !important;
}

/* 前台通用按钮 */
.shop-body .btn, .shop-body button.btn {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--nm-r-pill) !important;
    font-family: var(--nm-font);
    font-size: var(--nm-fs-13);
    font-weight: 600;
    border: 1px solid transparent;
    transition: all var(--nm-dur-2) var(--nm-ease-out);
}
.shop-body .btn-primary {
    background: var(--nm-tint) !important;
    color: #fff !important;
    border-color: var(--nm-tint) !important;
    box-shadow: var(--nm-shadow-tint);
}
.shop-body .btn-primary:hover { filter: brightness(1.06); }

/* ==========================================================================
   D. 移动端  .m-body
   ========================================================================== */

.m-body { background: var(--nm-bg) !important; }

/* ---- D.1 头部：玻璃 + 居中标题 ---- */
.m-body .m-header {
    background: var(--nm-mat-light) !important;
    -webkit-backdrop-filter: var(--nm-blur);
    backdrop-filter: var(--nm-blur);
    border-bottom: 0.5px solid var(--nm-sep) !important;
    box-shadow: none !important;
    height: 52px !important;
    padding: 0 14px !important;
}
.m-body .m-logo img { border-radius: 9px !important; }
.m-body .m-logo-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--nm-label) !important;
}
.m-body .m-header-btn {
    width: 34px !important; height: 34px !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 10px !important;
    color: var(--nm-label) !important;
    background: transparent !important;
    transition: background-color var(--nm-dur-2) var(--nm-ease-out);
}
.m-body .m-header-btn:active { background: var(--nm-fill) !important; }

/* ---- D.2 搜索条：材质接管（JS 清除内联白底后生效）---- */
.m-body .m-search-sticky-wrap {
    background: transparent !important;
}
.m-body .m-search-sticky-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--nm-mat-light);
    -webkit-backdrop-filter: var(--nm-blur);
    backdrop-filter: var(--nm-blur);
    border-bottom: 0.5px solid var(--nm-sep);
    opacity: 0;
    transition: opacity var(--nm-dur-3) var(--nm-ease-out);
}
.m-body .m-search-sticky-wrap.is-stuck::after { opacity: 1; }
.m-body .m-search-bar, .m-body .m-search-sticky-wrap a > div,
.m-body .m-search-sticky-wrap input {
    border-radius: 99px !important;
}
.m-body .m-search-sticky-wrap a > div {
    background: var(--nm-fill) !important;
    border: 0.5px solid var(--nm-sep) !important;
    height: 36px !important;
    box-shadow: none !important;
}

/* ---- D.3 金刚区：统一图标容器，去掉花哨底色 ---- */
.m-body .m-quick-nav { padding: 14px 12px !important; }
.m-body .m-qn-item { gap: 7px !important; }
.m-body .m-qn-ico {
    width: var(--qn-size, 50px) !important;
    height: var(--qn-size, 50px) !important;
    border-radius: var(--qn-radius, 16px) !important;
    overflow: hidden;
    background: var(--nm-bg-2) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), inset 0 0 0 0.5px var(--nm-sep) !important;
    display: grid;
    place-items: center;
    transition: transform var(--nm-dur-2) var(--nm-ease-out);
}
.m-body .m-qn-item:active .m-qn-ico { transform: scale(0.94); }
.m-body .m-qn-ico img { width: 62% !important; height: 62% !important; object-fit: contain !important; }
.m-body .m-qn-txt {
    font-size: 11.5px !important;
    font-weight: 530 !important;
    color: var(--nm-label-2) !important;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ---- D.4 区块：标题层级 + 卡片化 ---- */
.m-body .mh-sec { padding: 0 12px !important; margin-bottom: 22px !important; }
.m-body .mh-head { margin-bottom: 11px !important; align-items: center; }
.m-body .mh-head-bar {
    width: 3px !important;
    height: 15px !important;
    border-radius: 99px !important;
    background: var(--nm-tint) !important;
    margin-right: 7px !important;
}
.m-body .mh-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--nm-label) !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.m-body .mh-title .icon, .m-body .mh-title svg {
    width: 15px !important; height: 15px !important;
    color: var(--nm-tint) !important;
    stroke-width: 1.9;
}
.m-body .mh-more {
    font-size: 12px !important;
    font-weight: 540 !important;
    color: var(--nm-label-3) !important;
    background: var(--nm-fill) !important;
    height: 25px;
    padding: 0 11px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
}
.m-body .mh-more:active { background: var(--nm-fill-2) !important; }

/* 商品卡 */
.m-body .m-product {
    border-radius: var(--nm-r-md) !important;
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    overflow: hidden;
    transition: transform var(--nm-dur-2) var(--nm-ease-out);
}
.m-body .m-product:active { transform: scale(0.982); }
.m-body .m-product-img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--nm-fill); }
.m-body .m-product-name {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    color: var(--nm-label) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.m-body .m-product-price {
    font-size: 15px !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    color: var(--nm-label) !important;
    font-variant-numeric: tabular-nums;
}
.m-body .m-product-sales { font-size: 10.5px !important; color: var(--nm-label-3) !important; }
.m-body .m-product-shop { font-size: 10.5px !important; color: var(--nm-label-3) !important; }

/* ---- D.5 底部 Tabbar：真毛玻璃 + 安全区 ---- */
.m-body .m-tabbar {
    background: var(--nm-mat-light-strong) !important;
    -webkit-backdrop-filter: var(--nm-blur-lg);
    backdrop-filter: var(--nm-blur-lg);
    border-top: 0.5px solid var(--nm-sep) !important;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset, 0 -8px 24px -12px rgba(16, 24, 40, 0.14) !important;
    padding-bottom: var(--nm-safe-b) !important;
    height: auto !important;
}
.m-body .m-tab {
    color: var(--nm-label-3) !important;
    font-size: 10px !important;
    font-weight: 540 !important;
    gap: 3px !important;
    transition: color var(--nm-dur-2) var(--nm-ease-out);
}
.m-body .m-tab svg, .m-body .m-tab .icon {
    width: 22px !important; height: 22px !important;
    stroke-width: 1.7 !important;
    transition: transform var(--nm-dur-2) var(--nm-ease-spring);
}
.m-body .m-tab.active { color: var(--nm-tint) !important; font-weight: 620 !important; }
.m-body .m-tab.active svg { transform: translateY(-1px) scale(1.06); }
.m-body .m-tab:active svg { transform: scale(0.9); }

/* ---- D.6 移动端通用按钮/表单 ---- */
.m-body .m-btn, .m-body button.m-btn {
    height: 40px;
    border-radius: var(--nm-r-pill) !important;
    font-size: 14px;
    font-weight: 600;
}
.m-body input, .m-body select, .m-body textarea {
    border-radius: var(--nm-r-md) !important;
    font-family: var(--nm-font) !important;
    border-color: var(--nm-sep-opaque) !important;
}
.m-body input:focus, .m-body textarea:focus {
    border-color: var(--nm-tint) !important;
    box-shadow: var(--nm-ring) !important;
    outline: none !important;
}

/* ---- D.7 主内容底部留白（v222：body 已预留 tabbar 高度，这里只留收尾间距，避免双倍空白）---- */
.m-body .m-main {
    padding-bottom: 12px !important;
    background: transparent !important;
}
.m-body .m-main > :last-child {
    margin-bottom: 4px !important;
}

/* ---- D.8 营销色块收敛 ---- */
.m-body .m-lottery-section, .m-body .m-pts-cta, .m-body .m-redeem,
.m-body .m-ad-grid, .m-body .m-services, .m-body .m-hero-carousel {
    border-radius: var(--nm-r-lg) !important;
    overflow: hidden;
}

/* ==========================================================================
   E. 清理层 —— 去廉价装饰
   ========================================================================== */
/* 移除大面积渐变按钮/卡片上的装饰圆弧与描边光斑 */
.stat-card::after, .kpi-card::after, .dash-kpi::after,
.overview-card::after, .metric-card::after { display: none !important; }

/* 标题前的装饰竖条统一为细胶囊 */
h1::before, h2::before, h3::before { border-radius: 99px; }

/* 过粗边框统一为 hairline */
.app [style*="border:1px solid #e5e7eb"], .app [style*="border: 1px solid #e5e7eb"] {
    border-color: var(--nm-sep) !important;
}

/* 图片默认圆角继承，避免方形硬边 */
.app .card img:not(.avatar):not(.cell-thumb) { border-radius: 8px; }

/* 空链接/占位破图 */
img[src=""], img:not([src]) { visibility: hidden; }

/* ==========================================================================
   F. 旧主题变量桥接 + 遗留缺陷修复
   ========================================================================== */

/* ---- F.1 变量桥接：旧 CSS 的 indigo/渐变变量全部映射到新系统色 ---- */
:root,
[data-nm-theme="dark"] {
    --primary: var(--nm-tint);
    --primary-dark: var(--nm-tint-strong);
    --primary-light: var(--nm-tint-soft);
    --gradient: linear-gradient(135deg, var(--nm-tint) 0%, var(--nm-tint-strong) 100%);
    --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 10%, transparent), color-mix(in srgb, var(--nm-tint-strong) 10%, transparent));
    --nm-grad-primary: var(--gradient);
    --nm-grad-gold: linear-gradient(135deg, #f6b73c, #e8930c);
    --nm-grad-mint: linear-gradient(135deg, #34c759, #00c7be);
    --nm-grad-fire: linear-gradient(135deg, #ff3b30, #ff2d55);
}

/* ---- F.2 全局主按钮统一（含 auth 独立页，无 .app 前缀场景）---- */
.btn-primary {
    background: var(--nm-tint) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--nm-tint) !important;
    box-shadow: var(--nm-shadow-tint) !important;
}
.btn-primary:hover {
    background: var(--nm-tint-strong) !important;
    background-image: none !important;
}
.btn-block { width: 100%; }

/* 登录页卡片与氛围 */
.auth-card {
    border-radius: var(--nm-r-xl) !important;
    border: 0.5px solid var(--nm-sep) !important;
    box-shadow: var(--nm-shadow-3) !important;
}
.auth-panel .form-control {
    height: 44px !important;
    border-radius: var(--nm-r-md) !important;
    font-size: var(--nm-fs-15) !important;
}

/* ---- F.3 后台侧栏遗留装饰清理 ---- */
.app .sidebar::before, .app .sidebar::after,
.app .sidebar .brand::before, .app .sidebar .brand::after { display: none !important; }
.app .brand-mark {
    background: var(--nm-tint) !important;
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--nm-tint) 45%, transparent) !important;
}
.app .tenant-tag {
    background: var(--nm-fill) !important;
    border-color: var(--nm-sep) !important;
    color: var(--nm-label-2) !important;
}

/* ---- F.4 移动端 header 文字竖排修复（iOS Safari 兼容）---- */
.m-body .m-header-btn,
.m-body .m-header-right a,
.m-body .m-header .m-logo-text {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    letter-spacing: normal !important;
}
/* header 右侧文字按钮改为胶囊（登录/消息类） */
.m-body .m-header-btn:not(:has(svg)):not(:has(img)) {
    height: 30px !important;
    padding: 0 13px !important;
    border-radius: 99px !important;
    background: var(--nm-tint) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ---- F.5 移动端搜索条/相机按钮色统一 ---- */
.m-body #m-cam-trigger {
    background: var(--nm-tint-soft) !important;
    border-radius: 50% !important;
}
.m-body #m-cam-trigger svg { stroke: var(--nm-tint) !important; }

/* ---- F.6 商品图懒加载占位 ---- */
.m-body .m-product-img img, .shop-body .hv2-product-img img {
    background: var(--nm-fill);
}

/* ---- F.7 后台图标按钮统一（顶栏右侧圆形按钮组）---- */
.app .topbar .icon-btn.round, .app .topbar [class*="icon-btn"] {
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
}

/* ==========================================================================
   G. 渐变质感层 —— 卡片/按钮/高亮的精致渐变语言
      原则：渐变必须"看不见但感觉得到"——极低饱和、单一色相、对角 165°
   ========================================================================== */

/* ---- G.1 变量 ---- */
:root, [data-nm-theme="dark"] {
    --nm-grad-card: linear-gradient(165deg, #ffffff 0%, #f7f8fc 100%);
    --nm-grad-card-tint: linear-gradient(150deg, #ffffff 30%, color-mix(in srgb, var(--nm-tint) 5%, #f7f8fc) 100%);
    /* 注意：含 var(--nm-tint) 的渐变必须定义在 body/上下文层，
       否则会在 :root 作用域提前解析成固定蓝色 */
    --nm-grad-btn: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 78%, #ffffff) 0%, var(--nm-tint) 55%, var(--nm-tint-strong) 100%);
    --nm-grad-btn-hover: linear-gradient(135deg, var(--nm-tint) 0%, var(--nm-tint-strong) 100%);
    --nm-grad-side-active: linear-gradient(90deg, color-mix(in srgb, var(--nm-tint) 14%, transparent), color-mix(in srgb, var(--nm-tint) 5%, transparent));
    --nm-grad-icon: linear-gradient(135deg, var(--nm-blue), var(--nm-indigo));
    --nm-grad-line: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nm-tint) 45%, transparent), transparent);
    --nm-grad-kpi-1: linear-gradient(135deg, #0a84ff, #5e5ce6);
    --nm-grad-kpi-2: linear-gradient(135deg, #30b0c7, #0a84ff);
    --nm-grad-kpi-3: linear-gradient(135deg, #ff9500, #ff2d55);
    --nm-grad-kpi-4: linear-gradient(135deg, #34c759, #00c7be);
    --nm-grad-kpi-5: linear-gradient(135deg, #af52de, #5856d6);
    --nm-grad-kpi-6: linear-gradient(135deg, #ff2d55, #ff9500);
}
[data-nm-theme="dark"] {
    --nm-grad-card: linear-gradient(165deg, #232326 0%, #1a1a1d 100%);
    --nm-grad-card-tint: linear-gradient(150deg, #232326 30%, color-mix(in srgb, var(--nm-tint) 8%, #1c1c1e) 100%);
    --nm-grad-side-active: linear-gradient(90deg, color-mix(in srgb, var(--nm-tint) 26%, transparent), color-mix(in srgb, var(--nm-tint) 8%, transparent));
}

/* ---- G.2 卡片：渐变表面 + 顶部渐变高光线 ---- */
.app .card, .nm-card, .m-body .mh-sec > .nm-grad-scope {
    background: var(--nm-grad-card) !important;
    background-color: transparent !important;
    position: relative;
}
.app .card::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: var(--nm-grad-line);
    opacity: 0.55;
    pointer-events: none;
}

/* KPI / 统计卡：渐变 tint 表面 + 渐变图标 + 悬浮渐变描边 */
.app .dash-kpi, .app .stat-card {
    background: var(--nm-grad-card-tint) !important;
    overflow: hidden;
}
.app .dash-kpi::after, .app .stat-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 46%; height: 100%;
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--nm-tint) 7%, transparent), transparent 60%);
    pointer-events: none;
}
.app .dash-kpi:hover::after { opacity: 1.4; }
.app .dash-kpi:hover, .app .stat-card:hover {
    border-color: color-mix(in srgb, var(--nm-tint) 30%, var(--nm-sep)) !important;
    box-shadow: var(--nm-shadow-3), 0 0 0 0.5px color-mix(in srgb, var(--nm-tint) 25%, transparent) !important;
}

/* KPI 图标：渐变底 + 白图标（iOS 设置风格的升级版） */
.app .dash-kpi-icon {
    background: var(--icg, var(--nm-grad-icon)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--icg-c, var(--nm-blue)) 50%, transparent) !important;
}
.app .dash-kpi:nth-child(6n+1) .dash-kpi-icon { --icg: var(--nm-grad-kpi-1); --icg-c: #0a84ff; }
.app .dash-kpi:nth-child(6n+2) .dash-kpi-icon { --icg: var(--nm-grad-kpi-2); --icg-c: #30b0c7; }
.app .dash-kpi:nth-child(6n+3) .dash-kpi-icon { --icg: var(--nm-grad-kpi-3); --icg-c: #ff9500; }
.app .dash-kpi:nth-child(6n+4) .dash-kpi-icon { --icg: var(--nm-grad-kpi-4); --icg-c: #34c759; }
.app .dash-kpi:nth-child(6n+5) .dash-kpi-icon { --icg: var(--nm-grad-kpi-5); --icg-c: #af52de; }
.app .dash-kpi:nth-child(6n+6) .dash-kpi-icon { --icg: var(--nm-grad-kpi-6); --icg-c: #ff2d55; }

/* ---- G.3 主按钮：渐变 + 顶部光泽 ---- */
.app .btn-primary, .shop-body .btn-primary, .nm-btn--primary, .btn-primary,
.m-body .m-btn--primary, .m-auth-btn, .m-login-btn {
    background: var(--nm-grad-btn) !important;
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
}
.app .btn-primary::before, .nm-btn--primary::before, .btn-primary::before,
.m-body .m-btn--primary::before, .m-auth-btn::before, .m-login-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.app .btn-primary:hover, .btn-primary:hover, .nm-btn--primary:hover,
.m-auth-btn:hover, .m-login-btn:hover {
    background: var(--nm-grad-btn-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--nm-tint) 55%, transparent) !important;
}

/* ---- G.4 侧栏激活：渐变高亮 + 渐变指示条 ---- */
.app .menu-item.active {
    background: var(--nm-grad-side-active) !important;
    box-shadow: inset 2.5px 0 0 var(--nm-tint) !important;
    color: var(--nm-tint) !important;
    font-weight: 640 !important;
}
.app .menu-item.active .icon { color: var(--nm-tint); }

/* 侧栏底部用户条：渐变微面 */
.app .sidebar-footer { background: transparent !important; }
.app .tenant-tag {
    background: var(--nm-grad-side-active) !important;
    border: 0.5px solid color-mix(in srgb, var(--nm-tint) 18%, var(--nm-sep)) !important;
    color: var(--nm-tint) !important;
    font-weight: 600 !important;
}

/* ---- G.5 侧边栏 brand：去掉彩色光晕，纯玻璃 ---- */
.app .sidebar .brand { background: transparent !important; }
.app .sidebar .brand img { box-shadow: 0 2px 8px rgba(16,24,40,.12) !important; }

/* ---- G.6 顶栏 KPI 区渐变 tab（dash-range.on）---- */
.app .dash-range.on {
    background: var(--nm-grad-btn) !important;
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--nm-tint) 50%, transparent) !important;
}

/* ---- G.7 前台商品卡：白→冷灰渐变 + hover 渐变描边 ---- */
.shop-body .hv2-product, .m-body .m-product {
    background: var(--nm-grad-card) !important;
}
.shop-body .hv2-product:hover {
    box-shadow: var(--nm-shadow-3), 0 0 0 0.5px color-mix(in srgb, var(--nm-tint) 22%, transparent) !important;
}

/* ---- G.8 分页当前页：渐变 ---- */
.app .pagination .current, .app .page.current, .app .pagination .active {
    background: var(--nm-grad-btn) !important;
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--nm-tint) 45%, transparent) !important;
}

/* ---- G.9 移动端金刚区：图标渐变投影 ---- */
.m-body .m-qn-ico {
    box-shadow: 0 3px 8px -2px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16,24,40,.05), inset 0 0 0 0.5px var(--nm-sep) !important;
}

/* ---- G.10 表格表头微渐变 ---- */
.app table thead th, .app .dash-table thead th {
    background: linear-gradient(180deg, var(--nm-bg-3), color-mix(in srgb, var(--nm-bg-3) 80%, var(--nm-fill))) !important;
}

/* ---- G.11 图表卡头部渐变点缀（dash-card-head）---- */
.app .dash-card-head {
    position: relative;
}
.app .dash-card-head::after {
    content: "";
    position: absolute;
    bottom: -0.5px; left: 20px; right: 40%;
    height: 0.5px;
    background: var(--nm-grad-line);
    opacity: 0.4;
}

/* ==========================================================================
   H. 后台主题 —— 恢复用户原有配色（实测原站：深紫黑侧栏 + 靛紫激活胶囊）
      侧栏：#0D1226 → #11183A → #0C1128 · 激活：#6366F1→#8B5CF6
      顶栏：纯白胶囊工具组 · 内容区：浅灰蓝 #EEF1F6
   ========================================================================== */

:root, [data-nm-theme="dark"] {
    --nm-admin-sb-top: #0d1226;
    --nm-admin-sb-mid: #11183a;
    --nm-admin-sb-bot: #0c1128;
    --nm-admin-sb-text: rgba(255, 255, 255, 0.78);
    --nm-admin-sb-text-dim: rgba(255, 255, 255, 0.45);
    --nm-admin-sb-active: linear-gradient(90deg, rgba(99,102,241,.9), rgba(139,92,246,.85));
    --nm-admin-sb-hover: rgba(255, 255, 255, 0.09);
    --nm-admin-body: #eef1f6;
    --nm-admin-accent: #6366f1;
}

/* ---- H.1 内容区底色：浅灰蓝（对比更聚焦） ---- */
.app { background: var(--nm-admin-body) !important; }

/* ---- H.2 侧栏：深蓝渐变（标杆核心） ---- */
.app .sidebar {
    background: linear-gradient(180deg,
        var(--nm-admin-sb-top) 0%,
        var(--nm-admin-sb-mid) 46%,
        var(--nm-admin-sb-bot) 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-right: none !important;
    box-shadow: 4px 0 18px -6px rgba(0, 0, 0, 0.35) !important;
}
.app .sidebar::before, .app .sidebar::after { display: none !important; }

/* brand 区 */
.app .sidebar .brand { border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; }
.app .sidebar .brand img {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}
.app .sidebar .brand-text b { color: #fff !important; }
.app .sidebar .brand-text span { color: rgba(255, 255, 255, 0.55) !important; }
.app .brand-mark {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 分组标题 */
.app .menu-group {
    padding: 9px 14px 3px !important;
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* 菜单项：白字 + 激活白高亮 + 左亮条（紧凑密度） */
.app .menu-item {
    color: var(--nm-admin-sb-text) !important;
    margin: 1px 8px !important;
    padding: 6px 11px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}
.app .menu-item .icon, .app .menu-item svg { opacity: 0.85; }
.app .menu-item:hover {
    background: var(--nm-admin-sb-hover) !important;
    color: #fff !important;
}
.app .menu-item.active {
    background: var(--nm-admin-sb-active) !important;
    color: #fff !important;
    font-weight: 640 !important;
    box-shadow: 0 2px 10px -2px rgba(99, 102, 241, 0.45) !important;
}
.app .menu-item.active .icon, .app .menu-item.active svg { opacity: 1; color: #fff; }

/* 子菜单与徽章 */
.app .submenu { border-left-color: rgba(255, 255, 255, 0.16) !important; }
.app .submenu a { color: rgba(255, 255, 255, 0.66) !important; padding: 4.5px 8px !important; }
.app .submenu a:hover { background: rgba(255, 255, 255, 0.09) !important; color: #fff !important; }
.app .submenu a.active { color: #fff !important; }
.app .menu-item .badge {
    background: #ff5b57 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

/* 侧栏底部用户条 */
.app .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(0, 0, 0, 0.10) !important;
    margin: 0 !important;
    padding: 9px 12px !important;
}
.app .tenant-tag {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
}

/* 折叠按钮 */
.app .sidebar-toggle, .app [class*="collapse-btn"] { color: rgba(255,255,255,.7) !important; }

/* ---- H.3 顶栏：纯白 + 胶囊工具组（对标标杆） ---- */
.app .topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e6eaf2 !important;
    box-shadow: 0 1px 3px rgba(23, 43, 99, 0.04) !important;
    height: 60px !important;
}
.app .crumb-title { font-size: 16px !important; font-weight: 680 !important; }
.app .lang-trigger, .app .user-trigger {
    background: #ffffff !important;
    border: 1px solid #e2e8f4 !important;
    box-shadow: 0 1px 3px rgba(23, 43, 99, 0.05) !important;
    height: 36px !important;
    border-radius: 10px !important;
    color: #33415c !important;
    font-weight: 560 !important;
}
.app .lang-trigger:hover, .app .user-trigger:hover {
    border-color: var(--nm-admin-accent) !important;
    color: var(--nm-admin-accent) !important;
}
.app .env-badge.env-platform {
    background: linear-gradient(135deg, #eaf2ff, #e3ecff) !important;
    color: var(--nm-admin-accent) !important;
    border: 1px solid #d4e3fb !important;
}
.app .top-doc-btn {
    background: linear-gradient(135deg, #eaf2ff, #e3ecff) !important;
    color: var(--nm-admin-accent) !important;
    border: 1px solid #d4e3fb !important;
    border-radius: 10px !important;
    height: 36px !important;
    padding: 0 13px !important;
    font-weight: 600 !important;
}
.app .icon-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f4 !important;
    color: #4a5b7c !important;
    box-shadow: 0 1px 3px rgba(23, 43, 99, 0.05) !important;
}

/* ---- H.4 KPI 卡：白卡 + 彩色图标左上 + 大数字（1:1 对标） ---- */
.app .dash-kpi, .app .stat-card {
    background: #ffffff !important;
    border: 1px solid #e8edf6 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(23, 43, 99, 0.05) !important;
    padding: 20px 22px !important;
}
.app .dash-kpi:hover, .app .stat-card:hover {
    box-shadow: 0 8px 24px rgba(23, 43, 99, 0.10) !important;
    border-color: #d5e2f7 !important;
}
.app .dash-kpi::after, .app .stat-card::after {
    background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--nm-admin-accent) 5%, transparent), transparent 55%) !important;
}

/* ---- H.5 图表卡与通用卡 ---- */
.app .card, .app .dash-card {
    background: #ffffff !important;
    border: 1px solid #e8edf6 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(23, 43, 99, 0.05) !important;
}
.app .dash-card-head { padding: 16px 20px !important; }
.app .dash-card-title { font-size: 14.5px !important; font-weight: 660 !important; color: #1f2d4d !important; }

/* ---- H.6 下拉/弹窗：白底蓝系 ---- */
.app .lang-dropdown, .app .user-dropdown {
    background: #ffffff !important;
    border: 1px solid #e6eaf2 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.app .dropdown-item:hover { background: #f0f5fd !important; color: var(--nm-admin-accent) !important; }

/* ---- H.7 主题适配：深蓝侧栏在暗色模式不变（本来就深） ---- */
[data-nm-theme="dark"] .app .topbar {
    background: var(--nm-bg-2) !important;
    border-bottom-color: var(--nm-sep) !important;
}

/* ==========================================================================
   I. 前台品牌色：正红色（对标用户原站配色，弃蓝用红）
   ========================================================================== */
.shop-body, .m-body {
    --nm-tint: #e2231a;
    --nm-tint-strong: #b81c14;
    --nm-tint-soft: rgba(226, 35, 26, 0.10);
    --nm-tint-softer: rgba(226, 35, 26, 0.06);
    --nm-shadow-tint: 0 4px 16px -6px rgba(226, 35, 26, 0.45);
    /* 首页 v5 内联设计令牌一并翻红 */
    --hc-primary: #e2231a;
    --hc-primary-2: #ef4034;
    --hc-primary-3: #ff6a5c;
}
.shop-body .b2b-search-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 84%, white), var(--nm-tint)) !important; }
.shop-body .b2b-search-btn:hover { background: linear-gradient(135deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 78%, black)) !important; filter: brightness(1.05); }
.shop-body .b2b-searchbox {
    border-color: #1f2533 !important;
    box-shadow: 0 2px 14px -4px rgba(226, 35, 26, 0.35) !important;
}
.shop-body .b2b-searchbox:focus-within {
    border-color: var(--nm-tint) !important;
    box-shadow: 0 4px 22px -6px rgba(226, 35, 26, 0.5) !important;
}
/* 分类侧栏头部：深红渐变块（品牌感；头部搜索框内的类目按钮不含在内） */
.shop-body .side-cats-head, .shop-body .b2b-cat-side-head {
    background: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 72%, black), var(--nm-tint)) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 640 !important;
}
/* 前台导航激活：回归原站 —— 仅深色加粗，无背景块（避免悬停/选中底色与 32px 行错位） */
.shop-body .b2b-nav-link.active, .shop-body .b2b-nav-link.on {
    background: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   J. 移动端品牌色同步
   ========================================================================== */
.m-body .m-tab.active { color: var(--nm-tint) !important; }
.m-body .mh-head-bar { background: linear-gradient(180deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 82%, white)) !important; }
.m-body .mh-title .icon, .m-body .mh-title svg { color: var(--nm-tint) !important; }
.m-body .m-header-btn:not(:has(svg)):not(:has(img)) {
    background: linear-gradient(135deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 82%, white)) !important;
}

/* ==========================================================================
   K. 前台头部精修：类目大面板修复 + 红色主题细节 + 动效卡片
   ========================================================================== */

/* ---- K.1 修复：searchbox overflow:hidden 把类目大面板裁掉（点击无反应根因） ---- */
.shop-body .b2b-searchbox { overflow: visible !important; }
.shop-body .b2b-mainbar { overflow: visible !important; }
.shop-body .b2b-header { overflow: visible !important; }

/* ---- K.2 类目大面板：入场动效 + 精致细节 ---- */
.shop-body .b2b-cat-panel {
    border: 1px solid var(--nm-sep) !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 30px 70px -18px rgba(15, 23, 42, 0.28), 0 4px 16px -6px rgba(15, 23, 42, 0.10) !important;
    animation: nm-panel-in .24s var(--nm-ease-out) both;
}
@keyframes nm-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.shop-body .b2b-cat-btn { transition: background-color var(--nm-dur-2) var(--nm-ease-out), color var(--nm-dur-2) var(--nm-ease-out) !important; }
.shop-body .b2b-cat-btn:hover, .shop-body .b2b-cat-wrap.open .b2b-cat-btn {
    background: var(--nm-tint-soft) !important;
    color: var(--nm-tint) !important;
}
.shop-body .b2b-cat-left { background: #fafbfc !important; border-right: 1px solid var(--nm-sep) !important; padding: 8px !important; }
.shop-body .b2b-cat-l1 {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--nm-label-2) !important;
    transition: all .18s var(--nm-ease-out) !important;
}
.shop-body .b2b-cat-l1:hover { background: var(--nm-tint-softer) !important; color: var(--nm-tint) !important; padding-left: 16px !important; }
.shop-body .b2b-cat-l1.on {
    background: linear-gradient(90deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 65%, white)) !important;
    color: #fff !important;
    font-weight: 640 !important;
    box-shadow: 0 4px 12px -4px rgba(226, 35, 26, 0.5) !important;
}
.shop-body .b2b-cat-gt {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nm-label) !important;
    padding: 4px 6px 12px !important;
    border-bottom: 1px solid var(--nm-sep) !important;
    margin-bottom: 12px !important;
}
.shop-body .b2b-cat-l2 {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    text-align: center;
    transition: transform .18s var(--nm-ease-out), background-color .18s var(--nm-ease-out) !important;
}
.shop-body .b2b-cat-l2:hover { background: var(--nm-tint-softer) !important; transform: translateY(-2px); }
.shop-body .b2b-cat-l2-icon {
    width: 44px !important; height: 44px !important;
    margin: 0 auto 7px !important;
    border-radius: 12px !important;
    display: grid; place-items: center;
    font-size: 17px !important; font-weight: 700 !important;
    background: linear-gradient(135deg, #fdecec, #fadada) !important;
    color: var(--nm-tint) !important;
    transition: transform .18s var(--nm-ease-out), box-shadow .18s var(--nm-ease-out) !important;
}
.shop-body .b2b-cat-l2:hover .b2b-cat-l2-icon {
    background: linear-gradient(135deg, var(--nm-tint), color-mix(in srgb, var(--nm-tint) 65%, white)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(226, 35, 26, 0.55) !important;
}
.shop-body .b2b-cat-l2-name { font-size: 12px !important; color: var(--nm-label-2) !important; font-weight: 520; }

/* ---- K.3 首页左侧类目：悬停飞出面板精致化（红色系） ---- */
.shop-body .b2b-cat-side-list li a { transition: background-color .15s var(--nm-ease-out), color .15s var(--nm-ease-out), padding-left .15s var(--nm-ease-out) !important; }
.shop-body .b2b-cat-side-list li a:hover, .shop-body .b2b-cat-item:hover > a {
    background: var(--nm-tint-softer) !important;
    color: var(--nm-tint) !important;
}
.shop-body .b2b-cat-side-list li a:hover svg, .shop-body .b2b-cat-item:hover > a svg { color: var(--nm-tint) !important; }
.shop-body .b2b-cat-side-more { color: var(--nm-tint) !important; background: #fafbfc !important; }
.shop-body .b2b-cat-side-more:hover { background: var(--nm-tint-softer) !important; }
.shop-body .b2b-cat-item:hover .b2b-cat-sub-panel {
    display: block !important;
    animation: nm-panel-in .22s var(--nm-ease-out) both;
    border: 1px solid var(--nm-sep) !important;
    border-left: 0 !important;
    box-shadow: 0 24px 56px -14px rgba(15, 23, 42, 0.25) !important;
    border-radius: 0 14px 14px 0 !important;
}
.shop-body .b2b-cat-sub-title { color: var(--nm-label) !important; border-bottom: 2px solid var(--nm-tint-soft) !important; }
.shop-body .b2b-cat-sub-link:hover { background: var(--nm-tint-softer) !important; color: var(--nm-tint) !important; }
.shop-body .b2b-cat-sub-emoji { font-size: 18px; }

/* ---- K.4 顶部细节：工具条 / 注册按钮 / 语言胶囊 ---- */
.shop-body .b2b-topbar-right a:hover { color: var(--nm-tint) !important; }
.shop-body .b2b-action-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 84%, white), var(--nm-tint)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 640 !important;
    box-shadow: 0 4px 14px -4px rgba(226, 35, 26, 0.55) !important;
    transition: transform .18s var(--nm-ease-out), box-shadow .18s var(--nm-ease-out), filter .18s !important;
}
.shop-body .b2b-action-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(226, 35, 26, 0.6) !important;
    color: #fff !important;
}
.shop-body .b2b-cart { transition: transform .18s var(--nm-ease-out) !important; }
.shop-body .b2b-cart:hover { transform: translateY(-1px); }

/* ---- K.5 动效卡片：快捷入口四联卡 + 广告卡 + 商品卡 ---- */
.shop-body .b2b-ql {
    position: relative;
    overflow: hidden;
    border-radius: 14px !important;
    transition: transform .22s var(--nm-ease-out), box-shadow .22s var(--nm-ease-out), border-color .22s var(--nm-ease-out) !important;
}
.shop-body .b2b-ql::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nm-tint), #ff8a7a);
    opacity: 0;
    transition: opacity .22s var(--nm-ease-out);
}
.shop-body .b2b-ql:hover::before { opacity: 1; }
.shop-body .b2b-ql:hover {
    border-color: rgba(226, 35, 26, 0.35) !important;
    box-shadow: 0 14px 34px -12px rgba(226, 35, 26, 0.28) !important;
    transform: translateY(-3px);
}
.shop-body .b2b-ql-icon { transition: transform .22s var(--nm-ease-out) !important; }
.shop-body .b2b-ql:hover .b2b-ql-icon { transform: scale(1.06) rotate(-2deg); }
.shop-body .b2b-ql:nth-child(1) .b2b-ql-icon { background: linear-gradient(135deg, #e2231a, #ff6a5c) !important; color: #fff !important; }
.shop-body .b2b-ql:nth-child(2) .b2b-ql-icon { background: linear-gradient(135deg, #b81c14, #ef4034) !important; color: #fff !important; }
.shop-body .b2b-ql:nth-child(3) .b2b-ql-icon { background: linear-gradient(135deg, #2b3345, #4a5568) !important; color: #fff !important; }
.shop-body .b2b-ql:nth-child(4) .b2b-ql-icon { background: linear-gradient(135deg, #c2452f, #f06252) !important; color: #fff !important; }
.shop-body .b2b-ql-arrow { transition: transform .22s var(--nm-ease-out), color .22s !important; }
.shop-body .b2b-ql:hover .b2b-ql-arrow { color: var(--nm-tint) !important; transform: translateX(4px); }

.shop-body .b2b-ad-card { transition: transform .24s var(--nm-ease-out), box-shadow .24s var(--nm-ease-out) !important; }
.shop-body .b2b-ad-card:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.35) !important; }
.shop-body .b2b-ad-card .b2b-ad-btn { transition: background-color .18s, transform .18s !important; }
.shop-body .b2b-ad-card:hover .b2b-ad-btn { background: rgba(255, 255, 255, 0.32) !important; transform: translateX(2px); }

.shop-body .hv2-product { transition: transform .24s var(--nm-ease-out), box-shadow .24s var(--nm-ease-out) !important; }
.shop-body .hv2-product:hover { transform: translateY(-5px) !important; }
.shop-body .hv2-product-price { color: var(--nm-tint) !important; }

/* ---- K.6 轮播按钮 / 圆点：红色点缀 ---- */
.shop-body .b2b-slide-btn { transition: background-color .2s, transform .2s, box-shadow .2s !important; }
.shop-body .b2b-slide-btn:hover {
    background: var(--nm-tint) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(226, 35, 26, 0.6) !important;
}
.shop-body .b2b-banner-prev:hover, .shop-body .b2b-banner-next:hover {
    background: var(--nm-tint) !important;
    color: #fff !important;
}
.shop-body .b2b-dot.on { background: var(--nm-tint) !important; }

/* ---- K.7 按钮渐变在 body 作用域重新定义（确保跟随各端主题色） ---- */
body, .shop-body, .m-body, .app {
    --nm-grad-btn: linear-gradient(135deg, color-mix(in srgb, var(--nm-tint) 78%, #ffffff) 0%, var(--nm-tint) 55%, var(--nm-tint-strong) 100%);
    --nm-grad-btn-hover: linear-gradient(135deg, var(--nm-tint) 0%, var(--nm-tint-strong) 100%);
    --gradient: linear-gradient(135deg, var(--nm-tint) 0%, var(--nm-tint-strong) 100%);
}

/* ---- K.8 首页容器几何统一：所有区块与主列（1400px）左缘严格对齐 ---- */
.shop-body .hv2-section,
.shop-body .hv2-features-inner,
.shop-body .hv2-flash .hv2-section-inner,
.shop-body .hv2-flash-inner,
.shop-body .hv2-newsletter-inner {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.shop-body .hv2-section { padding-left: 0 !important; padding-right: 0 !important; }
.shop-body .hv2-features {
    margin-top: 24px !important;   /* ★ 修复：取消 -50px 上叠，徽章卡不再压到上方横幅 */
    margin-bottom: 48px !important;
}
/* 区块头与卡片区左缘一致（图标竖条不外凸） */
.shop-body .hv2-section-head { padding-left: 0 !important; }
.shop-body .hv2-section-title-wrap { padding-left: 14px; }
.shop-body .hv2-section-title::before { left: -14px !important; }

/* ---- K.9 后台顶栏按钮几何统一：高度/圆角/字号全部一致 ----
   修复：#diyFullscreenBtn 被 .app .icon-btn 的 34px !important 压扁（"全屏"竖排） */
.app .topbar .top-fs-btn {
    width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    color: var(--nm-label-2) !important;
    margin-right: 8px;
    transition: color .2s, border-color .2s, background .2s;
}
.app .topbar .top-fs-btn:hover {
    color: var(--nm-tint) !important;
    border-color: var(--nm-tint) !important;
    background: var(--nm-fill) !important;
}
.app .topbar .top-fs-btn.fs-on {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}
.app .topbar .lang-trigger {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    background: var(--nm-bg-2) !important;
    border: 0.5px solid var(--nm-sep) !important;
    color: var(--nm-label-2) !important;
    box-sizing: border-box !important;
}
.app .topbar .top-doc-btn {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
.app .topbar .env-badge {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
.app .topbar .user-trigger {
    height: 36px !important;
    padding: 0 10px 0 5px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

/* ★ 店铺页搜索框：按钮与红块完全贴合（覆盖 apple-ui 40px 干扰） */
.shop-body .b2b-search-form {
    height: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    align-self: stretch !important;
}
.shop-body .b2b-search-form .b2b-search-btn {
    height: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
}

/* ═══ v258: KPI 渐变主卡（白字设计）——恢复被白卡皮肤覆盖的渐变背景 ═══ */
.app .card.nm-kpi-hero,
.app .stat-card.nm-kpi-hero {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    background-color: #6366f1 !important;
    color: #fff !important;
    border: none !important;
}
.app .card.nm-kpi-hero .card-title,
.app .card.nm-kpi-hero h3 {
    color: #fff !important;
}
.app .card.nm-kpi-hero::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
}