:root {
    --app-min-width: 1905px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    /* 防止整页滚动 */
}

html {
    /* 强制显示垂直滚动条，防止页面切换时布局跳动 */
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    font-size: 14px;
    position: relative;

    /* 基于Bootstrap的自定义覆盖与实用扩展层 */
}

body:not(.login-page) {
    min-width: 0;
}

body:not(.login-page) .main-navbar {
    width: max(100vw, var(--app-min-width));
    min-width: var(--app-min-width);
    max-width: none;
}

body:not(.login-page) .main-navbar>.container-fluid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body:not(.login-page)>main.container-fluid {
    width: 100%;
    overflow: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    /* 保留滚动行为，但隐藏主内容区的浏览器滚动条。 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body:not(.login-page)>main.container-fluid::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.back-to-top-button {
    align-items: center;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    background: rgba(107, 114, 128, 0.5);
    border: 0;
    border-radius: 12px;
    bottom: 12px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    height: 42px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    right: 12px;
    transform: translateY(10px);
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    width: 42px;
    z-index: 1000;
}

.back-to-top-button.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top-button:hover,
.back-to-top-button:focus-visible {
    background: rgba(85, 91, 102, 0.55);
    border-color: transparent;
    box-shadow: none;
    outline: none;
    transform: translateY(-1px);
}

html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.container-fluid,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.app-container,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.products-table-container,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.row,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.card,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.table-responsive,
html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>form {
    width: var(--app-min-width);
    min-width: var(--app-min-width);
    max-width: var(--app-min-width);
}

html.embed-image-bank-mode,
html.embed-image-bank-mode body,
html.embed-image-bank-mode body>main.container-fluid,
html.embed-image-bank-mode body>main.container-fluid>.app-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body:not(.login-page) .main-navbar.navbar-expand-lg {
    flex-wrap: nowrap;
}

body:not(.login-page) .main-navbar .navbar-toggler {
    display: none;
}

body:not(.login-page) .main-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

body:not(.login-page) .main-navbar .navbar-nav {
    flex-direction: row;
}

body:not(.login-page) .app-container>.d-flex,
body:not(.login-page) .app-container>.row,
body:not(.login-page) .pagination-container,
body:not(.login-page) .btn-group,
body:not(.login-page) .page-jump-container {
    flex-wrap: nowrap !important;
}

body:not(.login-page) .app-container>.d-flex>*,
body:not(.login-page) .app-container>.row>*,
body:not(.login-page) .pagination-container>*,
body:not(.login-page) .btn-group>*,
body:not(.login-page) .page-jump-container>* {
    flex-shrink: 0;
}

body:not(.login-page) .app-container>.d-flex,
body:not(.login-page) .pagination-container,
body:not(.login-page) .page-jump-container {
    white-space: nowrap;
}

/* =========================================================
   Fixed desktop workspace: keep Bootstrap grid at desktop
   proportions even when the browser viewport is narrow.
   The page itself scrolls horizontally; inner forms/cards should
   not collapse into mobile one-column layouts.
   ========================================================= */
body:not(.login-page) .app-container .row>[class*="col-"] {
    flex-shrink: 0;
}

body:not(.login-page) .app-container .col-auto,
body:not(.login-page) .app-container .col-sm-auto,
body:not(.login-page) .app-container .col-md-auto,
body:not(.login-page) .app-container .col-lg-auto,
body:not(.login-page) .app-container .col-xl-auto,
body:not(.login-page) .app-container .col-xxl-auto {
    flex: 0 0 auto !important;
    width: auto !important;
}

body:not(.login-page) .app-container .col-sm-6,
body:not(.login-page) .app-container .col-md-6,
body:not(.login-page) .app-container .col-lg-6,
body:not(.login-page) .app-container .col-xl-6,
body:not(.login-page) .app-container .col-xxl-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
}

body:not(.login-page) .app-container .col-md-2,
body:not(.login-page) .app-container .col-lg-2,
body:not(.login-page) .app-container .col-xl-2,
body:not(.login-page) .app-container .col-xxl-2 {
    flex: 0 0 auto !important;
    width: 16.66666667% !important;
}

body:not(.login-page) .app-container .col-md-3,
body:not(.login-page) .app-container .col-lg-3,
body:not(.login-page) .app-container .col-xl-3,
body:not(.login-page) .app-container .col-xxl-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
}

body:not(.login-page) .app-container .col-md-4,
body:not(.login-page) .app-container .col-lg-4,
body:not(.login-page) .app-container .col-xl-4,
body:not(.login-page) .app-container .col-xxl-4 {
    flex: 0 0 auto !important;
    width: 33.33333333% !important;
}

body:not(.login-page) .app-container .col-md-5,
body:not(.login-page) .app-container .col-lg-5,
body:not(.login-page) .app-container .col-xl-5,
body:not(.login-page) .app-container .col-xxl-5 {
    flex: 0 0 auto !important;
    width: 41.66666667% !important;
}

body:not(.login-page) .app-container .col-md-7,
body:not(.login-page) .app-container .col-lg-7,
body:not(.login-page) .app-container .col-xl-7,
body:not(.login-page) .app-container .col-xxl-7 {
    flex: 0 0 auto !important;
    width: 58.33333333% !important;
}

body:not(.login-page) .app-container .col-md-8,
body:not(.login-page) .app-container .col-lg-8,
body:not(.login-page) .app-container .col-xl-8,
body:not(.login-page) .app-container .col-xxl-8 {
    flex: 0 0 auto !important;
    width: 66.66666667% !important;
}

body:not(.login-page) .app-container .col-md-9,
body:not(.login-page) .app-container .col-lg-9,
body:not(.login-page) .app-container .col-xl-9,
body:not(.login-page) .app-container .col-xxl-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
}

body:not(.login-page) .app-container .col-md-10,
body:not(.login-page) .app-container .col-lg-10,
body:not(.login-page) .app-container .col-xl-10,
body:not(.login-page) .app-container .col-xxl-10 {
    flex: 0 0 auto !important;
    width: 83.33333333% !important;
}

body:not(.login-page) .app-container .col-md-12,
body:not(.login-page) .app-container .col-lg-12,
body:not(.login-page) .app-container .col-xl-12,
body:not(.login-page) .app-container .col-xxl-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
}

body:not(.login-page) .transactions-page .calendar-main-layout {
    grid-template-columns: 132px minmax(0, 1fr) !important;
}

body:not(.login-page) .transactions-page .dual-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:not(.login-page) .transactions-page .date-range-dropdown {
    min-width: 760px !important;
}

/* =========================================================
   顶部导航：商品分组下拉（统一维护）
   - 桌面端 hover 展开
   - 使用 10px 下移 + 12px 悬浮桥接区，避免移入菜单时闪退
   ========================================================= */
.navbar .nav-item.dropdown {
    position: relative;
}

@media (min-width: 992px) {
    .navbar .nav-item.dropdown::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 12px;
    }

    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 9px;
        animation: navbarProductsDropdownIn .16s ease-out;
    }
}

@keyframes navbarProductsDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar .products-dropdown {
    min-width: 168px;
    margin-top: 9px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    background-color: rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.navbar .products-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 10px;
    color: var(--label-primary);
    font-size: 14px;
    padding: 8px 12px;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .products-dropdown .dropdown-item i {
    width: 14px;
    text-align: center;
    opacity: .9;
}

.navbar .products-dropdown .dropdown-item:hover,
.navbar .products-dropdown .dropdown-item:focus {
    color: var(--accent-strong);
    background-color: rgba(0, 122, 255, 0.08);
}

.navbar .products-dropdown .dropdown-item.active {
    color: var(--accent-strong);
    background-color: rgba(0, 122, 255, 0.12);
}

/* 标题字体大小统一规则 */
h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

/* 通用标题类 */
.h4 {
    font-size: 16px;
}

.h5 {
    font-size: 14px;
}

.h6 {
    font-size: 12px;
}

/* 小文本 */
small,
.small {
    font-size: 12px;
}

/* 标签 */
label {
    font-size: 14px;
}

/* 复用的胶囊操作按钮 */
.btn.pill-action-btn {
    padding: 3px 12px;
    border: 1px solid #007BFF;
    margin: 0 2px 0 0;
    background-color: white;
    color: #007BFF;
    border-radius: 15px;
    font-weight: normal;
    font-size: 12px;
}

.btn.pill-action-btn:hover:not(:disabled) {
    background-color: #007BFF;
    color: white;
}

/* 未选中时（禁用）：保持原色不变淡 */
.btn.pill-action-btn:disabled {
    opacity: 1;
    color: #007BFF;
    background-color: white;
    cursor: not-allowed;
}

/* 选择栏容器 */
.selection-bar-row {
    margin-bottom: 5px;
}

/* 搜索输入框统一宽度 */
.search-input {
    min-width: 120px;
}

.search-input.search-input-wide {
    min-width: 150px;
}

/* 空状态和错误图标 */
.empty-state-icon {
    font-size: 3rem;
}

.empty-state-icon.text-muted {
    color: #ccc !important;
}

/* 按钮文本 */
button,
.btn {
    font-size: 14px;
}

.btn-sm {
    font-size: 12px;
}

/* 表单元素 */
.form-control,
.form-select {
    font-size: 14px;
}

.form-control-sm,
.form-select-sm {
    font-size: 12px;
}

/* 商品入库弹窗整体高度和滚动条样式 */
#inboundModal .modal-content {
    max-height: 880px;
    /* 改为最大高度，内容少时高度自适应，内容多时出现滚动条 */
}

#inboundModal .modal-body {
    overflow-y: auto;
}

/* 商品入库弹窗：规格输入框聚焦时移除蓝色光圈 */
#inboundModal #selectedProductsEditor .form-control:focus,
#inboundModal #selectedProductsEditor .form-control:focus-visible {
    box-shadow: none;
    border-color: var(--bs-primary);
    outline: none;
}

#inboundModal #selectedProductsEditor .form-control {
    width: 170px;
    max-width: 100%;
}

#inboundModal #selectedProductsEditor .row.g-2 {
    justify-content: flex-start;
    row-gap: 0.5rem !important;
    /* 缩小行与行之间的垂直间距 */
}

/* 缩短表单标签底部间距，使整体更紧凑 */
#inboundModal #selectedProductsEditor .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    #inboundModal #selectedProductsEditor .row.g-2>[class*="col-"] {
        flex: 0 0 185px;
        /* 将原 220px 缩短为 185px，减少输入框之间的横向空白 */
        max-width: 185px;
    }
}

/* 选择商品弹窗：商品分组悬浮下拉 */
#inboundProductPickerModal .modal-content {
    height: 880px;
}

#inboundProductPickerModal .modal-body {
    flex: 1 1 auto;
    overflow: hidden;
}

#inboundProductPickerModal .modal-header {
    align-items: center;
}

#inboundProductPickerModal .picker-header-group {
    min-width: 0;
}

#inboundProductPickerModal .inbound-group-hover-dropdown {
    position: relative;
    width: fit-content;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
}

#inboundProductPickerModal .inbound-picker-model-filter {
    flex: 0 0 var(--inbound-picker-model-filter-width, 156px);
    width: var(--inbound-picker-model-filter-width, 156px);
}

#inboundProductPickerModal .inbound-picker-model-filter .enterprise-inline-filter-control {
    min-height: 38px;
}

#inboundProductPickerModal .inbound-picker-model-filter .dropdown-options {
    margin-top: 4px;
    z-index: 6;
}

#inboundProductPickerModal .inbound-group-hover-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3px;
}

#inboundProductPickerModal .inbound-group-trigger {
    width: fit-content;
    height: 41px;
    min-height: 41px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: default;
    white-space: nowrap;
}

#inboundProductPickerModal .inbound-group-trigger i {
    transition: transform 0.18s ease;
}

#inboundProductPickerModal .inbound-group-menu {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    width: max-content;
    min-width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
    z-index: 2000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

#inboundProductPickerModal .inbound-group-option {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    padding: 8px 12px;
    line-height: 1.4;
    white-space: nowrap;
}

#inboundModal #selectedProductsEditor .form-control.is-invalid,
#inboundModal #selectedProductsEditor .form-control.is-invalid:focus,
#inboundModal #selectedProductsEditor .form-control.is-invalid:focus-visible {
    border-color: #dc3545;
    box-shadow: none;
}

/* 商品入库弹窗：只读规格字段显示为灰底标签样式 */
#inboundModal #selectedProductsEditor .form-control[readonly],
#inboundModal #selectedProductsEditor .form-control[readonly]:focus,
#inboundModal #selectedProductsEditor .form-control[readonly]:focus-visible {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
    box-shadow: none;
    cursor: default;
}

/* 商品入库弹窗：价格输入框隐藏上下调整箭头 */
#inboundModal #selectedProductsEditor .js-price::-webkit-outer-spin-button,
#inboundModal #selectedProductsEditor .js-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#inboundModal #selectedProductsEditor .js-net-weight::-webkit-outer-spin-button,
#inboundModal #selectedProductsEditor .js-net-weight::-webkit-inner-spin-button,
#inboundModal #selectedProductsEditor .js-inbound-qty::-webkit-outer-spin-button,
#inboundModal #selectedProductsEditor .js-inbound-qty::-webkit-inner-spin-button,
#inboundModal #selectedProductsEditor .js-pieces-per-box::-webkit-outer-spin-button,
#inboundModal #selectedProductsEditor .js-pieces-per-box::-webkit-inner-spin-button,
#inboundModal #selectedProductsEditor .js-box-weight::-webkit-outer-spin-button,
#inboundModal #selectedProductsEditor .js-box-weight::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#inboundModal #selectedProductsEditor .js-price[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

#inboundModal #selectedProductsEditor .js-net-weight[type="number"],
#inboundModal #selectedProductsEditor .js-inbound-qty[type="number"],
#inboundModal #selectedProductsEditor .js-pieces-per-box[type="number"],
#inboundModal #selectedProductsEditor .js-box-weight[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* 紧凑型表格变体辅助工具 */
.table-xs th,
.table-xs td {
    padding: .4rem .6rem;
}

/* 库存数量低警告 */
.qty-low {
    color: #e67e22;
    font-weight: 500;
}

.stat-card h6 {
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 .25rem;
}

.stat-card .value {
    font-size: 1.25rem;
    font-weight: 600;
}

/* 字段集样式（Bootstrap 不会为这些元素添加样式） */
fieldset {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1rem .75rem;
}

legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
}

/* 使用 Bootstrap 5.3 的 data-bs-theme 进行深色主题调整 */
[data-bs-theme='dark'] fieldset {
    border-color: #444;
}

[data-bs-theme='dark'] .stat-card {
    background: #2b2d33;
}

[data-bs-theme='dark'] .table-hover tbody tr:hover {
    --bs-table-bg: #2f3239;
}

/* 自定义小尺寸款式的模态窗口调整（如需） */
.modal-header .btn-close {
    filter: none;
}

/* 表单验证细微高亮 */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #28a745;
}

/* Product editor validation is rendered by React, including autocomplete
 * inputs that are not browser-required. Keep its error state above the page
 * theme's later form-control rules. */
#reactProductForm .form-control.is-invalid,
#reactProductForm .form-control.is-invalid:focus,
#reactProductForm .form-control.is-invalid:focus-visible {
    border-color: #dc3545 !important;
    background-color: #fffafa;
    box-shadow: 0 0 0 0.16rem rgba(220, 53, 69, 0.16);
}

/* 滚动区域 */
.scroll-area {
    max-height: 620px;
    overflow: auto;
}

/* 特定容器用于将产品表格宽度限制为1700像素并居中显示 */
.products-table-container {
    width: var(--app-min-width);
    max-width: var(--app-min-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.75rem;
    /* 小幅水平填充以留出呼吸空间 */
}

/* 确保在窄视口下内嵌表格可水平滚动 */
.products-table-container .table-responsive {
    overflow-x: auto;
}

/* 商品管理表格字体大小控制 */
.products-table-container .table {
    font-size: 12px;
    /* 主要内容：12px */
}

/* 搜索面板字体大小控制 */
.search-filters-card {
    font-size: 14px;
}

/* Hide native number input spinners for product add/edit forms */
/* Targets the legacy and React product add/edit forms. */
#productForm input[type="number"]::-webkit-outer-spin-button,
#productForm input[type="number"]::-webkit-inner-spin-button,
#reactProductForm input[type="number"]::-webkit-outer-spin-button,
#reactProductForm input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#productForm input[type="number"],
#reactProductForm input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Firefox */
}

/* React 商品表单的计算/继承字段需保持明显、统一的禁用状态。 */
#reactProductForm .form-control:disabled {
    cursor: not-allowed;
    opacity: 1;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
    border-color: #d7dce3;
    background-color: #f1f3f5 !important;
}

.search-filters-card .form-control-sm {
    font-size: 14px;
}

.search-filters-card .btn-sm {
    font-size: 12px;
}

/* 搜索输入框下拉选项样式 */
.search-filters-card input[list] {
    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='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* datalist选项样式优化 */
datalist {
    font-size: 12px;
}

/* 自定义下拉框容器 */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

.shared-autocomplete {
    position: relative;
    display: block;
    min-width: 0;
}

.shared-autocomplete > .form-control {
    width: 100%;
}

.enterprise-inline-filter-control > .shared-autocomplete {
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    position: static;
    width: 0;
}

.enterprise-inline-filter-control > .shared-autocomplete > .enterprise-inline-filter-input {
    height: 100% !important;
}

.product-editor-autocomplete {
    width: 100%;
}

.product-editor-autocomplete:focus-within {
    z-index: 1010;
}

/* Shared autocomplete panels size to their longest option, while retaining
   at least the input width so short option sets do not look detached. */
.shared-autocomplete > .dropdown-options {
    left: 0;
    margin-top: 4px;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 24px);
    flex-direction: column;
    align-items: stretch;
}

.shared-autocomplete > .dropdown-options.show {
    display: flex;
}

.shared-autocomplete .dropdown-option {
    display: block;
    width: auto;
    align-self: stretch;
    white-space: nowrap;
}

/* 自定义下拉选项列表 */
.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(60, 60, 67, 0.14);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.11);
    max-height: 200px;
    overflow-y: auto;
    padding: 6px;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 60, 67, 0.34) transparent;
}

.dropdown-option.is-active {
    background-color: rgba(120, 120, 128, 0.10);
    color: var(--label-primary, #1d1d1f);
}

.dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, 0.26);
    border-radius: 999px;
}

.dropdown-options:hover::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, 0.38);
}

.dropdown-options.show {
    display: block;
}

/* 下拉选项项目 */
.dropdown-option {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 9px;
    width: 100%;
    text-align: left;
    color: var(--label-primary, #1d1d1f);
}

.dropdown-option:hover {
    background-color: rgba(120, 120, 128, 0.10);
}

.dropdown-option:focus {
    background-color: rgba(120, 120, 128, 0.12);
    outline: none;
}

.dropdown-option.selected {
    background-color: rgba(0, 122, 255, 0.12);
    color: var(--accent-strong, #0066d6);
    font-weight: 650;
}

#search-model:focus+.dropdown-options:not(.show),
#search-supplier-code:focus+.dropdown-options:not(.show) {
    display: none;
}

/* 确保下拉框在小屏幕上也能正常显示 */
@media (max-width: 768px) {
    .dropdown-options {
        max-height: 150px;
    }

    .dropdown-option {
        padding: 0.5rem 0.75rem;
    }
}

.products-table-container .table th {
    font-size: 12px;
    /* 表头字体大小：12px */
    font-weight: 600;
}

.products-table-container .table td {
    font-size: 12px;
    /* 表格内容字体大小：12px */
}

/* 商品表格字体大小变体类 - 可以通过添加这些类来改变字体大小 */
.products-table-container .table.table-font-xs {
    font-size: 0.75rem;
    /* 超小字体 */
}

.products-table-container .table.table-font-sm {
    font-size: 0.875rem;
    /* 小字体 */
}

.products-table-container .table.table-font-md {
    font-size: 1rem;
    /* 中等字体 */
}

.products-table-container .table.table-font-lg {
    font-size: 1.125rem;
    /* 大字体 */
}

.products-table-container .table.table-font-xl {
    font-size: 1.25rem;
    /* 超大字体 */
}

/* 全局应用容器，统一布局宽度与居中对齐 */
.app-container {
    width: var(--app-min-width);
    max-width: var(--app-min-width);
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

/* ---- Products table borders cleanup ---- */
/* Ensure consistent horizontal lines while controlling vertical lines */
#productsTable {
    border-collapse: collapse !important;
}

/* Remove header borders */
#productsTable thead th {
    border: 0 !important;
}

/* Default body cell: only bottom border (horizontal lines) */
#productsTable tbody td {
    border-bottom: 1px solid #dee2e6;
    border-right: 0 !important;
    border-left: 0 !important;
}

/* Keep vertical right border only for Model and Type columns */
#productsTable tbody td:nth-child(1),
#productsTable tbody td:nth-child(2) {
    border-right: 1px solid #dee2e6 !important;
}

/* Extra safety: remove any right border for other columns */
#productsTable tbody td:nth-child(n+3) {
    border-right: 0 !important;
}

/* Continue the vertical line across grouped rows when first two columns use rowspan */
.model-group-row td:first-child {
    border-left: 1px solid #dee2e6 !important;
}

/* 页标题的一致性 */
.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-header .title {
    font-size: 16px;
    font-weight: 600;
}

/* 卡片标题统一样式 */
.card-header.bg-light h5.card-title {
    margin: 0;
    font-size: 14px;
}

/* 小型操作按钮保持一致 */
.btn-group-sm .btn {
    padding: .25rem .5rem;
    font-size: 12px;
}

/* Footer subtle */
footer.small {
    opacity: .85;
}

/* 主题切换按钮间距 */
#themeToggle {
    line-height: 1;
}

/* 安全清除旧版布局的残留部分（如有残留） */
.legacy-hidden {
    display: none !important;
}

/* 删除模态框美化样式 */
#deleteModal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
}

#deleteModal .modal-header {
    background: linear-gradient(135deg, #dc3545, #c82333);
    padding: 1.25rem 1.5rem;
}

#deleteModal .modal-body {
    padding: 2rem 1.5rem;
}

#deleteModal .modal-footer {
    align-items: center;
    gap: 0.75rem;
    min-height: 74px;
    padding: 0 1.5rem;
}

#deleteModal .alert {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* React 商品删除弹窗：不依赖 Bootstrap Modal 的运行时行为。 */
body.product-delete-react-open {
    overflow: hidden;
}

body.product-image-react-open {
    overflow: hidden;
}

.product-image-react-modal {
    position: fixed;
    z-index: 9100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
}

.product-image-react-modal.product-image-preview-modal {
    z-index: 9125;
}

/* 图片浏览不需要弱化页面内容；保留透明层只用于承接点击外部关闭的交互。 */
.product-image-preview-modal > .react-modal-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.react-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.20);
    backdrop-filter: blur(4px) saturate(135%);
    -webkit-backdrop-filter: blur(4px) saturate(135%);
    animation: product-delete-backdrop-fade-in 240ms ease-out both;
}

.react-modal-animated-dialog {
    animation: product-delete-dialog-fade-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.react-modal-layer.is-closing {
    pointer-events: none;
}

.react-modal-layer.is-closing .react-modal-backdrop {
    animation: product-delete-backdrop-fade-out 240ms ease-in both;
}

.react-modal-layer.is-closing .react-modal-animated-dialog {
    animation: product-delete-dialog-fade-out 240ms ease-in both;
}

/* Shared image-library primitives; page-specific classes remain as temporary
   visual compatibility aliases during the staged migration. */
.image-library-browser,
.image-library-search,
.image-library-grid,
.image-library-pagination {
    min-width: 0;
}

.image-library-browser {
    display: flex;
    min-height: 0;
}

.image-library-grid {
    min-height: 0;
}


/* Shared loading placeholders used by both the browser and picker dialogs. */
.image-library-skeleton-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.image-library-skeleton-thumbnail {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin-bottom: 10px;
    border: 1px solid color-mix(in srgb, var(--separator), white 16%);
    border-radius: 14px;
    background: rgba(60, 60, 67, 0.09);
    animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
}

.image-library-skeleton-line {
    display: block;
    height: 14px;
    border-radius: 7px;
    background: rgba(60, 60, 67, 0.09);
    animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
}

.image-library-skeleton-line--name { width: 72%; height: 18px; }
.image-library-skeleton-line--meta { width: 44%; margin-top: 5px; }

.image-library-skeleton-group-tree {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.image-library-skeleton-group-row {
    display: grid;
    grid-template-columns: 16px 16px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    padding: 8px;
    column-gap: 8px;
}

.image-library-skeleton-group-toggle,
.image-library-skeleton-group-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: rgba(60, 60, 67, 0.09);
    animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
}

.image-library-skeleton-group-name {
    width: 74%;
    height: 12px;
    border-radius: 999px;
    background: rgba(60, 60, 67, 0.09);
    animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
}

.image-library-skeleton-group-row:nth-child(2n) .image-library-skeleton-group-name { width: 58%; }

/* Image metadata has to be stable inside both an article (browser) and a
 * button (picker); do not inherit typography from either host element. */
.image-library-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
    padding: 0;
}

.image-library-card-size {
    color: var(--label-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.product-image-react-dialog {
    position: relative;
    z-index: 1;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    outline: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-image-react-dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.product-image-react-modal .modal-dialog {
    margin: 0;
}

#modelImageGroupViewerModal .modal-dialog {
    width: 1660px;
    max-width: 1660px;
    height: 865px;
}

.product-delete-react-modal {
    position: fixed;
    z-index: 1080;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.product-specs-react-modal {
    position: fixed;
    z-index: 1080;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.product-specs-react-dialog {
    position: relative;
    width: min(1650px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
    outline: none;
}

.product-specs-react-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), transparent 25%);
}

.product-specs-react-body {
    padding: 20px;
}

.product-delete-react-dialog {
    position: relative;
    width: min(100%, 500px);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
    outline: none;
}

.product-delete-react-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), transparent 25%);
}

.product-delete-react-title {
    margin: 0;
    font-size: 17px;
}

.product-delete-react-body {
    padding: 28px 24px 20px;
}

.product-delete-react-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 20px;
}

.product-duplicate-react-dialog {
    width: min(100%, 860px);
}

.product-duplicate-react-body {
    display: grid;
    gap: 10px;
    padding-top: 20px;
}

.product-duplicate-react-item {
    padding: 12px 14px;
    border: 1px solid rgba(234, 179, 8, 0.28);
    border-radius: 12px;
    background: rgba(250, 204, 21, 0.1);
    color: #5f4500;
    font-size: 14px;
    line-height: 1.55;
}

@keyframes product-delete-backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes product-delete-backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes product-delete-dialog-fade-in {
    from { opacity: 0; transform: translateY(-24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes product-delete-dialog-fade-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

/* 删除按钮动画效果 */
#confirmDeleteBtn {
    transition: all 0.3s ease;
    min-width: 120px;
}

#confirmDeleteBtn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

#confirmDeleteBtn:active {
    transform: translateY(0);
}

/* 加载动画优化 */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* 已删除商品的交易记录样式 */
.transaction-deleted {
    background-color: rgba(248, 249, 250, 0.5);
    border-left: 3px solid #dc3545;
}

.product-deleted-badge {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* 删除交易记录模态框样式 */
#deleteTransactionModal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
}

#deleteTransactionModal .modal-header {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    padding: 1.25rem 1.5rem;
}

#deleteTransactionModal .modal-body {
    padding: 2rem 1.5rem;
}

#deleteTransactionModal .alert {
    border-radius: 0.75rem;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* 出入库记录表格中的删除按钮样式 */
.transactions-page .records-card .btn-sm.btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 0;
}

.table th {
    background: #333;
    color: #fff;
}

.table tr:hover {
    background: #f5f5f5;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}

.btn:hover {
    background: #555;
}

.btn-primary {
    background: #007bff;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-success {
    background: #28a745;
}

.btn-success:hover {
    background: #218838;
}

.btn-danger {
    background: #dc3545;
}

.btn-danger:hover {
    background: #c82333;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

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

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

.login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* 简约登录界面设计 */
.login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1080px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    padding: 40px;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.login-logo i {
    font-size: 32px;
    color: white;
}

.login-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}

.login-header p {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: #999;
}

.login-form-content .form-group {
    margin-bottom: 20px;
}

.login-form-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-wrapper input::placeholder {
    color: #bbb;
}

.login-input-invalid,
.input-wrapper input.login-input-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
}

.login-feedback {
    align-items: center;
    background: rgba(220, 53, 69, 0.09);
    border: 1px solid rgba(220, 53, 69, 0.42);
    border-radius: 10px;
    color: #b42332;
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin: -4px 0 20px;
    padding: 11px 12px;
}

.login-feedback .bi {
    color: #dc3545;
    flex: 0 0 auto;
}

.login-feedback-mark {
    color: #dc3545;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.toggle-password {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: none !important;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    width: 44px;
    height: 100%;
    min-height: 40px;
    z-index: 2;
}

.toggle-password:hover,
.toggle-password:focus-visible {
    color: #667eea;
}

.toggle-password:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: -4px;
}

.toggle-password i {
    pointer-events: none;
    transform: none;
}

.btn-login {
    width: 100%;
    padding: 12px;
    margin-top: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.login-footer p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }

    .login-header h1 {
        font-size: 24px;
    }

    .input-wrapper input {
        padding: 10px 10px 10px 36px;
        font-size: 16px;
    }

    .btn-login {
        padding: 10px;
        font-size: 14px;
    }
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 浮动提示消息样式 */
.alert.floating-alert {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1060;
    min-width: 300px;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 8px;
    animation: slideInRight 0.3s ease-out;
}

/* 移动设备响应式优化 */
@media (max-width: 768px) {
    .alert.floating-alert {
        top: 60px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        width: auto;
    }
}

/* 浮动提示的进入动画 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 浮动提示的退出动画 */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.alert.floating-alert.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* 成功提示的特殊样式 */
.alert.floating-alert.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
    color: #155724;
}

/* 错误提示的特殊样式 */
.alert.floating-alert.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
    border-left: 4px solid #dc3545;
    color: #721c24;
}

/* 信息提示的特殊样式 */
.alert.floating-alert.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

/* 警告提示的特殊样式 */
.alert.floating-alert.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-left: 4px solid #ffc107;
    color: #856404;
}

/* 日期范围选择器样式 */
.date-range-picker {
    position: relative;
}

.date-range-input {
    cursor: pointer;
    background: white;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23666' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

.date-range-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    z-index: 1000;
    margin-top: 2px;
    min-width: 600px;
    width: max-content;
}

/* 当下拉框可能超出屏幕右边界时，调整位置 */
@media (max-width: 768px) {
    .date-range-dropdown {
        left: 50%;
        transform: translateX(-50%);
        min-width: 560px;
    }

    .dual-calendar {
        gap: 0.5rem;
    }

    .calendar-month {
        min-width: 260px;
        width: 260px;
    }
}

.date-range-content {
    padding: 1rem;
}

/* 主要布局：左侧按钮，右侧双月历 */
.calendar-main-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.calendar-sidebar {
    flex-shrink: 0;
    width: 85px;
    height: 300px;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.calendar-sidebar .btn {
    width: 100%;
    font-size: 0.65rem;
    text-align: center;
    background: transparent !important;
    border: none !important;
    color: #495057;
    padding: 0.2rem 0.3rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    margin: 0;
    flex-shrink: 0;
    line-height: 1.1;
}

.calendar-sidebar .btn:hover {
    background-color: #e9ecef !important;
    color: #212529;
}

.calendar-sidebar .btn.btn-secondary {
    background-color: #6c757d !important;
    color: white !important;
}

.calendar-sidebar .btn.btn-secondary:hover {
    background-color: #5c636a !important;
    color: white !important;
}

.calendar-sidebar hr {
    margin: 0.3rem 0;
    border-color: #ffffff;
    flex-shrink: 0;
}

/* 按钮组容器样式 */
.calendar-sidebar .d-flex.flex-column {
    height: 100%;
    justify-content: flex-start;
    gap: 0.1rem;
}

/* 快速选择按钮组 (今日、昨日、本周、上周、本月、上月) */
.calendar-sidebar .d-flex.flex-column>.btn:nth-child(-n+6) {
    flex: 0 0 auto;
    height: 1.6rem;
    min-height: 1.6rem;
    max-height: 1.6rem;
}

/* 分割线样式 */
.calendar-sidebar .d-flex.flex-column>hr {
    flex: 0 0 auto;
    margin: 0.1rem 0;
    border-top: 1px solid #dee2e6;
}

/* 确定和清除按钮 */
.calendar-sidebar .d-flex.flex-column>.btn:nth-child(n+8) {
    flex: 0 0 auto;
    height: 1.6rem;
    min-height: 1.6rem;
    max-height: 1.6rem;
}

.date-range-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 快速选择按钮样式 */
.date-range-dropdown .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* 双月历样式 */
.dual-calendar {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
}

.calendar-month {
    flex: 1;
    min-width: 280px;
    width: 280px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.calendar-title {
    font-weight: 600;
    color: #495057;
    flex-grow: 1;
    text-align: center;
}

.calendar-nav {
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    padding: 0.25rem 0.5rem !important;
}

.calendar-nav:hover {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

.calendar-grid {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #f8f9fa;
}

.weekday {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6c757d;
    border-right: 1px solid #dee2e6;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weekday:last-child {
    border-right: none;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: white;
}

.calendar-day {
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    transition: all 0.2s ease;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day:hover:not(.range-start):not(.range-end) {
    background-color: #e9ecef;
}

.calendar-day.other-month {
    color: #adb5bd;
    background-color: #f8f9fa;
}

.calendar-day.other-month.range-start,
.calendar-day.other-month.range-end {
    background-color: #0d6efd !important;
    color: white !important;
}

.calendar-day.selected {
    background-color: #0d6efd;
    color: white;
}

.calendar-day.range-start {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 0.25rem;
    font-weight: bold;
}

.calendar-day.range-end {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* 当开始日期和结束日期是同一天时 */
.calendar-day.range-start.range-end {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* 选中范围内的日期（不包括开始和结束日期） */
.calendar-day.in-range:not(.range-start):not(.range-end) {
    background-color: #e3f2fd;
    color: #0d6efd;
}

/* 当天日期的基础样式 - 无选择时的蓝底白字 */
.calendar-day.today {
    background-color: #0d6efd !important;
    color: white !important;
    font-weight: bold;
    border-radius: 0.25rem;
}

/* 当天在选择范围内但不是开始或结束日期时 - 浅蓝底深蓝字 */
.calendar-day.today.in-range:not(.range-start):not(.range-end) {
    background-color: #e3f2fd !important;
    color: #0d6efd !important;
    font-weight: bold;
    border-radius: 0.25rem;
}

/* 当天是选择范围的开始或结束日期时 - 蓝底白字 */
.calendar-day.today.range-start,
.calendar-day.today.range-end {
    background-color: #0d6efd !important;
    color: white !important;
    font-weight: bold;
    border-radius: 0.25rem;
}

/* 当选择的日期范围不包含今天时，清除今天的特殊样式 */
.calendar-day.today.not-in-selection {
    background-color: transparent !important;
    color: inherit !important;
    font-weight: normal !important;
    border-radius: 0;
}

/* 空白日期格子样式 */
.calendar-day.empty-day {
    pointer-events: none;
    cursor: default;
    background-color: transparent;
}

.calendar-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

/* 商品搜索下拉框样式 */
.product-search-container {
    position: relative;
}

.product-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.product-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.15s ease-in-out;
}

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

.product-option:hover,
.product-option.active {
    background-color: #e9ecef;
}

.product-option.selected {
    background-color: #0d6efd;
    color: white;
}

.product-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.product-model {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.125rem;
}

.product-option.selected .product-model {
    color: rgba(255, 255, 255, 0.8);
}

/* 搜索输入框获得焦点时的样式 */
.product-search-container .form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 产品表格型号分组样式 */
.table-separator {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
}

.table-separator td {
    border-top: 2px solid #dee2e6 !important;
}

/* 多规格产品行高亮 */
.table tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

/* 图片上传网格布局 */

.image-upload-grid {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
}

.image-upload-box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px dashed #ddd;
    border-radius: 0;
    background-color: #FCFCFC;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.image-upload-box:hover {
    border-color: #0d6efd;
}

.image-upload-box .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #d8d8d8;
    transition: all 0.3s ease;
}

.image-upload-box:hover .upload-placeholder {
    color: #0d6efd;
}

.image-upload-box .upload-placeholder i {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
}

.image-upload-box .upload-placeholder span {
    font-size: 12px;
}

.image-upload-box .uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-upload-box.has-image {
    border-style: solid;
    border-width: 1px;
    border-color: #c2c2c2;
    background-color: #ffffff;
}

.image-upload-box .remove-image-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.image-upload-box.has-image:hover .remove-image-btn {
    opacity: 1;
}

.image-upload-box.is-locked,
.image-upload-box.is-locked:hover {
    cursor: not-allowed;
    border-color: #c2c2c2;
}

.image-upload-box.is-locked .remove-image-btn,
.image-upload-box.is-locked:hover .remove-image-btn {
    display: none !important;
}

.image-upload-box .remove-image-btn i {
    color: #ffffff;
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    padding: 2px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .image-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 入库弹窗日期输入与自定义日期选择器 */
#inboundModal #selectedProductsEditor .js-inbound-date {
    cursor: pointer;
    background-color: #ffffff !important;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h.5A1.5 1.5 0 0 1 15 2.5v11A1.5 1.5 0 0 1 13.5 15h-11A1.5 1.5 0 0 1 1 13.5v-11A1.5 1.5 0 0 1 2.5 1H3V.5a.5.5 0 0 1 .5-.5ZM2 4v9.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V4H2Z'/%3E%3C/svg%3E");
    background-position: calc(100% - 10px) 50%;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.inbound-date-picker {
    position: fixed;
    width: 286px;
    background: #ffffff;
    border: 1px solid #cdd8ee;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(43, 80, 170, 0.28);
    z-index: 2000;
    padding: 0;
    display: none;
    user-select: none;
}

.inbound-date-picker.show {
    display: block;
}

.inbound-date-picker-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: linear-gradient(180deg, #4f80ee 0%, #3f6fdf 100%);
    color: #ffffff;
    border-radius: 8px 8px 0 0;
}

.inbound-date-title {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
}

.inbound-date-title-btn {
    border: none;
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.inbound-date-title-btn:hover {
    opacity: 0.9;
}

.inbound-date-title-gap {
    display: inline-block;
    width: 4px;
}

.inbound-date-range-title {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.inbound-date-nav {
    border: none;
    background: transparent;
    color: #ffffff;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inbound-date-nav:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.inbound-date-weekdays,
.inbound-date-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.inbound-date-picker.mode-year .inbound-date-weekdays,
.inbound-date-picker.mode-month .inbound-date-weekdays {
    display: none;
}

.inbound-date-weekdays {
    padding: 8px 10px 4px;
    color: #7b8798;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.inbound-date-days {
    padding: 0 10px 6px;
}

.inbound-date-days.mode-year-grid,
.inbound-date-days.mode-month-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
}

.inbound-date-option {
    border: none;
    background: #f3f5fa;
    color: #47566b;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.inbound-date-option:hover {
    background: #e8edf8;
}

.inbound-date-option.is-selected,
.inbound-date-option.is-selected:hover {
    background: #1e4fe0;
    color: #ffffff;
    font-weight: 600;
}

.inbound-date-option.is-muted {
    color: #b4bdcc;
}

.inbound-date-day {
    border: none;
    background: transparent;
    width: 34px;
    height: 34px;
    margin: 1px auto;
    border-radius: 4px;
    color: #30435e;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.inbound-date-day:hover {
    background: #edf2ff;
}

.inbound-date-day.is-other-month {
    color: #c8cfdd;
    background: #f4f6fb;
    cursor: not-allowed;
}

.inbound-date-day.is-selected,
.inbound-date-day.is-selected:hover {
    background: #2f6dde;
    color: #ffffff;
    font-weight: 600;
}

.inbound-date-day.is-today:not(.is-selected) {
    border: 1px solid #2f6dde;
    color: #2f6dde;
    font-weight: 600;
}

.inbound-date-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e8edf7;
    padding: 8px 10px 10px;
}

.inbound-date-actions .btn-link {
    text-decoration: none;
    color: #2f6dde;
    font-weight: 500;
}

/* =========================================================
   Apple-inspired system theme
   ========================================================= */
:root {
    color-scheme: light dark;
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    --font-system-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Zen Hei", var(--font-system);
    --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
    --accent: #007aff;
    --accent-strong: #0066d6;
    --success: #34c759;
    --warning: #ff9f0a;
    --danger: #ff453a;
    --label-primary: #111111;
    --label-secondary: rgba(60, 60, 67, 0.72);
    --label-tertiary: rgba(60, 60, 67, 0.44);
    --bg-canvas: #f5f5f7;
    --bg-primary: #ffffff;
    --bg-secondary: #f2f2f7;
    --bg-tertiary: #fbfbfd;
    --bg-elevated: rgba(255, 255, 255, 0.78);
    --fill-secondary: rgba(120, 120, 128, 0.12);
    --fill-tertiary: rgba(120, 120, 128, 0.08);
    --separator: rgba(60, 60, 67, 0.18);
    --separator-strong: rgba(60, 60, 67, 0.3);
    --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
    --shadow-sm: 0 10px 30px rgba(17, 17, 17, 0.06);
    --shadow-md: 0 18px 38px rgba(17, 17, 17, 0.1);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --focus-ring: none;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 26px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #0a84ff;
        --accent-strong: #409cff;
        --success: #30d158;
        --warning: #ff9f0a;
        --danger: #ff453a;
        --label-primary: #f5f5f7;
        --label-secondary: rgba(235, 235, 245, 0.72);
        --label-tertiary: rgba(235, 235, 245, 0.44);
        --bg-canvas: #0f1115;
        --bg-primary: #16181d;
        --bg-secondary: #1c1f26;
        --bg-tertiary: #242833;
        --bg-elevated: rgba(28, 31, 38, 0.82);
        --fill-secondary: rgba(120, 120, 128, 0.22);
        --fill-tertiary: rgba(120, 120, 128, 0.14);
        --separator: rgba(84, 84, 88, 0.56);
        --separator-strong: rgba(99, 99, 104, 0.78);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
        --shadow-sm: 0 14px 36px rgba(0, 0, 0, 0.34);
        --shadow-md: 0 24px 46px rgba(0, 0, 0, 0.42);
        --glass-bg: rgba(24, 26, 32, 0.72);
        --glass-border: rgba(255, 255, 255, 0.08);
    }
}

html,
body {
    background: var(--bg-canvas);
}

body {
    font-family: var(--font-system);
    color: var(--label-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body:not(.login-page)>main.container-fluid {
    padding-bottom: 12px;
}

body:not(.login-page)>main.container-fluid>.container-fluid,
body:not(.login-page)>main.container-fluid>.app-container,
body:not(.login-page)>main.container-fluid>.products-table-container,
body:not(.login-page)>main.container-fluid>.row,
body:not(.login-page)>main.container-fluid>.card,
body:not(.login-page)>main.container-fluid>.table-responsive,
body:not(.login-page)>main.container-fluid>form {
    padding-top: 12px;
}

.container-fluid,
.app-container {
    color: var(--label-primary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--label-primary);
    font-weight: 650;
}

.text-muted,
.text-secondary {
    color: var(--label-secondary) !important;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-strong);
}

.card,
.panel,
.products-table-container .table-responsive,
.search-filters-card,
.modal-content,
.dropdown-menu:not(.user-menu):not(.products-dropdown),
.alert,
.stat-card,
.metric-card,
.bi-metric-card,
.bi-chart-panel,
.model-container,
.products-skeleton-row {
    border: 1px solid color-mix(in srgb, var(--separator), white 25%) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: saturate(180%) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card,
    .panel,
    .products-table-container .table-responsive,
    .search-filters-card,
    .modal-content,
    .dropdown-menu:not(.user-menu):not(.products-dropdown),
    .alert,
    .stat-card,
    .metric-card,
    .bi-metric-card,
    .bi-chart-panel,
    .model-container,
    .products-skeleton-row {
        background: var(--bg-primary) !important;
    }
}

.card-header,
.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--separator) !important;
}

.modal-backdrop {
    z-index: 9000 !important;
}

.modal {
    z-index: 9100 !important;
    overflow-x: auto;
    overflow-y: auto;
}

.modal-footer {
    border-top: 1px solid var(--separator) !important;
}

.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.text-white {
    background: transparent !important;
    color: var(--label-primary) !important;
}

.modal-header .btn-close-white,
.btn-close.btn-close-white {
    filter: none !important;
}

#confirmLeaveModal .modal-dialog {
    max-width: 500px;
}

#confirmLeaveModal .modal-content {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.2) !important;
}

#confirmLeaveModal .modal-header {
    min-height: 54px;
    padding: 14px 18px;
}

#confirmLeaveModal .modal-title {
    gap: 8px;
    color: var(--label-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

#confirmLeaveModal .modal-title i {
    color: var(--label-secondary);
    font-size: 15px;
}

#confirmLeaveModal .btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    opacity: 0.68;
}

#confirmLeaveModal .btn-close:hover {
    background-color: rgba(60, 60, 67, 0.08);
    opacity: 1;
}

#confirmLeaveModal .modal-body {
    padding: 28px 28px 24px !important;
}

#confirmLeaveModal .modal-body .bi-box-arrow-right {
    font-size: 2.15rem !important;
    color: var(--danger) !important;
}

#confirmLeaveModal #confirmLeaveModalMessage {
    color: var(--label-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

#confirmLeaveModal #confirmLeaveModalMessage + p {
    color: var(--label-secondary) !important;
    font-size: 13px;
    line-height: 1.4;
}

#confirmLeaveModal .modal-footer {
    gap: 12px;
    padding: 0 22px 18px;
    border-top: 0 !important;
}

#confirmLeaveModal .modal-footer .btn {
    min-width: 78px;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

#confirmLeaveModal .modal-footer .btn-outline-secondary {
    color: var(--label-primary);
    border-color: color-mix(in srgb, var(--separator), white 4%);
    background: rgba(255, 255, 255, 0.82);
}

#confirmLeaveModal .modal-footer .btn-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

#confirmLeaveModal .modal-footer .btn-danger:hover {
    border-color: color-mix(in srgb, var(--danger), black 8%);
    background: color-mix(in srgb, var(--danger), black 8%);
}

.btn {
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus + .btn {
    box-shadow: none !important;
    outline: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #858b93 !important;
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--accent), white 8%) !important;
}

.btn:focus-visible,
.btn-check:focus + .btn {
    border-color: color-mix(in srgb, var(--accent), white 18%) !important;
    background-color: color-mix(in srgb, var(--accent), white 90%) !important;
}

.btn-primary,
.btn-success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%) 0%, var(--accent-strong) 100%) !important;
    border-color: color-mix(in srgb, var(--accent-strong), black 6%) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--success), white 8%) 0%, color-mix(in srgb, var(--success), black 6%) 100%) !important;
    border-color: color-mix(in srgb, var(--success), black 10%) !important;
}

.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: var(--separator) !important;
    color: var(--label-primary) !important;
}

.btn-danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger), white 10%) 0%, color-mix(in srgb, var(--danger), black 5%) 100%) !important;
    border-color: color-mix(in srgb, var(--danger), black 12%) !important;
}

.btn-sm {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 11px;
}

.btn.pill-action-btn {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border-color: color-mix(in srgb, var(--accent), white 28%);
    background: rgba(255, 255, 255, 0.84);
    color: var(--accent);
    font-weight: 600;
}

.btn.pill-action-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent), white 92%);
    color: var(--accent-strong);
}

/* 选择栏操作按钮不保留选中态；仅在未悬浮时抵消全局焦点填充。 */
.btn.pill-action-btn:focus:not(:hover),
.btn.pill-action-btn:focus-visible:not(:hover) {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: color-mix(in srgb, var(--accent), white 28%) !important;
    color: var(--accent) !important;
}

.form-control,
.form-select,
.input-wrapper input,
.form-group input,
.form-group textarea,
textarea.form-control {
    min-height: 40px;
    border-radius: 12px !important;
    border: 1px solid var(--separator) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--label-primary) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42);
}

/* 登录页的校验状态必须在通用输入框样式之后声明，以保留错误颜色。 */
.login-form-content .input-wrapper input.login-input-invalid,
.login-form-content .input-wrapper input.login-input-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14) !important;
}

.login-form-content .login-feedback {
    background: #fff1f2;
    border-color: #f3a4ad;
    color: #b42332;
}

@media (prefers-color-scheme: dark) {
    .form-control,
    .form-select,
    .input-wrapper input,
    .form-group input,
    .form-group textarea,
    textarea.form-control {
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
    }
}

.form-control::placeholder,
.form-select::placeholder,
.input-wrapper input::placeholder {
    color: var(--label-tertiary);
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    border-radius: 10px !important;
}

.form-check-input {
    border-color: var(--separator-strong);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(0, 122, 255, 0.05);
    margin: 0.5rem 0 0;
    background: transparent;
    box-shadow: none;
}

.table th,
.table td {
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 15%);
    padding: 12px 14px;
    vertical-align: middle;
}

.table th {
    background: rgba(255, 255, 255, 0.58) !important;
    color: var(--label-secondary) !important;
    font-weight: 600;
    letter-spacing: 0;
}

.table tbody tr:hover {
    background: rgba(0, 122, 255, 0.04) !important;
}

.badge {
    border-radius: var(--radius-pill);
    padding: 0.45em 0.8em;
    font-weight: 600;
}

.badge.bg-success {
    background: rgba(52, 199, 89, 0.14) !important;
    color: color-mix(in srgb, var(--success), black 18%) !important;
}

.badge.bg-danger {
    background: rgba(255, 69, 58, 0.14) !important;
    color: color-mix(in srgb, var(--danger), black 16%) !important;
}

.badge.bg-secondary {
    background: rgba(120, 120, 128, 0.12) !important;
    color: var(--label-secondary) !important;
}

.dropdown-menu {
    padding: 8px;
    border-color: color-mix(in srgb, var(--separator), white 22%) !important;
}

.dropdown-item {
    border-radius: 10px;
    min-height: 38px;
    display: flex;
    align-items: center;
    color: var(--label-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(0, 122, 255, 0.08);
    color: var(--accent-strong);
}

.alert {
    border-radius: var(--radius-lg);
    color: var(--label-primary);
}

.alert.floating-alert {
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    background: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid color-mix(in srgb, var(--separator), white 20%) !important;
}

.products-table-container,
.search-filters-card {
    background: transparent !important;
}

.search-filters-card .card-body,
.card-body {
    position: relative;
}

.login-container {
    min-height: 100vh;
    height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(10, 132, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(90, 200, 250, 0.15), transparent 30%),
        linear-gradient(180deg, #eef4ff 0%, #f7f8fb 100%);
}

@media (prefers-color-scheme: dark) {
    .login-container {
        background:
            radial-gradient(circle at top left, rgba(10, 132, 255, 0.24), transparent 26%),
            radial-gradient(circle at bottom right, rgba(94, 92, 230, 0.18), transparent 30%),
            linear-gradient(180deg, #0b0d12 0%, #11141b 100%);
    }

    .login-card {
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(24, 26, 32, 0.8);
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.36);
    }

    .login-header h1,
    .login-footer p {
        color: var(--label-primary);
    }

    .login-header p,
    .login-form-content .form-group label {
        color: var(--label-secondary);
    }
}

.login-card {
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.14);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
}

.login-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%);
    box-shadow: 0 14px 26px rgba(0, 122, 255, 0.24);
}

.login-header h1 {
    font-size: 30px;
    letter-spacing: 0;
}

.btn-login {
    min-height: 46px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%);
    box-shadow: 0 12px 24px rgba(0, 122, 255, 0.24);
}

.btn-login:hover {
    box-shadow: 0 16px 28px rgba(0, 122, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* React owns product-editor state and interaction once its root is mounted. */
html.react-product-editor-app-mounted .product-editor-legacy-form {
    display: none;
}

#product-editor-app-react-root {
    width: 100%;
}

/*
 * Shared React image-library picker.  These rules intentionally use the
 * component contract rather than a modal id or product-editor ancestor: the
 * dialog is rendered in a portal, so page-scoped legacy selectors are not a
 * reliable source of layout.
 */
.image-library-picker .image-library-picker-browser {
    --image-library-card-border: color-mix(in srgb, var(--separator), white 18%);
    --image-library-card-bg: rgba(255, 255, 255, 0.78);
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.image-library-picker .image-library-picker-sidebar {
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--image-library-card-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.image-library-picker .image-library-picker-search,
.image-library-picker .image-library-loading-search {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.image-library-picker .image-library-group-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.image-library-picker .image-library-group-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: none;
    gap: 2px;
    padding-right: 2px;
    overflow: auto;
    scrollbar-width: none;
}

.image-library-picker .image-library-group-tree::-webkit-scrollbar { display: none; }

.image-library-picker .image-library-group-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--label-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.image-library-picker .image-library-group-option.active { color: #007aff; }

.image-library-picker .group-toggle,
.image-library-picker .group-toggle-placeholder {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.image-library-picker .group-toggle { border: 0; padding: 0; background: transparent; cursor: pointer; }
.image-library-picker .group-toggle::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.14s ease; }
.image-library-picker .group-toggle.is-expanded::before { transform: rotate(45deg) translateY(-1px); }
.image-library-picker .group-toggle:hover,
.image-library-picker .image-bank-group-action:hover { color: #007aff; }
.image-library-picker .image-bank-group-action { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 22px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 22px; text-align: left; cursor: pointer; }
.image-library-picker .group-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.image-library-picker .image-library-group-tree--skeleton { gap: 12px; padding: 8px; pointer-events: none; }
.image-library-picker .image-library-group-skeleton-row { display: grid; grid-template-columns: 16px 16px minmax(0, 1fr); align-items: center; min-height: 20px; column-gap: 10px; }
.image-library-picker .image-library-group-skeleton-dot,
.image-library-picker .image-library-group-skeleton-icon,
.image-library-picker .image-library-group-skeleton-name,
.image-library-picker .skeleton-thumb,
.image-library-picker .skeleton-line { display: block; border-radius: 6px; background: rgba(60, 60, 67, 0.09); animation: imageBankSkeletonPulse 1.2s ease-in-out infinite; }
.image-library-picker .image-library-group-skeleton-dot,
.image-library-picker .image-library-group-skeleton-icon { width: 16px; height: 16px; }
.image-library-picker .image-library-group-skeleton-name { width: 74%; height: 12px; border-radius: 999px; }
.image-library-picker .image-library-group-skeleton-row:nth-child(2n) .image-library-group-skeleton-name { width: 58%; }

.image-library-picker .image-library-picker-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
.image-library-picker .image-library-picker-surface { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; height: 100%; padding: 12px; overflow: auto; border: 1px solid var(--image-library-card-border); border-radius: 22px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); scrollbar-width: none; }
.image-library-picker .image-library-picker-surface::-webkit-scrollbar { display: none; }

.image-library-picker .image-library-picker-grid { display: grid; flex: 1 1 0; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; width: 100%; min-width: 0; min-height: 0; }
.image-library-picker .image-library-picker-grid.is-loading { grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: 0; overflow: hidden; }
.image-library-picker .image-library-picker-grid.is-loading .image-library-card,
.image-library-picker .image-library-picker-grid.is-loading .image-library-card-action { align-self: stretch; height: 100%; min-height: 0; overflow: hidden; }
.image-library-picker .image-library-picker-grid.is-loading .image-library-thumbnail { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.image-library-picker .image-library-picker-grid.is-empty { display: flex; align-items: center; justify-content: center; }

.image-library-picker .image-library-card { display: flex; flex-direction: column; align-self: start; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--image-library-card-border); border-radius: 18px; background: var(--image-library-card-bg); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05); transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; }
.image-library-picker .image-library-card:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); }
.image-library-picker .image-library-card.selected { border-color: #007aff; box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18), 0 12px 28px rgba(15, 23, 42, 0.08); }
.image-library-picker .image-library-card-action { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.image-library-picker .image-library-thumbnail { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--separator), white 16%); border-radius: 14px; background: rgba(245, 247, 250, 0.94); }
.image-library-picker .image-library-thumbnail .preview-img { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover; }
.image-library-picker .skeleton-line { height: 14px; border-radius: 7px; }
.image-library-picker .skeleton-line.name { width: 72%; height: 18px; }
.image-library-picker .skeleton-line.meta { width: 44%; margin-top: 5px; }
.image-library-picker .image-library-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 16px; text-align: center; }

/* Shared empty state for the image browser and image picker. */
.image-library-empty-state .image-library-empty-icon {
    color: #dee2e6;
    margin-bottom: 1rem;
}

.image-library-empty-state .image-library-empty-icon i {
    font-size: 3rem;
}

.image-library-empty-state .image-library-empty-title {
    color: #6c757d;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

.image-library-picker .image-library-pagination { flex: 0 0 auto; margin-top: 2px; padding-top: 12px; }

/* Keep the React portal picker skeleton deterministic on its first paint. */
.image-library-picker .image-library-grid.image-bank-picker-grid.is-loading,
#editImageBankPickerModal .image-library-grid.edit-image-bank-picker-grid.is-loading {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 0 !important;
    grid-auto-flow: row !important;
    align-content: stretch !important;
    gap: 14px !important;
    overflow: hidden !important;
}

/* 入库选择器只保留供应商编号筛选；Jinja 回退与 React 渲染共用此布局。 */
.inbound-picker-mode #searchFilters.inbound-picker-supplier-code-only .enterprise-inline-filter-fields {
    justify-content: flex-start;
}

.inbound-picker-mode #searchFilters.inbound-picker-supplier-code-only .enterprise-inline-filter-field {
    display: none !important;
}

.inbound-picker-mode #searchFilters.inbound-picker-supplier-code-only .enterprise-inline-filter-field:has(#search-supplier-code) {
    display: block !important;
    flex: 0 1 340px;
    min-width: 280px;
}

/* =========================================================
   Enterprise management page refinements
   ========================================================= */
body:not(.login-page) .app-container {
    padding: 10px 12px 12px;
}

body:not(.login-page) .app-container[style*="max-width"] {
    margin-left: auto;
    margin-right: auto;
}

body:not(.login-page) .app-container > .d-flex.justify-content-between.align-items-center.mb-3,
body:not(.login-page) .app-container > .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-3,
body:not(.login-page) .app-container > .d-flex.flex-wrap.align-items-start.justify-content-between.gap-3.mb-3 {
    padding: 4px 2px 2px;
    margin-bottom: 16px !important;
}

body:not(.login-page) .app-container > .enterprise-page-header {
    min-height: 59px;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

body:not(.login-page) .app-container > .card,
body:not(.login-page) .app-container > .collapse > .card,
body:not(.login-page) .app-container > .alert,
body:not(.login-page) .app-container > .row > [class*="col-"] > .card {
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

body:not(.login-page) .app-container > .card .card-header,
body:not(.login-page) .app-container > .collapse > .card .card-header {
    padding: 16px 18px;
    font-weight: 650;
}

body:not(.login-page) .app-container > .card .card-body,
body:not(.login-page) .app-container > .collapse > .card .card-body {
    padding: 18px;
}

body:not(.login-page) .app-container > .card .card-body.p-0,
body:not(.login-page) .app-container > .collapse > .card .card-body.p-0 {
    padding: 0 !important;
}

body:not(.login-page) .app-container .table-responsive {
    border-radius: inherit;
}

body:not(.login-page) .app-container .table thead.table-light th {
    background: rgba(255, 255, 255, 0.52) !important;
}

body:not(.login-page) .app-container form.row.g-3,
body:not(.login-page) .app-container .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

body:not(.login-page) .app-container .form-label {
    color: var(--label-secondary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

body:not(.login-page) .app-container textarea.form-control {
    min-height: 108px;
}

/* =========================================================
   Enterprise page shared Apple layer
   ========================================================= */
body:not(.login-page) .app-container.enterprise-page,
body:not(.login-page) .app-container.document-page {
    max-width: 1440px;
}

body:not(.login-page) .app-container.enterprise-page > .card,
body:not(.login-page) .app-container.document-page > .card {
    overflow: hidden;
}

body:not(.login-page) .app-container.enterprise-page .table,
body:not(.login-page) .app-container.document-page .table {
    margin-bottom: 0;
    color: var(--label-primary);
}

body:not(.login-page) .app-container.enterprise-page .table thead th,
body:not(.login-page) .app-container.document-page .table thead th {
    background: rgba(245, 247, 250, 0.9) !important;
    color: var(--label-secondary) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 12%) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    padding-top: 13px;
    padding-bottom: 13px;
}

body:not(.login-page) .app-container.enterprise-page .table tbody td,
body:not(.login-page) .app-container.document-page .table tbody td {
    border-color: color-mix(in srgb, var(--separator), white 14%);
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

body:not(.login-page) .app-container.enterprise-page .table-hover > tbody > tr:hover > *,
body:not(.login-page) .app-container.document-page .table-hover > tbody > tr:hover > * {
    background: rgba(0, 122, 255, 0.04) !important;
}

body:not(.login-page) .app-container.enterprise-page .badge,
body:not(.login-page) .app-container.document-page .badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 600;
}

body:not(.login-page) .app-container.enterprise-page .table-responsive,
body:not(.login-page) .app-container.document-page .table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
}

body:not(.login-page) .app-container.enterprise-page .card-header,
body:not(.login-page) .app-container.document-page .card-header {
    background: rgba(255, 255, 255, 0.56) !important;
    color: var(--label-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 14%) !important;
}

body:not(.login-page) .app-container.enterprise-page .form-control,
body:not(.login-page) .app-container.enterprise-page .form-select,
body:not(.login-page) .app-container.document-page .form-control,
body:not(.login-page) .app-container.document-page .form-select {
    min-height: 42px;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--separator), white 14%);
    background: rgba(255, 255, 255, 0.88);
    color: var(--label-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body:not(.login-page) .app-container.enterprise-page .form-control:focus,
body:not(.login-page) .app-container.enterprise-page .form-select:focus,
body:not(.login-page) .app-container.document-page .form-control:focus,
body:not(.login-page) .app-container.document-page .form-select:focus {
    border-color: color-mix(in srgb, var(--accent), white 18%);
    box-shadow: none;
}

body:not(.login-page) .app-container.enterprise-page textarea.form-control,
body:not(.login-page) .app-container.document-page textarea.form-control {
    min-height: 112px;
}

body:not(.login-page) .app-container.enterprise-page .btn-sm,
body:not(.login-page) .app-container.document-page .btn-sm {
    min-height: 34px;
}

body:not(.login-page) .app-container.enterprise-page .alert,
body:not(.login-page) .app-container.document-page .alert {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--separator), white 16%);
}

body:not(.login-page) .app-container.enterprise-page .enterprise-page-meta {
    color: var(--label-secondary);
    max-width: 68ch;
}

body:not(.login-page) .app-container.enterprise-page .enterprise-list-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    min-height: 44px;
    padding: 10px 14px;
}

body:not(.login-page) .app-container.company-profile-page .brand-preview {
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    padding: 16px;
}

body:not(.login-page) .app-container.company-profile-page .brand-mark {
    align-items: center;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 14px;
    color: var(--accent);
    display: inline-flex;
    font-size: 22px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    width: 48px;
}

body:not(.login-page) .app-container.company-profile-page .setting-note {
    color: var(--label-secondary);
    font-size: 13px;
    line-height: 1.55;
}

body:not(.login-page) .app-container.organization-units-page .unit-inline-form {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(92px, 0.7fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(110px, 0.8fr) minmax(88px, 0.6fr) minmax(88px, 0.6fr) auto;
    min-width: 920px;
}

body:not(.login-page) .app-container.organization-units-page .unit-inline-form .form-select,
body:not(.login-page) .app-container.organization-units-page .unit-inline-form .form-control {
    min-width: 0;
}

body:not(.login-page) .app-container.users-page .role-help {
    align-items: center;
    display: inline-flex;
    position: relative;
}

body:not(.login-page) .app-container.users-page .role-help-trigger {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

body:not(.login-page) .app-container.users-page .role-help-trigger:hover,
body:not(.login-page) .app-container.users-page .role-help-trigger:focus {
    background: rgba(0, 122, 255, 0.08);
    border-color: color-mix(in srgb, var(--accent), white 35%);
    outline: none;
}

body:not(.login-page) .app-container.users-page .role-help-popover {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    left: -16px;
    opacity: 0;
    padding: 14px;
    position: absolute;
    top: calc(100% + 10px);
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    visibility: hidden;
    width: min(680px, calc(100vw - 48px));
    z-index: 1040;
}

body:not(.login-page) .app-container.users-page .role-help-popover::before {
    background: rgba(255, 255, 255, 0.84);
    border-left: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-top: 1px solid color-mix(in srgb, var(--separator), white 18%);
    content: "";
    height: 12px;
    left: 28px;
    position: absolute;
    top: -7px;
    transform: rotate(45deg);
    width: 12px;
}

body:not(.login-page) .app-container.users-page .role-help:hover .role-help-popover,
body:not(.login-page) .app-container.users-page .role-help:focus-within .role-help-popover {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

body:not(.login-page) .app-container.users-page .role-help-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}

body:not(.login-page) .app-container.users-page .role-help-popover .role-help-grid {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding-right: 2px;
}

body:not(.login-page) .app-container.users-page .role-help-item {
    align-items: start;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 12px;
    display: grid;
    gap: 6px;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 8px 10px;
}

body:not(.login-page) .app-container.users-page .role-help-item-title {
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

body:not(.login-page) .app-container.users-page .role-help-item-text {
    color: var(--label-secondary);
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}

body:not(.login-page) .app-container.users-page .user-inline-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body:not(.login-page) .app-container.users-page .user-inline-form .form-select,
body:not(.login-page) .app-container.users-page .user-inline-form .form-control {
    min-width: 148px;
}

body:not(.login-page) .app-container.users-page .user-actions-cell {
    min-width: 320px;
}

body:not(.login-page) .app-container.users-page .user-actions-cell .user-inline-form,
body:not(.login-page) .app-container.users-page .users-table .user-reset-form {
    justify-content: flex-end;
}

body:not(.login-page) .app-container.users-page .users-table .user-role-form {
    min-width: 220px;
}

body:not(.login-page) .app-container.users-page .users-table .role-column,
body:not(.login-page) .app-container.users-page .users-table .org-column,
body:not(.login-page) .app-container.users-page .users-table .actions-column {
    white-space: nowrap;
}

body:not(.login-page) .app-container.business-rules-page .metric-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.login-page) .app-container.business-rules-page .metric-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 16px;
    padding: 14px;
}

body:not(.login-page) .app-container.business-rules-page .metric-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

body:not(.login-page) .app-container.business-rules-page .rule-json {
    background: #0f172a;
    border-radius: 16px;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.55;
    max-height: 440px;
    overflow: auto;
    padding: 14px;
}

body:not(.login-page) .app-container.inbound-entry-page .card-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

body:not(.login-page) .app-container.inbound-entry-page .product-search-results {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    display: none;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.375rem;
    z-index: 1000;
}

body:not(.login-page) .app-container.inbound-entry-page .product-search-results .list-group-item {
    border: none;
    border-radius: 14px;
    margin-bottom: 0.25rem;
    padding: 0.875rem 1rem;
}

body:not(.login-page) .app-container.inbound-entry-page .product-search-results .list-group-item:last-child {
    margin-bottom: 0;
}

body:not(.login-page) .app-container.inbound-entry-page .product-search-results .list-group-item-action:hover,
body:not(.login-page) .app-container.inbound-entry-page .product-search-results .list-group-item-action:focus {
    background: rgba(0, 122, 255, 0.08);
    color: var(--label-primary);
}

body:not(.login-page) .app-container.inbound-entry-page .inbound-info-panel,
body:not(.login-page) .app-container.inbound-entry-page .inbound-preview-panel {
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 18px;
    padding: 1rem 1.125rem;
}

body:not(.login-page) .app-container.inbound-entry-page .inbound-info-panel {
    background: rgba(245, 248, 255, 0.9) !important;
}

body:not(.login-page) .app-container.inbound-entry-page .inbound-preview-panel {
    background: rgba(232, 250, 239, 0.82) !important;
    border-color: rgba(52, 199, 89, 0.18);
}

body:not(.login-page) .app-container.inbound-entry-page .inbound-recent-list {
    gap: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem;
}

body:not(.login-page) .app-container.inbound-entry-page .inbound-recent-list .list-group-item {
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 16px;
    margin: 0;
    padding: 0.875rem 1rem;
}

body:not(.login-page) .app-container.inventory-page {
    padding-bottom: 28px;
}

body:not(.login-page) .app-container.inventory-page #emptyState,
body:not(.login-page) .app-container.inventory-page #tableContainer,
body:not(.login-page) .app-container.inventory-page #inventoryBatchDeleteBtn,
body:not(.login-page) .app-container.inventory-page #inventoryClearSelection {
    display: none;
}

body:not(.login-page) .app-container.inventory-page #tableContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

body:not(.login-page) .app-container.inventory-page #loadingState,
body:not(.login-page) .app-container.inventory-page #emptyState,
body:not(.login-page) .app-container.inventory-page #tableContainer,
body:not(.login-page) .app-container.inventory-page #inventoryBatchDeleteModal .modal-content,
body:not(.login-page) .app-container.inventory-page ~ #inboundModal .modal-content,
body:not(.login-page) .app-container.inventory-page ~ #inboundProductPickerModal .modal-content,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .modal-content,
body:not(.login-page) .app-container.inventory-page ~ #detailsModal .modal-content {
    background: var(--bg-elevated) !important;
    backdrop-filter: saturate(180%) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

/* Inventory image bank picker modal */
.image-library-picker .modal-dialog {
        --bs-modal-width: 1660px;
        width: 1660px;
        min-width: 1660px;
        max-width: 1660px;
        height: 865px;
        margin: 18px auto;
    }

.image-library-picker .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

.image-library-picker .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(245, 247, 250, 0.72), rgba(255, 255, 255, 0.92));
    }

.image-library-picker [data-image-library-picker],
#editImageBankPickerModal [data-image-library-picker] {
    height: 100%;
    min-height: 0;
}

.image-library-picker .group-toggle,
#editImageBankPickerModal .group-toggle {
    border: 0;
    padding: 0;
    background: transparent;
}

.image-library-picker .image-library-pagination,
#editImageBankPickerModal .image-library-pagination {
    margin-top: 2px;
    padding-top: 12px;
}

.image-library-dialog__header {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 14px 14px 14px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
    background: rgba(255, 255, 255, 0.78);
    color: var(--label-primary);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
}

.image-library-dialog__header--borderless {
    border-bottom: 0;
}

.image-library-dialog__title {
    margin: 0;
    color: var(--label-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.image-library-dialog__close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%);
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.12);
    color: var(--label-secondary);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

.image-library-dialog__close:hover {
    background: rgba(120, 120, 128, 0.18);
    transform: translateY(-1px);
}

.image-library-dialog__close:focus,
.image-library-dialog__close:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Portal-mounted picker must not depend on the product editor page ancestor. */
.image-library-picker .image-bank-picker-grid.is-loading,
#editImageBankPickerModal .edit-image-bank-picker-grid.is-loading {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 0;
    gap: 14px;
    overflow: hidden;
}

.image-library-picker .image-library-dialog__header {
        flex: 0 0 auto;
        min-height: 54px;
        padding: 14px 14px 14px 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }

.image-library-picker .image-library-dialog__title {
        color: var(--label-primary);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }

.image-library-picker .image-library-dialog__close:focus,
.image-library-picker .image-library-dialog__close:focus-visible {
        box-shadow: none;
        outline: none;
    }

.image-library-picker .image-library-dialog__close {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        background-color: rgba(120, 120, 128, 0.12);
        opacity: 1;
        filter: none !important;
        transition: background-color 0.16s ease, transform 0.16s ease;
    }

.image-library-picker .image-library-dialog__close:hover {
        background-color: rgba(120, 120, 128, 0.18);
        transform: translateY(-1px);
        opacity: 1;
    }

.image-library-picker .image-bank-picker-browser {
        display: flex;
        flex-direction: row;
        gap: 12px;
        height: 100%;
        min-height: 0;
    }

.image-library-picker .image-bank-picker-sidebar {
        flex: 0 0 280px;
        min-width: 280px;
        min-height: 0;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;
    }

.image-library-picker .image-bank-picker-search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

.image-library-picker .image-bank-picker-select-panel {
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

.image-library-picker .image-bank-group-list {
        height: 100%;
        max-height: none;
        overflow: auto;
        padding-right: 2px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        scrollbar-width: none;
    }

.image-library-picker .image-bank-group-list.is-skeleton {
        gap: 12px;
        padding: 8px;
        pointer-events: none;
    }

.image-library-picker .image-bank-group-skeleton-row {
        min-height: 20px;
        display: grid;
        grid-template-columns: 16px 16px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
    }

.image-library-picker .image-bank-group-skeleton-dot,
.image-library-picker .image-bank-group-skeleton-icon,
.image-library-picker .image-bank-group-skeleton-name {
        display: block;
        border-radius: 6px;
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

.image-library-picker .image-bank-group-skeleton-dot,
.image-library-picker .image-bank-group-skeleton-icon {
        width: 16px;
        height: 16px;
    }

.image-library-picker .image-bank-group-skeleton-name {
        width: 74%;
        height: 12px;
        border-radius: 999px;
    }

.image-library-picker .image-bank-group-skeleton-row:nth-child(2n) .image-bank-group-skeleton-name {
        width: 58%;
    }

.image-library-picker .image-bank-group-list::-webkit-scrollbar,
.image-library-picker .image-bank-picker-surface::-webkit-scrollbar {
        display: none;
    }

.image-library-picker .image-bank-group-item {
        box-sizing: border-box;
        height: 38px;
        min-height: 38px;
        border: 0;
        border-radius: 10px;
        padding: 8px 12px;
        background: transparent;
        color: var(--label-primary);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: default;
    }

.image-library-picker .image-bank-group-item.active {
        margin-top: 0;
        margin-bottom: 0;
        color: #007aff;
    }

.image-library-picker .image-bank-group-item i {
        width: 16px;
        margin-right: 0;
        color: inherit;
    }

.image-library-picker .group-toggle,
.image-library-picker .group-toggle-placeholder {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.image-library-picker .group-toggle {
        cursor: pointer;
    }

.image-library-picker .group-toggle::before {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.14s ease;
    }

.image-library-picker .group-toggle.is-expanded::before {
        transform: rotate(45deg) translateY(-1px);
    }

.image-library-picker .group-toggle:hover {
        color: #007aff;
    }

.image-library-picker .image-bank-group-action {
        min-width: 0;
        max-width: 100%;
        height: 22px;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        text-align: left;
    }

.image-library-picker .image-bank-group-action:hover {
        color: #007aff;
    }

.image-library-picker .image-bank-group-item .group-name-text {
        margin-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.image-library-picker .image-bank-picker-main {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

.image-library-picker .image-bank-picker-surface {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        overflow: auto;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        scrollbar-gutter: auto;
        scrollbar-width: none;
    }

.image-library-picker .image-bank-picker-grid {
        flex: 1 1 0;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-auto-rows: max-content;
        gap: 14px;
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: start;
        align-content: start;
        height: auto;
        min-height: 0;
    }

.image-library-picker .image-bank-picker-grid.is-loading {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 0;
        overflow: hidden;
    }

.image-library-picker .image-bank-picker-grid.is-loading .preview-item {
        min-height: 0;
        height: 100%;
        align-self: stretch;
        overflow: hidden;
    }

.image-library-picker .image-bank-picker-grid.is-loading .picker-select-btn {
        height: 100%;
        min-height: 0;
    }

.image-library-picker .image-bank-picker-grid.is-loading .preview-img-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
    }

.image-library-picker .image-bank-picker-grid.is-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

.image-library-picker .image-bank-picker-empty-state {
        grid-column: 1 / -1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 16px;
    }

.image-library-picker .preview-item {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        align-self: start;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

.image-library-picker .preview-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.88);
    }

.image-library-picker .preview-item.selected,
#editImageBankPickerModal .preview-item.selected {
    border-color: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18), 0 12px 28px rgba(15, 23, 42, 0.08);
}

.image-library-picker .picker-select-btn {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        color: inherit;
        font: inherit;
        appearance: none;
    }

.image-library-picker .preview-img-wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 1px solid color-mix(in srgb, var(--separator), white 16%);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 10px;
        background: rgba(245, 247, 250, 0.94);
    }

.image-library-picker .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        padding: 0;
        box-sizing: border-box;
        border-radius: inherit;
        border: 0;
    }

.image-library-picker .preview-item.is-skeleton {
        pointer-events: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

.image-library-picker .preview-item.is-skeleton:hover {
        transform: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
        background: rgba(255, 255, 255, 0.78);
    }

.image-library-picker .skeleton-thumb,
.image-library-picker .skeleton-line {
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

.image-library-picker .skeleton-thumb {
        background: rgba(60, 60, 67, 0.09);
        cursor: default;
    }

.image-library-picker .skeleton-line {
        height: 14px;
        border-radius: 7px;
        display: block;
    }

.image-library-picker .skeleton-line.name {
        height: 18px;
        width: 72%;
    }

.image-library-picker .skeleton-line.meta {
        width: 44%;
        height: 14px;
        margin-top: 5px;
        opacity: 0.78;
    }

.image-library-picker .image-bank-picker-pagination.is-skeleton {
        pointer-events: none;
    }

.image-library-picker .skeleton-page-btn,
.image-library-picker .skeleton-page-info,
.image-library-picker .skeleton-page-input {
        height: 36px;
        border-radius: 12px;
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

.image-library-picker .skeleton-page-btn {
        width: 36px;
    }

.image-library-picker .skeleton-page-btn.nav {
        width: 70px;
    }

.image-library-picker .skeleton-page-info {
        width: 46px;
        height: 14px;
        align-self: center;
    }

.image-library-picker .skeleton-page-input {
        width: 46px;
    }

@keyframes imageBankSkeletonPulse {
        0%, 100% {
            opacity: 0.64;
        }

/* Phase 9 backup status page */
.backup-status-page .card {
    border: 1px solid var(--enterprise-border);
    border-radius: 22px;
    box-shadow: var(--enterprise-shadow-sm);
}

.backup-status-page .backup-warning {
    border: 1px solid rgba(255, 149, 0, 0.16);
    background: rgba(255, 149, 0, 0.08) !important;
    color: var(--enterprise-text-primary);
    border-radius: 18px;
    padding: 1rem 1.125rem;
}

.backup-status-page .backup-path {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.55;
    word-break: break-all;
}

        50% {
            opacity: 1;
        }
    }

.image-library-picker .preview-filename {
        display: block;
        margin-top: 0;
        min-height: 0;
        height: auto;
        color: var(--label-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

.image-library-picker .preview-filename,
.image-library-picker .preview-meta {
        padding-left: 0;
        padding-right: 0;
    }

.image-library-picker .preview-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5px;
        padding-bottom: 0;
        gap: 6px;
    }

.image-library-picker .preview-size {
        color: var(--label-secondary);
        font-size: 12px;
    }

body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .modal-content {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

body:not(.login-page) .app-container.inventory-page #searchFilters .search-filters-card,
body:not(.login-page) .app-container.inventory-page #loadingState,
body:not(.login-page) .app-container.inventory-page #emptyState,
body:not(.login-page) .app-container.inventory-page #tableContainer {
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 18px !important;
    background: var(--bg-elevated) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectionBarRow {
    background: color-mix(in srgb, var(--bg-primary), transparent 48%);
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectionBar {
    gap: 8px;
}

body:not(.login-page) .app-container.inventory-page #inventoryTopSelectToggle {
    align-items: center;
    background: var(--fill-tertiary);
    border-radius: 999px;
    display: inline-flex;
    min-height: 36px;
    padding: 0 10px;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectionBar .pill-action-btn,
body:not(.login-page) .app-container.inventory-page #inventorySelectionBarRow .btn {
    min-height: 36px;
}

body:not(.login-page) .app-container.inventory-page .model-container {
    background: var(--bg-elevated) !important;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
    cursor: default;
    display: flex;
    flex-direction: row;
    height: auto;
    margin-bottom: 14px;
    min-height: 206px;
    overflow: hidden;
}

body:not(.login-page) .app-container.inventory-page .model-container.dragging {
    border: 2px solid var(--accent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent), transparent 72%) !important;
    opacity: 0.7;
}

body:not(.login-page) .app-container.inventory-page .model-image-section {
    align-items: flex-start;
    align-self: flex-start;
    background: transparent !important;
    display: flex;
    justify-content: center;
    min-width: 132px;
    padding: 0;
    width: 132px;
}

body:not(.login-page) .app-container.inventory-page .product-image-placeholder {
    align-items: center;
    background: transparent !important;
    color: var(--label-tertiary);
    display: flex;
    font-size: 3rem;
    height: 132px;
    justify-content: center;
    width: 132px;
}

body:not(.login-page) .app-container.inventory-page .model-image-preview {
    border-radius: 0;
    height: 132px;
    object-fit: cover;
    width: 132px;
}

body:not(.login-page) .app-container.inventory-page .model-content {
    border-left: none;
    display: flex;
    flex: 1;
    flex-direction: column;
}

body:not(.login-page) .app-container.inventory-page .model-header {
    align-items: center;
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
    display: grid !important;
    gap: var(--spec-grid-gap);
    grid-template-columns: var(--spec-grid-columns);
    justify-content: normal !important;
    padding: 10px 12px !important;
}

body:not(.login-page) .app-container.inventory-page .model-header > div:first-child {
    grid-column: 1 / -1;
    min-width: 0;
}

body:not(.login-page) .app-container.inventory-page.inbound-picker-mode .model-header > div:first-child {
    grid-column: 1 / -1 !important;
}

body:not(.login-page) .app-container.inventory-page .model-header h5 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
}

body:not(.login-page) .app-container.inventory-page .model-spec-header {
    background: color-mix(in srgb, var(--bg-secondary), transparent 12%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
}

body:not(.login-page) .app-container.inventory-page .spec-row-header {
    align-items: center;
    background: transparent !important;
    color: var(--label-secondary);
    display: grid;
    font-size: 12px;
    font-weight: 600;
    gap: var(--spec-grid-gap);
    grid-template-columns: var(--spec-grid-columns);
    padding: 10px 12px;
    text-align: center;
}

body:not(.login-page) .app-container.inventory-page .model-specs {
    display: flex;
    flex-direction: column;
}

body:not(.login-page) .app-container.inventory-page .spec-row-data {
    align-items: center;
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 20%);
    color: var(--label-primary);
    display: grid;
    font-size: 13px;
    gap: var(--spec-grid-gap);
    grid-template-columns: var(--spec-grid-columns);
    padding: 10px 12px;
    text-align: center;
    user-select: text;
    -webkit-user-select: text;
}

body:not(.login-page) .app-container.inventory-page .spec-row-data:last-child,
body:not(.login-page) .app-container.inventory-page .spec-row-data.visible-last-row {
    border-bottom: none !important;
}

body:not(.login-page) .app-container.inventory-page .spec-row-data:hover {
    background: rgba(0, 122, 255, 0.04) !important;
}

body:not(.login-page) .app-container.inventory-page .col-actions {
    display: flex;
    gap: 2px;
    justify-content: center;
}

body:not(.login-page) .app-container.inventory-page .col-actions .btn {
    font-size: 12px;
    min-height: 30px;
    padding: 4px 7px;
}

body:not(.login-page) .app-container.inventory-page .col-actions .btn i {
    font-size: 12px;
}

body:not(.login-page) .app-container.inventory-page .col-checkbox {
    display: flex;
    justify-content: center;
}

body:not(.login-page) .app-container.inventory-page .col-checkbox .form-check-input {
    margin-top: 0;
}

body:not(.login-page) .app-container.inventory-page .form-check-input.model-select-all {
    height: 15px;
    width: 15px;
}

body:not(.login-page) .app-container.inventory-page .form-check-input.product-checkbox {
    height: 15px;
    width: 15px;
}

body:not(.login-page) .app-container.inventory-page .selection-bar-row {
    margin-bottom: 5px;
    min-height: 37.5px;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectionBar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    min-height: 37.5px;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectionBar > span {
    align-items: center;
    display: inline-flex;
    line-height: 1;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectAll:focus,
body:not(.login-page) .app-container.inventory-page #inventorySelectAll:focus-visible,
body:not(.login-page) .app-container.inventory-page .form-check-input.model-select-all:focus,
body:not(.login-page) .app-container.inventory-page .form-check-input.model-select-all:focus-visible,
body:not(.login-page) .app-container.inventory-page .form-check-input.product-checkbox:focus,
body:not(.login-page) .app-container.inventory-page .form-check-input.product-checkbox:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), white 20%) !important;
}

body:not(.login-page) .app-container.inventory-page #inventorySelectAll:checked,
body:not(.login-page) .app-container.inventory-page #inventorySelectAll:indeterminate,
body:not(.login-page) .app-container.inventory-page .form-check-input.model-select-all:checked,
body:not(.login-page) .app-container.inventory-page .form-check-input.model-select-all:indeterminate,
body:not(.login-page) .app-container.inventory-page .form-check-input.product-checkbox:checked,
body:not(.login-page) .app-container.inventory-page .form-check-input.product-checkbox:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
}

body:not(.login-page) .app-container.inventory-page .col-image,
body:not(.login-page) .app-container.inventory-page .col-inbound-spec,
body:not(.login-page) .app-container.inventory-page .col-caliber,
body:not(.login-page) .app-container.inventory-page .col-capacity,
body:not(.login-page) .app-container.inventory-page .col-material,
body:not(.login-page) .app-container.inventory-page .col-color,
body:not(.login-page) .app-container.inventory-page .col-quantity,
body:not(.login-page) .app-container.inventory-page .col-price,
body:not(.login-page) .app-container.inventory-page .col-dimensions,
body:not(.login-page) .app-container.inventory-page .col-net-weight,
body:not(.login-page) .app-container.inventory-page .col-pieces,
body:not(.login-page) .app-container.inventory-page .col-box-weight,
body:not(.login-page) .app-container.inventory-page .col-box-spec,
body:not(.login-page) .app-container.inventory-page .col-supplier,
body:not(.login-page) .app-container.inventory-page .col-supplier-code,
body:not(.login-page) .app-container.inventory-page .col-nature,
body:not(.login-page) .app-container.inventory-page .col-shelf {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.login-page) .app-container.inventory-page .spec-row-data .col-image,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-inbound-spec,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-caliber,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-capacity,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-material,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-color,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-quantity,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-price,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-dimensions,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-net-weight,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-pieces,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-box-weight,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-box-spec,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-supplier,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-supplier-code,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-nature,
body:not(.login-page) .app-container.inventory-page .spec-row-data .col-shelf {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    min-width: 0;
}

body:not(.login-page) .app-container.inventory-page .inventory-list-thumb,
body:not(.login-page) .app-container.inventory-page .inventory-list-thumb-placeholder {
    background: color-mix(in srgb, var(--bg-primary), transparent 30%);
    border: 1px solid color-mix(in srgb, var(--separator), white 22%);
    border-radius: 12px;
    height: 80px;
    width: 80px;
}

body:not(.login-page) .app-container.inventory-page .inventory-list-thumb {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    object-fit: cover;
}

body:not(.login-page) .app-container.inventory-page .inventory-list-thumb-placeholder {
    align-items: center;
    color: var(--label-tertiary);
    display: inline-flex;
    justify-content: center;
}

body:not(.login-page) .app-container.inventory-page #openInboundPickerBtn,
body:not(.login-page) .app-container.inventory-page #openInboundPickerBtnEmpty {
    min-width: 120px;
}

body:not(.login-page) .app-container.inventory-page #inventoryBatchDeleteModal .modal-header,
body:not(.login-page) .app-container.inventory-page ~ #inboundModal .modal-header,
body:not(.login-page) .app-container.inventory-page ~ #inboundProductPickerModal .modal-header,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .modal-header,
body:not(.login-page) .app-container.inventory-page ~ #detailsModal .modal-header,
body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%) !important;
    color: var(--label-primary) !important;
}

body:not(.login-page) .app-container.inventory-page #inventoryBatchDeleteModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ #inboundModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ #inboundProductPickerModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ #detailsModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .btn-close,
body:not(.login-page) .app-container.inventory-page ~ .image-library-picker .btn-close {
    filter: none !important;
}

body:not(.login-page) .app-container.inventory-page ~ #inboundProductPickerModal .modal-header .btn-close:focus,
body:not(.login-page) .app-container.inventory-page ~ #inboundProductPickerModal .modal-header .btn-close:focus-visible,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .form-control:focus,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .form-control:focus-visible,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .form-select:focus,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .form-select:focus-visible {
    box-shadow: none;
    outline: none;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-select {
    position: relative;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-trigger {
    background: color-mix(in srgb, var(--bg-primary), transparent 14%);
    border: 1px solid var(--separator);
    border-radius: 12px;
    box-shadow: none;
    color: var(--label-primary);
    min-height: 40px;
    padding: 0.45rem 2.2rem 0.45rem 0.75rem;
    position: relative;
    text-align: left;
    width: 100%;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-trigger::after {
    border-bottom: 2px solid var(--label-secondary);
    border-right: 2px solid var(--label-secondary);
    content: "";
    height: 0.5rem;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 0.5rem;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-trigger.is-invalid {
    border-color: var(--danger);
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-trigger:focus,
body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent), white 12%);
    background-color: color-mix(in srgb, var(--accent), white 93%);
    outline: none;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-menu {
    background: var(--bg-elevated);
    border: 1px solid color-mix(in srgb, var(--separator), white 16%);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    left: 0;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1085;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-option {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--label-primary);
    display: block;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

body:not(.login-page) .app-container.inventory-page ~ #stockOperationModal .stock-op-type-option:hover {
    background: color-mix(in srgb, var(--accent), transparent 92%);
}

body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .modal-content {
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff;
}

body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body:not(.login-page) .app-container.inventory-page ~ #inventoryImagePreviewModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

body:not(.login-page) .app-container.transactions-page {
    max-width: 1460px;
}

body:not(.login-page) .app-container.transactions-page .summary-card {
    height: 100%;
    overflow: hidden;
    text-align: left;
}

body:not(.login-page) .app-container.transactions-page .summary-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px !important;
}

body:not(.login-page) .app-container.transactions-page .summary-label {
    color: var(--label-secondary);
    font-size: 13px;
    font-weight: 600;
}

body:not(.login-page) .app-container.transactions-page .summary-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
}

body:not(.login-page) .app-container.transactions-page .summary-foot {
    color: var(--label-tertiary);
    font-size: 12px;
}

body:not(.login-page) .app-container.transactions-page .summary-card.inbound .summary-value {
    color: color-mix(in srgb, var(--success), black 14%);
}

body:not(.login-page) .app-container.transactions-page .summary-card.outbound .summary-value {
    color: color-mix(in srgb, var(--danger), black 6%);
}

body:not(.login-page) .app-container.transactions-page .summary-card.adjust .summary-value {
    color: color-mix(in srgb, var(--warning), black 18%);
}

body:not(.login-page) .app-container.transactions-page .filter-card,
body:not(.login-page) .app-container.transactions-page .records-card {
    overflow: visible;
}

body:not(.login-page) .app-container.transactions-page .filter-card .card-header,
body:not(.login-page) .app-container.transactions-page .records-card .card-header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

body:not(.login-page) .app-container.transactions-page .card-title {
    font-size: 15px;
    font-weight: 700;
}

body:not(.login-page) .app-container.transactions-page #deleteTransactionModal .modal-content {
    border-radius: 24px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

body:not(.login-page) .app-container.transactions-page #deleteTransactionModal .modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 251, 0.92));
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--label-primary);
}

body:not(.login-page) .app-container.transactions-page .transaction-delete-warning {
    background: rgba(255, 59, 48, 0.08) !important;
    border: 1px solid rgba(255, 59, 48, 0.14);
    border-radius: 18px;
    color: var(--label-primary);
    padding: 1rem 1.125rem;
}

body:not(.login-page) .app-container.transactions-page .product-search-container {
    z-index: 20;
}

body:not(.login-page) .app-container.transactions-page .product-dropdown {
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid color-mix(in srgb, var(--separator), white 16%);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    left: 0;
    max-height: 320px;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
}

body:not(.login-page) .app-container.transactions-page .product-option {
    cursor: pointer;
    padding: 12px 14px;
    transition: background-color 0.16s ease, color 0.16s ease;
}

body:not(.login-page) .app-container.transactions-page .product-option:hover,
body:not(.login-page) .app-container.transactions-page .product-option.active,
body:not(.login-page) .app-container.transactions-page .product-option.selected {
    background: rgba(0, 122, 255, 0.08);
    color: var(--accent-strong);
}

body:not(.login-page) .app-container.transactions-page .product-name {
    font-size: 14px;
    font-weight: 600;
}

body:not(.login-page) .app-container.transactions-page .table td {
    line-height: 1.45;
}

body:not(.login-page) .app-container.transactions-page .transaction-model {
    color: var(--label-primary);
    font-weight: 600;
}

body:not(.login-page) .app-container.transactions-page .transaction-time {
    white-space: nowrap;
}

body:not(.login-page) .app-container.transactions-page .stock-metric {
    align-items: center;
    background: rgba(120, 120, 128, 0.1);
    border-radius: 999px;
    color: var(--label-primary);
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 32px;
    min-width: 52px;
    padding: 0 10px;
}

body:not(.login-page) .app-container.transactions-page .operator-chip {
    align-items: center;
    background: rgba(120, 120, 128, 0.1);
    border-radius: 999px;
    color: var(--label-secondary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    min-height: 30px;
    padding: 0 10px;
}

body:not(.login-page) .app-container.transactions-page .note-cell {
    color: var(--label-secondary) !important;
    max-width: 260px;
    white-space: normal;
}

body:not(.login-page) .app-container.transactions-page .empty-records {
    padding: 64px 20px;
}

body:not(.login-page) .app-container.transactions-page .empty-records i {
    color: var(--label-tertiary);
    font-size: 52px;
}

body:not(.login-page) .app-container.transactions-page .date-range-picker {
    position: relative;
}

body:not(.login-page) .app-container.transactions-page .date-range-dropdown {
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid color-mix(in srgb, var(--separator), white 16%);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    left: 0;
    min-width: 760px;
    overflow: hidden;
    position: absolute;
    top: calc(100% + 8px);
    z-index: 30;
}

body:not(.login-page) .app-container.transactions-page .date-range-content {
    padding: 16px;
}

body:not(.login-page) .app-container.transactions-page .calendar-main-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: 132px minmax(0, 1fr);
}

body:not(.login-page) .app-container.transactions-page .calendar-sidebar {
    padding-right: 4px;
}

body:not(.login-page) .app-container.transactions-page .dual-calendar {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.login-page) .app-container.transactions-page .calendar-month {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 16px;
    padding: 14px;
}

body:not(.login-page) .app-container.transactions-page .calendar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

body:not(.login-page) .app-container.transactions-page .calendar-title {
    color: var(--label-primary);
    font-size: 14px;
    font-weight: 700;
}

body:not(.login-page) .app-container.transactions-page .calendar-nav {
    min-height: 30px;
    padding: 4px 10px;
}

body:not(.login-page) .app-container.transactions-page .calendar-weekdays,
body:not(.login-page) .app-container.transactions-page .calendar-days {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

body:not(.login-page) .app-container.transactions-page .calendar-weekdays {
    margin-bottom: 6px;
}

body:not(.login-page) .app-container.transactions-page .weekday {
    color: var(--label-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
}

body:not(.login-page) .app-container.transactions-page .calendar-day {
    align-items: center;
    border-radius: 10px;
    color: var(--label-primary);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    justify-content: center;
    min-height: 34px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.login-page) .app-container.transactions-page .calendar-day:not(.empty-day):hover {
    background: rgba(0, 122, 255, 0.08);
}

body:not(.login-page) .app-container.transactions-page .calendar-day.empty-day {
    background: transparent;
    cursor: default;
}

body:not(.login-page) .app-container.transactions-page .calendar-day.today {
    background: rgba(0, 122, 255, 0.12);
    color: var(--accent-strong);
    font-weight: 700;
}

body:not(.login-page) .app-container.transactions-page .calendar-day.today.not-in-selection {
    background: rgba(120, 120, 128, 0.08);
    color: var(--label-secondary);
    font-weight: 600;
}

body:not(.login-page) .app-container.transactions-page .calendar-day.range-start,
body:not(.login-page) .app-container.transactions-page .calendar-day.range-end {
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
}

body:not(.login-page) .app-container.transactions-page .calendar-day.in-range {
    background: rgba(0, 122, 255, 0.1);
    color: var(--accent-strong);
}

@media (max-width: 1199.98px) {
    body:not(.login-page) .app-container.transactions-page .date-range-dropdown {
        min-width: 680px;
    }

    body:not(.login-page) .app-container.organization-units-page .unit-inline-form {
        grid-template-columns: repeat(3, minmax(110px, 1fr)) auto;
        min-width: 760px;
    }

    body:not(.login-page) .app-container.users-page .users-table .user-role-form,
    body:not(.login-page) .app-container.users-page .users-table .user-reset-form {
        min-width: 0;
    }

    body:not(.login-page) .app-container.users-page .users-table .user-role-form .form-select,
    body:not(.login-page) .app-container.users-page .users-table .user-reset-form .form-control {
        min-width: 128px;
    }
}

@media (max-width: 767.98px) {
    body:not(.login-page) .app-container.business-rules-page .metric-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-page) .app-container.transactions-page .calendar-main-layout,
    body:not(.login-page) .app-container.transactions-page .dual-calendar {
        grid-template-columns: 1fr;
    }

    body:not(.login-page) .app-container.transactions-page .date-range-dropdown {
        min-width: min(92vw, 720px);
    }

    body:not(.login-page) .app-container.users-page .role-help-popover {
        left: -48px;
    }

    body:not(.login-page) .app-container.users-page .role-help-item {
        gap: 3px;
        grid-template-columns: 1fr;
    }

    body:not(.login-page) .app-container.users-page .user-actions-cell {
        min-width: 0;
    }

    body:not(.login-page) .app-container.users-page .user-actions-cell .user-inline-form {
        justify-content: flex-start;
    }

    body:not(.login-page) .app-container.users-page .users-table .role-column,
    body:not(.login-page) .app-container.users-page .users-table .org-column,
    body:not(.login-page) .app-container.users-page .users-table .actions-column {
        white-space: normal;
    }

    body:not(.login-page) .app-container.users-page .users-table .user-role-form,
    body:not(.login-page) .app-container.users-page .users-table .user-reset-form {
        align-items: stretch;
        flex-direction: column;
    }

    body:not(.login-page) .app-container.users-page .users-table .user-role-form .form-select,
    body:not(.login-page) .app-container.users-page .users-table .user-reset-form .form-control,
    body:not(.login-page) .app-container.users-page .users-table .user-role-form .btn,
    body:not(.login-page) .app-container.users-page .users-table .user-reset-form .btn {
        width: 100%;
    }
}

body:not(.login-page) .app-container.document-page .document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body:not(.login-page) .app-container.document-page .row .text-muted.small,
body:not(.login-page) .app-container.enterprise-page .row .text-muted.small {
    letter-spacing: 0;
}

@media print {
    body {
        background: #fff !important;
    }

    .main-navbar,
    .document-actions,
    .btn,
    .alert {
        display: none !important;
    }

    .fixed-navbar-page {
        padding-top: 0 !important;
    }

    .app-container.document-page {
        max-width: none !important;
        padding: 0 !important;
    }

    .app-container.document-page .card {
        border: 1px solid #222 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .app-container.document-page .card-header {
        background: #fff !important;
        border-bottom: 1px solid #222 !important;
    }

    .app-container.document-page .table th,
    .app-container.document-page .table td {
        border-color: #222 !important;
    }
}

/* Input interactions use neutral border changes rather than the theme accent. */
body:not(.login-page) input:not([type="checkbox"]):not([type="radio"]):not(:disabled):not(:invalid):hover,
body:not(.login-page) select:not(:disabled):not(:invalid):hover,
body:not(.login-page) textarea:not(:disabled):not(:invalid):hover,
body:not(.login-page) .form-control:not(:disabled):not(.is-invalid):not(:invalid):hover,
body:not(.login-page) .form-select:not(:disabled):not(.is-invalid):not(:invalid):hover {
    border-color: #b0b5bc !important;
}

/* Focus states use a slightly darker in-control border, never an outer glow. */
body:not(.login-page) input:focus,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus,
body:not(.login-page) textarea:focus-visible,
body:not(.login-page) .form-control:focus,
body:not(.login-page) .form-control:focus-visible,
body:not(.login-page) .form-select:focus,
body:not(.login-page) .form-select:focus-visible,
body:not(.login-page) .form-check-input:focus,
body:not(.login-page) .form-check-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body:not(.login-page) input:focus,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus,
body:not(.login-page) textarea:focus-visible,
body:not(.login-page) .form-control:focus,
body:not(.login-page) .form-control:focus-visible,
body:not(.login-page) .form-select:focus,
body:not(.login-page) .form-select:focus-visible {
    border-color: #858b93 !important;
}

body:not(.login-page) .form-check-input:focus,
body:not(.login-page) .form-check-input:focus-visible {
    border-color: color-mix(in srgb, var(--accent), white 8%) !important;
}

/* Global focus ring reset: keep focus behavior, remove browser/Bootstrap outer glow. */
body:not(.login-page) :focus,
body:not(.login-page) :focus-visible,
body:not(.login-page) .btn:focus,
body:not(.login-page) .btn:focus-visible,
body:not(.login-page) .btn-close:focus,
body:not(.login-page) .btn-close:focus-visible,
body:not(.login-page) .dropdown-item:focus,
body:not(.login-page) .dropdown-item:focus-visible,
body:not(.login-page) .page-link:focus,
body:not(.login-page) .page-link:focus-visible,
body:not(.login-page) .form-control:focus,
body:not(.login-page) .form-control:focus-visible,
body:not(.login-page) .form-select:focus,
body:not(.login-page) .form-select:focus-visible,
body:not(.login-page) .form-check-input:focus,
body:not(.login-page) .form-check-input:focus-visible,
body:not(.login-page) .btn-check:focus + .btn,
body:not(.login-page) .btn-check:focus-visible + .btn {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Phase 8 product bulk import page */
    html:not(.embed-image-bank-mode) body:not(.login-page)>main.container-fluid>.app-container.bulk-import-page {
        width: 1360px;
        min-width: 1360px;
        max-width: 1360px;
    }

    .bulk-import-page {
        --bulk-surface: rgba(255, 255, 255, 0.82);
        --bulk-surface-strong: rgba(255, 255, 255, 0.92);
        --bulk-border: color-mix(in srgb, var(--separator), white 16%);
        --bulk-border-strong: color-mix(in srgb, var(--separator), white 6%);
        --bulk-hover: rgba(0, 122, 255, 0.05);
        --bulk-upload-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 251, 0.82));
    }

    .bulk-icon {
        width: 1em;
        height: 1em;
        display: inline-block;
        vertical-align: -0.125em;
        flex: 0 0 auto;
    }

    .bulk-icon.fill-current {
        fill: currentColor;
    }

    .bulk-import-page .bulk-upload-picker-icon .bulk-icon,
    .bulk-import-page .bulk-empty-state-icon .bulk-icon {
        width: 1.25rem;
        height: 1.25rem;
        vertical-align: middle;
    }

    .bulk-import-page .empty-state-icon.bulk-icon {
        width: 2.15rem;
        height: 2.15rem;
        vertical-align: middle;
    }

    .bulk-import-page .bulk-page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .bulk-import-page .bulk-page-eyebrow {
        margin-bottom: 0.35rem;
        color: var(--label-secondary);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .bulk-import-page .bulk-page-title {
        margin: 0;
        font-size: 2.15rem;
        line-height: 1.08;
        font-weight: 700;
    }

    .bulk-import-page .bulk-page-subtitle {
        margin: 0.5rem 0 0;
        max-width: 42rem;
        color: var(--label-secondary);
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .bulk-import-page .bulk-page-back {
        min-height: 44px;
        padding-inline: 1rem;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.72) !important;
    }

    .bulk-import-page .bulk-section {
        border: 1px solid var(--bulk-border) !important;
        border-radius: 26px !important;
        background: var(--bulk-surface) !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
        overflow: hidden;
    }

    .bulk-import-page .bulk-section+.bulk-section {
        margin-top: 1.25rem;
    }

    .bulk-import-page .card-header.bulk-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.1rem 1.35rem;
        background: rgba(255, 255, 255, 0.46) !important;
        border-bottom: 1px solid var(--bulk-border) !important;
    }

    .bulk-import-page .bulk-section-heading {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        min-width: 0;
    }

    .bulk-import-page .bulk-section-index {
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--accent), white 88%);
        color: var(--accent-strong);
        font-size: 0.86rem;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .bulk-import-page .card-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .bulk-import-page .bulk-section-copy {
        margin: 0.18rem 0 0;
        color: var(--label-secondary);
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .bulk-import-page .bulk-section .card-body {
        padding: 1.35rem;
    }

    .bulk-import-page .bulk-download-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .bulk-import-page .bulk-download-note {
        max-width: 32rem;
        margin: 0;
        color: var(--label-secondary);
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .bulk-import-page .bulk-primary-action {
        min-height: 44px;
        padding-inline: 1.15rem;
        border-radius: var(--radius-pill);
    }

    .bulk-import-page .bulk-secondary-action {
        min-height: 44px;
        padding-inline: 1rem;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.72) !important;
    }

    .bulk-import-page .bulk-upload-field {
        margin-bottom: 1rem;
    }

    .bulk-import-page .bulk-upload-label {
        display: block;
        margin-bottom: 0.7rem;
        color: var(--label-secondary);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .bulk-import-page .bulk-upload-picker {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
        padding: 1rem 1.05rem;
        border: 1px solid var(--bulk-border);
        border-radius: 22px;
        background: var(--bulk-upload-bg);
        transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    }

    .bulk-import-page .bulk-upload-picker:hover {
        border-color: color-mix(in srgb, var(--accent), white 22%);
        transform: translateY(-1px);
    }

    .bulk-import-page .bulk-upload-picker:focus-within {
        border-color: color-mix(in srgb, var(--accent), white 14%);
        background: color-mix(in srgb, var(--accent), white 95%);
    }

    .bulk-import-page .bulk-upload-picker-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%), var(--accent-strong));
        color: #fff;
        font-size: 1.2rem;
        box-shadow: 0 14px 24px rgba(0, 122, 255, 0.16);
    }

    .bulk-import-page .bulk-upload-picker-copy {
        min-width: 0;
    }

    .bulk-import-page .bulk-upload-picker-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.25rem;
    }

    .bulk-import-page .bulk-upload-picker-title strong {
        font-size: 1rem;
        font-weight: 700;
    }

    .bulk-import-page .bulk-upload-picker-meta {
        color: var(--label-secondary);
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .bulk-import-page .bulk-upload-picker-status {
        margin-top: 0.5rem;
        color: var(--label-primary);
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bulk-import-page .bulk-upload-trigger {
        min-height: 40px;
        padding-inline: 0.95rem;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.86) !important;
        white-space: nowrap;
    }

    .bulk-import-page .bulk-upload-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .bulk-import-page .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }

    .bulk-import-page .btn .bulk-icon {
        width: 0.95rem;
        height: 0.95rem;
        vertical-align: middle;
        margin: 0 !important;
    }

    .bulk-import-page .bulk-help-callout {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.8rem;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding: 0.95rem 1rem;
        border: 1px solid color-mix(in srgb, var(--accent), white 65%);
        border-radius: 18px;
        background: color-mix(in srgb, var(--accent), white 94%);
    }

    .bulk-import-page .bulk-help-callout i {
        color: var(--accent-strong);
        font-size: 1rem;
        margin-top: 0.05rem;
    }

    .bulk-import-page .bulk-help-title {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0 0 0.18rem;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--label-primary);
    }

    .bulk-import-page .bulk-help-text {
        margin: 0;
        color: var(--label-secondary);
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .bulk-import-page .bulk-progress-shell {
        padding: 1rem 1.05rem;
        border: 1px solid var(--bulk-border);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
    }

    .bulk-import-page .bulk-progress-shell .progress {
        height: 10px !important;
        border-radius: 999px;
        background: rgba(120, 120, 128, 0.12);
        overflow: hidden;
    }

    .bulk-import-page .bulk-progress-shell .progress-bar {
        border-radius: 999px;
    }

    .bulk-import-page .bulk-record-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .bulk-import-page .bulk-record-scroll {
        height: 460px;
        overflow: auto !important;
        display: block;
        overscroll-behavior: contain;
    }

    .bulk-import-page .bulk-record-table {
        table-layout: fixed;
        width: 100%;
        margin-top: 0;
    }

    .bulk-import-page .bulk-record-table thead th {
        background: rgba(255, 255, 255, 0.34) !important;
        color: var(--label-secondary) !important;
        border-bottom-color: var(--bulk-border-strong) !important;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .bulk-import-page .bulk-record-table tbody td {
        border-color: color-mix(in srgb, var(--separator), white 12%);
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .bulk-import-page .bulk-record-table tbody tr:hover {
        background: var(--bulk-hover) !important;
    }

    .bulk-import-page .bulk-record-filename strong {
        display: block;
        font-size: 0.94rem;
        font-weight: 650;
        color: var(--label-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bulk-import-page .bulk-record-filename small {
        display: block;
        margin-top: 0.18rem;
        color: var(--label-secondary);
    }

    .bulk-import-page .bulk-record-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 10px;
        background: rgba(0, 122, 255, 0.08) !important;
        border: 1px solid rgba(0, 122, 255, 0.16) !important;
        color: var(--accent-strong) !important;
        font-size: 0;
        line-height: 1;
        box-shadow: none;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }

    .bulk-import-page .bulk-record-link:hover,
    .bulk-import-page .bulk-record-link:focus-visible {
        background: color-mix(in srgb, var(--accent), white 84%) !important;
        border-color: color-mix(in srgb, var(--accent), white 42%) !important;
        color: var(--accent-strong) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 122, 255, 0.12);
    }

    .bulk-import-page .bulk-record-link.is-loading {
        cursor: wait;
        transform: none;
        box-shadow: none;
    }

    .bulk-import-page .bulk-record-link.is-loading .bulk-icon {
        opacity: 0.52;
        animation: bulk-record-icon-pulse 900ms ease-in-out infinite;
    }

    .bulk-import-page .bulk-record-link .bulk-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

    @keyframes bulk-record-icon-pulse {
        0%,
        100% {
            opacity: 0.52;
        }
        50% {
            opacity: 0.92;
        }
    }

    .bulk-import-page .bulk-stat-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3.15rem;
        padding: 0.38rem 0.7rem;
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 700;
    }

    .bulk-import-page .bulk-stat-badge.success {
        background: rgba(52, 199, 89, 0.14);
        color: color-mix(in srgb, var(--success), black 18%);
    }

    .bulk-import-page .bulk-stat-badge.warning {
        background: rgba(255, 159, 10, 0.16);
        color: color-mix(in srgb, var(--warning), black 24%);
    }

    .bulk-import-page .bulk-stat-badge.neutral {
        background: rgba(120, 120, 128, 0.12);
        color: var(--label-secondary);
    }

    .bulk-import-page .bulk-record-error {
        color: var(--label-secondary);
        line-height: 1.45;
    }

    .bulk-import-page .duplicate-modal-dialog {
        max-width: 860px;
    }

    .bulk-import-page .modal-content {
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    }

    .bulk-import-page #clearImportLogsModal .modal-header,
    .bulk-import-page #duplicateSpecModal .modal-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 251, 0.92)) !important;
        color: var(--enterprise-text-primary) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .bulk-import-page #clearImportLogsModal .btn-close,
    .bulk-import-page #duplicateSpecModal .btn-close {
        filter: none;
    }

    .bulk-import-page #duplicateSpecModal .modal-body {
        padding: 1rem 1rem 0.8rem;
        background: rgba(248, 249, 252, 0.72);
    }

    .bulk-import-page .duplicate-summary-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.9rem;
        padding: 0.95rem 1rem;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.84);
    }

    .bulk-import-page .duplicate-summary-title {
        margin: 0 0 0.28rem;
        font-size: 0.96rem;
        font-weight: 700;
        color: var(--label-primary);
    }

    .bulk-import-page .duplicate-summary-text {
        margin: 0;
        color: var(--label-secondary);
        font-size: 0.83rem;
        line-height: 1.5;
    }

    .bulk-import-page .duplicate-list {
        max-height: 430px;
        overflow-y: auto;
        padding-right: 0.15rem;
    }

    .bulk-import-page .duplicate-item + .duplicate-item {
        margin-top: 0.75rem;
    }

    .bulk-import-page .duplicate-item {
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    .bulk-import-page .duplicate-item-main,
    .bulk-import-page .duplicate-item-secondary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        padding: 0.9rem 1rem;
    }

    .bulk-import-page .duplicate-item-secondary {
        border-top: 1px solid color-mix(in srgb, var(--separator), white 12%);
        background: rgba(247, 248, 252, 0.74);
    }

    .bulk-import-page .duplicate-field {
        min-width: 0;
    }

    .bulk-import-page .duplicate-field-label {
        margin-bottom: 0.22rem;
        color: var(--label-tertiary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .bulk-import-page .duplicate-field-value {
        color: var(--label-primary);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .bulk-import-page .duplicate-field-value.secondary {
        color: var(--label-secondary);
        font-weight: 500;
    }

    .bulk-import-page #duplicateSpecModal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 64px;
        padding: 0.6rem 1rem 0;
        background: rgba(255, 255, 255, 0.8);
    }

    .bulk-import-page #clearImportLogsModal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        min-height: 64px;
        padding-top: 0.4rem;
        padding-bottom: 0;
    }

    .bulk-import-page #clearImportLogsModal .modal-footer .btn {
        min-height: 40px;
        padding: 0.6rem 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin: 0;
    }

    .bulk-import-page .import-warning {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        border: 1px solid rgba(255, 149, 0, 0.16);
        background: rgba(255, 149, 0, 0.08) !important;
        border-radius: 18px;
        padding: 0.875rem 1rem;
    }

    .bulk-import-page .bulk-record-table th,
    .bulk-import-page .bulk-record-table td {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        vertical-align: middle;
    }

    .import-log-time {
        width: 142px;
    }

    .import-log-filename {
        width: 210px;
    }

    .import-log-count {
        width: 72px;
    }

    .import-log-operator {
        width: 88px;
    }

    .import-log-action {
        width: 122px;
    }

    .import-log-error {
        width: auto;
    }

    .import-log-error-text {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bulk-import-page .bulk-empty-state {
        padding: 2.6rem 1.5rem 2.8rem;
        text-align: center;
    }

    .bulk-import-page .bulk-empty-state-icon {
        width: 3.6rem;
        height: 3.6rem;
        margin: 0 auto 1rem;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--accent), white 92%);
        color: var(--accent-strong);
        font-size: 1.35rem;
    }

    .bulk-import-page .bulk-empty-state-title {
        margin: 0 0 0.35rem;
        font-size: 1rem;
        font-weight: 700;
    }

    .bulk-import-page .bulk-empty-state-copy {
        margin: 0;
        color: var(--label-secondary);
        font-size: 0.93rem;
    }

/* Phase 8 product add editor page */
.product-editor-page.product-add-page {
        max-width: 100%;
    }

    .product-editor-page.product-add-page .product-editor-shell {
        width: min(1568px, 100%);
        margin: 0 auto;
    }

    .product-editor-page.product-add-page .product-editor-toolbar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }

    .product-editor-page.product-add-page .product-editor-title {
        margin: 0;
        color: var(--label-primary);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .product-editor-page.product-add-page .card {
        border: 1px solid var(--enterprise-border);
        border-radius: 22px;
        box-shadow: var(--enterprise-shadow-sm);
        overflow: hidden;
    }

    .product-editor-page.product-add-page .card-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 247, 251, 0.9)) !important;
        color: var(--enterprise-text-primary) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        padding: 16px 20px;
    }

    .product-editor-page.product-add-page .card-header small,
.product-editor-page.product-add-page .card-header .text-warning {
        color: var(--enterprise-text-secondary) !important;
    }

    .product-editor-page.product-add-page .card-body {
        padding: 20px;
    }

    .product-editor-page.product-add-page .product-editor-panel {
        border: 1px solid var(--enterprise-border);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: var(--enterprise-shadow-sm);
        overflow: visible;
    }

    .product-editor-page.product-add-page #baseInfoSection {
        overflow: visible;
    }

    .product-editor-page.product-add-page .product-editor-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 247, 251, 0.9));
    }

    .product-editor-page.product-add-page .product-editor-panel-body {
        display: grid;
        grid-template-columns: 148px minmax(0, 1fr);
        gap: 28px;
        padding: 22px 20px 20px;
    }

    .product-editor-page.product-add-page .product-image-pane {
        min-width: 0;
    }

    .product-editor-page.product-add-page .product-image-pane .form-label {
        margin-bottom: 10px;
    }

    .product-editor-page.product-add-page .product-form-pane {
        min-width: 0;
    }

    .product-editor-page.product-add-page .product-form-pane > .slider-container {
        margin-top: 24px;
    }

    .product-editor-page.product-add-page .editor-form-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 40px;
        align-items: end;
    }

    .product-editor-page.product-add-page .product-form-pane > .editor-form-grid + .editor-form-grid {
        margin-top: 40px;
    }

    .product-editor-page.product-add-page .editor-field-span-2 {
        grid-column: span 2;
    }

    .product-editor-page.product-add-page .editor-field-span-3 {
        grid-column: span 3;
    }

    .product-editor-page.product-add-page .editor-field-span-4 {
        grid-column: span 4;
    }

    .product-editor-page.product-add-page .editor-field-span-6 {
        grid-column: span 6;
    }

    .product-editor-page.product-add-page .editor-field-span-8 {
        grid-column: span 8;
    }

    .product-editor-page.product-add-page .editor-field-span-12 {
        grid-column: 1 / -1;
    }

    .product-editor-page.product-add-page .product-editor-panel-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        background: rgba(246, 247, 251, 0.64);
    }

    .product-editor-page.product-add-page .editor-section-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .product-editor-page.product-add-page .editor-section-title i {
        margin-right: 0 !important;
        color: var(--label-secondary);
    }

    .product-editor-page.product-add-page .editor-section-note {
        color: var(--label-secondary) !important;
        font-size: 12px;
        font-weight: 600;
    }

    .product-editor-page.product-add-page .editor-section-actions {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    .product-editor-page.product-add-page .editor-dimension-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.625rem;
        align-items: center;
    }

    .product-editor-page.product-add-page .editor-dimension-group .form-control {
        min-width: 0;
    }

    .product-editor-page.product-add-page .image-upload-grid {
        margin-top: 0;
        padding-bottom: 0;
        gap: 12px;
    }

    .product-editor-page.product-add-page .image-upload-box {
        width: 132px;
        height: 132px;
        border-radius: 14px;
        border-color: color-mix(in srgb, var(--separator), white 4%);
        background: rgba(255, 255, 255, 0.78);
    }

    .product-editor-page.product-add-page .image-upload-box:hover {
        border-color: color-mix(in srgb, var(--accent), white 20%);
        background: color-mix(in srgb, var(--accent), white 94%);
    }

    .product-editor-page.product-add-page .image-upload-box .upload-placeholder {
        gap: 8px;
        color: var(--label-tertiary);
    }

    .product-editor-page.product-add-page .image-upload-box .upload-placeholder i {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: rgba(60, 60, 67, 0.08);
        font-size: 17px;
    }

    .product-editor-page.product-add-page .image-upload-box .upload-placeholder span {
        font-size: 12px;
        font-weight: 700;
    }

    .product-editor-page.product-add-page .editor-submit-row {
        padding-bottom: 4px;
    }

    .product-editor-page.product-add-page #addSpecBtn {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent), white 28%) !important;
        background: rgba(255, 255, 255, 0.78) !important;
    }

    .product-editor-page.product-add-page #addSpecBtn:hover {
        background: color-mix(in srgb, var(--accent), white 92%) !important;
    }

    .product-editor-page.product-add-page .gross-weight[readonly],
.product-editor-page.product-add-page #baseModel.bg-light,
.product-editor-page.product-add-page #baseType.bg-light {
        background: rgba(244, 246, 251, 0.9) !important;
        color: var(--enterprise-text-secondary);
        border-color: rgba(15, 23, 42, 0.08);
        cursor: not-allowed;
    }

    .product-editor-page.product-add-page .editor-combobox {
        position: relative;
    }

    .product-editor-page.product-add-page .editor-combobox .form-control {
        padding-right: 38px;
    }

    .product-editor-page.product-add-page .editor-combobox-toggle {
        position: absolute;
        right: 8px;
        top: 50%;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--label-secondary);
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .product-editor-page.product-add-page .editor-combobox-toggle:hover {
        background: rgba(60, 60, 67, 0.08);
        color: var(--label-primary);
    }

    .product-editor-page.product-add-page .editor-combobox-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 30;
        display: none;
        max-height: 230px;
        padding: 6px;
        overflow-y: auto;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(18px);
    }

    .product-editor-page.product-add-page .editor-combobox.open .editor-combobox-menu {
        display: block;
    }

    .product-editor-page.product-add-page .editor-combobox-option,
.product-editor-page.product-add-page .editor-combobox-empty {
        width: 100%;
        min-height: 34px;
        padding: 7px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--enterprise-text-primary);
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    .product-editor-page.product-add-page .editor-combobox-option:hover,
.product-editor-page.product-add-page .editor-combobox-option:focus {
        background: rgba(0, 122, 255, 0.12);
        color: var(--accent);
        outline: none;
    }

    .product-editor-page.product-add-page .editor-combobox-empty {
        color: var(--label-secondary);
        cursor: default;
    }

    .product-editor-page.product-add-page #duplicateSpecModal .modal-header,
.product-editor-page.product-add-page .image-library-picker .modal-header {
        color: var(--enterprise-text-primary) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
    }

    .product-editor-page.product-add-page #duplicateSpecModal .btn-close,
.product-editor-page.product-add-page .image-library-picker .btn-close {
        filter: none;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-content,
.product-editor-page.product-add-page #duplicateSpecModal .modal-content {
        overflow: hidden;
    }

    @media (max-width: 767.98px) {
        .product-editor-page.product-add-page .product-editor-panel-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .product-editor-page.product-add-page .product-editor-panel-body {
            grid-template-columns: 1fr;
        }

        .product-editor-page.product-add-page .editor-form-grid {
            grid-template-columns: 1fr;
        }

        .product-editor-page.product-add-page .editor-field-span-2,
.product-editor-page.product-add-page .editor-field-span-3,
.product-editor-page.product-add-page .editor-field-span-4,
.product-editor-page.product-add-page .editor-field-span-6,
.product-editor-page.product-add-page .editor-field-span-8,
.product-editor-page.product-add-page .editor-field-span-12 {
            grid-column: 1 / -1;
        }

        .product-editor-page.product-add-page .editor-dimension-group {
            grid-template-columns: 1fr;
        }

        .product-editor-page.product-add-page .editor-dimension-group span {
            display: none;
        }

        .product-editor-page.product-add-page .product-editor-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }
    }

.product-editor-page.product-add-page #productForm .form-control:focus,
.product-editor-page.product-add-page #productForm .form-control:focus-visible,
.product-editor-page.product-add-page #productForm .form-select:focus,
.product-editor-page.product-add-page #productForm .form-select:focus-visible {
        box-shadow: none;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-modal .modal-content {
        border-radius: 18px;
        overflow: hidden;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-dialog {
        max-width: 520px;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-icon {
        font-size: 2.75rem;
        line-height: 1;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-title {
        font-size: 0.98rem;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-note {
        font-size: 0.88rem;
    }

    .product-editor-page.product-add-page .spec-remove-confirm-footer {
        align-items: center;
        gap: 10px;
        min-height: 74px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-editor-page.product-add-page .slider-container {
        position: relative;
        overflow: visible;
        height: auto;
    }

    .product-editor-page.product-add-page .slider-page {
        display: none;
        animation: slideIn 0.3s ease-in-out;
    }

    .product-editor-page.product-add-page .slider-page.active {
        display: block;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .product-editor-page.product-add-page .slider-page.slide-left {
        animation: slideOutLeft 0.3s ease-in-out;
    }

    .product-editor-page.product-add-page .slider-page.slide-right {
        animation: slideOutRight 0.3s ease-in-out;
    }

    @keyframes slideOutLeft {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(-20px);
        }
    }

    @keyframes slideOutRight {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(20px);
        }
    }

    .product-editor-page.product-add-page .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        cursor: default;
        transition: background-color 0.2s;
    }

    .product-editor-page.product-add-page .dot.active {
        background-color: #0d6efd;
    }

    .product-editor-page.product-add-page .dot:hover {
        background-color: #999;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-dialog {
        --bs-modal-width: 1660px;
        width: 1660px;
        min-width: 1660px;
        max-width: 1660px;
        height: 865px;
        margin: 18px auto;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

    .product-editor-page.product-add-page .image-library-picker .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(245, 247, 250, 0.72), rgba(255, 255, 255, 0.92));
    }

    .product-editor-page.product-add-page .image-library-picker .modal-header {
        flex: 0 0 auto;
        min-height: 54px;
        padding: 14px 14px 14px 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }

    .product-editor-page.product-add-page .image-library-picker .modal-title {
        color: var(--label-primary);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-header .btn-close:focus,
.product-editor-page.product-add-page .image-library-picker .modal-header .btn-close:focus-visible {
        box-shadow: none;
        outline: none;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-header .btn-close {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        background-color: rgba(120, 120, 128, 0.12);
        background-image: var(--bs-btn-close-bg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px;
        opacity: 1;
        filter: none;
        transition: background-color 0.16s ease, transform 0.16s ease;
    }

    .product-editor-page.product-add-page .image-library-picker .modal-header .btn-close:hover {
        background-color: rgba(120, 120, 128, 0.18);
        transform: translateY(-1px);
        opacity: 1;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-browser {
        display: flex;
        flex-direction: row;
        gap: 12px;
        height: 100%;
        min-height: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-sidebar {
        flex: 0 0 280px;
        min-width: 280px;
        min-height: 0;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-select-panel {
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-list {
        height: 100%;
        max-height: none;
        overflow: auto;
        padding-right: 2px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        scrollbar-width: none;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-list.is-skeleton {
        gap: 12px;
        padding: 8px;
        pointer-events: none;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-row {
        min-height: 20px;
        display: grid;
        grid-template-columns: 16px 16px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-dot,
.product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-icon,
.product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-name {
        display: block;
        border-radius: 6px;
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-dot,
.product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-icon {
        width: 16px;
        height: 16px;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-name {
        width: 74%;
        height: 12px;
        border-radius: 999px;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-skeleton-row:nth-child(2n) .image-bank-group-skeleton-name {
        width: 58%;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-list::-webkit-scrollbar,
.product-editor-page.product-add-page .image-library-picker .image-bank-picker-surface::-webkit-scrollbar {
        display: none;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-item {
        box-sizing: border-box;
        height: 38px;
        min-height: 38px;
        border: 0;
        border-radius: 10px;
        padding: 8px 12px;
        background: transparent;
        color: var(--label-primary);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: default;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-item.active {
        margin-top: 0;
        margin-bottom: 0;
        color: #007aff;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-item i {
        width: 16px;
        margin-right: 0;
        color: inherit;
    }

    .product-editor-page.product-add-page .image-library-picker .group-toggle,
.product-editor-page.product-add-page .image-library-picker .group-toggle-placeholder {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .product-editor-page.product-add-page .image-library-picker .group-toggle {
        cursor: pointer;
    }

    .product-editor-page.product-add-page .image-library-picker .group-toggle::before {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.14s ease;
    }

    .product-editor-page.product-add-page .image-library-picker .group-toggle.is-expanded::before {
        transform: rotate(45deg) translateY(-1px);
    }

    .product-editor-page.product-add-page .image-library-picker .group-toggle:hover {
        color: #007aff;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-action {
        min-width: 0;
        max-width: 100%;
        height: 22px;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        text-align: left;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-action:hover {
        color: #007aff;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-group-item .group-name-text {
        margin-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-main {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-surface {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        overflow: auto;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        scrollbar-gutter: auto;
        scrollbar-width: none;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid {
        flex: 1 1 0;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-auto-rows: max-content;
        gap: 14px;
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: start;
        align-content: start;
        height: auto;
        min-height: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid.is-loading {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 0;
        overflow: hidden;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid.is-loading .preview-item {
        min-height: 0;
        height: 100%;
        align-self: stretch;
        overflow: hidden;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid.is-loading .picker-select-btn {
        height: 100%;
        min-height: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid.is-loading .preview-img-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-grid.is-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-empty-state {
        grid-column: 1 / -1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 16px;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-item {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        align-self: start;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.88);
    }

    .product-editor-page.product-add-page .image-library-picker .picker-select-btn {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        color: inherit;
        font: inherit;
        appearance: none;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-img-wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 1px solid color-mix(in srgb, var(--separator), white 16%);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 10px;
        background: rgba(245, 247, 250, 0.94);
    }

    .product-editor-page.product-add-page .image-library-picker .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        padding: 0;
        box-sizing: border-box;
        border-radius: inherit;
        border: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-item.is-skeleton {
        pointer-events: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .product-editor-page.product-add-page .image-library-picker .preview-item.is-skeleton:hover {
        transform: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
        background: rgba(255, 255, 255, 0.78);
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-thumb,
.product-editor-page.product-add-page .image-library-picker .skeleton-line {
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-thumb {
        background: rgba(60, 60, 67, 0.09);
        cursor: default;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-line {
        height: 14px;
        border-radius: 7px;
        display: block;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-line.name {
        height: 18px;
        width: 72%;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-line.meta {
        width: 44%;
        height: 14px;
        margin-top: 5px;
        opacity: 0.78;
    }

    .product-editor-page.product-add-page .image-library-picker .image-bank-picker-pagination.is-skeleton {
        pointer-events: none;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-page-btn,
.product-editor-page.product-add-page .image-library-picker .skeleton-page-info,
.product-editor-page.product-add-page .image-library-picker .skeleton-page-input {
        height: 36px;
        border-radius: 12px;
        background: rgba(60, 60, 67, 0.09);
        animation: imageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-page-btn {
        width: 36px;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-page-btn.nav {
        width: 70px;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-page-info {
        width: 46px;
        height: 14px;
        align-self: center;
    }

    .product-editor-page.product-add-page .image-library-picker .skeleton-page-input {
        width: 46px;
    }

    @keyframes imageBankSkeletonPulse {
        0%, 100% {
            opacity: 0.64;
        }

        50% {
            opacity: 1;
        }
    }

    .product-editor-page.product-add-page .image-library-picker .preview-filename {
        display: block;
        margin-top: 0;
        min-height: 0;
        height: auto;
        color: var(--label-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-filename,
.product-editor-page.product-add-page .image-library-picker .preview-meta {
        padding-left: 0;
        padding-right: 0;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5px;
        padding-bottom: 0;
        gap: 6px;
    }

    .product-editor-page.product-add-page .image-library-picker .preview-size {
        color: var(--label-secondary);
        font-size: 12px;
    }

/* Phase 8 product edit editor page */
.product-editor-page.product-edit-page {
        max-width: 100%;
    }

    .product-editor-page.product-edit-page .product-editor-shell {
        width: min(1568px, 100%);
        margin: 0 auto;
    }

    .product-editor-page.product-edit-page .product-editor-toolbar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }

    .product-editor-page.product-edit-page .product-editor-title {
        margin: 0;
        color: var(--label-primary);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .product-editor-page.product-edit-page .card {
        border: 1px solid var(--enterprise-border);
        border-radius: 22px;
        box-shadow: var(--enterprise-shadow-sm);
        overflow: hidden;
    }

    .product-editor-page.product-edit-page .card-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 247, 251, 0.9)) !important;
        color: var(--enterprise-text-primary) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        padding: 1rem 1.25rem;
    }

    .product-editor-page.product-edit-page .card-header small,
.product-editor-page.product-edit-page .card-header .text-warning {
        color: var(--enterprise-text-secondary) !important;
    }

    .product-editor-page.product-edit-page .card-body {
        padding: 1.25rem;
    }

    .product-editor-page.product-edit-page .product-editor-panel {
        border: 1px solid var(--enterprise-border);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: var(--enterprise-shadow-sm);
        overflow: hidden;
    }

    .product-editor-page.product-edit-page .product-editor-panel {
        overflow: visible;
    }

    .product-editor-page.product-edit-page .product-editor-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 247, 251, 0.9));
    }

    .product-editor-page.product-edit-page .product-editor-panel-body {
        display: grid;
        grid-template-columns: 148px minmax(0, 1fr);
        gap: 28px;
        padding: 22px 20px 20px;
    }

    .product-editor-page.product-edit-page .product-image-pane,
.product-editor-page.product-edit-page .product-form-pane {
        min-width: 0;
    }

    .product-editor-page.product-edit-page .product-image-pane .form-label {
        margin-bottom: 10px;
    }

    .product-editor-page.product-edit-page .product-form-pane > .slider-container {
        margin-top: 24px;
    }

    .product-editor-page.product-edit-page .editor-form-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 40px;
        align-items: end;
    }

    .product-editor-page.product-edit-page .product-form-pane > .editor-form-grid + .editor-form-grid {
        margin-top: 40px;
    }

    .product-editor-page.product-edit-page .editor-field-span-2 {
        grid-column: span 2;
    }

    .product-editor-page.product-edit-page .editor-field-span-3 {
        grid-column: span 3;
    }

    .product-editor-page.product-edit-page .editor-field-span-4 {
        grid-column: span 4;
    }

    .product-editor-page.product-edit-page .editor-field-span-6 {
        grid-column: span 6;
    }

    .product-editor-page.product-edit-page .editor-field-span-8 {
        grid-column: span 8;
    }

    .product-editor-page.product-edit-page .editor-field-span-12 {
        grid-column: 1 / -1;
    }

    .product-editor-page.product-edit-page .product-editor-panel-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        background: rgba(246, 247, 251, 0.64);
    }

    .product-editor-page.product-edit-page .editor-section-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .product-editor-page.product-edit-page .editor-section-title i {
        margin-right: 0 !important;
        color: var(--label-secondary);
    }

    .product-editor-page.product-edit-page .editor-section-note {
        color: var(--label-secondary) !important;
        font-size: 12px;
        font-weight: 600;
    }

    .product-editor-page.product-edit-page .editor-section-actions {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    .product-editor-page.product-edit-page .editor-dimension-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.625rem;
        align-items: center;
    }

    .product-editor-page.product-edit-page .editor-dimension-group .form-control {
        min-width: 0;
    }

    .product-editor-page.product-edit-page .gross-weight[readonly],
.product-editor-page.product-edit-page #model.bg-light,
.product-editor-page.product-edit-page #baseType.bg-light {
        background: rgba(244, 246, 251, 0.9) !important;
        color: var(--enterprise-text-secondary);
        border-color: rgba(15, 23, 42, 0.08);
        cursor: not-allowed;
    }

    .product-editor-page.product-edit-page .editor-combobox {
        position: relative;
    }

    .product-editor-page.product-edit-page .editor-combobox .form-control {
        padding-right: 38px;
    }

    .product-editor-page.product-edit-page .editor-combobox-toggle {
        position: absolute;
        right: 8px;
        top: 50%;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--label-secondary);
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .product-editor-page.product-edit-page .editor-combobox-toggle:hover {
        background: rgba(60, 60, 67, 0.08);
        color: var(--label-primary);
    }

    .product-editor-page.product-edit-page .editor-combobox-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 30;
        display: none;
        max-height: 230px;
        padding: 6px;
        overflow-y: auto;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(18px);
    }

    .product-editor-page.product-edit-page .editor-combobox.open .editor-combobox-menu {
        display: block;
    }

    .product-editor-page.product-edit-page .editor-combobox-option,
.product-editor-page.product-edit-page .editor-combobox-empty {
        width: 100%;
        min-height: 34px;
        padding: 7px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--enterprise-text-primary);
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    .product-editor-page.product-edit-page .editor-combobox-option:hover,
.product-editor-page.product-edit-page .editor-combobox-option:focus {
        background: rgba(0, 122, 255, 0.12);
        color: var(--accent);
        outline: none;
    }

    .product-editor-page.product-edit-page .editor-combobox-empty {
        color: var(--label-secondary);
        cursor: default;
    }

    .product-editor-page.product-edit-page .image-upload-grid {
        margin-top: 0;
        padding-bottom: 0;
        gap: 12px;
    }

    .product-editor-page.product-edit-page .image-upload-box {
        width: 132px;
        height: 132px;
        border-radius: 14px;
        border-color: color-mix(in srgb, var(--separator), white 4%);
        background: rgba(255, 255, 255, 0.78);
    }

    .product-editor-page.product-edit-page .image-upload-box:hover {
        border-color: color-mix(in srgb, var(--accent), white 20%);
        background: color-mix(in srgb, var(--accent), white 94%);
    }

    .product-editor-page.product-edit-page .image-upload-box .upload-placeholder {
        gap: 8px;
        color: var(--label-tertiary);
    }

    .product-editor-page.product-edit-page .image-upload-box .upload-placeholder i {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: rgba(60, 60, 67, 0.08);
        font-size: 17px;
    }

    .product-editor-page.product-edit-page .image-upload-box .upload-placeholder span {
        font-size: 12px;
        font-weight: 700;
    }

    .product-editor-page.product-edit-page #duplicateSpecModal .modal-header,
.product-editor-page.product-edit-page #editImageBankPickerModal .modal-header {
        color: var(--enterprise-text-primary) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
    }

    .product-editor-page.product-edit-page #duplicateSpecModal .btn-close,
.product-editor-page.product-edit-page #editImageBankPickerModal .btn-close {
        filter: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-content,
.product-editor-page.product-edit-page #duplicateSpecModal .modal-content {
        overflow: hidden;
    }

    @media (max-width: 767.98px) {
        .product-editor-page.product-edit-page .product-editor-panel-header,
.product-editor-page.product-edit-page .product-editor-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .product-editor-page.product-edit-page .product-editor-panel-body,
.product-editor-page.product-edit-page .editor-form-grid {
            grid-template-columns: 1fr;
        }

        .product-editor-page.product-edit-page .editor-field-span-2,
.product-editor-page.product-edit-page .editor-field-span-3,
.product-editor-page.product-edit-page .editor-field-span-4,
.product-editor-page.product-edit-page .editor-field-span-6,
.product-editor-page.product-edit-page .editor-field-span-8,
.product-editor-page.product-edit-page .editor-field-span-12 {
            grid-column: 1 / -1;
        }

        .product-editor-page.product-edit-page .editor-dimension-group {
            grid-template-columns: 1fr;
        }

        .product-editor-page.product-edit-page .editor-dimension-group span {
            display: none;
        }
    }

.product-editor-page.product-edit-page #productForm .form-control:focus,
.product-editor-page.product-edit-page #productForm .form-control:focus-visible,
.product-editor-page.product-edit-page #productForm .form-select:focus,
.product-editor-page.product-edit-page #productForm .form-select:focus-visible {
        box-shadow: none;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-modal .modal-content {
        border-radius: 18px;
        overflow: hidden;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-dialog {
        max-width: 520px;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-icon {
        font-size: 2.75rem;
        line-height: 1;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-title {
        font-size: 0.98rem;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-note {
        font-size: 0.88rem;
    }

    .product-editor-page.product-edit-page .spec-remove-confirm-footer {
        align-items: center;
        gap: 10px;
        min-height: 74px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-editor-page.product-edit-page .slider-container {
        position: relative;
        overflow: visible;
        height: auto;
    }

    .product-editor-page.product-edit-page .slider-page {
        display: none;
        animation: slideIn 0.3s ease-in-out;
    }

    .product-editor-page.product-edit-page .slider-page.active {
        display: block;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .product-editor-page.product-edit-page .slider-page.slide-left {
        animation: slideOutLeft 0.3s ease-in-out;
    }

    .product-editor-page.product-edit-page .slider-page.slide-right {
        animation: slideOutRight 0.3s ease-in-out;
    }

    @keyframes slideOutLeft {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(-20px);
        }
    }

    @keyframes slideOutRight {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(20px);
        }
    }

    .product-editor-page.product-edit-page .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        cursor: default;
        transition: background-color 0.2s;
    }

    .product-editor-page.product-edit-page .dot.active {
        background-color: #0d6efd;
    }

    .product-editor-page.product-edit-page .dot:hover {
        background-color: #999;
    }

    .product-editor-page .product-spec-nav-dot {
        display: block;
        padding: 0;
        border: 0;
        appearance: none;
    }

    .product-editor-page .product-spec-nav-dot:focus-visible {
        outline: 2px solid #0d6efd;
        outline-offset: 3px;
    }

    .product-editor-page .product-spec-nav-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid var(--separator);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.88);
        color: var(--label-secondary);
        transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }

    /* Keep the spec switcher centered against the complete editor panel, including the image column. */
    .product-editor-page .product-spec-navigation-full-width {
        width: 100%;
        padding: 0 20px 16px;
    }

    .product-editor-page .product-spec-nav-arrow:hover:not(:disabled),
    .product-editor-page .product-spec-nav-arrow:focus-visible:not(:disabled) {
        border-color: color-mix(in srgb, var(--accent), white 28%);
        background: color-mix(in srgb, var(--accent), white 93%);
        color: var(--accent);
    }

    .product-editor-page .product-spec-nav-arrow:disabled {
        cursor: not-allowed;
        opacity: 0.42;
    }

    .product-editor-page .product-spec-add-button,
    .product-editor-page .product-spec-add-button:hover,
    .product-editor-page .product-spec-add-button:focus,
    .product-editor-page .product-spec-add-button:focus-visible,
    .product-editor-page .product-spec-add-button:active {
        background: #333 !important;
        border-color: transparent !important;
        color: #fff !important;
    }

    .product-editor-page .product-editor-panel-body > #navigationControls {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .product-editor-page.product-edit-page .gross-weight[readonly] {
        background-color: #f8f9fa;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-dialog {
        --bs-modal-width: 1660px;
        width: 1660px;
        min-width: 1660px;
        max-width: 1660px;
        height: 865px;
        margin: 18px auto;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(245, 247, 250, 0.72), rgba(255, 255, 255, 0.92));
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-header {
        flex: 0 0 auto;
        min-height: 54px;
        padding: 14px 14px 14px 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-title {
        color: var(--label-primary);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-header .btn-close:focus,
.product-editor-page.product-edit-page #editImageBankPickerModal .modal-header .btn-close:focus-visible {
        box-shadow: none;
        outline: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-header .btn-close {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        background-color: rgba(120, 120, 128, 0.12);
        background-image: var(--bs-btn-close-bg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px;
        opacity: 1;
        filter: none;
        transition: background-color 0.16s ease, transform 0.16s ease;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .modal-header .btn-close:hover {
        background-color: rgba(120, 120, 128, 0.18);
        transform: translateY(-1px);
        opacity: 1;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-browser {
        display: flex;
        flex-direction: row;
        gap: 12px;
        height: 100%;
        min-height: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-sidebar {
        flex: 0 0 280px;
        min-width: 280px;
        min-height: 0;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-select-panel {
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-list {
        height: 100%;
        max-height: none;
        overflow: auto;
        padding-right: 2px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        scrollbar-width: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-list.is-skeleton {
        gap: 12px;
        padding: 8px;
        pointer-events: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-row {
        min-height: 20px;
        display: grid;
        grid-template-columns: 16px 16px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-dot,
.product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-icon,
.product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-name {
        display: block;
        border-radius: 6px;
        background: rgba(60, 60, 67, 0.09);
        animation: editImageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-dot,
.product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-icon {
        width: 16px;
        height: 16px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-name {
        width: 74%;
        height: 12px;
        border-radius: 999px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-group-skeleton-row:nth-child(2n) .image-bank-group-skeleton-name {
        width: 58%;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-list::-webkit-scrollbar,
.product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-surface::-webkit-scrollbar {
        display: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-item {
        box-sizing: border-box;
        height: 38px;
        min-height: 38px;
        border: 0;
        border-radius: 10px;
        padding: 8px 12px;
        background: transparent;
        color: var(--label-primary);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: default;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-item.active {
        margin-top: 0;
        margin-bottom: 0;
        color: #007aff;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-item i {
        width: 16px;
        margin-right: 0;
        color: inherit;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle,
.product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle-placeholder {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle {
        cursor: pointer;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle::before {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.14s ease;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle.is-expanded::before {
        transform: rotate(45deg) translateY(-1px);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .group-toggle:hover {
        color: #007aff;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-action {
        min-width: 0;
        max-width: 100%;
        height: 22px;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        text-align: left;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-action:hover {
        color: #007aff;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-group-item .group-name-text {
        margin-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-main {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-surface {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        overflow: auto;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        scrollbar-width: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid {
        flex: 1 1 0;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-auto-rows: max-content;
        gap: 14px;
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: start;
        align-content: start;
        height: auto;
        min-height: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid.is-loading {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 0;
        overflow: hidden;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid.is-loading .preview-item {
        min-height: 0;
        height: 100%;
        align-self: stretch;
        overflow: hidden;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid.is-loading .picker-select-btn {
        height: 100%;
        min-height: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid.is-loading .preview-img-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .edit-image-bank-picker-grid.is-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-empty-state {
        grid-column: 1 / -1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 16px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-item {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        align-self: start;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.88);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .picker-select-btn {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        color: inherit;
        font: inherit;
        appearance: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-img-wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 1px solid color-mix(in srgb, var(--separator), white 16%);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 10px;
        background: rgba(245, 247, 250, 0.94);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        padding: 0;
        box-sizing: border-box;
        border-radius: inherit;
        border: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-item.is-skeleton {
        pointer-events: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-item.is-skeleton:hover {
        transform: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
        background: rgba(255, 255, 255, 0.78);
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-thumb,
.product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-line {
        background: rgba(60, 60, 67, 0.09);
        animation: editImageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-thumb {
        background: rgba(60, 60, 67, 0.09);
        cursor: default;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-line {
        height: 14px;
        border-radius: 7px;
        display: block;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-line.name {
        height: 18px;
        width: 72%;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-line.meta {
        width: 44%;
        height: 14px;
        margin-top: 5px;
        opacity: 0.78;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .image-bank-picker-pagination.is-skeleton {
        pointer-events: none;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-btn,
.product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-info,
.product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-input {
        height: 36px;
        border-radius: 12px;
        background: rgba(60, 60, 67, 0.09);
        animation: editImageBankSkeletonPulse 1.2s ease-in-out infinite;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-btn {
        width: 36px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-btn.nav {
        width: 70px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-info {
        width: 46px;
        height: 14px;
        align-self: center;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .skeleton-page-input {
        width: 46px;
    }

    @keyframes editImageBankSkeletonPulse {
        0%, 100% {
            opacity: 0.64;
        }

        50% {
            opacity: 1;
        }
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-filename {
        display: block;
        margin-top: 0;
        min-height: 0;
        height: auto;
        color: var(--label-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-filename,
.product-editor-page.product-edit-page #editImageBankPickerModal .preview-meta {
        padding-left: 0;
        padding-right: 0;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5px;
        padding-bottom: 0;
        gap: 6px;
    }

    .product-editor-page.product-edit-page #editImageBankPickerModal .preview-size {
        color: var(--label-secondary);
        font-size: 12px;
    }

/* Phase 8 product list page */
        /* 入库选择器模式：隐藏非选择流程元素 */
        .inbound-picker-mode .inbound-picker-hidden {
            display: none !important;
        }

        /* 入库选择器模式：规格区保留必要列 */
        .inbound-picker-mode .col-shelf,
        .inbound-picker-mode .col-nature,
        .inbound-picker-mode .col-remark,
        .inbound-picker-mode .col-actions,
        .inbound-picker-mode .col-handle,
        .inbound-picker-mode .drag-handle,
        .inbound-picker-mode .spec-drag-handle {
            display: none !important;
        }

        .inbound-picker-mode .model-header>div:first-child {
            grid-column: 1 / -1 !important;
        }

        /* 入库选择器模式：容器布局 */
        .app-container.inbound-picker-mode {
            max-width: 1370px;
            min-width: 1370px !important;
            margin-left: 0;
            margin-right: 0;
            padding-right: 0;
        }

        /* 入库选择器模式：图片与勾选交互 */
        .inbound-picker-mode .model-image-preview {
            cursor: default;
        }

        .inbound-picker-mode .product-checkbox.inbound-locked-checkbox {
            accent-color: #adb5bd;
            opacity: 1;
            cursor: not-allowed;
        }

        .inbound-picker-mode .form-check-input.product-checkbox.inbound-locked-checkbox:checked,
        .inbound-picker-mode .form-check-input.product-checkbox.inbound-locked-checkbox:indeterminate {
            border-color: #adb5bd;
            background-color: #adb5bd;
        }

        /* 入库选择器模式：筛选条布局 */
        .inbound-picker-mode #searchFilters .card-body>.row {
            justify-content: center;
        }

        .inbound-picker-mode #searchFilters .search-input {
            width: 180px;
        }

        .inbound-picker-mode #searchFilters #search-supplier-code {
            width: 180px;
        }

        .inbound-picker-mode #searchFilters #search-dim-length,
        .inbound-picker-mode #searchFilters #search-dim-width,
        .inbound-picker-mode #searchFilters #search-dim-height {
            width: 78px;
        }

        .inbound-picker-mode .spec-row-data {
            min-height: 48px;
        }

        /* 型号容器板块样式 */
        .model-container {
            margin-bottom: 10px;
            border: 1px solid #dee2e6;
            border-radius: 0;
            overflow: auto;
            background: white;
            display: flex;
            flex-direction: row;
        }

        .products-loading #productsWrapper,
        .products-loading #galleryView {
            display: none !important;
        }

        .products-initial-loading #product-filters-react-root {
            display: none;
        }

        .products-filter-skeleton {
            display: none;
        }

        .products-initial-loading .products-filter-skeleton {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 72px;
            margin-bottom: 12px;
            padding: 16px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
        }

        .products-filter-skeleton-field,
        .products-filter-skeleton-action {
            display: block;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
            background-size: 400% 100%;
            animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
        }

        .products-filter-skeleton-field { flex: 1 1 120px; }
        .products-filter-skeleton-action { flex: 0 0 64px; }

        .products-toolbar-skeleton {
            display: none;
        }

        .products-loading #product-toolbar-react-root {
            display: none;
        }

        .products-loading .products-toolbar-skeleton {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 54px;
            margin: 8px 0;
        }

        .products-toolbar-skeleton-selection,
        .products-toolbar-skeleton-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 0 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
        }

        .products-toolbar-skeleton-checkbox,
        .products-toolbar-skeleton-line,
        .products-toolbar-skeleton-chip,
        .products-toolbar-skeleton-action {
            display: block;
            border-radius: 999px;
            background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
            background-size: 400% 100%;
            animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
        }

        .products-toolbar-skeleton-checkbox { width: 16px; height: 16px; border-radius: 5px; }
        .products-toolbar-skeleton-line--label { width: 58px; height: 14px; }
        .products-toolbar-skeleton-line--count { width: 84px; height: 14px; }
        .products-toolbar-skeleton-chip { width: 92px; height: 30px; }
        .products-toolbar-skeleton-actions { gap: 6px; padding: 0; border: 0; background: transparent; }
        .products-toolbar-skeleton-action { width: 36px; height: 36px; border-radius: 10px; }
        .products-loading-gallery .products-toolbar-skeleton-selection { visibility: hidden; }

        .products-skeleton-wrapper,
        .products-gallery-skeleton-wrapper {
            display: none;
        }

        html.products-initial-list .products-loading .products-skeleton-wrapper,
        .products-loading.products-loading-list .products-skeleton-wrapper {
            display: block;
        }

        html.products-initial-gallery .products-loading .products-skeleton-wrapper,
        html.products-initial-list .products-loading .products-gallery-skeleton-wrapper {
            display: none !important;
        }

        html.products-initial-gallery .products-loading .products-gallery-skeleton-wrapper,
        .products-loading.products-loading-gallery .products-gallery-skeleton-wrapper {
            display: grid;
        }

        .products-skeleton-row {
            min-height: 154px;
            margin-bottom: 12px;
            border: 1px solid #dee2e6;
            background: #fff;
            display: grid;
            grid-template-columns: 152px minmax(0, 1fr);
            overflow: hidden;
        }

        .products-skeleton-image {
            width: 132px;
            height: 132px;
            margin: 10px;
            border-radius: 14px;
            background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
            background-size: 400% 100%;
            animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
        }

        .products-skeleton-content {
            min-width: 0;
            display: grid;
            grid-template-rows: 46px 42px 64px;
            border-left: 1px solid rgba(15, 23, 42, 0.08);
        }

        .products-skeleton-title-row,
        .products-skeleton-head-row,
        .products-skeleton-data-row {
            display: grid;
            grid-template-columns: var(--spec-grid-columns);
            gap: var(--spec-grid-gap);
            align-items: center;
            padding: 0 14px;
        }

        .products-skeleton-title-row {
            grid-template-columns: minmax(130px, 180px) minmax(48px, 70px) 1fr;
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        }

        .products-skeleton-head-row {
            background: rgba(120, 120, 128, 0.08);
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        }

        .products-skeleton-data-row {
            min-height: 64px;
        }

        .products-skeleton-line {
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
            background-size: 400% 100%;
            animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
        }

        .products-skeleton-title {
            height: 18px;
        }

        .products-skeleton-chip {
            height: 18px;
            opacity: 0.82;
        }

        .products-skeleton-head-row .products-skeleton-line {
            height: 10px;
            opacity: 0.72;
        }

        .products-gallery-skeleton-wrapper {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 18px;
            align-items: stretch;
        }

        .products-gallery-skeleton-card {
            height: 100%;
            padding: 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .products-gallery-skeleton-thumb {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 20%);
            background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
            background-size: 400% 100%;
            animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
        }

        .products-gallery-skeleton-info {
            padding: 0;
            margin-top: 10px;
        }

.products-gallery-skeleton-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

        .products-gallery-skeleton-title-row .products-skeleton-line:first-child {
            width: 112px;
            height: 18px;
        }

        .products-gallery-skeleton-title-row .products-skeleton-line:last-child {
            width: 52px;
            height: 16px;
        }

        .products-gallery-skeleton-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

        .products-gallery-skeleton-meta {
            min-height: 42px;
            padding: 6px 8px;
            border-radius: 10px;
            background: rgba(120, 120, 128, 0.08);
        }

        .products-gallery-skeleton-meta .products-skeleton-line:first-child {
            width: 34px;
            height: 9px;
            margin-bottom: 8px;
            opacity: 0.55;
        }

        .products-gallery-skeleton-meta .products-skeleton-line:last-child {
            width: 72%;
            height: 12px;
        }

        .product-icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            flex: 0 0 auto;
            background-color: currentColor;
            vertical-align: -0.125em;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
        }

        .product-icon.me-1 {
            margin-right: 0.25rem;
        }

        .product-icon-grid {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5h4v4h-4v-4zm0 4.75h4v4h-4v-4zm0 4.75h4v3.5h-4V11zm4.75-9.5h4v4h-4v-4zm0 4.75h4v4h-4v-4zm0 4.75h4v3.5h-4V11zm4.75-9.5h3.5v4H11v-4zm0 4.75h3.5v4H11v-4zm0 4.75h3.5v3.5H11V11z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5h4v4h-4v-4zm0 4.75h4v4h-4v-4zm0 4.75h4v3.5h-4V11zm4.75-9.5h4v4h-4v-4zm0 4.75h4v4h-4v-4zm0 4.75h4v3.5h-4V11zm4.75-9.5h3.5v4H11v-4zm0 4.75h3.5v4H11v-4zm0 4.75h3.5v3.5H11V11z'/%3E%3C/svg%3E");
        }

        .product-icon-list {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M2 4.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zM2 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zM2 11.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M2 4.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zM2 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zM2 11.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-.5h9a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E");
        }

        .product-icon-sort {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2a.5.5 0 0 1 .5.5v8.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L5 11.293V2.5a.5.5 0 0 1 .5-.5zM9 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 3.5zm0 3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 9 6.5zm0 3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 9 9.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2a.5.5 0 0 1 .5.5v8.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L5 11.293V2.5a.5.5 0 0 1 .5-.5zM9 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 3.5zm0 3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 9 6.5zm0 3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 9 9.5z'/%3E%3C/svg%3E");
        }

        .product-icon-pencil {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.854a.5.5 0 0 1 .708 0l2.292 2.292a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 0 1-.214.124l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .124-.214l9.5-9.5zM11.207 2 3 10.207V11h.793L12 2.793 11.207 2zM3.5 12.5l1.5-.375-.625-.625-.875 1z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.854a.5.5 0 0 1 .708 0l2.292 2.292a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 0 1-.214.124l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .124-.214l9.5-9.5zM11.207 2 3 10.207V11h.793L12 2.793 11.207 2zM3.5 12.5l1.5-.375-.625-.625-.875 1z'/%3E%3C/svg%3E");
        }

        .product-icon-search {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.25' fill='none' stroke='black' stroke-width='1.25'/%3E%3Cpath d='M9.7 9.7 13.5 13.5' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.25' fill='none' stroke='black' stroke-width='1.25'/%3E%3Cpath d='M9.7 9.7 13.5 13.5' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        .product-icon-plus-circle {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM.5 8a7.5 7.5 0 1 1 15 0A7.5 7.5 0 0 1 .5 8z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM.5 8a7.5 7.5 0 1 1 15 0A7.5 7.5 0 0 1 .5 8z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
        }

        .product-icon-x-circle {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM.5 8a7.5 7.5 0 1 1 15 0A7.5 7.5 0 0 1 .5 8z'/%3E%3Cpath d='M5.354 5.354a.5.5 0 0 1 .707 0L8 7.293l1.939-1.939a.5.5 0 1 1 .707.707L8.707 8l1.939 1.939a.5.5 0 0 1-.707.707L8 8.707l-1.939 1.939a.5.5 0 0 1-.707-.707L7.293 8 5.354 6.061a.5.5 0 0 1 0-.707z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM.5 8a7.5 7.5 0 1 1 15 0A7.5 7.5 0 0 1 .5 8z'/%3E%3Cpath d='M5.354 5.354a.5.5 0 0 1 .707 0L8 7.293l1.939-1.939a.5.5 0 1 1 .707.707L8.707 8l1.939 1.939a.5.5 0 0 1-.707.707L8 8.707l-1.939 1.939a.5.5 0 0 1-.707-.707L7.293 8 5.354 6.061a.5.5 0 0 1 0-.707z'/%3E%3C/svg%3E");
        }

        .product-icon-trash {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1 0-2H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1 0-2H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/%3E%3C/svg%3E");
        }

        .product-icon-expand {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708zM4.646 11.354a.5.5 0 0 0 .708 0L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708zM4.646 11.354a.5.5 0 0 0 .708 0L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708z'/%3E%3C/svg%3E");
        }

        @keyframes productsSkeletonShimmer {
            0% {
                background-position: 100% 0;
            }
            100% {
                background-position: 0 0;
            }
        }

        .model-container:has(.collapse-toggle.collapsed),
        .model-container:not(:has(.collapse-toggle)) {
            min-height: 140px;
        }

        .model-container:has(.collapse-toggle:not(.collapsed)) {
            height: auto;
        }

        .model-image-section {
            width: 140px;
            min-width: 140px;
            height: 140px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            align-self: flex-start;
            overflow: hidden;
        }

        .product-image-placeholder {
            width: 140px;
            height: 140px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #adb5bd;
            font-size: 3rem;
        }

        .image-carousel {
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
        }

        .model-image-preview {
            cursor: zoom-in;
            width: 140px;
            height: 140px;
            display: block;
            object-fit: cover;
            color: transparent;
            background-color: #f8f9fa;
            opacity: 0;
            transition: opacity 0.12s ease;
        }

        .model-image-preview.is-loaded {
            opacity: 1;
        }

        .model-image-preview:not([src]),
        .model-image-preview.image-load-failed {
            visibility: hidden;
        }

        .product-image-preview-modal .modal-dialog {
            width: 1240px;
            min-width: 1240px;
            max-width: 1240px;
        }

        #productImagePreviewModal.modal {
            z-index: 9125 !important;
        }

        #productImagePreviewModal.preview-over-image-bank + .modal-backdrop,
        .modal-backdrop.preview-over-image-bank-backdrop {
            z-index: 9115 !important;
        }

        #productImagePreviewModal.product-image-preview-modal .modal-content {
            background: rgba(255, 255, 255, 0.94) !important;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
            border-radius: 18px !important;
            /* 大范围阴影会在圆角外形成四个明显的尖角投影。 */
            box-shadow: none !important;
            overflow: hidden;
            position: relative;
        }

        .product-image-preview-modal .modal-header,
        .product-image-preview-modal .image-library-dialog__header {
            position: absolute;
            top: 6px;
            right: 6px;
            min-height: 0;
            padding: 0;
            border-bottom: 0 !important;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0;
            z-index: 6;
            pointer-events: none;
        }

        .product-image-preview-modal .modal-title,
        .product-image-preview-modal .image-library-dialog__title {
            color: var(--label-primary) !important;
            font-size: 16px;
            font-weight: 700;
            min-width: 0;
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 标题栏不接收事件以免遮挡预览区，但共享关闭按钮必须保留可交互性。 */
        .product-image-preview-modal .image-library-dialog__close {
            pointer-events: auto;
        }

        .product-image-preview-modal .product-image-preview-counter {
            min-width: 0;
            flex: 1 1 auto;
            color: var(--label-secondary);
            font-size: 12px;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
        }

        .product-image-preview-modal .modal-body {
            min-height: 320px;
            height: 820px;
            padding: 0;
            overflow: hidden;
            cursor: default;
            background: transparent;
        }

        .product-image-preview-modal .product-image-preview-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr) 108px;
            gap: 0;
            width: 100%;
            height: 100%;
            min-height: 0;
            align-items: stretch;
        }

        .product-image-preview-modal.is-single-source .product-image-preview-layout {
            grid-template-rows: minmax(0, 1fr);
        }

        .product-image-preview-modal .product-image-preview-thumbs-panel {
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
            border-radius: 0 0 16px 16px;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            border-top: 0;
            background: #fff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
            overflow: hidden;
            order: 2;
        }

        .product-image-preview-modal.is-single-source .product-image-preview-thumbs-panel {
            display: none;
        }

        .product-image-preview-modal .product-image-preview-thumbs {
            display: flex;
            flex-direction: row;
            gap: 6px;
            min-height: 0;
            height: 100%;
            padding: 10px;
            overflow: auto;
            overscroll-behavior: contain;
            scrollbar-width: none;
            -ms-overflow-style: none;
            align-items: center;
        }

        .product-image-preview-modal .product-image-preview-thumbs::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        .product-image-preview-modal .product-image-preview-thumbs:empty::before {
            content: "暂无缩略图";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-width: 140px;
            color: var(--label-tertiary);
            font-size: 12px;
        }

        .product-image-preview-modal .product-image-preview-thumb {
            display: flex;
            flex: 0 0 auto;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: 75px;
            height: 75px;
            aspect-ratio: auto;
            padding: 3px;
            border: 0;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.92);
            color: var(--label-primary);
            box-shadow: none;
            overflow: hidden;
            transform: scale(1);
            scroll-margin-block: 12px;
            transition: transform 0.14s ease, opacity 0.14s ease, background-color 0.14s ease;
            align-self: center;
        }

        .product-image-preview-modal .product-image-preview-thumb > *:not(.product-image-preview-thumb-image),
        .product-image-preview-modal .product-image-preview-thumb .product-image-preview-thumb-meta,
        .product-image-preview-modal .product-image-preview-thumb .product-image-preview-thumb-title,
        .product-image-preview-modal .product-image-preview-thumb .product-image-preview-thumb-size {
            display: none !important;
        }

        .product-image-preview-modal .product-image-preview-thumb:hover {
            transform: translateY(-1px);
        }

        .product-image-preview-modal .product-image-preview-thumb-image {
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
            border-radius: 9px;
            border: 0;
            object-fit: contain;
            background: transparent;
            display: block;
            box-shadow: none;
            transition: opacity 0.14s ease, transform 0.14s ease;
        }

        .product-image-preview-modal .product-image-preview-thumb:hover .product-image-preview-thumb-image {
            opacity: 0.94;
        }

        .product-image-preview-modal .product-image-preview-thumb:not(.is-active) .product-image-preview-thumb-image {
            opacity: 0.58;
        }

        .product-image-preview-modal .product-image-preview-thumb.is-active {
            transform: scale(1.08);
        }

        .product-image-preview-modal .product-image-preview-thumb.is-active .product-image-preview-thumb-image {
            opacity: 1;
        }

        .product-image-preview-modal .product-image-preview-stage {
            min-width: 0;
            min-height: 0;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            position: relative;
            height: 100%;
            overflow: visible;
            order: 1;
        }

        .product-image-preview-modal .product-image-preview-stage-header {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 9px 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            border-bottom: 0;
            border-radius: 16px 16px 0 0;
            background: #fff;
        }

        .product-image-preview-modal .product-image-preview-stage-title {
            min-width: 0;
            flex: 1 1 auto;
            color: var(--label-primary);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .product-image-preview-modal .product-image-preview-stage-counter {
            display: none;
        }

        .product-image-preview-modal .product-image-preview-viewport {
            position: relative;
            min-width: 0;
            min-height: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: grab;
            border-radius: 0;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            border-top: 0;
            border-bottom: 0;
            background: #f5f5f7;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
        }

        .product-image-preview-modal .product-image-preview-viewport.is-zoomed {
            cursor: grab;
        }

        .product-image-preview-modal .product-image-preview-viewport.is-dragging {
            cursor: grabbing;
        }

        .product-image-preview-modal .product-image-preview-nav {
            position: absolute;
            top: 50%;
            z-index: 3;
            width: 48px;
            height: 48px;
            margin-top: -24px;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            background: rgba(255, 255, 255, 0.84);
            color: var(--label-primary);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, opacity 0.14s ease;
        }

        .product-image-preview-modal .product-image-preview-nav-prev {
            left: 18px;
        }

        .product-image-preview-modal .product-image-preview-nav-next {
            right: 18px;
        }

        .product-image-preview-modal .product-image-preview-nav:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
            background: rgba(255, 255, 255, 0.94);
        }

        .product-image-preview-modal .product-image-preview-nav:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            box-shadow: none;
        }

        .product-image-preview-modal #productImagePreviewImg {
            max-width: 100%;
            max-height: calc(100% - 20px);
            object-fit: contain;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14);
            transform: translate(var(--preview-pan-x, 0px), var(--preview-pan-y, 0px)) scale(var(--preview-scale, 1));
            transform-origin: center;
            transition: transform 0.08s ease;
            will-change: transform;
            user-select: none;
            -webkit-user-drag: none;
        }

        .product-image-preview-modal .product-image-preview-viewport.is-dragging #productImagePreviewImg {
            transition: none;
        }

        .product-image-preview-modal .preview-error-state {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            min-height: 320px;
            color: var(--label-secondary);
            text-align: center;
        }

        .product-image-preview-modal .preview-error-state i {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(120, 120, 128, 0.12);
            color: var(--label-secondary);
            font-size: 22px;
        }

        .product-image-preview-modal.is-image-error #productImagePreviewImg {
            display: none;
        }

        .product-image-preview-modal.is-image-error .preview-error-state {
            display: flex;
        }

        .product-image-preview-modal.is-single-image .product-image-preview-nav {
            display: none;
        }

        #modelImageGroupViewerModal .modal-dialog {
            --bs-modal-width: 1660px;
            width: 1660px;
            min-width: 1660px;
            max-width: 1660px;
            height: 865px;
            margin: 18px auto;
        }

        #modelImageGroupViewerModal .modal-content {
            height: 100%;
            overflow: hidden;
        }

#modelImageGroupViewerModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
            flex: 0 0 auto;
            min-height: 54px;
            padding: 14px 14px 14px 18px;
            border-bottom: 1px solid color-mix(in srgb, var(--separator), white 16%);
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: saturate(180%) blur(18px);
            -webkit-backdrop-filter: saturate(180%) blur(18px);
        }

        #modelImageGroupViewerModal .modal-title {
            color: var(--label-primary);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.25;
        }

        #modelImageGroupViewerModal .model-image-group-viewer-body {
            flex: 1 1 auto;
            min-height: 0;
            padding: 10px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(245, 247, 250, 0.72), rgba(255, 255, 255, 0.92));
        }

        #modelImageGroupViewerModal .model-image-group-browser {
            --viewer-control-height: 36px;
            --viewer-control-radius: 12px;
            --viewer-card-radius: 18px;
            --viewer-card-padding: 12px;
            --viewer-card-bg: rgba(255, 255, 255, 0.78);
            --viewer-card-bg-hover: rgba(255, 255, 255, 0.88);
            --viewer-card-border: color-mix(in srgb, var(--separator), white 18%);
            --viewer-card-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
            --viewer-card-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.08);
            --viewer-thumb-radius: 14px;
            --viewer-thumb-bg: rgba(245, 247, 250, 0.94);
            --viewer-thumb-border: color-mix(in srgb, var(--separator), white 16%);
            --viewer-page-gap: 4px;
            display: flex;
            flex-direction: row;
            gap: 12px;
            height: 100%;
            min-height: 0;
        }

        #modelImageGroupViewerModal .model-image-group-sidebar {
            flex: 0 0 280px;
            min-width: 280px;
            min-height: 0;
            padding: 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #modelImageGroupViewerModal .model-image-group-sidebar .model-image-group-search {
            flex: 0 0 auto;
            min-width: 0;
            max-width: none;
            width: 100%;
        }

        #modelImageGroupViewerModal .model-image-group-search .form-control {
            padding-right: 34px;
        }

        #modelImageGroupViewerModal .model-image-group-search .image-search-clear {
            width: 16px;
            height: 16px;
            min-width: 16px;
            min-height: 16px;
            padding: 0;
            border: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #modelImageGroupViewerModal .model-image-group-search .image-search-clear i {
            width: 9.28px;
            height: 9.28px;
            font-size: 9.28px;
            line-height: 9.28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestions {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            z-index: 30;
            display: none;
            padding: 6px;
            border: 1px solid color-mix(in srgb, var(--separator), white 14%);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
            max-height: 240px;
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestions.is-visible {
            display: block;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestions::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestion {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 10px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: var(--label-primary);
            font-size: 13px;
            line-height: 1.35;
            text-align: left;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestion:hover,
        #modelImageGroupViewerModal .model-image-group-search-suggestion.is-active {
            background: color-mix(in srgb, var(--accent), white 90%);
            color: color-mix(in srgb, var(--accent), black 16%);
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestion-name {
            min-width: 0;
            flex: 1 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestion-meta {
            flex: 0 0 auto;
            color: var(--label-secondary);
            font-size: 11px;
        }

        #modelImageGroupViewerModal .model-image-group-search-suggestion-hint {
            margin-top: 4px;
            padding: 7px 10px 3px;
            color: var(--label-secondary);
            font-size: 11px;
            line-height: 1.4;
        }

        #modelImageGroupViewerModal .model-image-group-select-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
        }

        #modelImageGroupViewerModal .model-image-group-select {
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            height: 100%;
            min-height: 0;
        }

        #modelImageGroupViewerModal .model-image-group-select-panel {
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            min-width: 0;
            flex: 1 1 auto;
            min-height: 0;
            padding: 6px;
            border: 1px solid color-mix(in srgb, var(--separator), white 12%);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.74);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
            z-index: 1;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
            transform-origin: initial;
            transition: none;
        }

        #modelImageGroupViewerModal .model-image-group-select-options {
            height: 100%;
            max-height: none;
            overflow: auto;
            padding-right: 2px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        #modelImageGroupViewerModal .model-image-group-select-options::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        #modelImageGroupViewerModal .model-image-group-main {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        #modelImageGroupViewerModal .model-image-group-option {
            width: 100%;
            min-height: 38px;
            padding: 8px 10px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: var(--label-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            text-align: left;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.3;
            transition: background-color 0.14s ease, color 0.14s ease;
            cursor: default;
        }

        #modelImageGroupViewerModal .model-image-group-option-toggle {
            width: 16px;
            height: 16px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: currentColor;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            padding: 0;
            cursor: pointer;
        }

        #modelImageGroupViewerModal .model-image-group-option-toggle::before {
            content: "";
            width: 7px;
            height: 7px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.14s ease;
        }

        #modelImageGroupViewerModal .model-image-group-option.is-expanded .model-image-group-option-toggle::before {
            transform: rotate(45deg) translateY(-1px);
        }

        #modelImageGroupViewerModal .model-image-group-option-toggle.is-placeholder {
            visibility: hidden;
            pointer-events: none;
            cursor: default;
        }

        #modelImageGroupViewerModal .model-image-group-option:focus-visible {
            outline: none;
            background: transparent;
            color: color-mix(in srgb, var(--accent), black 14%);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), white 34%);
        }

        #modelImageGroupViewerModal .model-image-group-option-toggle:hover,
        #modelImageGroupViewerModal .model-image-group-option-action:hover {
            color: color-mix(in srgb, var(--accent), black 14%);
        }

        #modelImageGroupViewerModal .model-image-group-option.is-selected {
            background: transparent;
            color: color-mix(in srgb, var(--accent), black 14%);
            box-shadow: none;
        }

        #modelImageGroupViewerModal .model-image-group-option.is-selected .model-image-group-option-label {
            font-weight: 500;
        }

        #modelImageGroupViewerModal .model-image-group-option-action {
            min-width: 0;
            max-width: 100%;
            height: 22px;
            border: 0;
            padding: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            line-height: 22px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 1 auto;
            text-align: left;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }

        #modelImageGroupViewerModal .model-image-group-option-label {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 0 1 auto;
        }

        #modelImageGroupViewerModal .model-image-group-option-folder {
            width: 16px;
            color: currentColor;
            flex: 0 0 auto;
            opacity: 0.9;
        }

        #modelImageGroupViewerModal .model-image-group-option-file {
            width: 16px;
            color: currentColor;
            flex: 0 0 auto;
            opacity: 0.92;
        }

        #modelImageGroupViewerModal .model-image-group-search {
            flex: 1 1 320px;
            min-width: 320px;
            max-width: 420px;
        }

        #modelImageGroupViewerModal .model-image-group-surface {
            flex: 1 1 auto;
            height: 100%;
            min-height: 0;
            overflow: auto;
            padding: 12px 12px 12px 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.84);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            display: flex;
            flex-direction: column;
            scrollbar-gutter: auto;
            scrollbar-width: none;
        }

        #modelImageGroupViewerModal .model-image-group-surface::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid {
            flex: 1 1 0;
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            grid-auto-rows: max-content;
            gap: 14px;
            align-content: start;
            height: auto;
            min-height: 0;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid.is-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-item {
            width: 100%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            align-self: start;
            padding: var(--viewer-card-padding);
            border-radius: var(--viewer-card-radius);
            background: var(--viewer-card-bg);
            border: 1px solid var(--viewer-card-border);
            box-shadow: var(--viewer-card-shadow);
            transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
            cursor: default;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-item:hover {
            transform: translateY(-1px);
            box-shadow: var(--viewer-card-shadow-hover);
            background: var(--viewer-card-bg-hover);
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-img-wrapper {
            position: relative;
            display: block;
            border-radius: var(--viewer-thumb-radius);
            border: 1px solid var(--viewer-thumb-border);
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            margin-bottom: 10px;
            background: var(--viewer-thumb-bg);
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 0;
            box-sizing: border-box;
            border-radius: inherit;
            border: 0;
            cursor: zoom-in;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-filename,
        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-meta {
            padding-left: 0;
            padding-right: 0;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-filename {
            display: block;
            margin-top: 0;
            min-height: 0;
            height: auto;
            color: var(--label-primary);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: unset;
            -webkit-box-orient: initial;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 5px;
            padding-bottom: 0;
            gap: 6px;
        }

        #modelImageGroupViewerModal #modelImageGroupImagesGrid .preview-size {
            color: var(--label-secondary);
            font-size: 12px;
        }

        #modelImageGroupViewerModal .modal-header .btn-close {
            width: 30px;
            height: 30px;
            padding: 0;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            background-color: rgba(120, 120, 128, 0.12);
            background-image: var(--bs-btn-close-bg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 10px;
            opacity: 1;
            filter: none;
            transition: background-color 0.16s ease, transform 0.16s ease;
        }

        #modelImageGroupViewerModal .modal-header .btn-close:hover {
            background-color: rgba(120, 120, 128, 0.18);
            transform: translateY(-1px);
            opacity: 1;
        }

        #modelImageGroupViewerModal .model-image-group-viewer-loading {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 14px;
            z-index: 2;
            color: var(--label-secondary);
            backdrop-filter: saturate(180%) blur(14px);
            -webkit-backdrop-filter: saturate(180%) blur(14px);
        }

        #modelImageGroupViewerModal .model-image-group-loading-browser {
            display: flex;
            flex-direction: row;
            gap: 12px;
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        #modelImageGroupViewerModal .model-image-group-loading-sidebar {
            flex: 0 0 280px;
            min-width: 280px;
            min-height: 0;
            padding: 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #modelImageGroupViewerModal .model-image-group-loading-search {
            height: 36px;
            border-radius: 12px;
            flex: 0 0 auto;
        }

        #modelImageGroupViewerModal .model-image-group-loading-tree {
            flex: 1 1 auto;
            min-height: 0;
            padding: 6px;
            border: 1px solid color-mix(in srgb, var(--separator), white 12%);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.74);
        }

        #modelImageGroupViewerModal .model-image-group-loading-row {
            display: grid;
            grid-template-columns: 18px 18px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 8px 8px;
        }

        #modelImageGroupViewerModal .model-image-group-loading-toggle,
        #modelImageGroupViewerModal .model-image-group-loading-icon {
            width: 16px;
            height: 16px;
            border-radius: 5px;
        }

        #modelImageGroupViewerModal .model-image-group-loading-name {
            width: 74%;
            height: 12px;
            border-radius: 999px;
        }

        #modelImageGroupViewerModal .model-image-group-loading-row:nth-child(2n) .model-image-group-loading-name {
            width: 58%;
        }

        #modelImageGroupViewerModal .model-image-group-loading-main {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            padding: 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.84);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
            display: flex;
            flex-direction: column;
        }

        #modelImageGroupViewerModal .model-image-group-loading-grid {
            flex: 1 1 auto;
            min-height: 0;
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            grid-template-rows: repeat(3, minmax(0, 1fr));
            grid-auto-rows: 0;
            gap: 14px;
            align-content: start;
            overflow: hidden;
        }

        #modelImageGroupViewerModal .model-image-group-loading-grid .image-bank-loading-card {
            min-height: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #modelImageGroupViewerModal .model-image-group-loading-grid .image-bank-loading-thumb {
            flex: 1 1 auto;
            min-height: 0;
            aspect-ratio: auto;
        }

        #modelImageGroupViewerModal .model-image-group-loading-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--viewer-page-gap, 4px);
            min-height: 52px;
            padding: 10px 0 0;
            flex: 0 0 auto;
        }

        #modelImageGroupViewerModal .model-image-group-empty-state {
            width: 100%;
            height: auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 16px;
            gap: 0;
            border: 0;
            background: transparent;
        }

        #modelImageGroupViewerModal .model-image-group-empty-icon {
            color: #dee2e6;
            margin-bottom: 1rem;
        }

        #modelImageGroupViewerModal .model-image-group-empty-icon i {
            font-size: 3rem;
        }

        #modelImageGroupViewerModal .model-image-group-empty-title {
            color: #6c757d;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.35;
            margin-bottom: 0.25rem;
        }

        #modelImageGroupViewerModal .model-image-group-empty-text {
            color: #adb5bd;
            font-size: 0.85rem;
            line-height: 1.35;
            margin-bottom: 0;
        }

        @media (prefers-reduced-transparency: reduce) {
            #modelImageGroupViewerModal .modal-header,
            #modelImageGroupViewerModal .model-image-group-viewer-loading {
                background: var(--bg-primary);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }

        .image-carousel .carousel-inner,
        .image-carousel .carousel-item,
        .image-carousel img {
            width: 140px;
            height: 140px;
            object-fit: cover;
            border-radius: 0;
        }

        .image-carousel .carousel-control-prev,
        .image-carousel .carousel-control-next {
            width: 18px;
            height: 18px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            background: transparent;
            box-shadow: none;
            pointer-events: none;
            transition: opacity 0.15s ease;
        }

        .image-carousel:hover .carousel-control-prev,
        .image-carousel:hover .carousel-control-next {
            opacity: 1;
            pointer-events: auto;
            background: transparent;
            box-shadow: none;
            outline: none;
        }

        .image-carousel .carousel-control-prev-icon,
        .image-carousel .carousel-control-next-icon {
            filter: none;
            background-image: none;
        }

        .image-carousel .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        }

        .image-carousel .carousel-control-next-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .image-carousel .carousel-indicators {
            display: none;
        }

        .model-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-left: 1px solid #dee2e6;
        }

        .model-header {
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            display: flex !important;
            gap: 12px;
            padding: 10px 12px !important;
            align-items: center;
            justify-content: space-between !important;
        }

        .model-header .model-title-group,
        .model-header>div:first-child {
            display: flex;
            align-items: center;
            flex: 1 1 auto;
            gap: 12px;
            min-width: 0;
            flex-wrap: nowrap;
        }

        .model-header>.drag-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 28px;
            width: 28px;
            margin-left: auto;
        }

        .model-header h5 {
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* 属性名行 */
        .model-spec-header {
            background: #e9ecef;
            border-bottom: 1px solid #dee2e6;
        }

        .spec-row-header {
            display: grid;
            grid-template-columns: var(--spec-grid-columns);
            gap: var(--spec-grid-gap);
            padding: 10px 12px;
            font-weight: 600;
            font-size: 12px;
            color: #495057;
            text-align: center;
            align-items: center;
        }

        /* 规格数据行 */
        .model-specs {
            display: flex;
            flex-direction: column;
        }

        .spec-row-data {
            display: grid;
            grid-template-columns: var(--spec-grid-columns);
            gap: var(--spec-grid-gap);
            padding: 10px 12px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 13px;
            color: #212529;
            align-items: center;
            background: white;
            text-align: center;
            user-select: text;
            -webkit-user-select: text;
        }

        .spec-row-data:has(.col-supplier-code) {
            min-height: 58px;
        }

        .spec-row-data:last-child {
            border-bottom: none;
        }

        .spec-row-data.visible-last-row {
            border-bottom: none !important;
        }

        .spec-row-data.spec-collapsed {
            display: none;
        }

        .spec-row-data .spec-field-conflict {
            color: #dc3545;
            font-weight: 600;
        }

        .collapse-toggle {
            cursor: pointer;
            padding: 4px 10px;
            margin-right: 8px;
            user-select: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: #333333;
            border-radius: 20px;
            height: 22px;
        }

        .collapse-toggle .collapse-text {
            font-size: 11px;
            color: #fff;
            line-height: 1;
        }

        .collapse-toggle i {
            font-size: 10px;
            transition: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
        }

        .spec-row-data:hover {
            background: #f8f9fa;
        }

        .spec-row-data.dragging {
            opacity: 0.7;
            box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25);
        }

        .col-handle {
            display: flex;
            justify-content: center;
        }

        .col-caliber,
        .col-capacity,
        .col-material,
        .col-color,
        .col-price,
        .col-unit-price,
        .col-dimensions,
        .col-net-weight,
        .col-gross-weight,
        .col-pieces,
        .col-box-net-weight,
        .col-box-weight,
        .col-box-spec,
        .col-supplier,
        .col-supplier-code,
        .col-shelf,
        .col-nature,
        .col-remark {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .spec-row-data .col-caliber,
        .spec-row-data .col-sub-model,
        .spec-row-data .col-capacity,
        .spec-row-data .col-material,
        .spec-row-data .col-color,
        .spec-row-data .col-price,
        .spec-row-data .col-unit-price,
        .spec-row-data .col-dimensions,
        .spec-row-data .col-net-weight,
        .spec-row-data .col-gross-weight,
        .spec-row-data .col-pieces,
        .spec-row-data .col-box-net-weight,
        .spec-row-data .col-box-weight,
        .spec-row-data .col-box-spec,
        .spec-row-data .col-supplier,
        .spec-row-data .col-supplier-code,
        .spec-row-data .col-shelf,
        .spec-row-data .col-nature,
        .spec-row-data .col-remark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            line-height: 1.2;
        }

        .spec-row-header .col-supplier-code,
        .spec-row-data .col-supplier-code,
        .spec-row-header .col-remark,
        .spec-row-data .col-remark {
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow: hidden !important;
            text-overflow: clip !important;
            overflow-wrap: anywhere !important;
            word-break: break-all !important;
            line-height: 1.25 !important;
        }

        .spec-row-data .col-remark {
            display: block !important;
            align-self: center;
            width: 100%;
            text-align: center;
            padding: 0 2px;
        }

        .col-actions {
            display: flex;
            gap: 4px;
            justify-content: center;
            align-items: center;
        }

        .col-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            max-height: 32px !important;
            padding: 0;
            border-radius: 9px;
            border-color: rgba(60, 60, 67, 0.18) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            color: var(--label-secondary) !important;
            box-shadow: none !important;
            line-height: 1;
            transform: translateY(0) !important;
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }

        .col-actions .btn i {
            font-size: 15px;
            line-height: 1;
        }

        .col-actions .btn:hover,
        .col-actions .btn:focus-visible {
            border-color: rgba(60, 60, 67, 0.18) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            color: var(--label-secondary) !important;
            box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
            transform: translateY(-1px) !important;
        }

        .col-actions .btn:active {
            border-color: rgba(60, 60, 67, 0.18) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            color: var(--label-secondary) !important;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important;
            transform: translateY(-0.5px) !important;
        }

        .col-checkbox {
            display: flex;
            justify-content: center;
        }

        .col-checkbox .form-check-input {
            margin-top: 0;
        }

        .form-check-input.model-select-all {
            width: 13px;
            height: 13px;
        }

        .form-check-input.product-checkbox {
            width: 12px;
            height: 12px;
        }

        #selectAll:focus,
        #selectAll:focus-visible {
            box-shadow: none;
            outline: none;
        }

        #selectAll:checked,
        #selectAll:indeterminate {
            border-color: #0d6efd;
            background-color: #0d6efd;
        }

        #selectAll:checked,
        #selectAll:checked:active,
        #selectAll:checked:focus,
        .form-check-input.model-select-all:checked,
        .form-check-input.model-select-all:checked:active,
        .form-check-input.model-select-all:checked:focus,
        .form-check-input.product-checkbox:checked,
        .form-check-input.product-checkbox:checked:active,
        .form-check-input.product-checkbox:checked:focus {
            border-color: #0d6efd !important;
            background-color: #0d6efd !important;
            background-image: var(--bs-form-check-bg-image) !important;
        }

        #selectAll:indeterminate,
        #selectAll:indeterminate:active,
        #selectAll:indeterminate:focus,
        .form-check-input.model-select-all:indeterminate,
        .form-check-input.model-select-all:indeterminate:active,
        .form-check-input.model-select-all:indeterminate:focus,
        .form-check-input.product-checkbox:indeterminate,
        .form-check-input.product-checkbox:indeterminate:active,
        .form-check-input.product-checkbox:indeterminate:focus {
            border-color: #0d6efd !important;
            background-color: #0d6efd !important;
            background-image: var(--bs-form-check-bg-image) !important;
        }

        .form-check-input.model-select-all:focus,
        .form-check-input.model-select-all:focus-visible,
        .form-check-input.product-checkbox:focus,
        .form-check-input.product-checkbox:focus-visible {
            box-shadow: none;
            outline: none;
        }

        .form-check-input.model-select-all:checked,
        .form-check-input.model-select-all:indeterminate,
        .form-check-input.product-checkbox:checked,
        .form-check-input.product-checkbox:indeterminate {
            border-color: #0d6efd;
            background-color: #0d6efd;
        }

        /* 拖拽排序样式 */
        .model-container {
            cursor: default;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .model-container.dragging {
            opacity: 0.7;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, .25) inset;
            border: 2px solid #007BFF;
        }

        .drag-handle {
            cursor: grab;
            color: #6c757d;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .drag-handle:hover {
            color: #495057;
        }

        /* 规格拖拽手柄 */
        .spec-drag-handle {
            cursor: grab;
            color: #6c757d;
            user-select: none;
            -webkit-user-select: none;
        }

        .spec-drag-handle:active {
            cursor: grabbing;
        }

        .spec-drag-handle:hover {
            color: #495057;
        }

        /* ===== 分页组件样式 ===== */

        .page-jump-container {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex: 0 0 auto;
            gap: 7px;
            margin-left: 10px;
            white-space: nowrap;
        }

        .page-jump-label {
            color: var(--label-secondary);
            font-size: 13px;
        }

        .page-jump-input {
            width: 48px;
            height: 34px;
            padding: 0 8px;
            border: 1px solid color-mix(in srgb, var(--separator), white 10%);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.72);
            color: var(--label-primary);
            text-align: center;
            font-size: 13px;
            transition: background-color 0.14s ease, border-color 0.14s ease;
        }

        /* 移除 Chrome, Safari, Edge 的上下箭头 */
        .page-jump-input::-webkit-outer-spin-button,
        .page-jump-input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            appearance: none !important;
            display: none !important;
            margin: 0 !important;
        }

        /* 移除 Firefox 的上下箭头 */
        .page-jump-input {
            -moz-appearance: textfield !important;
        }

        .page-jump-input:focus {
            outline: none !important;
            border-color: color-mix(in srgb, var(--accent), white 12%);
            background-color: color-mix(in srgb, var(--accent), white 94%);
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .page-jump-btn {
            height: 34px;
            padding: 0 13px;
            border-radius: 11px;
            font-size: 13px;
            font-weight: 600;
        }

        #productsPagination.app-pagination {
            --app-pagination-padding: 0;
        }

        .products-pagination-row {
            width: 100%;
            max-width: 100%;
            justify-content: center;
            gap: 0;
            flex-wrap: nowrap;
            min-height: 56px;
            padding: 8px 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.58);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        }

        .product-react-pagination {
            width: 100%;
            min-width: 0;
        }

        .product-react-pagination .app-pagination {
            --app-pagination-padding: 0;
            padding: 0 !important;
        }

        .pagination-divider {
            width: 1px;
            height: 28px;
            flex: 0 0 auto;
            align-self: center;
            margin: 0 14px;
            background: color-mix(in srgb, var(--separator), white 8%);
        }

        .page-size-control {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 38px;
            padding: 4px 6px 4px 10px;
            border: 0;
            border-radius: 13px;
            background: rgba(255, 255, 255, 0.68);
            box-shadow: none;
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .page-size-label {
            color: var(--label-secondary);
            font-size: 13px;
            line-height: 1;
        }

        .page-size-options {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px;
            border-radius: 11px;
            background: rgba(242, 244, 248, 0.9);
        }

        .page-size-option {
            min-width: 34px;
            height: 28px;
            padding: 0 10px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: var(--label-secondary);
            font-size: 13px;
            font-weight: 600;
            line-height: 28px;
            text-align: center;
            box-shadow: none !important;
            transition: background-color 0.14s ease, color 0.14s ease;
        }

        .page-size-option:hover:not(.is-active) {
            background: rgba(255, 255, 255, 0.72);
            color: var(--label-primary);
        }

        .page-size-option.is-active {
            background: color-mix(in srgb, var(--accent), white 86%);
            color: var(--accent);
        }

        .page-size-option:focus,
        .page-size-option:focus-visible,
        .page-size-option:active {
            outline: none !important;
            box-shadow: none !important;
        }

        .view-switch-group .platform-icon-button {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            padding: 0;
            font-size: 13px;
        }

        /* The active view is the same primary control as sorting: identical
           dimensions, gradient and elevation. The inactive view remains a
           quiet dark companion within the joined switch. */
        .view-switch-group .product-view-switch-button.platform-icon-button--primary {
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%) 0%, var(--accent-strong) 100%) !important;
            border-color: color-mix(in srgb, var(--accent-strong), black 6%) !important;
            box-shadow: var(--shadow-xs) !important;
            color: #fff !important;
        }

        .view-switch-group .product-view-switch-button {
            /* 渐变悬浮态与默认透明态之间不使用 Bootstrap 的颜色过渡，避免离开时闪帧。 */
            transition: none !important;
        }

        .view-switch-group .product-view-switch-button.platform-icon-button--secondary {
            /* 未激活视图按钮沿用既有深灰态；悬浮仅保持该状态。 */
            background: #333333 !important;
            color: #ffffff !important;
            border-color: #333333 !important;
            box-shadow: none !important;
        }

        .view-switch-group .product-view-switch-button.platform-icon-button--secondary:hover {
            background: #333333 !important;
            color: #ffffff !important;
            border-color: #333333 !important;
            box-shadow: none !important;
        }

        /* 键盘焦点仍保留可辨识的强调态；鼠标悬浮不填充蓝色。 */
        .view-switch-group .product-view-switch-button.platform-icon-button--secondary:focus,
        .view-switch-group .product-view-switch-button.platform-icon-button--secondary:focus-visible {
            border-color: color-mix(in srgb, var(--accent-strong), black 6%) !important;
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%) 0%, var(--accent-strong) 100%) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

        /* 列表与画廊共用同一个控制栏高度；画廊隐藏选择信息后也不应压缩。 */
        .products-container .selection-bar-row,
        .products-container .selection-bar-row.gallery-toolbar-row {
            height: 54px;
            min-height: 54px;
            box-sizing: border-box;
        }

        #selectionBar,
        .product-selection-controls {
            min-height: 32px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 6px;
            white-space: nowrap;
        }

        #selectionBar>span,
        .product-selection-controls>span {
            display: inline-flex;
            align-items: center;
            line-height: 1;
        }

        .gallery-view {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
        }

        .app-container:not(.inbound-picker-mode) {
            width: var(--app-min-width);
            max-width: var(--app-min-width);
            min-width: var(--app-min-width);
        }

        .app-container:not(.inbound-picker-mode)>.row.align-items-center,
        #searchFilters .card-body>.row,
        .selection-bar-row,
        .products-container>.d-flex.justify-content-between.align-items-center {
            flex-wrap: nowrap;
        }

        .app-container:not(.inbound-picker-mode)>.row.align-items-center>*,
        #searchFilters .card-body>.row>*,
        .selection-bar-row>*,
        .products-container>.d-flex.justify-content-between.align-items-center>* {
            flex: 0 0 auto;
        }

        #searchFilters,
        .search-filters-card,
        .products-container,
        #productsWrapper,
        #galleryView {
            width: 100%;
            min-width: 0;
        }

        #searchFilters {
            position: relative;
            z-index: 120;
            overflow: visible !important;
        }

        .search-filters-card,
        .search-filters-card .card-body,
        #searchFilters .card-body>.row,
        #searchFilters .custom-dropdown {
            overflow: visible !important;
        }

        .products-container,
        #selectionBar,
        #productsWrapper,
        #galleryView {
            position: relative;
            z-index: 1;
        }

        .products-container .selection-bar-row {
            position: relative;
            z-index: 80;
            overflow: visible;
        }

        .products-container>.d-flex.justify-content-between.align-items-center.mt-4.mb-3 {
            flex-wrap: nowrap;
            white-space: nowrap;
        }

        .products-container>.d-flex.justify-content-between.align-items-center.mt-4.mb-3>* {
            flex: 0 0 auto;
        }

        .gallery-card {
            border: 1px solid #dee2e6;
            background: #fff;
            padding: 10px;
            border-radius: 2px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .gallery-spec-modal-body {
            max-height: none;
            overflow: auto;
        }

        #gallerySpecsModal .modal-dialog {
            --bs-modal-width: 1660px;
            width: 1660px;
            min-width: 1660px;
            max-width: 1660px;
            height: auto;
            margin: 18px auto;
        }

        #gallerySpecsModal .modal-content {
            height: auto;
            max-height: 865px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #gallerySpecsModal .modal-header {
            flex: 0 0 auto;
        }

        #gallerySpecsModal .modal-body {
            flex: 0 1 auto;
            min-height: 0;
            max-height: none;
            overflow: auto;
            padding-left: 10px;
            padding-right: 10px;
        }

        .gallery-spec-modal-body .model-container {
            margin-bottom: 0;
            overflow: hidden;
            min-width: 0;
            width: 100%;
            transform: none !important;
        }

        .gallery-spec-modal-body .model-content {
            min-width: 0;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(60, 60, 67, 0.34) transparent;
        }

        .gallery-spec-modal-body .model-content::-webkit-scrollbar {
            height: 8px;
        }

        .gallery-spec-modal-body .model-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .gallery-spec-modal-body .model-content::-webkit-scrollbar-thumb {
            background: rgba(60, 60, 67, 0.26);
            border-radius: 999px;
        }

        .gallery-spec-modal-body .model-image-preview {
            cursor: default !important;
            transform: none !important;
        }

        .gallery-spec-modal-body .model-container:hover .model-image-preview.is-loaded {
            transform: none !important;
        }

        .gallery-spec-modal-body .model-spec-header,
        .gallery-spec-modal-body .model-specs {
            width: max-content;
            min-width: 100%;
        }

        .gallery-spec-modal-body .model-spec-header {
            background: rgba(242, 244, 248, 0.96) !important;
        }

        .gallery-spec-modal-body .col-checkbox .form-check-input,
        .gallery-spec-modal-body .collapse-toggle {
            display: none !important;
        }

        .gallery-spec-modal-body .col-checkbox,
        .gallery-spec-modal-body .col-actions,
        .gallery-spec-modal-body .col-handle,
        .gallery-spec-modal-body .drag-handle,
        .gallery-spec-modal-body .spec-drag-handle {
            display: none !important;
        }

        .gallery-spec-modal-body .model-header,
        .gallery-spec-modal-body .spec-row-header,
        .gallery-spec-modal-body .spec-row-data {
            /* 非容量类目：口径、材质、颜色、价格… */
            grid-template-columns: 72px 90px 90px 72px 76px 162px 78px 78px 82px 78px 78px 132px 132px 96px 78px 96px 132px;
            gap: 8px;
            width: max-content;
            min-width: 100%;
        }

        /* 容量类目：型号、口径、容量、价格…；供应商编号位于供应商之后。 */
        .gallery-spec-modal-body .model-container:has(.col-capacity) .model-header,
        .gallery-spec-modal-body .model-container:has(.col-capacity) .spec-row-header,
        .gallery-spec-modal-body .model-container:has(.col-capacity) .spec-row-data {
            grid-template-columns: 110px 64px 76px 72px 76px 162px 78px 78px 82px 78px 78px 132px 96px 132px 96px 78px 132px;
        }

        .gallery-spec-modal-body .model-header>div:first-child {
            grid-column: 1 / -1;
        }

        .gallery-spec-modal-body .spec-row-header > span,
        .gallery-spec-modal-body .spec-row-data > span {
            min-width: 0;
        }

        .gallery-spec-modal-body .spec-row-header .col-supplier-code,
        .gallery-spec-modal-body .spec-row-data .col-supplier-code,
        .gallery-spec-modal-body .spec-row-header .col-remark,
        .gallery-spec-modal-body .spec-row-data .col-remark {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        .gallery-spec-modal-body .drag-handle,
        .gallery-spec-modal-body .spec-drag-handle {
            cursor: default;
        }

        .gallery-thumb {
            width: 100%;
            aspect-ratio: 1 / 1;
            height: auto;
            object-fit: contain;
            object-position: center;
            background: #ffffff;
            border: 1px solid #eef1f4;
            cursor: pointer;
        }

        .gallery-info {
            margin-top: 8px;
            font-size: 13px;
            color: #495057;
            line-height: 1.5;
            min-height: 112px;
        }

        .gallery-info .title {
            font-size: 14px;
            font-weight: 600;
            color: #212529;
            margin-bottom: 4px;
        }

        @media (max-width: 1400px) {
            .gallery-view {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }

        @media (max-width: 1200px) {
            .gallery-view {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .gallery-view {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }

        }

        #searchFilters .search-input {
            width: 140px;
        }

        #searchFilters #search-supplier-code {
            width: 140px;
        }

        #searchFilters #search-dim-length,
        #searchFilters #search-dim-width,
        #searchFilters #search-dim-height {
            width: 140px;
        }

        #searchFilters .card-body>.row {
            justify-content: center;
        }

        #searchFilters .custom-dropdown .dropdown-options {
            top: 100% !important;
            margin-top: 4px;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            border-radius: 12px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.11);
            z-index: 5000;
        }

        .selection-sort-hover-dropdown {
            position: relative;
            display: inline-flex;
            /* Keep the sort control independent from the view controls. The
               previous offset overlapped them once all controls became 40px. */
            transform: none;
            z-index: 90;
        }

        #selectionSortTrigger,
        .platform-icon-button.product-sort-button {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            padding: 0;
            font-size: 13px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%) 0%, var(--accent-strong) 100%);
            border-color: color-mix(in srgb, var(--accent-strong), black 6%);
            box-shadow: var(--shadow-xs);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* 渐变底色不参与 Bootstrap 的背景过渡，避免指针进出时出现闪帧。 */
            transition: none !important;
        }

        #selectionSortTrigger:hover,
        #selectionSortTrigger:focus,
        .platform-icon-button.product-sort-button:hover,
        .platform-icon-button.product-sort-button:focus {
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 10%) 0%, var(--accent-strong) 100%) !important;
            border-color: color-mix(in srgb, var(--accent-strong), black 6%) !important;
            color: #fff;
            box-shadow: var(--shadow-xs) !important;
        }

        #topSelectToggle,
        .product-top-select-toggle {
            transform: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            line-height: 1;
            white-space: nowrap;
            vertical-align: middle;
        }

        #topSelectToggle .form-check-input,
        .product-top-select-toggle .form-check-input {
            flex: 0 0 auto;
            margin: 0;
        }

        #topSelectToggle .form-check-input:not(:checked):not(:indeterminate),
        .product-top-select-toggle .form-check-input:not(:checked):not(:indeterminate),
        #topSelectToggle .form-check-input:not(:checked):not(:indeterminate):hover,
        .product-top-select-toggle .form-check-input:not(:checked):not(:indeterminate):hover,
        #topSelectToggle .form-check-input:not(:checked):not(:indeterminate):focus,
        .product-top-select-toggle .form-check-input:not(:checked):not(:indeterminate):focus,
        #topSelectToggle .form-check-input:not(:checked):not(:indeterminate):focus-visible,
        .product-top-select-toggle .form-check-input:not(:checked):not(:indeterminate):focus-visible,
        #topSelectToggle .form-check-input:not(:checked):not(:indeterminate):active,
        .product-top-select-toggle .form-check-input:not(:checked):not(:indeterminate):active {
            border-color: var(--separator) !important;
            background-color: #fff !important;
            background-image: none !important;
            box-shadow: none !important;
        }

        #selectedCountWrap,
        .product-selected-count-wrap {
            transform: translateX(-8px);
        }

        .selection-sort-hover-dropdown::after {
            content: '';
            position: absolute;
            top: 100%;
            left: -10px;
            right: -10px;
            height: 8px;
            background: transparent;
        }

        .selection-sort-menu {
            position: absolute;
            top: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            min-width: 140px;
            background: #fff;
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.10);
            padding: 4px;
            z-index: 5100;
            display: none;
        }

        .selection-sort-menu .dropdown-item {
            border-radius: 6px;
            font-size: 14px;
            padding: 6px 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .selection-sort-menu .dropdown-item:hover,
        .selection-sort-menu .dropdown-item:focus {
            color: #0d6efd;
            background-color: transparent;
        }

        .react-selection-sort-dropdown.is-open .selection-sort-menu {
            display: block;
        }

        .selection-sort-hover-dropdown.menu-force-hidden .selection-sort-menu {
            display: none !important;
        }

        .header-edit-hover-dropdown {
            position: relative;
            display: inline-flex;
        }

        .header-edit-hover-dropdown::after {
            content: '';
            position: absolute;
            top: 100%;
            left: -12px;
            right: -12px;
            height: 6px;
            background: transparent;
        }

        .header-edit-menu {
            position: absolute;
            top: calc(100% + 2px);
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            width: 110px;
            min-width: 110px;
            background: #fff;
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.10);
            padding: 4px;
            z-index: 1050;
            display: none;
        }

        .header-edit-menu .dropdown-item {
            border-radius: 6px;
            font-size: 14px;
            padding: 6px 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .header-edit-menu .dropdown-item:hover,
        .header-edit-menu .dropdown-item:focus {
            color: #0d6efd;
            background-color: transparent;
        }

        .header-edit-hover-dropdown:hover .header-edit-menu,
        .header-edit-hover-dropdown:focus-within .header-edit-menu {
            display: block;
        }

        .header-edit-hover-dropdown>.btn:focus,
        .header-edit-hover-dropdown>.btn:focus-visible {
            color: #fff !important;
            background-color: #333333 !important;
            border-color: #333333 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .header-edit-hover-dropdown:hover>.btn {
            color: #fff !important;
            background-color: #333333 !important;
            border-color: #333333 !important;
            box-shadow: none !important;
        }

        .product-header-actions {
            gap: 2px !important;
        }

        .header-edit-hover-dropdown>.btn:active,
        .header-edit-hover-dropdown>.btn.active,
        .header-edit-hover-dropdown>.btn.show {
            color: #fff;
            background-color: #555555;
            border-color: #555555;
            box-shadow: none;
        }

        .header-add-hover-dropdown {
            position: relative;
            display: inline-flex;
        }

        .header-add-hover-dropdown::after {
            content: '';
            position: absolute;
            top: 100%;
            left: -12px;
            right: -12px;
            height: 6px;
            background: transparent;
        }

        .header-add-menu {
            position: absolute;
            top: calc(100% + 2px);
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            width: 120px;
            min-width: 120px;
            background: #fff;
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.10);
            padding: 4px;
            z-index: 1050;
            display: none;
        }

        .header-add-menu .dropdown-item {
            border-radius: 6px;
            font-size: 14px;
            padding: 6px 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .header-add-menu .dropdown-item:hover,
        .header-add-menu .dropdown-item:focus {
            color: #0d6efd;
            background-color: transparent;
        }

        .header-add-hover-dropdown:hover .header-add-menu,
        .header-add-hover-dropdown:focus-within .header-add-menu {
            display: block;
        }

        .header-add-hover-dropdown>.btn:focus,
        .header-add-hover-dropdown>.btn:focus-visible {
            box-shadow: none;
            outline: none;
        }

        .header-add-hover-dropdown>.btn:active,
        .header-add-hover-dropdown>.btn.active,
        .header-add-hover-dropdown>.btn.show {
            box-shadow: none;
        }

        html.products-initial-gallery #productsWrapper {
            display: none;
        }

        html.products-initial-gallery #selectionBar {
            display: none;
        }

        html.products-initial-gallery .selection-bar-row {
            justify-content: flex-end !important;
        }

        html.products-initial-gallery .selection-sort-hover-dropdown {
            display: none !important;
        }

        .selection-bar-row.gallery-toolbar-row {
            justify-content: flex-end !important;
        }

        .selection-bar-row.gallery-toolbar-row .selection-sort-hover-dropdown {
            display: none !important;
        }

        html.products-initial-list #listViewBtn,
        html.products-initial-gallery #galleryViewBtn {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
        }

        .products-loading #listViewBtn,
        .products-loading #galleryViewBtn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

        /* Apple-style local overrides */
        .app-container {
            padding: 10px 12px 28px;
        }

        .model-container,
        .gallery-card,
        .header-edit-menu,
        .header-add-menu,
        #gallerySpecsModal .modal-content,
        #modelImageGroupViewerModal .modal-content,
        #productImagePreviewModal .modal-content,
        #deleteModal .modal-content,
        #batchDeleteModal .modal-content {
            border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.82) !important;
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
        }

        .model-container {
            margin-bottom: 14px;
            overflow: hidden;
            transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
            will-change: transform;
        }

        .model-container:hover {
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
            transform: translateY(-1px);
        }

        .model-container:has(.collapse-toggle.collapsed),
        .model-container:not(:has(.collapse-toggle)) {
            min-height: 152px;
        }

        .model-image-section,
        .image-carousel,
        .product-image-placeholder {
            background: rgba(255, 255, 255, 0.62) !important;
        }

        .model-image-section {
            width: 152px;
            min-width: 152px;
            height: 152px;
            padding: 10px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 247, 250, 0.82)) !important;
            border-right: 0;
            overflow: hidden;
        }

        .image-carousel,
        .product-image-placeholder,
        .model-image-preview,
        .image-carousel .carousel-inner,
        .image-carousel .carousel-item,
        .image-carousel img {
            width: 132px;
            height: 132px;
            border-radius: 14px !important;
        }

        .image-carousel,
        .product-image-placeholder {
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--separator), white 22%);
        }

        .product-image-placeholder {
            flex-direction: column;
            gap: 6px;
            color: var(--label-tertiary) !important;
            font-size: 28px !important;
        }

        .product-image-placeholder::after {
            content: "暂无图片";
            font-size: 12px;
            color: var(--label-secondary);
            letter-spacing: 0;
        }

        .image-carousel.image-load-failed {
            background: rgba(242, 242, 247, 0.84) !important;
        }

        .image-carousel.image-load-failed::before {
            content: "图片不可用";
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--label-secondary);
            font-size: 12px;
            background: rgba(242, 242, 247, 0.86);
        }

        .model-image-preview {
            transition: opacity 0.14s ease, transform 0.18s ease;
            transform-origin: center;
        }

        .model-container:hover .model-image-preview.is-loaded {
            transform: scale(1.025);
        }

        .model-content {
            border-left: 1px solid color-mix(in srgb, var(--separator), white 22%);
            min-width: 0;
        }

        .model-header,
        .spec-row-header {
            background: rgba(255, 255, 255, 0.52) !important;
            color: var(--label-secondary) !important;
            border-bottom: 1px solid color-mix(in srgb, var(--separator), white 18%);
        }

        .model-header {
            min-height: 48px;
            padding: 11px 14px !important;
            background: rgba(255, 255, 255, 0.64) !important;
        }

        .model-header > div:first-child {
            gap: 14px !important;
        }

        .model-header h5 {
            font-size: 18px;
            line-height: 1.15;
            letter-spacing: 0;
        }

        .model-header h5 + h5 {
            color: var(--label-primary);
            font-weight: 650 !important;
        }

        .model-spec-header {
            background: rgba(242, 244, 248, 0.96) !important;
            border-top: 1px solid color-mix(in srgb, var(--separator), white 24%);
            border-bottom: 1px solid color-mix(in srgb, var(--separator), white 8%) !important;
        }

        .spec-row-header {
            min-height: 40px;
            padding: 10px 14px;
            background: transparent !important;
            color: var(--label-secondary) !important;
            font-size: 12px;
            font-weight: 700;
        }

        .spec-row-data {
            background: transparent !important;
            min-height: 54px;
            padding: 11px 14px;
            border-bottom-color: color-mix(in srgb, var(--separator), white 22%);
            color: var(--label-primary);
            transition: background-color 0.14s ease;
        }

        .spec-row-data:hover {
            background: rgba(0, 122, 255, 0.04) !important;
        }

        .search-filters-card,
        #selectionBar,
        .product-selection-controls,
        .products-skeleton-row {
            border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.78) !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
        }

        #selectionBar,
        .product-selection-controls {
            padding: 8px 12px;
        }

        #selectionBar,
        .product-selection-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: nowrap;
        }

        #selectionBar .d-flex,
        .product-selection-controls .d-flex {
            align-items: center;
        }

        #selectionBar .pill-action-btn,
        #selectionBar .btn-group .btn,
        .product-selection-controls .pill-action-btn,
        .product-selection-controls .btn-group .btn {
            min-height: 36px;
        }

        #topSelectToggle,
        .product-top-select-toggle {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(120, 120, 128, 0.08);
        }

        .model-spec-header {
            background: rgba(242, 244, 248, 0.96) !important;
            border-top: 1px solid color-mix(in srgb, var(--separator), white 24%);
            border-bottom: 1px solid color-mix(in srgb, var(--separator), white 8%) !important;
        }

        .model-image-preview,
        .gallery-card .gallery-thumb {
            border-radius: 14px !important;
        }

        .product-image-placeholder,
        .gallery-thumb-placeholder {
            color: var(--label-tertiary) !important;
        }

        .collapse-toggle {
            background: rgba(15, 23, 42, 0.82) !important;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
            min-height: 28px;
            padding: 0 12px;
        }

        .collapse-toggle .collapse-text {
            color: #ffffff !important;
        }

        .collapse-toggle i {
            color: var(--label-primary) !important;
        }

        .header-edit-menu .dropdown-item,
        .header-add-menu .dropdown-item {
            border-radius: 10px;
            color: var(--label-primary);
        }

        .header-edit-menu .dropdown-item:hover,
        .header-add-menu .dropdown-item:hover {
            background: rgba(0, 122, 255, 0.08);
            color: var(--accent-strong);
        }

        .header-edit-hover-dropdown > button,
        .header-add-hover-dropdown > button {
            border-radius: 12px !important;
            min-height: 40px;
        }

        /* Product card P2 refinements */
        .model-container .drag-handle,
        .model-container .spec-drag-handle {
            opacity: 0.32;
            color: var(--label-tertiary) !important;
            transition: opacity 0.14s ease, color 0.14s ease;
        }

        .model-container:hover .drag-handle,
        .model-container .spec-row-data:hover .spec-drag-handle,
        .model-container .drag-handle:hover,
        .model-container .spec-drag-handle:hover {
            opacity: 0.72;
            color: var(--label-secondary) !important;
        }

        .model-container .col-handle {
            justify-content: center;
            padding-right: 0;
        }

        .model-container .spec-row-header .col-handle,
        .model-container .spec-row-data .col-handle {
            transform: translateX(-12px);
        }

        .model-container .form-check-input.model-select-all,
        .model-container .form-check-input.product-checkbox {
            width: 14px;
            height: 14px;
            margin: 0;
            border-radius: 4px;
        }

        .model-container .form-check-input.model-select-all:not(:checked):not(:indeterminate),
        .model-container .form-check-input.model-select-all:not(:checked):not(:indeterminate):hover,
        .model-container .form-check-input.model-select-all:not(:checked):not(:indeterminate):focus,
        .model-container .form-check-input.model-select-all:not(:checked):not(:indeterminate):focus-visible,
        .model-container .form-check-input.model-select-all:not(:checked):not(:indeterminate):active,
        .model-container .form-check-input.product-checkbox:not(:checked):not(:indeterminate),
        .model-container .form-check-input.product-checkbox:not(:checked):not(:indeterminate):hover,
        .model-container .form-check-input.product-checkbox:not(:checked):not(:indeterminate):focus,
        .model-container .form-check-input.product-checkbox:not(:checked):not(:indeterminate):focus-visible,
        .model-container .form-check-input.product-checkbox:not(:checked):not(:indeterminate):active {
            border-color: var(--separator) !important;
            background-color: #fff !important;
            background-image: none !important;
            box-shadow: none !important;
        }

        .model-container .col-checkbox {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .model-container .collapse-toggle {
            min-height: 26px;
            height: 26px;
            padding: 0 10px;
            border: 1px solid color-mix(in srgb, var(--separator), white 10%);
            background: rgba(120, 120, 128, 0.10) !important;
            box-shadow: none;
            transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
        }

        .model-container .collapse-toggle .collapse-text {
            color: var(--label-secondary) !important;
            font-weight: 650;
        }

        .model-container .collapse-toggle i {
            color: var(--label-secondary) !important;
            background: rgba(255, 255, 255, 0.76);
            box-shadow: none;
        }

        .model-container .collapse-toggle:not(.collapsed) {
            background: rgba(0, 122, 255, 0.10) !important;
            border-color: color-mix(in srgb, var(--accent), white 62%);
        }

        .model-container .collapse-toggle:not(.collapsed) .collapse-text,
        .model-container .collapse-toggle:not(.collapsed) i {
            color: var(--accent-strong) !important;
        }

        .model-container .spec-row-data:hover {
            background: rgba(120, 120, 128, 0.055) !important;
        }

        .spec-row-header .col-price,
        .spec-row-header .col-unit-price,
        .spec-row-header .col-net-weight,
        .spec-row-header .col-gross-weight,
        .spec-row-header .col-pieces,
        .spec-row-header .col-box-net-weight,
        .spec-row-header .col-box-weight,
        .spec-row-data .col-price,
        .spec-row-data .col-unit-price,
        .spec-row-data .col-net-weight,
        .spec-row-data .col-gross-weight,
        .spec-row-data .col-pieces,
        .spec-row-data .col-box-net-weight,
        .spec-row-data .col-box-weight {
            justify-content: center !important;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

        .spec-row-header .col-dimensions,
        .spec-row-header .col-box-spec,
        .spec-row-data .col-dimensions,
        .spec-row-data .col-box-spec {
            justify-content: center !important;
            text-align: center;
        }

        .spec-row-data .col-sub-model,
        .spec-row-data .col-dimensions,
        .spec-row-data .col-box-spec,
        .spec-row-data .col-shelf,
        .spec-row-data .col-nature {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
        }

        .gallery-card {
            overflow: hidden;
            transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
        }

        .gallery-card:hover {
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10) !important;
            transform: translateY(-1px);
        }

        .gallery-card .gallery-thumb,
        .gallery-card .gallery-thumb-placeholder {
            border-radius: 14px;
        }

        .gallery-view {
            gap: 18px !important;
            align-items: stretch;
        }

        .gallery-card {
            position: relative;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.82) !important;
            padding: 12px !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            cursor: pointer;
            transition: transform 0.16s ease, box-shadow 0.16s ease;
        }

        .gallery-card:hover {
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
            transform: translateY(-1px);
        }

        .gallery-media {
            position: relative;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 14px;
            background: color-mix(in srgb, var(--system-background), white 72%);
            border: 1px solid color-mix(in srgb, var(--separator), white 20%);
        }

        .gallery-card .gallery-thumb,
        .gallery-card .gallery-thumb-placeholder {
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
            border: 0 !important;
            border-radius: 14px !important;
            background: transparent !important;
            object-fit: cover;
            object-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-thumb-placeholder i {
            font-size: 28px;
        }

        .gallery-info {
            margin-top: 10px !important;
            min-height: 0 !important;
            color: var(--label-secondary) !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
        }

        .gallery-title-row {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            gap: 6px;
            min-width: 0;
            margin-bottom: 8px;
        }

        .gallery-info .title {
            min-width: 0;
            flex: 0 1 auto;
            max-width: calc(100% - 58px);
            margin: 0 !important;
            color: var(--label-primary) !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gallery-subtitle {
            flex: 0 1 auto;
            max-width: 78px;
            color: var(--label-secondary);
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gallery-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

        .gallery-meta {
            min-width: 0;
            padding: 6px 8px;
            border-radius: 10px;
            background: rgba(120, 120, 128, 0.08);
        }

        .gallery-meta-label {
            display: block;
            color: var(--label-tertiary);
            font-size: 11px;
            line-height: 1.2;
            margin-bottom: 2px;
        }

        .gallery-meta-value {
            display: block;
            color: var(--label-primary);
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gallery-empty-state {
            grid-column: 1 / -1;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.72);
            color: var(--label-secondary);
        }

        .gallery-empty-state i {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: rgba(120, 120, 128, 0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--label-tertiary);
            font-size: 20px;
        }

        #listViewBtn,
        #galleryViewBtn {
            min-width: 40px;
        }

        #listViewBtn.platform-icon-button--secondary:hover,
        #listViewBtn.platform-icon-button--secondary:focus,
        #listViewBtn.platform-icon-button--secondary:focus-visible,
        #galleryViewBtn.platform-icon-button--secondary:hover,
        #galleryViewBtn.platform-icon-button--secondary:focus,
        #galleryViewBtn.platform-icon-button--secondary:focus-visible {
            border-color: color-mix(in srgb, var(--separator), white 12%) !important;
            box-shadow: none !important;
        }

        #productsWrapper > .text-center.text-muted.py-5 {
            min-height: 280px;
            margin-top: 14px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #productsWrapper > .text-center.text-muted.py-5 .empty-state-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(120, 120, 128, 0.10);
            color: var(--label-secondary) !important;
            font-size: 22px;
        }

        .product-field-tooltip {
            position: fixed;
            z-index: 7000;
            max-width: 420px;
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(28, 28, 30, 0.92);
            color: #fff;
            font-size: 12px;
            line-height: 1.45;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.20);
            pointer-events: none;
            opacity: 0;
            transform: translateY(3px);
            transition: opacity 0.12s ease, transform 0.12s ease;
            overflow-wrap: anywhere;
        }

        .product-field-tooltip.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .model-container,
            .gallery-card,
            .model-image-preview,
            .spec-row-data,
            .model-container .collapse-toggle,
            .product-field-tooltip {
                transition: none !important;
            }

            .model-container:hover,
            .gallery-card:hover,
            .model-container:hover .model-image-preview.is-loaded,
            .model-container .collapse-toggle:hover {
                transform: none !important;
            }

            .products-skeleton-image,
            .products-gallery-skeleton-thumb,
            .products-skeleton-line {
                animation: none !important;
            }
        }

/* Phase 9 reports page */
    .reports-wrap {
        width: var(--app-min-width);
        min-width: var(--app-min-width);
        max-width: var(--app-min-width);
        margin: 0;
        padding: 24px 12px 40px;
    }

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

    .summary-card,
    .bi-metric-card {
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 20px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        min-height: 132px;
        position: relative;
        overflow: hidden;
    }

    .summary-card::after,
    .bi-metric-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%);
        pointer-events: none;
    }

    .summary-label,
    .bi-metric-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--label-secondary);
        font-size: 13px;
        margin-bottom: 10px;
    }

    .bi-metric-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(120, 120, 128, 0.12);
        color: var(--label-primary);
        flex: 0 0 auto;
    }

    .summary-value,
    .bi-metric-value {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .bi-metric-sub {
        margin-top: 8px;
        color: var(--label-secondary);
        font-size: 13px;
    }

    .report-section,
    .bi-chart-section {
        margin-top: 18px;
    }

    .report-section-title,
    .bi-chart-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 10px;
    }

    .report-section-heading,
    .bi-chart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    .report-section-heading .report-section-title,
    .bi-chart-header .bi-chart-title {
        margin-bottom: 0;
    }

    .bi-chart-subtitle {
        color: var(--label-secondary);
        font-size: 13px;
        margin-top: 4px;
    }

    .report-panel,
    .bi-chart-panel {
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        overflow: hidden;
    }

    .report-panel .table,
    .bi-chart-panel .table {
        margin-bottom: 0;
    }

    .report-panel th,
    .bi-chart-panel th {
        background: rgba(255, 255, 255, 0.52);
        color: var(--label-secondary);
        border-color: color-mix(in srgb, var(--separator), white 16%);
        white-space: nowrap;
    }

    @media (prefers-color-scheme: dark) {
        .summary-card,
        .bi-metric-card,
        .report-panel,
        .bi-chart-panel {
            border-color: color-mix(in srgb, var(--separator), black 8%);
            background: rgba(28, 31, 38, 0.82);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
        }

        .report-panel th,
        .bi-chart-panel th {
            background: rgba(255, 255, 255, 0.04);
            border-color: color-mix(in srgb, var(--separator), black 10%);
        }
    }

/* Phase 9 dashboard page */
    .dashboard-wrap {
        width: var(--app-min-width);
        min-width: var(--app-min-width);
        max-width: var(--app-min-width);
        margin: 0;
        padding: 20px 12px 40px;
    }

    .dashboard-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 18px;
        align-items: stretch;
        margin-bottom: 18px;
    }

    .dashboard-hero-panel,
    .dashboard-hero-actions {
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

    .dashboard-hero-panel {
        padding: 22px 24px;
    }

    .dashboard-hero-kicker {
        font-size: 12px;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .dashboard-hero-title {
        font-size: 30px;
        line-height: 1.08;
        margin: 0 0 10px;
        letter-spacing: 0;
    }

    .dashboard-hero-copy {
        margin: 0;
        color: var(--label-secondary);
        max-width: 58ch;
    }

    .dashboard-hero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
    }

    .dashboard-hero-tag {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 11px;
        border-radius: 999px;
        background: rgba(0, 122, 255, 0.08);
        color: var(--accent-strong);
        font-size: 12px;
        font-weight: 600;
    }

    .dashboard-hero-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        width: 220px;
        min-width: 220px;
        padding: 18px;
    }

    .dashboard-filter-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
        padding: 14px 16px;
        border: 1px solid color-mix(in srgb, var(--separator), white 18%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

    .dashboard-filter-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--label-primary);
    }

    .dashboard-filter-meta {
        color: var(--label-secondary);
        font-size: 12px;
        margin-top: 3px;
    }

    .dashboard-filter-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .dashboard-filter-tag {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(120, 120, 128, 0.10);
        color: var(--label-secondary);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .dashboard-filter-tag.active {
        background: rgba(0, 122, 255, 0.10);
        color: var(--accent-strong);
    }

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

    .metric-card {
        border: 1px solid color-mix(in srgb, var(--separator), white 20%);
        border-radius: 20px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        min-height: 132px;
        position: relative;
        overflow: hidden;
    }

    .metric-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%);
        pointer-events: none;
    }

    .metric-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--label-secondary);
        font-size: 13px;
        margin-bottom: 10px;
    }

    .metric-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(120, 120, 128, 0.12);
        color: var(--label-primary);
        flex: 0 0 auto;
    }

    .metric-value {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0;
    }

    .metric-sub {
        margin-top: 8px;
        color: var(--label-secondary);
        font-size: 13px;
    }

    .dashboard-section {
        margin-top: 20px;
    }

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .section-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
    }

    .section-copy {
        color: var(--label-secondary);
        font-size: 13px;
        margin-top: 4px;
    }

    .panel {
        border: 1px solid color-mix(in srgb, var(--separator), white 20%);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .panel-table {
        margin-bottom: 0;
    }

    .panel-table th {
        background: rgba(255, 255, 255, 0.52);
        color: var(--label-secondary);
        border-color: color-mix(in srgb, var(--separator), white 16%);
        font-weight: 600;
        white-space: nowrap;
    }

    .status-dot {
        width: 9px;
        height: 9px;
        display: inline-block;
        border-radius: 50%;
    }

    .status-danger {
        background: var(--bs-danger);
    }

    .status-warning {
        background: var(--bs-warning);
    }

    .two-column {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
        gap: 16px;
    }

    .dashboard-table-note {
        color: var(--label-secondary);
        white-space: nowrap;
    }

    .alert-qty,
    .flow-qty {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(120, 120, 128, 0.1);
        color: var(--label-primary);
        font-weight: 600;
    }

    .flow-model {
        max-width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flow-time {
        white-space: nowrap;
    }

    @media (prefers-color-scheme: dark) {
        .metric-card,
        .bi-metric-card,
        .dashboard-filter-strip,
        .panel {
            border-color: color-mix(in srgb, var(--separator), black 8%);
            background: rgba(28, 31, 38, 0.82);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
        }

        .panel-table th {
            background: rgba(255, 255, 255, 0.04);
            border-color: color-mix(in srgb, var(--separator), black 10%);
        }
    }

/* Phase 10 bill settlement exception page */
    .bill-settle-page {
        max-width: 920px;
    }

    .bill-settle-page .card {
        border: 1px solid var(--enterprise-border);
        border-radius: 22px;
        box-shadow: var(--enterprise-shadow-sm);
    }

    .bill-settle-page .settle-success-note {
        border: 1px solid rgba(52, 199, 89, 0.16);
        background: rgba(232, 250, 239, 0.82) !important;
        color: var(--enterprise-text-primary);
        border-radius: 18px;
        padding: 1rem 1.125rem;
    }

/* Phase 10 global navigation shell */
        .main-navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 8000;
            flex-shrink: 0;
            transform: translateX(calc(-1 * var(--main-scroll-left, 0px)));
            flex-wrap: nowrap;
            overflow: visible;
            min-height: 56px;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            --bs-navbar-color: rgba(29, 29, 31, 0.72);
            --bs-navbar-hover-color: #1d1d1f;
            --bs-navbar-active-color: #1d1d1f;
            --bs-navbar-brand-color: #1d1d1f;
            --bs-navbar-brand-hover-color: #1d1d1f;
            background: rgba(248, 249, 252, 0.92) !important;
            color: #1d1d1f;
            border-bottom: 1px solid color-mix(in srgb, var(--separator), white 24%);
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
        }

        body.fixed-navbar-page > main.container-fluid {
            margin-top: 56px;
            height: calc(100vh - 56px);
            flex: 0 0 calc(100vh - 56px);
            padding-top: 12px;
        }

        .main-navbar .navbar-shell {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 28px;
            width: max-content;
            min-width: 100%;
            min-height: 48px;
            padding: 4px 16px;
            overflow: visible;
        }

        .main-navbar .navbar-logo {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            color: var(--label-primary);
            gap: 4px;
            line-height: 1;
            flex: 0 0 auto;
        }

        .main-navbar .navbar-logo-text {
            font-family: var(--font-system);
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 0;
        }

        .main-navbar .navbar-menu-wrap {
            display: flex;
            justify-content: flex-start;
            flex: 1 1 auto;
            min-width: max-content;
            overflow: visible;
            align-self: stretch;
        }

        .main-navbar .navbar-menu {
            gap: 10px;
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
            flex: 0 0 auto;
            min-width: max-content;
            margin: 0;
            padding: 0;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
        }

        .main-navbar .navbar-menu .nav-item {
            flex: 0 0 auto;
        }

        .main-navbar .navbar-menu .nav-link {
            font-size: 16px;
            font-weight: 600;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 14px;
            color: color-mix(in srgb, var(--label-primary), transparent 8%);
            transition: background-color 0.18s ease, color 0.18s ease;
        }

        .main-navbar .navbar-menu .nav-link:hover,
        .main-navbar .navbar-menu .nav-link:focus {
            color: var(--label-primary);
            background: rgba(120, 120, 128, 0.08);
        }

        .main-navbar .navbar-menu .nav-link.active {
            color: var(--label-primary);
            background: rgba(0, 122, 255, 0.1);
        }

        .main-navbar .products-dropdown .dropdown-item {
            min-height: 36px;
            padding: 7px 10px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--label-primary);
            background: transparent;
            transition: background-color 0.16s ease, color 0.16s ease;
        }

        .main-navbar .products-dropdown li + li {
            margin-top: 4px;
        }

        .main-navbar .products-dropdown .dropdown-item:hover,
        .main-navbar .products-dropdown .dropdown-item:focus {
            color: var(--label-primary);
            background: rgba(0, 122, 255, 0.06);
        }

        .main-navbar .products-dropdown .dropdown-item.active,
        .main-navbar .products-dropdown .dropdown-item:active {
            color: var(--accent-strong);
            background: rgba(0, 122, 255, 0.1);
        }

        .main-navbar .products-dropdown .dropdown-item i {
            width: 16px;
            text-align: center;
        }

        .main-navbar .navbar-menu .dropdown {
            position: relative;
        }

        .main-navbar .navbar-menu .dropdown-menu {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            margin-top: 0;
            min-width: 140px;
            padding: 6px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--separator), white 16%);
            background: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .main-navbar .navbar-user-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        .main-navbar .user-menu {
            min-width: 176px;
            padding: 8px 0;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--separator), white 18%);
            --bs-dropdown-bg: #ffffff;
            --bs-dropdown-opacity: 1;
            background: var(--bs-dropdown-bg);
            background-color: var(--bs-dropdown-bg);
            opacity: var(--bs-dropdown-opacity);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 7200;
        }

        .main-navbar .user-avatar-trigger {
            height: 32px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--separator), white 28%);
            background: rgba(255, 255, 255, 0.72);
            color: var(--label-primary);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            padding: 0 8px 0 5px;
        }

        .main-navbar .user-avatar-trigger::after {
            display: none;
        }

        .main-navbar .user-avatar-icon {
            width: 22px;
            height: 22px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: rgba(120, 120, 128, 0.12);
        }

        .main-navbar .user-avatar-chevron {
            font-size: 10px;
            opacity: 0.55;
        }

        .main-navbar .user-avatar-trigger:hover,
        .main-navbar .user-avatar-trigger:focus {
            background: rgba(255, 255, 255, 0.88);
            color: var(--label-primary);
        }

        @media (prefers-color-scheme: dark) {
            .main-navbar {
                border-bottom-color: color-mix(in srgb, var(--separator), black 12%);
            }

            .main-navbar .navbar-menu .nav-link:hover,
            .main-navbar .navbar-menu .nav-link:focus {
                background: rgba(255, 255, 255, 0.06);
            }

            .main-navbar .navbar-menu .nav-link.active {
                background: rgba(10, 132, 255, 0.18);
            }

            .main-navbar .user-avatar-trigger {
                background: rgba(255, 255, 255, 0.04);
                border-color: color-mix(in srgb, var(--separator), black 8%);
            }

            .main-navbar .user-avatar-icon {
                background: rgba(255, 255, 255, 0.08);
            }

            .main-navbar .user-avatar-trigger:hover,
            .main-navbar .user-avatar-trigger:focus {
                background: rgba(255, 255, 255, 0.1);
            }
        }

        .main-navbar .user-menu .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            padding: 9px 16px;
        }

        .main-navbar .user-menu .dropdown-item i {
            width: 16px;
            text-align: center;
        }

        .main-navbar .user-menu .dropdown-header {
            padding: 10px 16px 8px;
        }

        .main-navbar .user-menu .dropdown-username {
            font-size: 14px;
            font-weight: 600;
            color: var(--label-primary);
        }

        .main-navbar .container-fluid {
            overflow: visible;
            padding-left: 0;
            padding-right: 0;
        }

/* Phase 18 shared table states */
.enterprise-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

#modelImageGroupViewerModal .modal-header .modal-title {
    margin-right: auto;
}

.enterprise-sort-link i {
    font-size: 12px;
    color: var(--label-secondary);
}

.enterprise-sort-link:hover,
.enterprise-sort-link:focus,
.enterprise-sort-link.is-active {
    color: var(--bs-primary);
}

.enterprise-list-toolbar,
.enterprise-batch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.enterprise-batch-toolbar {
    padding: 8px 12px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    background: var(--fill-secondary);
}

.enterprise-batch-summary {
    font-size: 13px;
    color: var(--label-secondary);
}

.enterprise-batch-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.enterprise-empty-state,
.enterprise-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 28px 20px;
    text-align: center;
    color: var(--label-secondary);
}

.enterprise-empty-state-icon {
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--label-tertiary);
}

.enterprise-empty-state-title,
.enterprise-loading-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--label-primary);
}

.enterprise-empty-state-copy {
    margin-top: 4px;
    font-size: 13px;
}

.enterprise-loading-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr;
    gap: 10px;
    width: min(520px, 100%);
    margin-top: 10px;
}

.enterprise-skeleton {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fill-secondary), var(--fill-tertiary), var(--fill-secondary));
    background-size: 200% 100%;
    animation: enterprise-skeleton-pulse 1.4s ease-in-out infinite;
}

.enterprise-skeleton.is-mid {
    opacity: 0.78;
}

.enterprise-skeleton.is-short {
    opacity: 0.62;
}

@keyframes enterprise-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Phase 18 shared filters */
.enterprise-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    background: var(--surface-secondary);
}

.enterprise-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

.enterprise-filter-field {
    min-width: 150px;
}

.enterprise-filter-field .form-label {
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--label-secondary);
}

.enterprise-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Shared inline filter panels: compact label-and-input fields with optional dropdowns. */
.enterprise-inline-filter-panel {
    margin-bottom: 24px;
}

/* 商品列表的筛选区与工具栏共用紧凑的 8px 垂直节奏。 */
#product-filters-react-root .enterprise-inline-filter-panel {
    margin-bottom: 8px;
}

.enterprise-inline-filter-panel-body {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 18px;
    padding: 12px 16px;
}

.enterprise-inline-filter-fields {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.enterprise-inline-filter-field {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.enterprise-inline-filter-field-wide {
    flex-grow: 1.25;
}

.enterprise-inline-dimension-field {
    flex: 0 1 280px;
    min-width: 260px;
}

.enterprise-inline-dimension-control {
    gap: 10px;
}

.enterprise-inline-dimension-inputs {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    height: 36px;
    min-width: 0;
}

.enterprise-inline-dimension-input {
    flex: 1 1 0;
    text-align: center;
    width: 100% !important;
}

.enterprise-inline-dimension-separator,
.enterprise-inline-dimension-unit {
    color: var(--label-primary);
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 21px;
}

.enterprise-inline-filter-actions {
    align-self: center;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

.enterprise-inline-filter-control {
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 10px;
    display: flex;
    gap: 8px;
    height: 38px;
    min-width: 0;
    padding: 0 10px;
    position: relative;
    width: 100%;
}

.enterprise-inline-filter-label {
    color: var(--label-primary);
    flex: 0 0 auto;
    font-family: var(--font-system-cjk);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 21px;
    margin-bottom: 0;
    white-space: nowrap;
}

.enterprise-inline-filter-input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: stretch;
    flex: 1 1 auto;
    font-family: var(--font-system-cjk);
    font-size: 14px;
    height: 100% !important;
    line-height: 36px;
    min-height: 0 !important;
    min-width: 0;
    padding: 0;
    width: 100% !important;
}

.enterprise-inline-filter-control select.enterprise-inline-filter-input {
    cursor: pointer;
    padding-right: 18px;
}

body:not(.login-page) .enterprise-inline-filter-control .enterprise-inline-filter-input:focus,
body:not(.login-page) .enterprise-inline-filter-control .enterprise-inline-filter-input:focus-visible {
    background: transparent !important;
    border-color: transparent;
    box-shadow: none !important;
}

.enterprise-inline-filter-actions .btn {
    align-items: center;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin-right: 0;
    min-height: 38px;
    min-width: 70px;
    font-weight: 400;
    white-space: nowrap;
}

.enterprise-inline-filter-actions .product-icon {
    font-weight: 400;
    opacity: 0.82;
}

.enterprise-inline-filter-actions #clearFilters {
    margin-left: 3px;
}

/* 商品页面首次加载时，分页区与商品列表共用骨架屏；局部分页不使用该状态。 */
.products-pagination-skeleton {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid color-mix(in srgb, var(--separator), white 14%);
    border-radius: 18px;
    display: none;
    gap: 10px;
    height: 64px;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
}

.products-pagination-skeleton-line {
    animation: productsSkeletonShimmer 1.25s ease-in-out infinite;
    background: linear-gradient(90deg, #e4e9ef 25%, #f4f6f8 37%, #e4e9ef 63%);
    background-size: 400% 100%;
    border-radius: 10px;
    display: block;
    height: 34px;
}

.products-pagination-skeleton-nav {
    width: 68px;
}

.products-pagination-skeleton-page {
    width: 34px;
}

.products-pagination-skeleton-info {
    width: 92px;
}

.products-pagination-skeleton-divider {
    background: color-mix(in srgb, var(--separator), white 8%);
    height: 30px;
    width: 1px;
}

.products-pagination-skeleton-size {
    width: 118px;
}

.products-initial-loading .products-pagination-row {
    display: none !important;
}

.products-initial-loading .products-pagination-skeleton {
    display: flex;
}

.products-loading .products-pagination-row {
    display: none !important;
}

.products-loading .products-pagination-skeleton {
    display: flex;
}

@media (max-width: 768px) {
    .enterprise-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .enterprise-filter-fields {
        display: grid;
        grid-template-columns: 1fr;
    }

    .enterprise-filter-field,
    .enterprise-filter-actions .btn {
        width: 100%;
    }

    .enterprise-filter-actions {
        justify-content: stretch;
    }
}

/* Phase 18 shared form fields */
.enterprise-form-field .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--label-primary);
}

.enterprise-form-field .form-control[readonly],
.enterprise-form-field textarea.form-control[readonly] {
    background: var(--fill-secondary);
    color: var(--label-secondary);
    cursor: default;
}

.enterprise-form-field .invalid-feedback {
    font-size: 12px;
}

.enterprise-field-dependency-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--fill-secondary);
    color: var(--label-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.enterprise-field-dependency-note i {
    margin-top: 1px;
    color: var(--bs-primary);
}

/* Phase 18 shared modals and destructive actions */
.enterprise-modal .modal-content {
    border-radius: 14px;
}

.enterprise-modal .modal-header {
    padding: 18px 20px 8px;
}

.enterprise-modal .modal-body {
    padding: 16px 20px 20px;
}

.enterprise-modal .modal-footer {
    padding: 0 20px 18px;
    gap: 8px;
}

.enterprise-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
}

.enterprise-modal .btn-close:focus,
.enterprise-modal .btn-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}

.enterprise-destructive-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--bs-warning), transparent 58%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bs-warning), transparent 88%);
    color: var(--label-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.enterprise-destructive-note i {
    margin-top: 1px;
    color: var(--bs-warning);
}

/* Phase 18 shared status and data display */
.enterprise-display-value {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.enterprise-display-placeholder {
    color: var(--label-tertiary);
}

.enterprise-money,
.enterprise-quantity {
    font-weight: 600;
    color: var(--label-primary);
}

.enterprise-money-currency,
.enterprise-quantity-unit {
    color: var(--label-secondary);
    font-size: 0.92em;
    font-weight: 500;
}

.enterprise-date {
    color: var(--label-secondary);
}

/* Phase 18 shared entity selectors */
.enterprise-selector-field {
    min-width: 0;
}

.enterprise-selector {
    min-width: 0;
}

.enterprise-selector:focus,
.enterprise-selector:focus-visible {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.enterprise-selector[required] {
    scroll-margin-top: 96px;
}

/* 入库选择商品：响应式 macOS 风格工作台弹窗。 */
#inboundProductPickerModal .inbound-product-picker-dialog {
    height: min(880px, calc(100dvh - 48px));
    margin: 24px auto;
    max-width: calc(100vw - 48px);
    min-width: 0;
    width: min(1420px, calc(100vw - 48px));
}

#inboundProductPickerModal .modal-content {
    background: var(--bg-elevated) !important;
    border: 1px solid color-mix(in srgb, var(--separator), white 18%) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.2) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 880px;
    overflow: hidden;
}

#inboundProductPickerModal .modal-header,
#inboundProductPickerModal .inbound-picker-footer {
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    background: color-mix(in srgb, var(--bg-elevated), transparent 18%) !important;
    flex: 0 0 auto;
    min-height: 68px;
    padding: 12px 16px;
}

#inboundProductPickerModal .modal-header {
    justify-content: space-between;
    overflow: visible;
    position: relative;
    z-index: 3;
}

#inboundProductPickerModal .modal-title {
    color: var(--label-primary);
    font-family: var(--font-system-cjk);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#inboundProductPickerModal .modal-body {
    background: var(--bg-secondary);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#inboundProductPickerModal .modal-body iframe {
    display: block;
}

#inboundProductPickerModal .btn-close {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin: 0;
    opacity: 0.72;
    padding: 0;
    transition: background-color 0.18s ease, opacity 0.18s ease;
    width: 44px;
}

#inboundProductPickerModal .btn-close:hover {
    background: var(--fill-tertiary);
    opacity: 1;
}

#inboundProductPickerModal .btn-close:focus-visible,
#inboundProductPickerModal .inbound-group-trigger:focus-visible,
#inboundProductPickerModal .inbound-group-option:focus-visible,
#inboundProductPickerModal .inbound-picker-footer .btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

#inboundProductPickerModal .inbound-group-trigger {
    cursor: pointer;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
}

#inboundProductPickerModal .inbound-group-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

#inboundProductPickerModal .inbound-group-trigger[aria-expanded='true'] i {
    transform: rotate(180deg);
}

#inboundProductPickerModal .inbound-group-menu {
    background: var(--bg-elevated);
    border-color: color-mix(in srgb, var(--separator), white 18%);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    z-index: 4;
}

#inboundProductPickerModal .inbound-group-option {
    background: transparent;
    color: var(--label-primary);
    min-height: 44px;
    padding: 10px 12px;
}

#inboundProductPickerModal .inbound-picker-footer {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--separator), white 16%);
    display: flex;
    gap: 8px;
}

#inboundProductPickerModal .inbound-picker-hint {
    color: var(--label-secondary);
    font-size: 13px;
    margin-right: auto;
}

#inboundProductPickerModal .inbound-picker-footer .btn {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-weight: 600;
    height: 44px;
    justify-content: center;
    min-width: 96px;
    padding: 0 14px;
}

#inboundProductPickerModal .inbound-picker-confirm:not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 8%), var(--accent-strong));
    border-color: color-mix(in srgb, var(--accent-strong), black 8%);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--accent), transparent 78%);
}

#inboundProductPickerModal .inbound-picker-confirm:disabled {
    background: var(--fill-tertiary);
    border-color: transparent;
    color: var(--label-tertiary);
    opacity: 1;
}

#inboundProductPickerModal .inbound-picker-selection-count {
    align-items: center;
    background: color-mix(in srgb, currentColor, transparent 84%);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    height: 20px;
    justify-content: center;
    margin-left: 7px;
    min-width: 20px;
    padding: 0 5px;
}

/* 选择模式降低商品卡片的割裂感，保留横向规格浏览。 */
.inbound-picker-mode .model-container {
    background: var(--bg-primary) !important;
    border: 1px solid color-mix(in srgb, var(--separator), white 20%) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
}

.inbound-picker-mode .model-header {
    background: color-mix(in srgb, var(--bg-secondary), transparent 22%) !important;
}

/* 选择模式不渲染非选择列，防止备注被后续通用网格规则放入复选框列。 */
.inbound-picker-mode .spec-row-header .col-shelf,
.inbound-picker-mode .spec-row-header .col-nature,
.inbound-picker-mode .spec-row-header .col-remark,
.inbound-picker-mode .spec-row-header .col-actions,
.inbound-picker-mode .spec-row-header .col-handle,
.inbound-picker-mode .spec-row-data .col-shelf,
.inbound-picker-mode .spec-row-data .col-nature,
.inbound-picker-mode .spec-row-data .col-remark,
.inbound-picker-mode .spec-row-data .col-actions,
.inbound-picker-mode .spec-row-data .col-handle {
    display: none !important;
}

body.inbound-picker-open .modal-backdrop.show {
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    backdrop-filter: blur(5px) saturate(120%);
    background-color: rgba(15, 23, 42, 0.48);
    opacity: 1;
}

@media (max-width: 768px) {
    #inboundProductPickerModal .inbound-product-picker-dialog {
        height: calc(100dvh - 24px);
        margin: 12px auto;
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
    }

    #inboundProductPickerModal .modal-header,
    #inboundProductPickerModal .inbound-picker-footer {
        min-height: 60px;
        padding: 8px 12px;
    }

    #inboundProductPickerModal .inbound-picker-hint {
        display: none;
    }

    #inboundProductPickerModal .inbound-picker-footer {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-transparency: reduce) {
    #inboundProductPickerModal .modal-content,
    #inboundProductPickerModal .modal-header,
    #inboundProductPickerModal .inbound-picker-footer,
    #inboundProductPickerModal .inbound-group-menu {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--bg-primary) !important;
    }

    body.inbound-picker-open .modal-backdrop.show {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(15, 23, 42, 0.56);
    }
}

@media (prefers-reduced-motion: reduce) {
    #inboundProductPickerModal *,
    body.inbound-picker-open .modal-backdrop {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
#product-toolbar-react-root {
    margin: 8px 0;
    height: 54px;
    min-height: 54px;
}

#product-toolbar-react-root > .product-toolbar {
    height: 54px;
    min-height: 54px;
    box-sizing: border-box;
}