/*
 * 站点主样式：沿用老站配色（主蓝 #015379 / 辅橙 #FA5C01 / 青蓝 #4CABC9 / 红 #bc2931），
 * 采用 Bootstrap 5 栅格重构为响应式布局。
 */
:root {
    --nb-blue: #015379;
    --nb-orange: #fa5c01;
    --nb-cyan: #4cabc9;
    --nb-red: #bc2931;
    --nb-border: #e3e6ea;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: #fff;
    color: #222;
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 整页基础字号/行高统一：表单控件继承正文排版，避免局部字号跳变 */
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a {
    color: #222;
    text-decoration: none;
}

    a:hover {
        color: var(--nb-orange);
        text-decoration: none;
    }

.text-blue, .link-blue {
    color: var(--nb-blue) !important;
}

.text-orange {
    color: var(--nb-orange) !important;
}

.btn-blue {
    background: var(--nb-blue);
    color: #fff;
}

    .btn-blue:hover {
        background: #013e5b;
        color: #fff;
    }

/* ---------- 顶部导航 ---------- */
.nb-topbar {
    background: #f4f3f2;
    border-bottom: 1px solid #cdcdcd;
    font-size: 12px;
}

    .nb-topbar .container {
        min-height: 32px;
        line-height: 32px;
        overflow: hidden;
    }

    .nb-topbar a {
        color: #666;
        text-decoration: none;
    }

        .nb-topbar a:hover {
            color: var(--nb-orange, #ff6600);
            text-decoration: underline;
        }

    .nb-topbar .split {
        margin: 0 8px;
        color: #ccc;
    }

    .topbar-left {
        float: left;
    }

    .topbar-right {
        float: right;
    }

.nb-header {
    background: #fff;
    font-size: 16px;
}

    .nb-header .container {
        padding-top: 12px;
        padding-bottom: 12px;
    }

.nb-logo {
    display: inline-flex;
    align-items: center;
}

.nb-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.nb-navbar {
    background: var(--nb-orange);
    height: 50px;
}

    .nb-navbar .container {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .nb-navbar .nav {
        justify-content: space-between;
        flex: 1;
        height: 100%;
        align-items: center;
    }

    .nb-navbar .nav-link {
        color: #fff !important;
        padding: 0 18px;
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 100%;
    }

        .nb-navbar .nav-link:hover, .nb-navbar .nav-link.active {
            background: rgba(0, 0, 0, 0.18);
        }

.nb-search {
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    border: 2px solid var(--nb-orange);
}

    .nb-search input {
        border: none;
        outline: none;
        padding: 8px 12px;
        flex: 1;
    }

    .nb-search button {
        background: var(--nb-orange);
        color: #fff;
        border: none;
        padding: 8px 22px;
    }

/* ---------- 内容区 ---------- */
.nb-panel {
    background: #fff;
    border: 1px solid var(--nb-border);
    border-radius: 3px;
}

.nb-panel-head {
    border-bottom: 1px solid var(--nb-border);
    padding: 10px 14px;
    font-weight: 600;
    color: var(--nb-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .nb-panel-head .more {
        font-weight: 400;
        color: #888;
    }

.nb-panel-body {
    padding: 12px 14px;
}

/* 表单单行排布：标签右对齐带冒号，行间浅色分隔线，控件按字段限宽 */
.nb-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nb-border);
}

    .nb-form-row:last-child {
        border-bottom: 0;
    }

    .nb-form-row.align-start {
        align-items: flex-start;
    }

.nb-form-label {
    width: 88px;
    flex-shrink: 0;
    text-align: right;
    margin: 0;
    font-weight: 400;
    color: #555;
}

    .nb-form-row.align-start .nb-form-label {
        padding-top: 7px;
    }

.nb-prod-card {
    border: 1px solid var(--nb-border);
    background: #fff;
    padding: 8px;
    text-align: center;
    height: 100%;
}

    .nb-prod-card img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        background: #f3f3f3;
    }

    .nb-prod-card .title {
        display: block;
        margin-top: 6px;
        height: 40px;
        overflow: hidden;
        line-height: 20px;
    }

    .nb-prod-card .price {
        color: var(--nb-red);
        font-weight: 600;
    }

.nb-list-item {
    border-bottom: 1px dashed #eee;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .nb-list-item .txt {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nb-list-item .time {
        color: #999;
        width: 92px;
        text-align: right;
    }

/* ---------- 底部 ---------- */
.nb-footer {
    margin-top: 8px;
    background: #fff;
    color: #666;
    border-top: 1px solid #ff6600;
    padding: 16px 0;
    font-size: 12px;
    text-align: center;
}

    .nb-footer a {
        color: #666;
    }

        .nb-footer a:hover {
            color: var(--nb-orange);
        }

    .nb-footer-links {
        line-height: 24px;
        margin-bottom: 10px;
    }

        .nb-footer-links .sep {
            margin: 0 6px;
            color: #ccc;
        }

    .nb-footer-copy {
        line-height: 24px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .go-top {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        color: #666;
        line-height: 1;
    }

    .top-arrow {
        font-size: 10px;
    }

    .top-text {
        font-size: 10px;
        font-weight: bold;
    }

    .nb-footer-badges {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

        .nb-footer-badges img {
            height: 36px;
            vertical-align: middle;
        }

    .badge-placeholder {
        display: inline-block;
        width: 90px;
        height: 36px;
        line-height: 36px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        color: #888;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
    }

/* ---------- 列表页：筛选栏 + 表格 + 分页 ---------- */
.nb-filter {
    background: #fff;
    border: 1px solid var(--nb-border);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.nb-table thead th {
    background: #f2f6f8;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
}

.nb-table td {
    vertical-align: middle;
}

.nb-pager {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

    .nb-pager a, .nb-pager span {
        padding: 4px 10px;
        border: 1px solid var(--nb-border);
        background: #fff;
    }

        .nb-pager a:hover {
            background: var(--nb-blue);
            color: #fff;
        }

    .nb-pager .current {
        background: var(--nb-orange);
        color: #fff;
        border-color: var(--nb-orange);
    }

body.nb-admin {
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.nb-admin-body {
    display: flex;
    height: calc(100vh - 48px);
    overflow: hidden;
}

.nb-admin-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
}

.nb-admin-head {
    display: flex;
    height: 48px;
    background: #fff;
}

.nb-admin-logo {
    width: 200px;
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nb-admin-logo img {
    max-height: 40px;
    max-width: 170px;
    display: block;
}

.nb-admin-headmain {
    flex: 1;
    display: flex;
    align-items: center;
    height: 48px;
    background: #fff;
    border-bottom: 1px solid var(--nb-border);
}

.nb-admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nb-admin-uname {
    font-size: 14px;
    color: #555;
}

.nb-admin-logout {
    font-size: 14px;
    color: #888;
    text-decoration: none;
}

.nb-admin-logout:hover {
    color: #e8551d;
}

.nb-link {
    color: #2f6fed;
    cursor: pointer;
    text-decoration: none;
}

    .nb-link:hover {
        text-decoration: underline;
    }

.nb-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
}

    .nb-drawer.open {
        visibility: visible;
    }

    .nb-drawer-mask {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        transition: opacity .25s;
    }

    .nb-drawer.open .nb-drawer-mask {
        opacity: 1;
    }

    .nb-drawer-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 70%;
        max-width: 100%;
        background: #fff;
        box-shadow: -2px 0 16px rgba(0,0,0,.18);
        transform: translateX(100%);
        transition: transform .28s ease;
        display: flex;
        flex-direction: column;
    }

    .nb-drawer.open .nb-drawer-panel {
        transform: translateX(0);
    }

    .nb-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--nb-border);
        font-weight: 600;
    }

    .nb-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

.nb-admin-side {
    width: 200px;
    background: #2b3a45;
    flex: 0 0 200px;
    padding-top: 8px;
    height: 100%;
    overflow-y: auto;
}

    .nb-admin-side a {
        display: block;
        padding: 10px 18px;
        color: #cfd8dc;
        border-left: 3px solid transparent;
    }

        .nb-admin-side a:hover, .nb-admin-side a.active {
            background: #1f2c35;
            color: #fff;
            border-left-color: var(--nb-orange);
        }

.nb-menu-group {
}

    .nb-menu-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 18px;
        font-size: 13px;
        color: #9fb0bd;
        cursor: pointer;
        user-select: none;
    }

        .nb-menu-title:hover {
            color: #fff;
        }

    .nb-menu-caret {
        font-size: 10px;
        transition: transform .2s;
    }

    .nb-menu-group.open .nb-menu-caret {
        transform: rotate(90deg);
    }

    .nb-menu-items {
        display: none;
    }

        .nb-menu-group.open .nb-menu-items {
            display: block;
        }

        /* 二级栏目相对分组标题整体右移，形成层级感 */
        .nb-menu-items a {
            padding-left: 42px;
        }

        .nb-menu-ico {
            display: inline-block;
            width: 1.5em;
            text-align: center;
            margin-right: 4px;
            font-size: 14px;
            line-height: 1;
            vertical-align: -1px;
        }

        .nb-tree-caret {
            display: inline-block;
            width: 16px;
            text-align: center;
            cursor: pointer;
            color: #6b7785;
            user-select: none;
        }

            .nb-tree-caret-empty {
                cursor: default;
                color: #ccc;
            }

        .nb-tree-indent {
            display: inline-block;
        }

/* ---------- 行业分类树 ---------- */
.nb-tree, .nb-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nb-tree ul {
        display: none;
        padding-left: 20px;
    }

    .nb-tree li.open > ul {
        display: block;
    }

    .nb-tree-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        border-radius: 4px;
    }

        .nb-tree-row:hover {
            background: #f3f6f9;
        }

    .nb-tree-toggle {
        width: 16px;
        text-align: center;
        cursor: pointer;
        color: #888;
        flex: 0 0 16px;
    }

    .nb-tree-name {
        font-weight: 500;
    }

    .nb-tree-meta {
        color: #999;
        font-size: 12px;
        margin-left: 8px;
    }

.nb-admin-main {
    flex: 1;
    padding: 14px 18px;
    background: #f5f6f7;
    height: 100%;
    overflow-y: auto;
}

.nb-admin-crumb {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: #fff;
    font-size: 14px;
    color: #666;
}

.nb-stat {
    background: #fff;
    border: 1px solid var(--nb-border);
    border-left: 4px solid var(--nb-blue);
    padding: 14px;
    height: 100%;
}

    .nb-stat .num {
        font-size: 24px;
        font-weight: 700;
        color: var(--nb-blue);
    }

.nb-stat.orange {
    border-left-color: var(--nb-orange);
}

    .nb-stat.orange .num {
        color: var(--nb-orange);
    }

.nb-stat.cyan {
    border-left-color: var(--nb-cyan);
}

    .nb-stat.cyan .num {
        color: var(--nb-cyan);
    }

.nb-stat.red {
    border-left-color: var(--nb-red);
}

    .nb-stat.red .num {
        color: var(--nb-red);
    }

/* ---------- 会员后台布局 ---------- */
.nb-office-body {
    display: flex;
    max-width: 998px;
    margin: 15px auto 0;
    min-height: calc(100vh - 180px);
}

.nb-office-side {
    width: 180px;
    flex: 0 0 180px;
    background: #fff;
    border-right: 1px solid var(--nb-border);
    padding-top: 10px;
}

    .nb-office-side a {
        display: block;
        padding: 9px 18px;
    }

        .nb-office-side a:hover, .nb-office-side a.active {
            background: #eef6fa;
            color: var(--nb-blue);
            border-right: 3px solid var(--nb-orange);
        }

.nb-office-main {
    flex: 1;
    padding: 14px 18px;
}

.nb-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.nb-detail-meta {
    color: #888;
    border-bottom: 1px solid var(--nb-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* ============================================================
   自研替代层：覆盖本项目实际用到的 Bootstrap 类（用于彻底移除 Bootstrap 依赖）
   仅实现被视图引用的类；自定义类（nb-* / btn-blue / text-blue / text-orange / g-meta）不在此重复。
   ============================================================ */

/* ---------- 栅格 ---------- */
.container {
    width: 100%;
    max-width: 998px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-wrap: wrap;
    --gutter: 1.5rem;
    margin-left: calc(var(--gutter) / -2);
    margin-right: calc(var(--gutter) / -2);
}
.row.g-2 { --gutter: 0.5rem; }
.row.g-3 { --gutter: 1rem; }

[class^="col-"], [class*=" col-"] {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: calc(var(--gutter, 1.5rem) / 2);
    padding-right: calc(var(--gutter, 1.5rem) / 2);
}
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-2, .col-md-3, .col-md-5, .col-md-6,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-6 { flex: 0 0 100%; max-width: 100%; }

/* ---------- 弹性工具 ---------- */
.d-flex { display: flex; }
.d-inline { display: inline; }
.flex-grow-1 { flex-grow: 1; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.ms-auto { margin-left: auto; }

/* ---------- 间距（Bootstrap 比例 1=.25 2=.5 3=1 4=1.5 5=3 rem） ---------- */
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.ms-3 { margin-left: 1rem; }
.me-2 { margin-right: .5rem; }
.p-2 { padding: .5rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.ps-3 { padding-left: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* ---------- 尺寸 ---------- */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ---------- 文本/字体 ---------- */
.text-center { text-align: center; }
.text-muted { color: #6c757d; }
.text-danger { color: #dc3545; }
.text-dark { color: #212529; }
.text-md-end { text-align: right; }
.fw-bold { font-weight: 700; }
small { font-size: .875em; }

/* ---------- 边框/背景 ---------- */
.border { border: 1px solid #dee2e6; }
.border-bottom { border-bottom: 1px solid #dee2e6; }
.border-start { border-left: 1px solid #dee2e6; }
.border-secondary { border-color: #6c757d; }
.bg-warning { background-color: #ffc107; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
    box-sizing: border-box;
}
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background: #fff;
}
.btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
}

/* ---------- 卡片 ---------- */
.card { background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.card-body { padding: 1rem; }
.card-title { margin-bottom: .5rem; font-weight: 600; }

/* ---------- 告警 ---------- */
.alert { padding: .75rem 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.alert-warning { color: #664d03; background: #fff3cd; border-color: #ffecb5; }
.alert-info { color: #055160; background: #cff4fc; border-color: #b6effb; }
.alert-light { color: #636464; background: #fefefe; border-color: #fdfdfe; }
.alert-danger { color: #842029; background: #f8d7da; border-color: #f5c2c7; }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .5rem; border-bottom: 1px solid #dee2e6; text-align: left; }
.table-borderless th, .table-borderless td { border: none; }
.table-hover tbody tr:hover { background: #f5f5f5; }
.table-sm th, .table-sm td { padding: .25rem .5rem; }

/* ---------- 表单 ---------- */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background: #fff;
    box-sizing: border-box;
}
.form-label { display: block; margin-bottom: .25rem; font-weight: 500; }
.form-check { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.form-check-input { width: 1rem; height: 1rem; }
.form-check-label { margin-bottom: 0; }

/* ---------- 导航 ---------- */
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-link { color: #222; text-decoration: none; }

/* ---------- 其它组件 ---------- */
.badge { display: inline-block; padding: .25em .5em; font-size: 14px; font-weight: 700; border-radius: .25rem; background: #e9ecef; }
.img-fluid { max-width: 100%; height: auto; }

/* ============================================================
   自研替代层（补充）：覆盖后台/Areas 额外用到的 Bootstrap 类
   ============================================================ */

/* 弹性对齐 / 间距补充 */
.align-items-end { align-items: flex-end; }
.justify-content-end { justify-content: flex-end; }
.gap-2 { gap: .5rem; }

.mt-2 { margin-top: .5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.ms-2 { margin-left: .5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }

/* 栅格列补充（md 断点内） */
@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}

/* 背景色 */
.bg-secondary { background-color: #6c757d; }
.bg-success { background-color: #198754; }
.bg-danger { background-color: #dc3545; }
.bg-info { background-color: #0dcaf0; }

/* 导航项 */
.nav-item { flex: 0 0 auto; }

/* 按钮尺寸与变体 */
.btn { padding: 6px 14px; white-space: nowrap; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 2px; }
.btn-group { display: inline-flex; }
.btn-group-sm { display: inline-flex; }
/* 组内表单等子项不收缩，避免按钮文字被挤成竖排 */
.btn-group > * { flex: 0 0 auto; }
.btn-warning { background: #ffc107; color: #212529; }
.btn-warning:hover { background: #ffca2c; color: #212529; }

.btn-outline-primary { color: #0d6efd; border-color: #0d6efd; background: #fff; }
.btn-outline-primary:hover { background: #0d6efd; color: #fff; }
.btn-outline-success { color: #198754; border-color: #198754; background: #fff; }
.btn-outline-success:hover { background: #198754; color: #fff; }
.btn-outline-danger { color: #dc3545; border-color: #dc3545; background: #fff; }
.btn-outline-danger:hover { background: #dc3545; color: #fff; }
.btn-outline-warning { color: #caa200; border-color: #ffc107; background: #fff; }
.btn-outline-warning:hover { background: #ffc107; color: #212529; }
.btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; background: #fff; }
.btn-outline-info:hover { background: #0dcaf0; color: #fff; }

/* ============================================================
   登录页（旧版风格）：左登录卡片 + 右横幅 / 会员服务
   ============================================================ */
.login-wrap {
    width: 968px;
    margin: 20px auto 40px;
    overflow: hidden;
    font-size: 12px;
    color: #333;
}

/* ---------- 左侧登录卡片 ---------- */
.login-card {
    float: left;
    width: 303px;
    background: #fff;
    border: 2px solid #7BB4D9;
    border-radius: 10px;
    padding-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.login-card-head {
    height: 40px;
    line-height: 40px;
    padding-left: 14px;
    font-size: 14px;
}

.login-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1F7BB6;
    margin-right: 6px;
    vertical-align: -4px;
}

.login-row {
    margin: 12px 20px 0;
    line-height: 22px;
}

    .login-row > label {
        float: left;
        width: 58px;
    }

.login-input {
    width: 160px;
    height: 20px;
    border: 1px solid #999;
    padding: 1px 3px;
}

.login-err-row {
    margin: 2px 20px 0 78px;
    min-height: 14px;
}

    .login-err-row span, .login-error {
        color: #d10d13;
    }

.login-error {
    margin: 6px 20px 0;
}

.login-btnrow {
    margin-top: 16px;
}

.login-remember {
    float: left;
    color: #666;
    cursor: pointer;
}

    .login-remember input {
        vertical-align: -2px;
        margin: 0 3px 0 0;
    }

.login-btn {
    float: right;
    width: 58px;
    height: 24px;
    border: 1px solid #999;
    background: linear-gradient(#fafafa,#dcdcdc);
    font-weight: bold;
    cursor: pointer;
}

    .login-btn:hover {
        background: linear-gradient(#f0f0f0,#cfcfcf);
    }

.login-links {
    clear: both;
    margin: 14px 20px 0;
    color: #666;
}

    .login-links a {
        color: #1F7BB6;
        text-decoration: none;
        margin: 0 4px;
    }

        .login-links a:hover {
            text-decoration: underline;
        }

    .login-links .login-reg {
        color: #FF6600;
    }

.login-bigreg {
    display: block;
    width: 178px;
    height: 34px;
    line-height: 34px;
    margin: 18px auto 0;
    text-align: center;
    color: #fff !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    background: linear-gradient(#f2565c,#d10d13);
    border: 1px solid #b00b10;
    border-radius: 4px;
}

    .login-bigreg:hover {
        background: linear-gradient(#e0474d,#bd0a0f);
        color: #fff;
    }

.login-admin {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #999 !important;
    text-decoration: none !important;
}

    .login-admin:hover {
        color: #666 !important;
    }

/* ---------- 右侧横幅 + 会员服务 ---------- */
.login-right {
    float: right;
    width: 640px;
}

.login-banner {
    height: 150px;
    border: 1px solid #7BB4D9;
    background: #fff;
    overflow: hidden;
}

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

.login-services {
    margin-top: 16px;
}

.login-services-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

.login-services ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .login-services li {
        float: left;
        width: 296px;
        padding: 12px 10px;
        border-bottom: 1px dashed #e0e0e0;
    }

        .login-services li:nth-child(2n) {
            float: right;
        }

.svc-ico {
    float: left;
    margin-right: 10px;
}

.svc-txt b {
    display: block;
    color: #FF6600;
    font-size: 14px;
    line-height: 20px;
}

.svc-txt span {
    color: #999;
    line-height: 18px;
}

/* ============================================================
   产品图片上传卡片（发布供应/求购）：灰底圆角卡 + 图标占位 + 悬浮遮罩
   ============================================================ */
.pic-slot {
    width: 150px;
}

/* 卡位间距（覆盖 gap-3 工具类，统一为 32px，卡位之间有明显留白） */
#picSlots {
    gap: 32px;
}

.pic-box {
    position: relative;
    width: 150px;
    height: 150px;
    background: #f7f8fa;
    border: 1px solid #ebeef2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
}

    .pic-box:hover {
        border-color: var(--nb-blue);
    }

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

.pic-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9aa3af;
    font-size: 13px;
}

    .pic-empty svg {
        width: 34px;
        height: 34px;
        color: #c3cad4;
    }

.pic-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .15s;
}

    .pic-box:hover .pic-mask {
        opacity: 1;
    }

.pic-btn {
    border: none;
    background: #fff;
    color: #333;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

    .pic-btn:hover {
        background: var(--nb-blue);
        color: #fff;
    }

/* ============================================================
   会员/后台布局页脚（_SiteFooter）：与 _SiteHeader 同风格
   ============================================================ */
.nb-footer {
    border-top: 1px solid #e5e7eb;
    padding: 18px 0 26px;
    color: #8a94a3;
    font-size: 12px;
    text-align: center;
    line-height: 1.9;
}

    .nb-footer p {
        margin: 0 0 2px;
    }

/* ============================================================
   商铺（ShopController）统一导航与分页
   ============================================================ */
.shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0;
    border-bottom: 2px solid #eef1f5;
}

    .shop-tabs a {
        padding: 8px 18px;
        color: #4a5568;
        font-size: 14px;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
    }

        .shop-tabs a:hover {
            color: var(--nb-blue);
        }

        .shop-tabs a.is-active {
            color: var(--nb-blue);
            font-weight: 700;
            border-bottom-color: var(--nb-blue);
        }

.shop-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
}

    .shop-pager a,
    .shop-pager .pager-num {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e3e7ee;
        border-radius: 4px;
        color: #4a5568;
        text-decoration: none;
        font-size: 13px;
    }

        .shop-pager a:hover {
            border-color: var(--nb-blue);
            color: var(--nb-blue);
        }

    .shop-pager .pager-num.is-current {
        background: var(--nb-blue);
        border-color: var(--nb-blue);
        color: #fff;
    }

    .shop-pager .pager-ellipsis {
        padding: 0 4px;
        color: #9aa3af;
    }