/* ── 全局样式见 variables.css ── */

/* ── .container 容器布局见 variables.css ── */

/*#region  侧边栏样式 — 窄版图标栏 80px */
/*
 * 设计理念：图标在上、文字在下的紧凑侧边栏
 * - 宽度 80px
 * - menu-item 竖向排列（图标 + 文字）
 * - 隐藏 section-title 分组标题
 * - active 态左侧竖线指示
 */

.sidebar {
    width: 80px;
    background-color: var(--bg-sidebar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 16px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - 20px);
    min-height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    overflow: hidden;
    flex-shrink: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: var(--sidebar-z);
    transition: box-shadow var(--sidebar-transition);
}

/* 占位元素 */
.sidebar-spacer {
    width: 80px;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Logo ── */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
}
.logo-image {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    object-fit: contain;
}
.logo-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 4px;
    white-space: nowrap;
    text-align: center;
}

/* ── 滚动区 ── */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sidebar-content::-webkit-scrollbar { width: 0; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: transparent; }

/* ── 菜单分组：分隔线区分 ── */
.menu-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.menu-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.section-title {
    display: none;
}

/* ── 菜单项：图标在上，文字在下 ── */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 56px;
    padding: 6px 4px;
    border-radius: 10px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    text-decoration: none;
    color: inherit;
    gap: 4px;
}
.menu-item:hover {
    background-color: var(--active-bg);
}
.menu-item.active {
    background-color: var(--active-bg);
}
.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    background: var(--primary-color);
    border-radius: 0 3px 3px 0;
}

.menu-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.menu-text {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-item.active .menu-text {
    color: var(--primary-color);
    font-weight: 600;
}

.notification-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 7px;
    height: 7px;
    background-color: var(--notification-dot);
    border-radius: 50%;
    border: 2px solid var(--bg-sidebar);
}

/* ── 分组图标颜色 ── */
.dashboard-icon  { color: var(--dashboard-color); }
.business-icon   { color: var(--business-color); }
.assist-icon     { color: var(--assist-color); }
.finance-icon    { color: var(--finance-color); }
.data-icon       { color: var(--data-color); }

/* ── 系统区（退出登录） ── */
.system-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: auto;
}
.system-icon {
    color: var(--system-color);
}

/* ── 图标颜色 ── */
.menu-icon-blue   { color: #2196F3; }
.menu-icon-green  { color: #4CAF50; }
.menu-icon-amber  { color: #FF9800; }
.menu-icon-purple { color: #9C27B0; }
.menu-icon-rose   { color: #E91E63; }
.menu-icon-teal   { color: #00BCD4; }
.menu-icon-slate  { color: #607D8B; }

/* ── 移动端：overlay 抽屉模式 ── */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 80px;
        transform: translateX(calc(-100% - 30px));
        transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
        box-shadow: 0 8px 40px rgba(0,0,0,0.15);
        z-index: 1100;
        border-radius: 0 16px 16px 0;
        align-items: center;
        padding: 16px 6px;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar .logo-container { flex-direction: column; padding: 0; margin-bottom: 20px; }
    .sidebar .logo-image { width: 36px; height: 36px; }
    .sidebar .logo-text  { font-size: 10px; margin-top: 4px; }
    .sidebar .sidebar-content { align-items: center; }
    .sidebar .section-title { display: none; }
    .sidebar .menu-item { flex-direction: column; width: 64px; height: 56px; padding: 6px 4px; gap: 4px; }
    .sidebar .menu-icon  { width: 22px; height: 22px; font-size: 18px; }
    .sidebar .menu-text  { font-size: 10px; }
    .sidebar .system-section { align-items: center; padding-top: 14px; }
    .sidebar .sidebar-content::-webkit-scrollbar { width: 0; }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--sidebar-overlay-bg);
        z-index: 1099;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show {
        display: block;
    }
    .sidebar-spacer {
        display: none;
    }
}

/*#endregion*/

/*#region 主内容区域样式 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    min-height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
}



/*#region 横向子页面导航条样式 */
.navbar {
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 60px;
}

.navbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-right: 30px;
}

.nav-tabs {
    display: flex;
    align-items: center;
    list-style: none;
    flex: 1;
}

.nav-tab {
    padding: 8px 16px;
    margin-right: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--text-secondary);
    position: relative;
    display: block;
    pointer-events: auto;
}

.nav-tab a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.nav-tab:hover {
    background-color: var(--nav-hover);
}

.nav-tab.active {
    background-color: var(--nav-active);
    color: white;
}

.nav-tab.active a {
    color: white;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background-color: var(--nav-active);
    border-radius: 3px;
}

/*#endregion*/


/*#region 页面内容区域样式 */
.page-content {
    flex: 1;
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    padding: 24px;
    height: 100vh;
    overflow-y: auto;
}

.page-content-nobg {
    padding-top: 10px;
    flex: 1;
    height: 100vh;
    overflow: hidden;
}

.page-content-col {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.page-content-col-left {
    padding: 10px;
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 370px;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.page-content-col-left-sm {
    padding: 10px;
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: calc(20% - 10px);
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.page-content-col-right-nobg-sm {
    width: calc(80% - 10px);
    height: calc(100vh - 100px);
}

.page-content-col-right {
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: calc(100% - 370px - 20px);
    height: calc(100vh - 100px);
}

.page-content-col-right-nobg {
    width: calc(75% - 10px);
    height: calc(100vh - 100px);
}

.page-content-col-3-1 {
    padding: 10px;
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    /* 核心修改：自动占 1/3 宽度，自动扣除间距 */
    width: calc(33.333% - 14px);
    /* 如果你想严格固定3个，也可以用这个：width: calc(33.333% - 14px); */

    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* 必须加，防止padding撑大宽度 */
}

/*#endregion*/

/*#endregion*/

/*#region alert消息提示样式 */
.alert {
    position: relative;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-dismissible {
    padding-right: 40px;
}

.alert-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 16px;
    color: inherit;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
}

.alert-close:hover {
    opacity: 1;
}

/*#endregion*/

/*#region btn按钮样式 */
.button-container {
    display: flex;
    /* 启用Flexbox布局 */
    justify-content: space-between;
    /* 关键属性：将子元素两端对齐 */
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: .875rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn-orange {
    color: #ffffff;
    background-color: #fb9678;
    border-color: #fb9678
}

.btn-orange:hover {
    color: #ffffff;
    background-color: #fca68c;
    border-color: #fba186
}

.btn-green {
    color: #ffffff;
    background-color: #00c292;
    border-color: #00c292
}

.btn-green:hover {
    color: #ffffff;
    background-color: #26cba2;
    border-color: #1ac89d
}

.btn-blue {
    color: #ffffff;
    background-color: #3498db;
    border-color: #3498db
}

.btn-blue:hover {
    color: #ffffff;
    background-color: #2980b9;
    border-color: #2980b9
}

.btn-red {
    color: #ffffff;
    background-color: #e74c3c;
    border-color: #e74c3c
}

.btn-red:hover {
    color: #ffffff;
    background-color: #c0392b;
    border-color: #c0392b
}

.btn-gray {
    color: #ffffff;
    background-color: #95a5a6;
    border-color: #95a5a6
}

.btn-gray:hover {
    color: #ffffff;
    background-color: #7f8c8d;
    border-color: #7f8c8d
}

.btn-purple {
    color: #ffffff;
    background-color: #9b59b6;
    border-color: #9b59b6
}

.btn-purple:hover {
    color: #ffffff;
    background-color: #8e44ad;
    border-color: #8e44ad
}

.btn-pink {
    color: #ffffff;
    background-color: #e91e63;
    border-color: #e91e63
}

.btn-pink:hover {
    color: #ffffff;
    background-color: #d81b60;
    border-color: #d81b60
}

.btn-yellow {
    color: #ffffff;
    background-color: #f1c40f;
    border-color: #f1c40f
}

.btn-yellow:hover {
    color: #ffffff;
    background-color: #d4ac0d;
    border-color: #d4ac0d
}

/*#endregion*/

/*#region 语义化按钮变体 */
.btn-primary {
    color: #fff;
    background-color: #4a90e2;
    border-color: #4a90e2;
}

.btn-primary:hover {
    color: #fff;
    background-color: #357abd;
    border-color: #357abd;
}

.btn-secondary {
    color: #fff;
    background-color: #607D8B;
    border-color: #607D8B;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #546e7a;
    border-color: #546e7a;
}

.btn-success {
    color: #fff;
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.btn-success:hover {
    color: #fff;
    background-color: #3d8b40;
    border-color: #3d8b40;
}

.btn-warning {
    color: #fff;
    background-color: #FF9800;
    border-color: #FF9800;
}

.btn-warning:hover {
    color: #fff;
    background-color: #e68900;
    border-color: #e68900;
}

.btn-danger {
    color: #fff;
    background-color: #ff4d4f;
    border-color: #ff4d4f;
}

.btn-danger:hover {
    color: #fff;
    background-color: #e03e40;
    border-color: #e03e40;
}

.btn-info {
    color: #fff;
    background-color: #649ed9;
    border-color: #649ed9;
}

.btn-info:hover {
    color: #fff;
    background-color: #5088c2;
    border-color: #5088c2;
}

/*#endregion*/

/*#region form-control控件样式 */

.form-control {
    color: #212529;
    min-height: 38px;
    display: initial
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e9ecef;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control {
        transition: none
    }
}

.form-control[type=file] {
    overflow: hidden
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: rgba(0, 0, 0, .1);
    outline: 0;
    box-shadow: transparent
}

.form-control::-webkit-date-and-time-value {
    height: 1.5em
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1
}

.form-control::file-selector-button {
    padding: .375rem .75rem;
    margin: -.375rem -.75rem;
    margin-inline-end: .75rem;
    color: #212529;
    background-color: #f8f9fa;
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 1px;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control::file-selector-button {
        transition: none
    }
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: #ecedee
}

.form-control::-webkit-file-upload-button {
    padding: .375rem .75rem;
    margin: -.375rem -.75rem;
    margin-inline-end: .75rem;
    color: #212529;
    background-color: #f8f9fa;
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 1px;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control::-webkit-file-upload-button {
        transition: none
    }
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: #ecedee
}

/*#endregion*/

/*#region  input floating*/
.form-floating {
    position: relative;
    margin: 5px;
}

.form-floating>.form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control,
.form-floating>.form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25
}

.form-floating>label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    font-size: 14px;
}

@media (prefers-reduced-motion:reduce) {
    .form-floating>label {
        transition: none
    }
}

.form-floating>.form-control {
    padding: 1rem .75rem
}

.form-floating>.form-control::placeholder {
    color: transparent
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.form-floating>.form-control:-webkit-autofill~label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(.75rem - 3px);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    appearance: none
}

/*#endregion*/

/*#region icon_btn图标按钮样式 */
.button-group {
    display: flex;
}

.icon_btn {
    margin-left: 5px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #3498db;
}

.icon_btn:hover {
    background-color: #e8f4fc;
    transform: scale(1.1);
    color: #2980b9;
}

.icon_btn.red {
    color: #e74c3c;
}

.icon_btn.red:hover {
    background-color: #fdedec;
    color: #c0392b;
}

.icon_btn.green {
    color: #00c292;
}

.icon_btn.green:hover {
    background-color: #e0f7fa;
    color: #00c292;
}

.icon_btn.blue {
    color: #3498db;
}

.icon_btn.blue:hover {
    background-color: #e8f4fc;
    color: #3498db;
}

.icon_btn.purple {
    color: #9b59b6;
}

.icon_btn.purple:hover {
    background-color: #f3e8ff;
    color: #9b59b6;
}

.icon_btn.pink {
    color: #e91e63;
}

.icon_btn.pink:hover {
    background-color: #fce4ec;
    color: #e91e63;
}

.icon_btn.yellow {
    color: #f1c40f;
}

.icon_btn.yellow:hover {
    background-color: #fff3cd;
    color: #f1c40f;
}

.icon_btn.gray {
    color: #95a5a6;
}

.icon_btn.gray:hover {
    background-color: #f5f5f5;
    color: #95a5a6;
}

.icon_btn.orange {
    color: #fb9678;
}

.icon_btn.orange:hover {
    background-color: #fff3e0;
    color: #fb9678;
}

/*#endregion*/

/*#region table-a样式 */
.table-a-wrapper {
    height: calc(100vh - 200px);
    overflow: auto;
}

.table-a {
    width: 100%;
    color: #343a40;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.table-a thead th {
    vertical-align: bottom;
    border: none;
    padding: 10px;
    font-size: 14px;
    color: #fff;
}

.table-a .thead-dark th {
    color: #fff;
    background-color: #343a40;
}

.table-a tbody {
    cursor: pointer;
}

.table-a tbody tr {
    margin-bottom: 10px;
    box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);

}

.table-a tbody tr:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: #d5deed;
}

.table-a tbody th,
.table-a tbody td {
    border: none;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    white-space: nowrap;
}

.table-a tbody td {
    text-align: center;
}

.table-a tbody tr.active th,
.table-a tbody tr.active td {
    background-color: #1b6cd634;
}

.table-a tbody td .close span {
    font-size: 12px;
    color: #dc3545;
    text-shadow: 0 1px 0 #fff;
}

/*#endregion*/

/*#region Model样式 */
/* 模态框基础样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-y: auto;
}

.modal.show {
    display: block;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show .modal-overlay {
    opacity: 1;
}

.modal-dialog {
    position: relative;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    margin: 30px auto;
    max-width: 90%;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

/* 模态框尺寸 */
.modal-sm {
    width: 400px;
}

.modal-md {
    width: 600px;
}

.modal-lg {
    width: 800px;
}

.modal-xl {
    width: 1000px;
}

/* 模态框头部 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: var(--light-hover);
    color: var(--danger-color);
}

/* 模态框内容 */
.modal-content {
    padding: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* 模态框底部 */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    gap: 12px;
}

/* 模态框类型 */
.modal-info .modal-header {
    border-bottom-color: var(--info-color);
}

.modal-info .modal-title {
    color: var(--info-color);
}

.modal-success .modal-header {
    border-bottom-color: var(--success-color);
}

.modal-success .modal-title {
    color: var(--success-color);
}

.modal-warning .modal-header {
    border-bottom-color: var(--warning-color);
}

.modal-warning .modal-title {
    color: var(--warning-color);
}

.modal-danger .modal-header {
    border-bottom-color: var(--danger-color);
}

.modal-danger .modal-title {
    color: var(--danger-color);
}

/* 模态框图标 */
.modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
    font-size: 28px;
}

.modal-info .modal-icon {
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--info-color);
}

.modal-success .modal-icon {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
}

.modal-warning .modal-icon {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--warning-color);
}

.modal-danger .modal-icon {
    background-color: rgba(255, 77, 79, 0.1);
    color: var(--danger-color);
}

/* 模态框居中 */
.modal-center.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-center .modal-dialog {
    margin: auto;
}

/* 全屏模态框 */
.modal-fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.modal-fullscreen .modal-content {
    max-height: calc(100vh - 120px);
}

/* 侧边模态框 */
.modal-side {
    margin: 0;
    height: 100%;
    border-radius: 0;
}

.modal-side-left {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%) !important;
    margin: 0 !important;
    height: 100%;
}

.modal-side-right {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%) !important;
    margin: 0 !important;
    height: 100%;
}

.modal.show .modal-side-left,
.modal.show .modal-side-right {
    transform: translateX(0) !important;
}

.modal-side-left.modal-sm,
.modal-side-right.modal-sm {
    width: 300px;
}

.modal-side-left.modal-md,
.modal-side-right.modal-md {
    width: 400px;
}

.modal-side-left.modal-lg,
.modal-side-right.modal-lg {
    width: 500px;
}

/* 可拖拽模态框 */
.modal-draggable .modal-header {
    cursor: move;
}

/* 模态框内容样式 */
.modal-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-text-center {
    text-align: center;
}

/*#endregion */


/*#region toolbar样式*/
.toolbar {
    background-color: var(--bg-navbar);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 0 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.toolbar .controlbox {
    display: flex;
    gap: 20px;
}

/*#endregion*/

/*#region 卡片样式a */
.cards-a-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
    padding-bottom: 20px;
    min-width: 1200px;
    justify-content: center;
    /* 添加居中布局 */
}

.card-a {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    min-width: 400px;
    max-width: 500px;
    flex: 1 0 400px;
}

/* 考虑到300px侧边栏，我们需要调整断点计算逻辑 */

/* 当主内容区可用宽度至少1200px时（屏幕宽度至少1500px），每行3个卡片 */
@media (min-width: 1500px) {
    .cards-a-container {
        justify-content: flex-start;
    }

    .card-a {
        flex: 1 0 calc(33.333% - 13.33px);
        min-width: 400px;
        max-width: calc(33.333% - 13.33px);
    }
}

/* 当主内容区可用宽度至少1400px时（屏幕宽度至少1700px），每行4个卡片 */
@media (min-width: 1700px) {
    .cards-a-container {
        justify-content: flex-start;
    }

    .card-a {
        flex: 1 0 calc(25% - 15px);
        min-width: 400px;
        max-width: calc(25% - 15px);
    }
}

/* 当主内容区可用宽度至少1600px时（屏幕宽度至少1900px），每行5个卡片 */
@media (min-width: 1900px) {
    .cards-a-container {
        justify-content: flex-start;
    }

    .card-a {
        flex: 1 0 calc(20% - 16px);
        min-width: 400px;
        max-width: calc(20% - 16px);
    }
}

/* 当主内容区可用宽度至少1800px时（屏幕宽度至少2100px），每行6个卡片 */
@media (min-width: 2100px) {
    .cards-a-container {
        justify-content: flex-start;
    }

    .card-a {
        flex: 1 0 calc(16.666% - 16.66px);
        min-width: 400px;
        max-width: calc(16.666% - 16.66px);
    }
}

/* 屏幕宽度在1300px-1499px之间（主内容区1000px-1199px），每行2个卡片 */
@media (min-width: 1300px) and (max-width: 1499px) {
    .cards-a-container {
        min-width: 1000px;
        justify-content: center;
    }

    .card-a {
        flex: 1 0 calc(50% - 10px);
        min-width: 400px;
        max-width: calc(50% - 10px);
    }
}

/* 屏幕宽度在1100px-1299px之间（主内容区800px-999px），每行2个卡片 */
@media (min-width: 1100px) and (max-width: 1299px) {
    .cards-a-container {
        min-width: 800px;
        justify-content: center;
    }

    .card-a {
        flex: 1 0 100%;
        min-width: 400px;
        max-width: 100%;
    }
}

/* 小屏幕设备，每行1个卡片，卡片最小400px */
@media (max-width: 1099px) {
    .cards-a-container {
        min-width: 400px;
        justify-content: center;
    }

    .card-a {
        flex: 1 0 100%;
        min-width: 400px;
        max-width: 100%;
    }
}

.card-a:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 通用角标 - 左上角 */
.card-a .lefttop-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}

/* 状态角标 - 右上角 */
.status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    color: #FFF;
}

.card-a .card-header {
    padding: 50px 20px 10px;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #edf2f7;
    position: relative;
    cursor: pointer;
}

.card-a .title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
}

.card-a .h-info {
    font-size: 1rem;
    color: #718096;
    font-family: monospace;
    background-color: #f1f5f9;
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
    word-break: break-all;
    margin-bottom: 10px;
}

.card-a .card-body {
    padding: 20px;
}

.card-a .b-info {
    font-size: 0.9rem;
}

.card-a .b-info-1 {
    color: #4a5568;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.card-a .b-info-2 {
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 右下角标识区域 */
.card-a .corner-indicators {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.card-a .trace-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-a .trace-enabled {
    background-color: #38b2ac;
}

.card-a .trace-disabled {
    background-color: #a0aec0;
}

.card-a .payment-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 移除原有的 padding，改用 flex 居中 */
    padding: 0;
}

.card-a .payment-daily {
    background-color: #4299e1;
}

.card-a .payment-monthly {
    background-color: #9f7aea;
}

.card-a .settle-method-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.card-a .settle-method-single {
    background-color: #38b2ac;
}

.card-a .settle-method-group {
    background-color: #ed8936;
}

/*#endregion*/

/*#region 状态角标通用颜色 */
/* 基础状态类 */
.status-active {
    background-color: var(--status-active);
    color: var(--status-text-light);
}

.status-inactive {
    background-color: var(--status-inactive);
    color: var(--status-text-light);
}

.status-pending {
    background-color: var(--status-pending);
    color: var(--status-text-light);
}

.status-warning {
    background-color: var(--status-warning);
    color: var(--status-text-light);
}

.status-danger {
    background-color: var(--status-danger);
    color: var(--status-text-light);
}

.status-info {
    background-color: var(--status-info);
    color: var(--status-text-light);
}

.status-success {
    background-color: var(--status-success);
    color: var(--status-text-light);
}

.status-primary {
    background-color: var(--status-primary);
    color: var(--status-text-light);
}

.status-secondary {
    background-color: var(--status-secondary);
    color: var(--status-text-light);
}

.status-processing {
    background-color: var(--status-processing);
    color: var(--status-text-light);
}

/* 业务状态类 */
.status-draft {
    background-color: var(--status-draft);
    color: var(--status-text-light);
}

.status-archive {
    background-color: var(--status-archive);
    color: var(--status-text-light);
}

.status-approved {
    background-color: var(--status-approved);
    color: var(--status-text-light);
}

.status-rejected {
    background-color: var(--status-rejected);
    color: var(--status-text-light);
}

.status-expired {
    background-color: var(--status-expired);
    color: var(--status-text-light);
}

.status-completed {
    background-color: var(--status-completed);
    color: var(--status-text-light);
}

.status-cancelled {
    background-color: var(--status-cancelled);
    color: var(--status-text-light);
}

.status-deleted {
    background-color: var(--status-deleted);
    color: var(--status-text-light);
}

.status-locked {
    background-color: var(--status-locked);
    color: var(--status-text-light);
}

/* 在线状态类 */
.status-online {
    background-color: var(--status-online);
    color: var(--status-text-light);
}

.status-offline {
    background-color: var(--status-offline);
    color: var(--status-text-light);
}

.status-busy {
    background-color: var(--status-busy);
    color: var(--status-text-light);
}

.status-vacation {
    background-color: var(--status-vacation);
    color: var(--status-text-light);
}

/* 特殊状态类 */
.status-new {
    background-color: var(--status-new);
}

.status-hot {
    background-color: var(--status-hot);
}

.status-recommend {
    background-color: var(--status-recommend);
}

.status-vip {
    background-color: var(--status-vip);
}

.status-trial {
    background-color: var(--status-trial);
}

.status-official {
    background-color: var(--status-official);
}

.status-unverified {
    background-color: var(--status-unverified);
}

.status-verified {
    background-color: var(--status-verified);
}

/* 客户类型状态类 */
.status-customer-0 {
    background-color: var(--cust-type-0);
}

.status-customer-1 {
    background-color: var(--cust-type-1);
}

.status-customer-2 {
    background-color: var(--cust-type-2);
}

.status-customer-3 {
    background-color: var(--cust-type-3);
}

.status-customer-4 {
    background-color: var(--cust-type-4);
}

.status-customer-5 {
    background-color: var(--cust-type-5);
}

.status-customer-6 {
    background-color: var(--cust-type-6);
}

.status-customer-7 {
    background-color: var(--cust-type-7);
}

.status-customer-8 {
    background-color: var(--cust-type-8);
}

.status-customer-9 {
    background-color: var(--cust-type-9);
}

.status-customer-10 {
    background-color: var(--cust-type-10);
}

.status-customer-11 {
    background-color: var(--cust-type-11);
}

/*#endregion */

/*#region width宽度 */
.w-all {
    width: 100%;
}

.w-70 {
    width: 70px;
}

.w-80 {
    width: 80px;
}

.w-100 {
    width: 100px;
}

.w-150 {
    width: 150px;
}

.w-180 {
    width: 180px;
}

/*#endregion*/

/*#region 消息框样式 */
/* 消息弹窗样式 */
.toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast-container.top-left {
    top: 20px;
    left: 20px;
}

.toast-container.top-right {
    top: 20px;
    right: 20px;
}

.toast-container.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container.bottom-left {
    bottom: 20px;
    left: 20px;
}

.toast-container.bottom-right {
    bottom: 20px;
    right: 20px;
}

.toast-container.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.toast {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-toast);
    min-width: 280px;
    max-width: 400px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.hide {
    opacity: 0;
    transform: translateY(-20px);
}

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 12px;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    margin-left: 12px;
}

.toast-close:hover {
    background-color: var(--light-hover);
    color: var(--danger-color);
}

/* 消息弹窗类型 */
.toast-info {
    border-left: 4px solid var(--info-color);
}

.toast-info .toast-icon {
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--info-color);
}

.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-success .toast-icon {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast-warning .toast-icon {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--warning-color);
}

.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast-error .toast-icon {
    background-color: rgba(255, 77, 79, 0.1);
    color: var(--danger-color);
}

/* 进度条动画 */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: currentColor;
    width: 100%;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 2s linear;
}

.toast.hide .toast-progress {
    transform: scaleX(0);
}

/*#endregion */

/* 开关按钮样式 */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    height: 42px;
    margin-top: 42px;
}

.switch-label {
    margin-bottom: 0;
    color: #475569;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}

.switch {
    position: relative;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    top: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #059669;
}

input:checked+.slider:before {
    transform: translateX(24px);
}

/*#region span文字颜色*/

.text-primary {
    color: #fb9678 !important
}

.text-secondary {
    color: #f8f9fa !important
}

.text-success {
    color: #00c292 !important
}

.text-info {
    color: #03a9f3 !important
}

.text-warning {
    color: #fec107 !important
}

.text-danger {
    color: #e46a76 !important
}

.text-light {
    color: #f8f9fa !important
}

.text-cyan {
    color: #01c0c8 !important
}

.text-dark {
    color: #343a40 !important
}

.text-purple {
    color: #ab8ce4 !important
}

.text-white {
    color: #fff !important
}

.text-body {
    color: #212529 !important
}

.text-muted {
    color: #6c757d !important
}


/*#endregion*/

/*#region 自定义下拉数据列表样式 */
.custom-datalist {
    position: relative;
    width: 100%;
}

.custom-input-container {
    position: relative;
}

.custom-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    font-size: 0.95rem;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    background-color: #fff;
    color: #2d3436;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.custom-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74,144,226,0.15);
}

.custom-input::placeholder {
    color: #b2bec3;
}

.input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b2bec3;
    font-size: 1rem;
    pointer-events: none;
}

.custom-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    min-width: 100%;
}

/* 商品搜索下拉：突破表格列宽限制 */
.item-goods-options {
    right: auto;
    min-width: 380px;
}

.custom-option {
    padding: 10px 14px;
    color: #2d3436;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: #e3f2fd;
}

.custom-option.selected {
    background-color: #f0f4ff;
    border-left: 4px solid #4a90e2;
    font-weight: 600;
}

.no-options {
    padding: 20px;
    text-align: center;
    color: #b2bec3;
    font-style: italic;
    font-size: 13px;
}

/*#endregion*/

/*#region order detail样式*/
.order-info {
    background-color: #f8fafc;
    border-radius: 10px;
    padding: 10px;
    border-left: 4px solid #3498db;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-title {
    color: #2c3e50;
    font-size: 1.3rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-address {
    color: #2c3e50;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-number {
    font-size: 0.85rem;
    color: #7f8c8d;
    font-weight: normal;
}

/*#endregion*/

/*#region ── 毛玻璃卡片 ── */
.yp-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.yp-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.88);
}

/* ── 卡片头部 ── */
.yp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.yp-customer-info h3 {
    color: #1a1a2e;
    font-size: 1.2rem;
    margin-bottom: 4px;
    font-weight: 600;
}

.yp-customer-info .yp-order-no {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #5a6a7e;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.yp-customer-info .yp-order-date {
    font-size: 0.85rem;
    color: #7a8a9e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.yp-order-date i {
    font-size: 0.8rem;
    color: #a0b0c0;
}

/* ── 状态徽章 ── */
.yp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.yp-status-badge.pending {
    background: linear-gradient(135deg, #ff9a56, #ff6b35);
    color: #fff;
}

.yp-status-badge.pushed {
    background: linear-gradient(135deg, #4cd964, #2ecc71);
    color: #fff;
}

/* ── 查看详情按钮 ── */
.yp-toggle-btn {
    width: 100%;
    padding: 12px 16px;
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.15);
    border-radius: 12px;
    color: #4a90e2;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
    margin: 4px 0;
    font-weight: 500;
}

.yp-toggle-btn:hover {
    background: rgba(74, 144, 226, 0.15);
    border-color: rgba(74, 144, 226, 0.3);
}

.yp-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.yp-toggle-btn:hover .toggle-icon {
    transform: translate(2px, -2px);
}

/* ── 卡片底部统计 ── */
.yp-card-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5a6a7e;
    font-size: 0.85rem;
}

.yp-card-footer .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.yp-card-footer .stat-item i {
    color: #a0b0c0;
    font-size: 0.75rem;
}

.yp-card-footer .stat-value {
    font-weight: 600;
    color: #1a1a2e;
}

/* ── 推送按钮 ── */
.yp-push-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #4a90e2, #357abd);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.yp-push-btn:hover {
    background: linear-gradient(135deg, #5a9eef, #4085cf);
    box-shadow: 0 4px 14px rgba(74, 144, 226, 0.3);
    transform: translateY(-1px);
}

.yp-push-btn:disabled {
    background: #b0bec5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.yp-push-btn.pushed {
    background: linear-gradient(135deg, #4cd964, #2ecc71);
    cursor: default;
}

.yp-push-btn.pushed:hover {
    box-shadow: none;
    transform: none;
}

/*#endregion */

/*#region card卡片布局*/

.ocard {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
    width: 50%;
    flex: 0 0 calc(49.8% - 10px);
    max-height: none;
}

.ocard:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/*#region card卡片角标*/
.ocard-top-left-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #3498db;
    color: white;
    padding: 6px 12px;
    border-radius: 16px 0 16px 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ocard-top-left-badge::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 12px 0 0;
    border-color: #2980b9 transparent transparent transparent;
}

.ocard-top-left-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 0 12px;
    border-color: transparent transparent transparent #2980b9;
}

.ocard-top-right-badge {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    padding: 6px 12px;
    border-radius: 0 16px 0 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ocard-top-right-badge::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 8px 0;
}

.ocard-top-right-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 8px 12px;
}

/* 紫色系列 */
.ocard-top-left-badge.purple,
.ocard-top-right-badge.purple {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.ocard-top-left-badge.purple::before,
.ocard-top-left-badge.purple::after,
.ocard-top-right-badge.purple::before,
.ocard-top-right-badge.purple::after {
    border-top-color: #8e44ad;
    border-left-color: #8e44ad;
}

.ocard-top-left-badge.purple-light,
.ocard-top-right-badge.purple-light {
    background: linear-gradient(135deg, #bb8fce, #9b59b6);
}

.ocard-top-left-badge.purple-light::before,
.ocard-top-left-badge.purple-light::after,
.ocard-top-right-badge.purple-light::before,
.ocard-top-right-badge.purple-light::after {
    border-top-color: #9b59b6;
    border-left-color: #9b59b6;
}

/* 绿色系列 */
.ocard-top-left-badge.green,
.ocard-top-right-badge.green {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.ocard-top-left-badge.green::before,
.ocard-top-left-badge.green::after,
.ocard-top-right-badge.green::before,
.ocard-top-right-badge.green::after {
    border-top-color: #27ae60;
    border-left-color: #27ae60;
}

.ocard-top-left-badge.green-light,
.ocard-top-right-badge.green-light {
    background: linear-gradient(135deg, #58d68d, #2ecc71);
}

.ocard-top-left-badge.green-light::before,
.ocard-top-left-badge.green-light::after,
.ocard-top-right-badge.green-light::before,
.ocard-top-right-badge.green-light::after {
    border-top-color: #2ecc71;
    border-left-color: #2ecc71;
}

/* 蓝色系列 */
.ocard-top-left-badge.blue,
.ocard-top-right-badge.blue {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.ocard-top-left-badge.blue::before,
.ocard-top-left-badge.blue::after,
.ocard-top-right-badge.blue::before,
.ocard-top-right-badge.blue::after {
    border-top-color: #2980b9;
    border-left-color: #2980b9;
}

.ocard-top-left-badge.blue-light,
.ocard-top-right-badge.blue-light {
    background: linear-gradient(135deg, #5dade2, #3498db);
}

.ocard-top-left-badge.blue-light::before,
.ocard-top-left-badge.blue-light::after,
.ocard-top-right-badge.blue-light::before,
.ocard-top-right-badge.blue-light::after {
    border-top-color: #3498db;
    border-left-color: #3498db;
}

/* 红色系列 */
.ocard-top-left-badge.red,
.ocard-top-right-badge.red {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.ocard-top-left-badge.red::before,
.ocard-top-left-badge.red::after,
.ocard-top-right-badge.red::before,
.ocard-top-right-badge.red::after {
    border-top-color: #c0392b;
    border-left-color: #c0392b;
}

.ocard-top-left-badge.red-light,
.ocard-top-right-badge.red-light {
    background: linear-gradient(135deg, #ec7063, #e74c3c);
}

.ocard-top-left-badge.red-light::before,
.ocard-top-left-badge.red-light::after,
.ocard-top-right-badge.red-light::before,
.ocard-top-right-badge.red-light::after {
    border-top-color: #e74c3c;
    border-left-color: #e74c3c;
}

/* 青色系列 */
.ocard-top-left-badge.teal,
.ocard-top-right-badge.teal {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}

.ocard-top-left-badge.teal::before,
.ocard-top-left-badge.teal::after,
.ocard-top-right-badge.teal::before,
.ocard-top-right-badge.teal::after {
    border-top-color: #16a085;
    border-left-color: #16a085;
}

.ocard-top-left-badge.teal-light,
.ocard-top-right-badge.teal-light {
    background: linear-gradient(135deg, #48c9b0, #1abc9c);
}

.ocard-top-left-badge.teal-light::before,
.ocard-top-left-badge.teal-light::after,
.ocard-top-right-badge.teal-light::before,
.ocard-top-right-badge.teal-light::after {
    border-top-color: #1abc9c;
    border-left-color: #1abc9c;
}

/* 橙色系列 */
.ocard-top-left-badge.orange,
.ocard-top-right-badge.orange {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

.ocard-top-left-badge.orange::before,
.ocard-top-left-badge.orange::after,
.ocard-top-right-badge.orange::before,
.ocard-top-right-badge.orange::after {
    border-top-color: #d35400;
    border-left-color: #d35400;
}

.ocard-top-left-badge.orange-light,
.ocard-top-right-badge.orange-light {
    background: linear-gradient(135deg, #eb984e, #e67e22);
}

.ocard-top-left-badge.orange-light::before,
.ocard-top-left-badge.orange-light::after,
.ocard-top-right-badge.orange-light::before,
.ocard-top-right-badge.orange-light::after {
    border-top-color: #e67e22;
    border-left-color: #e67e22;
}

/* 粉色系列 */
.ocard-top-left-badge.pink,
.ocard-top-right-badge.pink {
    background: linear-gradient(135deg, #e84393, #d63031);
}

.ocard-top-left-badge.pink::before,
.ocard-top-left-badge.pink::after,
.ocard-top-right-badge.pink::before,
.ocard-top-right-badge.pink::after {
    border-top-color: #d63031;
    border-left-color: #d63031;
}

.ocard-top-left-badge.pink-light,
.ocard-top-right-badge.pink-light {
    background: linear-gradient(135deg, #fd79a8, #e84393);
}

.ocard-top-left-badge.pink-light::before,
.ocard-top-left-badge.pink-light::after,
.ocard-top-right-badge.pink-light::before,
.ocard-top-right-badge.pink-light::after {
    border-top-color: #e84393;
    border-left-color: #e84393;
}

/* 灰色系列 */
.ocard-top-left-badge.gray,
.ocard-top-right-badge.gray {
    background: linear-gradient(135deg, #7f8c8d, #34495e);
}

.ocard-top-left-badge.gray::before,
.ocard-top-left-badge.gray::after,
.ocard-top-right-badge.gray::before,
.ocard-top-right-badge.gray::after {
    border-top-color: #34495e;
    border-left-color: #34495e;
}

.ocard-top-left-badge.gray-light,
.ocard-top-right-badge.gray-light {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.ocard-top-left-badge.gray-light::before,
.ocard-top-left-badge.gray-light::after,
.ocard-top-right-badge.gray-light::before,
.ocard-top-right-badge.gray-light::after {
    border-top-color: #7f8c8d;
    border-left-color: #7f8c8d;
}

/* 金色系列 */
.ocard-top-left-badge.gold,
.ocard-top-right-badge.gold {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.ocard-top-left-badge.gold::before,
.ocard-top-left-badge.gold::after,
.ocard-top-right-badge.gold::before,
.ocard-top-right-badge.gold::after {
    border-top-color: #f39c12;
    border-left-color: #f39c12;
}

.ocard-top-left-badge.gold-light,
.ocard-top-right-badge.gold-light {
    background: linear-gradient(135deg, #f7dc6f, #f1c40f);
}

.ocard-top-left-badge.gold-light::before,
.ocard-top-left-badge.gold-light::after,
.ocard-top-right-badge.gold-light::before,
.ocard-top-right-badge.gold-light::after {
    border-top-color: #f1c40f;
    border-left-color: #f1c40f;
}

/* 采购订单扩展颜色 - success/info/warning/danger */
.ocard-top-left-badge.success,
.ocard-top-right-badge.success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.ocard-top-left-badge.success::before,
.ocard-top-left-badge.success::after,
.ocard-top-right-badge.success::before,
.ocard-top-right-badge.success::after {
    border-top-color: #27ae60;
    border-left-color: #27ae60;
}

.ocard-top-left-badge.info,
.ocard-top-right-badge.info {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.ocard-top-left-badge.info::before,
.ocard-top-left-badge.info::after,
.ocard-top-right-badge.info::before,
.ocard-top-right-badge.info::after {
    border-top-color: #2980b9;
    border-left-color: #2980b9;
}

.ocard-top-left-badge.warning,
.ocard-top-right-badge.warning {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.ocard-top-left-badge.warning::before,
.ocard-top-left-badge.warning::after,
.ocard-top-right-badge.warning::before,
.ocard-top-right-badge.warning::after {
    border-top-color: #f39c12;
    border-left-color: #f39c12;
}

.ocard-top-left-badge.danger,
.ocard-top-right-badge.danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.ocard-top-left-badge.danger::before,
.ocard-top-left-badge.danger::after,
.ocard-top-right-badge.danger::before,
.ocard-top-right-badge.danger::after {
    border-top-color: #c0392b;
    border-left-color: #c0392b;
}

/*#endregion */



.ocard-header {
    padding: 20px 25px 5px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.ocard-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
}

.ocard-info-title {
    padding-left: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #2c3e50;
    letter-spacing: 1px;
}

.order-info-no {
    font-size: 0.85rem;
    color: #95a5a6;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 20px;
}

.ocard-body {
    padding: 15px 25px 0 25px;
}

.ocard-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ocard-detail-label {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.ocard-detail-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
}

.ocard-detail-status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ocard-detail-status-pending {
    background: #fff3cd;
    color: #856404;
}

.ocard-detail-status-processing {
    background: #d1ecf1;
    color: #0c5460;
}

.ocard-detail-status-shipped {
    background: #d4edda;
    color: #155724;
}

.ocard-detail-status-delivered {
    background: #d1f2eb;
    color: #0e6251;
}


.ocard-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
}

.ocard-info-item {
    text-align: center;
}

.ocard-info-label {
    font-size: 0.85rem;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.ocard-info-value {
    font-size: 1rem;
    font-weight: 600;
}

.ocard-info-icon {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.ocard-footer {
    padding: 10px 25px;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ocard-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-container {
    position: relative;
}

.menu-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #7f8c8d;
}

.menu-toggle:hover {
    background: #f5f7fa;
    border-color: #3498db;
    color: #3498db;
}

.status-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 8px 0;
    margin-bottom: 8px;
    z-index: 10;
    display: none;
    border: 1px solid #e0e0e0;
}

.status-menu-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #2c3e50;
    text-decoration: none;
}

.status-menu-item:hover {
    background: #f8f9fa;
}

.status-menu.active {
    display: block;
}

.menu-toggle .dot {
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    margin: 1px 0;
}

/*#endregion */

/* ═══════════════════════════════════════════
   Product Page — Left Tree Panel (pi-left)
   ═══════════════════════════════════════════ */
:root {
    --pi-bg: #fafaf8; --pi-surface: #fff; --pi-border: #e8e5df;
    --pi-border-light: #f0ede8; --pi-text: #1c1917;
    --pi-text-secondary: #5c5650; --pi-text-tertiary: #8b857c;
    --pi-gold: #b8860b; --pi-gold-light: #fdf3d0;
    --pi-gold-border: #f0d78c;
    --pi-emerald: #0d9488; --pi-emerald-light: #e6f7f5;
    --pi-red: #dc4a3f; --pi-red-light: #fef2f1;
    --pi-blue: #3b82c4; --pi-blue-light: #eff6fb;
    --pi-amber: #d97706;
    --pi-radius: 14px; --pi-radius-sm: 10px; --pi-radius-xs: 8px;
    --pi-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
    --pi-ease: cubic-bezier(.2,0,0,1);
    --pi-left-width: 280px;
}

.pg-product-page { display: flex; width: 100%; height: calc(100vh - 90px); overflow: hidden; background: var(--pi-bg); }

/* ── Left Tree ── */
.pi-left { width: var(--pi-left-width); flex-shrink: 0; background: var(--pi-surface); border-right: 1px solid var(--pi-border); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.pi-left-header { padding: 20px 18px 12px; border-bottom: 1px solid var(--pi-border-light); flex-shrink: 0; }
.pi-left-title { font-size: 11px; font-weight: 700; color: var(--pi-text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.pi-search { width: 100%; height: 38px; padding: 0 14px 0 36px; border: 1.5px solid var(--pi-border); border-radius: 10px; font-size: 13px; color: var(--pi-text); background: var(--pi-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none'%3E%3Cpath d='M5.5 10A4.5 4.5 0 105.5 1a4.5 4.5 0 000 9zM12 12l-2.5-2.5' stroke='%238b857c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12px center no-repeat; outline: none; transition: .15s; box-sizing: border-box; }
.pi-search:focus { border-color: var(--pi-gold); box-shadow: 0 0 0 3px rgba(184,134,11,.12); background-color: var(--pi-surface); }
.pi-search::placeholder { color: var(--pi-text-tertiary); }
.pi-tree { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.pi-tree::-webkit-scrollbar { width: 4px; }
.pi-tree::-webkit-scrollbar-thumb { background: var(--pi-border); border-radius: 4px; }

.pi-tree-all { margin-bottom: 2px; }
.pi-tree-all-item { display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; gap: 10px; border: 1px solid transparent; transition: .15s; }
.pi-tree-all-item:hover { background: #faf9f7; border-color: var(--pi-border-light); }
.pi-tree-all-item.active { background: var(--pi-gold-light); border-color: var(--pi-gold-border); }
.pi-tree-all-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--pi-text); }
.pi-tree-all-badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #f4f2ee; color: var(--pi-text-tertiary); }
.pi-tree-all-item.active .pi-tree-all-badge { background: var(--pi-gold); color: #fff; }

.pi-group { margin-bottom: 2px; }
.pi-group-hd { display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; gap: 10px; border: 1px solid transparent; transition: .15s; }
.pi-group-hd:hover { background: #faf9f7; border-color: var(--pi-border-light); }
.pi-group-hd.active { background: var(--pi-gold-light); border-color: var(--pi-gold-border); }
.pi-group-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--pi-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-group-badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #f4f2ee; color: var(--pi-text-tertiary); min-width: 28px; text-align: center; }
.pi-group-hd.active .pi-group-badge { background: var(--pi-gold); color: #fff; }

/* ── Pi Panel Right ── */
.pi-right { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 20px 24px; }
.pi-right-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
.pi-right-title { font-size: 1.05rem; font-weight: 750; color: var(--pi-text); letter-spacing: -.02em; }
.pi-right-subtitle { font-size: 11px; color: var(--pi-text-tertiary); margin-top: 2px; }
.pi-right-actions { display: flex; gap: 8px; align-items: center; }
.pi-btn { height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .15s; white-space: nowrap; }
.pi-btn-primary { background: var(--pi-gold); color: #fff; box-shadow: 0 1px 3px rgba(184,134,11,.25); }
.pi-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pi-btn-ghost { background: var(--pi-surface); color: var(--pi-text-secondary); border: 1px solid var(--pi-border); }
.pi-btn-ghost:hover { background: #faf9f7; border-color: #d4cfc5; }
.pi-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
.pi-search-bar { display: flex; align-items: center; height: 38px; padding: 0 10px; border: 1.5px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); flex: 1; max-width: 380px; gap: 8px; transition: .15s; }
.pi-search-bar:focus-within { border-color: var(--pi-gold); box-shadow: 0 0 0 3px rgba(184,134,11,.12); }
.pi-search-bar svg { flex-shrink: 0; color: var(--pi-text-tertiary); }
.pi-search-bar input { flex: 1; border: none; outline: none; font-size: 13px; color: var(--pi-text); background: transparent; }
.pi-search-bar input::placeholder { color: var(--pi-text-tertiary); }
.pi-search-clear { border: none; background: none; cursor: pointer; color: var(--pi-text-tertiary); font-size: 14px; padding: 0; line-height: 1; display: none; }
.pi-search-clear:hover { color: var(--pi-red); }
.pi-results-count { font-size: 11px; color: var(--pi-text-tertiary); margin-bottom: 8px; flex-shrink: 0; }

/* Pi Card Styles */
.pi-card-wrap { flex: 1; overflow-y: auto; padding-right: 4px; }
.pi-card-wrap::-webkit-scrollbar { width: 4px; }
.pi-card-wrap::-webkit-scrollbar-thumb { background: var(--pi-border); border-radius: 4px; }
.pi-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.pi-card { background: var(--pi-surface); border: 1.5px solid var(--pi-border); border-radius: var(--pi-radius); overflow: hidden; transition: .2s var(--pi-ease); display: flex; }
.pi-card:hover { border-color: #d4cfc5; box-shadow: var(--pi-shadow); }
.pi-card-img { width: 100px; height: 100px; flex-shrink: 0; background: #f4f2ee; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 12px; cursor: pointer; }
.pi-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pi-card-img .pi-img-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #e8e5df; display: flex; align-items: center; justify-content: center; }
.pi-card-img .pi-img-placeholder svg { width: 18px; height: 18px; color: var(--pi-text-tertiary); }
.pi-card-img-placeholder { cursor: default; }
.pi-card-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pi-card-name { font-size: 1rem; font-weight: 600; color: var(--pi-text); letter-spacing: -.01em; line-height: 1.3; }
.pi-card-name .pi-weight { font-weight: 800; }
.pi-weight-5 { color: var(--pi-blue); }
.pi-weight-10 { color: var(--pi-emerald); }
.pi-weight-25 { color: var(--pi-amber); }
.pi-card-name .pi-outside-tag { display: inline-block; font-size: 11px; color: var(--pi-emerald); background: var(--pi-emerald-light); padding: 1px 6px; border-radius: 4px; font-weight: 600; margin-left: 5px; vertical-align: middle; }
.pi-card-short { font-size: 13px; color: var(--pi-text-tertiary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--pi-text-secondary); }
.pi-card-meta span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pi-card-meta .pi-code { font-family: 'SF Mono','Courier New',monospace; font-size: .82rem; }
.pi-card-meta .pi-barcode-icon { color: var(--pi-text-tertiary); flex-shrink: 0; }
.pi-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--pi-border-light); }
.pi-card-supplier { display: inline-flex; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--pi-gold-light); color: var(--pi-gold); border: 1px solid var(--pi-gold-border); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pi-card-actions .btn-row { width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: .12s; }
.btn-row-edit { background: var(--pi-gold-light); color: var(--pi-gold); }
.btn-row-edit:hover { background: var(--pi-gold); color: #fff; }
.btn-row-del { background: var(--pi-red-light); color: var(--pi-red); }
.btn-row-del:hover { background: #fecaca; }

/* Pi Empty / Modal */
.pi-empty { padding: 80px 0; text-align: center; grid-column: 1/-1; }
.pi-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--pi-bg); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pi-border); }
.pi-empty-icon svg { width: 26px; height: 26px; color: var(--pi-text-tertiary); }
.pi-empty h4 { font-size: 15px; font-weight: 700; color: var(--pi-text); margin: 0 0 6px; }
.pi-empty p { font-size: 13px; color: var(--pi-text-tertiary); margin: 0; }
.pi-upload-btn { display: inline-block; padding: 5px 16px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--pi-gold-light); color: var(--pi-gold); border: 1px solid var(--pi-gold-border); cursor: pointer; transition: .12s; }
.pi-upload-btn:hover { background: var(--pi-gold); color: #fff; }
.pi-upload-btn.uploading { opacity: .5; pointer-events: none; }
.pi-upload-clear { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--pi-red); color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.pi-preview-img { width: 100%; height: 160px; border-radius: var(--pi-radius-sm); border: 1px solid var(--pi-border); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: var(--pi-bg); margin-top: 10px; }
.pi-preview-img img { width: 100%; height: 100%; object-fit: contain; }

/* Pi Lightbox */
.pi-lightbox { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.88); backdrop-filter: blur(10px); align-items: center; justify-content: center; flex-direction: column; }
.pi-lightbox.show { display: flex; }
.pi-lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.5); object-fit: contain; transition: transform .25s var(--pi-ease); }
.pi-lightbox-close { position: absolute; top: 20px; right: 26px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; z-index: 10; }
.pi-lightbox-close:hover { background: rgba(255,255,255,.3); transform: scale(1.1); }
.pi-lightbox-caption { color: #fff; font-size: 13px; margin-top: 16px; opacity: .8; text-align: center; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pi Responsive */
@media (max-width: 1400px) { .pi-card-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }
@media (max-width: 900px) { .pi-card-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .pg-product-page { flex-direction: column; } .pi-left { width: 100%; height: auto; max-height: 200px; } .pi-card-grid { grid-template-columns: 1fr; } }

/* 全局：隐藏 number input 的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }