/*
 * ScmNext 共享样式
 * 视觉基准：claude.ai/design「星柚供应链三页面原型」（星柚SCM.dc.html，2026-07-16 定稿）。
 * 作用域限定在 .scmnext-page / .scm-* 前缀与两个编辑抽屉内，避免全局污染。
 * 设计 token（全部落成具体值，禁止引用未定义的 CSS 变量）：
 *   文字  主 #1e293b / 次 #475569 / 弱 #94a3b8
 *   边框  卡片 #e2e8f0 / 控件 #cbd5e1 / 行分隔 #f1f5f9
 *   主色  按钮 #2f7f5f / 品牌 #41b584 / 浅绿底 #e8f6ef
 *   控件高 32px；卡片圆角 6px、控件圆角 4px；正文 13px、标签 12px
 */

/* ============ 页面壳 ============ */
.scmnext-page {
    padding: 10px;
    color: #1e293b;
    font-size: 13px;
}

.scmnext-page__section {
    margin-bottom: 20px;
}

.scmnext-page__section-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
}

/* ============ 筛选区（白卡片，标签在上、控件 32px 一行排开）============ */
.scm-supplier-page__filters,
.scm-material-page__filters {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 12px 16px 4px;
    margin-bottom: 0;
}

.scmnext-page .operetion-section label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #475569;
}

.scmnext-page .operetion-section .form-control,
.scmnext-page .operetion-section .form-control-sm {
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.scmnext-page .operetion-section select.form-control,
.scmnext-page .operetion-section select.form-control-sm {
    padding: 0 6px;
}

.scmnext-page .form-control:focus,
.scm-supplier-drawer .form-control:focus,
.scm-material-drawer .form-control:focus,
.scm-style-drawer .form-control:focus {
    border-color: #41b584;
    box-shadow: 0 0 0 2px rgba(65, 181, 132, .15);
}

/* 筛选区行内复选框：与相邻 32px 控件基线对齐 */
.scmnext-page .scm-filter-check {
    height: 32px;
    display: inline-flex;
    align-items: center;
}

/* ============ 工具栏行（非卡片，与筛选卡拉开 12px）============ */
.scmnext-page .operetion-section.d-flex {
    margin: 12px 0 !important;
}

/* ============ 按钮（原型规范：主按钮实底深绿 32px，次按钮白底灰边）============ */
.scmnext-page .btn-primary,
.scm-supplier-drawer .btn-primary,
.scm-material-drawer .btn-primary,
#supplierStatusModal .btn-primary,
#supplierImportModal .btn-primary {
    background: #2f7f5f;
    border-color: #2f7f5f;
    color: #fff;
}

.scmnext-page .btn-primary:hover,
.scm-supplier-drawer .btn-primary:hover,
.scm-material-drawer .btn-primary:hover,
#supplierStatusModal .btn-primary:hover,
#supplierImportModal .btn-primary:hover {
    background: #35906d;
    border-color: #35906d;
    color: #fff;
}

.scmnext-page .btn-default,
.scm-supplier-drawer .btn-default,
.scm-material-drawer .btn-default,
#supplierStatusModal .btn-default,
#supplierImportModal .btn-default {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.scmnext-page .btn-default:hover,
.scm-supplier-drawer .btn-default:hover,
.scm-material-drawer .btn-default:hover,
.scm-style-drawer .btn-default:hover {
    border-color: #41b584;
    color: #2f7f5f;
}

.scmnext-page .btn-sm,
.scm-supplier-drawer .btn,
.scm-material-drawer .btn,
.scm-style-drawer .btn {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 30px;
    border-radius: 4px;
}

.scmnext-page .btn-link.btn-sm {
    height: auto;
    padding: 0;
    line-height: inherit;
    color: #2f7f5f;
}

.scmnext-page .btn-link.btn-sm:hover {
    color: #41b584;
}

/* ============ 状态 / 类型胶囊 badge（浅底深字，11px）============ */
.scmnext-page .badge,
.scm-supplier-drawer .badge,
.scm-material-drawer .badge,
.scm-component .badge {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 10px;
}

.scmnext-page .badge-success,
.scm-material-drawer .badge-success,
.scm-component .badge-success {
    background: #d1fae5;
    color: #047857;
}

.scmnext-page .badge-secondary,
.scm-material-drawer .badge-secondary,
.scm-component .badge-secondary {
    background: #f1f5f9;
    color: #64748b;
}

/* 供应商类型标签六色轮换（JS 按名称散列取 1–6） */
.scm-tag--1 { background: #e0f2fe !important; color: #0369a1 !important; border: 0 !important; }
.scm-tag--2 { background: #ede9fe !important; color: #6d28d9 !important; border: 0 !important; }
.scm-tag--3 { background: #ffedd5 !important; color: #c2410c !important; border: 0 !important; }
.scm-tag--4 { background: #f1f5f9 !important; color: #475569 !important; border: 0 !important; }
.scm-tag--5 { background: #fce7f3 !important; color: #be185d !important; border: 0 !important; }
.scm-tag--6 { background: #ecfccb !important; color: #4d7c0f !important; border: 0 !important; }

/* ============ 实体链接（卡片 / grid / 抽屉组件统一）============ */
.scm-entity-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #2f7f5f;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.scm-entity-link:hover,
.scm-entity-link:focus {
    color: #41b584;
    /* ⚠️ font-weight 必须显式钉死 500：主题文件 themes/cust-theme-16.css 里有一条
       `html body a:hover { font-weight: 800 }`，锚点一 hover 字重 500→800、宽度涨约 5%，
       在 ag-Grid 单元格和右舷对话气泡这种宽度吃紧的地方会把整行挤到换行，鼠标一动一抖。
       本规则特异度 (0,2,0) 高于主题的 (0,1,2)，够压住。
       🚫 不要去改主题文件 —— 那是全平台皮肤，动它会波及所有页面的链接。
       ✅ 下划线可以留：text-decoration 不参与布局，不会引起回流。 */
    font-weight: 500;
    text-decoration: underline;
    outline: 0;
}

.scm-entity-link__icon {
    font-size: .82em;
    opacity: .65;
}

.scm-entity-link:hover .scm-entity-link__icon,
.scm-entity-link:focus .scm-entity-link__icon {
    opacity: 1;
}

/* ============ 图片占位（1:1 / 3:4，响应容器宽度）============ */
.scm-img-ph {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.scm-img-ph::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.scm-img-ph--3x4::before {
    padding-top: 133.333%;
}

.scm-img-ph__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #94a3b8;
    font-size: 32px;
}

.scm-img-ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scm-img-ph--tone-1 { background: #eef2f0; }
.scm-img-ph--tone-2 { background: #e7edf3; }
.scm-img-ph--tone-3 { background: #f0ece7; }
.scm-img-ph--tone-4 { background: #eceef0; }
.scm-img-ph--tone-5 { background: #e9f0ec; }
.scm-img-ph--tone-6 { background: #f1ecef; }

/* ============ 图片组（主图 + 左右切换 + 计数角标）============ */
.scm-imggroup__slide {
    position: absolute;
    inset: 0;
    display: none;
}

.scm-imggroup__slide.is-active {
    display: block;
}

.scm-imggroup__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .42);
    color: #fff;
    cursor: pointer;
    opacity: .85;
}

.scm-imggroup__nav:hover,
.scm-imggroup__nav:focus {
    opacity: 1;
    outline: 0;
}

.scm-imggroup__nav--prev { left: 6px; }
.scm-imggroup__nav--next { right: 6px; }

.scm-imggroup__counter {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font-size: 12px;
}

/* ============ 颜色 chip ============ */
.scm-color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.scm-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 10px;
}

.scm-color-chip__swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(15, 23, 42, .1);
}

/* ============ 卡片视图（acmeAgGrid masonry 内）============ */
/* 卡片容器：去掉扩展注入的灰底与内边距，列间距压到 12px 贴原型 */
.scmnext-page .acme-card-view-container {
    background: transparent !important;
    padding: 0 !important;
}

.scmnext-page .acme-card-masonry {
    gap: 12px;
}

.scmnext-page .acme-card-masonry > .acme-card-col {
    gap: 12px;
}

.scm-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.scm-card:hover {
    transform: translateY(-3px);
    border-color: #41b584;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}

.scm-card__media {
    position: relative;
}

.scm-card__media .scm-img-ph {
    border: 0;
    border-radius: 0;
}

/* 款式卡只承担快速浏览，不让图片占掉整张卡。 */
.scm-style-page .scm-card__media .scm-img-ph::before,
.scm-style-page .scm-card__grad::before {
    padding-top: 58%;
}

/* 物料卡渐变图位：三档高度制造瀑布流参差感，JS 按 id 散列取档 */
.scm-card__grad {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.scm-card__grad::before {
    content: "";
    display: block;
    padding-top: 118%;
}

.scm-card__grad--tall::before { padding-top: 140%; }
.scm-card__grad--short::before { padding-top: 100%; }

.scm-card__grad-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, .8);
}

/* 款式族卡无主图时的 emoji 占位（物料卡用的是 svg 面料图标，这里用款式 emoji） */
.scm-card__grad-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    opacity: .55;
}

/* 物料图位十档柔和渐变（贴原型 G 数组） */
.scm-grad--0 { background: linear-gradient(155deg, #f3e8db, #d8ba9c); }
.scm-grad--1 { background: linear-gradient(155deg, #dfe9e2, #a3c2af); }
.scm-grad--2 { background: linear-gradient(155deg, #dee5f0, #9db3d4); }
.scm-grad--3 { background: linear-gradient(155deg, #f0dcd4, #cf9f8e); }
.scm-grad--4 { background: linear-gradient(155deg, #e9dfec, #b9a3c7); }
.scm-grad--5 { background: linear-gradient(155deg, #e6e6e2, #b0b0a6); }
.scm-grad--6 { background: linear-gradient(155deg, #e5e9d6, #a9b587); }
.scm-grad--7 { background: linear-gradient(155deg, #f2e0e2, #d3a0a8); }
.scm-grad--8 { background: linear-gradient(155deg, #dce8ea, #96bcc2); }
.scm-grad--9 { background: linear-gradient(155deg, #efe6d0, #cbb783); }

.scm-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
}

.scm-card__code-mono {
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    font-size: 11px;
    color: #94a3b8;
}

.scm-card__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scm-card__name-sub {
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 6px;
    white-space: nowrap;
}

.scm-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.scm-card__meta {
    font-size: 12px;
    color: #475569;
}

.scm-card__meta--weak {
    color: #94a3b8;
}

.scm-card__stars {
    color: #f59e0b;
    letter-spacing: 1px;
    font-size: 12px;
}

.scm-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
    padding: 8px 12px;
}

.scm-card__foot .scm-entity-link {
    font-size: 12px;
}

.scm-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scm-card__actions .act {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

/* ── 卡片内的第二层：款式族卡里内嵌的款式实例清单 ──
   款式库是「族 → 实例」两级。列表里靠 masterDetail 展开，卡片里没有展开这回事，
   所以实例直接铺在卡内（前 3 个 + 「+N 个实例」）。
   ⚠️ 每行必须单行不换行：卡片列宽只有 260px，实例名一换行整张卡的高度就跳，
      masonry 分桶算过的列高会失准。 */
.scm-card__items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e8edf0;
}

.scm-card__item {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    line-height: 16px;
}

.scm-card__item .scm-entity-link {
    flex: none;
    font-size: 12px;
}

.scm-card__item-name {
    overflow: hidden;
    color: #94a3b8;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 状态点：用颜色点代替 chip，一行三个 chip 会把 260px 的卡片挤爆 */
.scm-card__item-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.scm-card__item-dot--ok { background: #41b584; }
.scm-card__item-dot--warn { background: #e0a72e; }
.scm-card__item-dot--mute { background: #cbd5e1; }

/* ============ 卡片 / 列表切换器（acmeAgGrid 注入的按钮组，JS 移入工具栏后按原型重绘）============
   位置：工具条最右端，data-operation 组件在它左边（视图形态是"我怎么看"，
   属于个人视角开关，比刷新/导入导出这类数据动作更外围，所以摆最外侧）。
   尺寸对齐 data-operation 的按钮：高 26px、字号 .75rem —— 同一排控件必须同高，
   否则基线错开，就是之前工具条被吐槽的那个毛病。
   🚫 不要改 acme.AgGrid.js 里注入的那段 HTML（公共组件），只在这里重绘外观。 */
.scm-view-toggle {
    margin: 0 0 0 8px !important;
}

.scm-view-toggle .btn-group {
    border: 1px solid var(--acme-color-border, #cbd5e1);
    border-radius: 0.2rem;
    overflow: hidden;
    background: #fff;
}

.scm-view-toggle .btn {
    /* ⚠️ 24 而不是 26：外层 .btn-group 有 1px 边框，24+2 才等于 data-operation 按钮的 26px。
       写 26 的话整组高 28px，比同排按钮高 2px，居中就差那么一点点，看着就是不齐。 */
    height: 24px;
    padding: 0 9px;
    font-size: 0.75rem;
    line-height: 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}

/* 分段控件的分隔线只画在段间，不画在外缘（外缘由 .btn-group 的边框负责） */
.scm-view-toggle .btn + .btn {
    border-left: 1px solid var(--acme-color-border, #cbd5e1);
}

.scm-view-toggle .btn > i {
    /* 图标比文字略小一档，避免图标把 26px 的行撑开 */
    margin-right: 4px;
    font-size: 11px;
}

.scm-view-toggle .btn-light {
    background: #fff;
    color: #64748b;
}

.scm-view-toggle .btn-light:hover {
    background: #f4f7f5;
    color: #334155;
}

/* 选中段：淡色底 + 主色字，比实心主色块安静，不和左边的导入(深色)抢视觉重量 */
.scm-view-toggle .btn-primary {
    background: #e8f6ef;
    color: #2f7f5f;
    font-weight: 500;
}

/* ============ ag-grid 列表视图轻量适配（只动颜色字号，不碰行高布局）============ */
.scmnext-page .ag-theme-custom {
    font-size: 13px;
}

.scmnext-page .ag-theme-custom .ag-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.scmnext-page .ag-theme-custom .ag-header-cell-text {
    font-weight: 500;
    color: #475569;
}

.scmnext-page .ag-theme-custom .ag-row-hover {
    background: #f8fafc;
}

/* ============ 编辑抽屉（右侧贴边滑出，供应商 720 / 物料 840）============ */
.scm-supplier-drawer,
.scm-material-drawer,
.scm-style-drawer {
    position: fixed;
    z-index: 1055;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.scm-supplier-drawer.is-open,
.scm-material-drawer.is-open,
.scm-style-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.scm-supplier-drawer__backdrop,
.scm-material-drawer__backdrop,
.scm-style-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity .2s ease;
}

.scm-supplier-drawer.is-open .scm-supplier-drawer__backdrop,
.scm-material-drawer.is-open .scm-material-drawer__backdrop,
.scm-style-drawer.is-open .scm-style-drawer__backdrop {
    opacity: 1;
}

.scm-supplier-drawer__panel,
.scm-material-drawer__panel,
.scm-style-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .15);
    transform: translateX(100%);
    transition: transform .25s ease;
}

.scm-supplier-drawer__panel {
    width: 720px;
    max-width: 92vw;
}

.scm-material-drawer__panel {
    width: 840px;
    max-width: 94vw;
}

/* 款式族新建只有 5 个字段，840px 会空一大半，按供应商抽屉的宽度走 */
.scm-style-drawer__panel {
    width: 880px;
    max-width: 96vw;
}

.scm-supplier-drawer.is-open .scm-supplier-drawer__panel,
.scm-material-drawer.is-open .scm-material-drawer__panel,
.scm-style-drawer.is-open .scm-style-drawer__panel {
    transform: translateX(0);
}

.scm-supplier-drawer__header,
.scm-material-drawer__header,
.scm-style-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.scm-supplier-drawer__header h5,
.scm-material-drawer__header h5,
.scm-style-drawer__header h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.scm-supplier-drawer__header small,
.scm-material-drawer__header small,
.scm-style-drawer__header small {
    font-size: 12px;
    color: #94a3b8;
}

.scm-supplier-drawer__header .close,
.scm-material-drawer__header .close,
.scm-style-drawer__header .close {
    font-size: 18px;
    color: #94a3b8;
    padding: 2px 8px;
    border-radius: 4px;
    opacity: 1;
    text-shadow: none;
}

.scm-supplier-drawer__header .close:hover,
.scm-material-drawer__header .close:hover,
.scm-style-drawer__header .close:hover {
    background: #f1f5f9;
    color: #475569;
}

.scm-supplier-drawer__footer,
.scm-material-drawer__footer,
.scm-style-drawer__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .04);
}

.scm-supplier-drawer__body,
.scm-material-drawer__body,
.scm-style-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 24px;
    scrollbar-width: thin;
    /* 与页面滚动条统一的降噪配方（见文末「滚动条降噪」段），不再用实心 #cbd5e1 */
    scrollbar-color: rgba(30, 41, 59, .18) transparent;
}

.scm-supplier-drawer__body::-webkit-scrollbar,
.scm-material-drawer__body::-webkit-scrollbar,
.scm-style-drawer__body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scm-supplier-drawer__body::-webkit-scrollbar-thumb,
.scm-material-drawer__body::-webkit-scrollbar-thumb,
.scm-style-drawer__body::-webkit-scrollbar-thumb {
    /* 透明边框 + background-clip：可见滑块 4px，命中区仍 8px */
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
    background-color: rgba(30, 41, 59, .14);
}

.scm-supplier-drawer__body:hover::-webkit-scrollbar-thumb,
.scm-material-drawer__body:hover::-webkit-scrollbar-thumb,
.scm-style-drawer__body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(30, 41, 59, .28);
}

/* 抽屉表单控件：32px、13px、灰边（原型规范） */
.scm-supplier-drawer .form-control,
.scm-material-drawer .form-control,
.scm-style-drawer .form-control {
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 13px;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.scm-supplier-drawer textarea.form-control,
.scm-material-drawer textarea.form-control,
.scm-style-drawer textarea.form-control {
    height: auto;
    min-height: 0;
    padding: 6px 8px;
    resize: vertical;
}

.scm-supplier-drawer .form-control[readonly],
.scm-material-drawer .form-control[readonly],
.scm-style-drawer .form-control[readonly] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.scm-supplier-drawer label,
.scm-material-drawer label,
.scm-style-drawer label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #475569;
}

.scm-supplier-drawer .form-group,
.scm-material-drawer .form-group,
.scm-style-drawer .form-group {
    margin-bottom: 12px;
}

/* 供应商类型：复选框重绘成胶囊 pill（选中浅绿底绿字） */
.scm-supplier-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scm-supplier-type-options .custom-control {
    padding: 0;
    margin: 0;
    min-height: 0;
}

.scm-supplier-type-options .custom-control-label {
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 15px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.scm-supplier-type-options .custom-control-label::before,
.scm-supplier-type-options .custom-control-label::after {
    display: none;
}

.scm-supplier-type-options .custom-control-input:checked ~ .custom-control-label {
    background: #e8f6ef;
    border-color: #41b584;
    color: #2f7f5f;
}

/* ============ 物料抽屉子表（紧凑：28px 控件、12px 字号）============ */
.scm-material-subtable {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.scm-material-subtable table {
    width: 100%;
    min-width: 720px;
    margin: 0;
}

.scm-material-subtable th {
    white-space: nowrap;
    background: #f8fafc;
    font-weight: 500;
    color: #475569;
    border-top: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.scm-material-subtable td,
.scm-material-subtable th {
    padding: 5px 10px !important;
    vertical-align: middle;
    border-color: #f1f5f9 !important;
    font-size: 12px !important;
}

.scm-material-subtable .form-control {
    min-width: 72px;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 3px !important;
}

.scm-material-subtable .btn-link.btn-sm {
    font-size: 12px;
    color: #2f7f5f;
}

.scm-material-price-row td {
    background: #fcfcfd;
}

.scm-material-upload {
    min-width: 150px;
}

/* 子表右上的「+ 新增」小按钮：浅绿描边款 */
.scm-material-drawer .acme-form-section-title .btn-outline-primary,
.scm-material-drawer .btn-outline-primary.btn-sm,
.scm-style-drawer .btn-outline-primary.btn-sm {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 24px;
    background: #e8f6ef;
    color: #2f7f5f;
    border: 1px solid #41b584;
    border-radius: 4px;
}

.scm-material-drawer .btn-outline-primary.btn-sm:hover,
.scm-style-drawer .btn-outline-primary.btn-sm:hover {
    background: #d9f0e5;
    color: #2f7f5f;
    border-color: #41b584;
}

/* ============ Acme Form Section（抽屉内分区：14px 粗标题，无底线）============ */
.acme-form-section {
    margin-bottom: 22px;
}

.acme-form-section:last-child {
    margin-bottom: 0;
}

.acme-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

/* ============ 供应商停用弹窗（浅橙警告头）============ */
#supplierStatusModal .modal-content {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    overflow: hidden;
}

#supplierStatusModal .modal-header {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    padding: 12px 16px;
}

#supplierStatusModal .modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #b45309;
}

#supplierStatusModal .btn-danger {
    background: #ef4444;
    border-color: #ef4444;
}

#supplierStatusModal label,
#supplierImportModal label {
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
}

#supplierStatusModal textarea.form-control {
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

#supplierImportModal .modal-content {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}

#supplierImportModal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

#supplierImportModal .table th {
    height: 34px;
    background: #f8fafc;
    font-weight: 500;
    color: #475569;
    font-size: 12px;
}

#supplierImportModal .table td {
    font-size: 12px;
}

/* ============ 实体速览组件共享样式（quickview 抽屉内的部件视图）============ */
.scm-component {
    box-sizing: border-box;
    width: 100%;
    padding: 16px 20px 24px;
    color: #1e293b;
    font-size: 13px;
}

.scm-component__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 16px;
    margin: 0;
}

.scm-component__field {
    min-width: 0;
}

.scm-component__field dt {
    margin: 0 0 3px;
    color: #94a3b8;
    font-weight: 400;
    font-size: 12px;
}

.scm-component__field dd {
    margin: 0;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.scm-component__related {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.scm-component__related-title {
    margin: 0 0 10px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.scm-component__related-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.scm-component__related-label {
    color: #94a3b8;
}

.scm-component__footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

/* ============ AI 工作台模板曲面（Component/_* 与独立工作台共用）============ */
/* 卡片外观挂在曲面基类上：generated/object/审批卡等无 .scm-component 的曲面同样要有卡壳 */
.scm-workspace-surface {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--acme-color-border);
    border-radius: var(--acme-radius-md);
    background: var(--acme-color-bg-card);
    box-shadow: var(--acme-shadow-sm);
}

.scm-workspace-selvedge {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--acme-color-border-light);
    background: var(--acme-color-bg-base);
    color: var(--acme-color-text-muted);
    font-size: var(--acme-font-size-xs);
}

.scm-workspace-selvedge::before {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--acme-color-primary);
    content: "";
}

.scm-workspace-selvedge__quote {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-workspace-selvedge__infer {
    flex: none;
    margin-left: auto;
}

.scm-workspace-selvedge__infer.has-inference {
    color: var(--acme-color-warning);
    font-weight: 600;
}

/* 布边统一解剖：●点(伪元素唯一) + 来源 + 召唤原因(截断) + 时间(右对齐) */
.scm-workspace-selvedge__source {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    color: var(--acme-color-primary-dark);
}

.scm-workspace-selvedge__dot {
    display: none;
}

.scm-workspace-selvedge__reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-workspace-selvedge__time {
    flex: none;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.scm-workspace-surface__body {
    padding: 16px 20px 20px;
}

/* ============ Select2 高度对齐（32px 全站统一）============ */
.scmnext-page .select2-container--default .select2-selection--single,
.scm-supplier-drawer .select2-container--default .select2-selection--single,
.scm-material-drawer .select2-container--default .select2-selection--single,
.scm-style-drawer .select2-container--default .select2-selection--single {
    height: 32px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
}

.scmnext-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.scm-supplier-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.scm-material-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.scm-style-drawer .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    color: #1e293b !important;
    font-size: 13px !important;
}

.scmnext-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.scm-supplier-drawer .select2-container--default .select2-selection--single .select2-selection__arrow,
.scm-material-drawer .select2-container--default .select2-selection--single .select2-selection__arrow,
.scm-style-drawer .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}

.scmnext-page .select2-container--default .select2-selection--multiple {
    min-height: 32px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    font-size: 12px;
}

.scmnext-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #e8f6ef;
    border: 1px solid #41b584;
    color: #2f7f5f;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
    margin-top: 4px;
}

/* 物料子表内的 select2 跟 28px 子表控件对齐 */
.scm-material-subtable .select2-container--default .select2-selection--single {
    height: 28px !important;
    border-color: #e2e8f0 !important;
    border-radius: 3px !important;
}

.scm-material-subtable .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 12px !important;
}

.scm-material-subtable .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
}

/* ============ Style Family SKU Matrix ============ */
.scm-sku-cell {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: all 0.2s;
}
.scm-sku-cell:hover {
    box-shadow: 0 4px 6px rgba(15, 23, 42, .1);
    border-color: #41b584 !important;
}

/* ============ Style Package Edit（资料包编辑页，一等界面）============ */
.scm-stylepack-actions .btn {
    margin-left: 6px;
}

.scm-stylepack-summary {
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.scm-summary-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.scm-summary-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.scm-summary-value {
    font-size: 13px;
    color: #1e293b;
}

.scm-stylepack-tabs {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.scm-stylepack-tabs .nav-link {
    color: #475569;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}

.scm-stylepack-tabs .nav-link.active {
    color: #208f67;
    font-weight: 600;
    border-bottom: 2px solid #41b584;
    background: transparent;
}

.scm-stylepack-tab-body {
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    min-height: 240px;
}

.scm-costing-sheet {
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    padding: 12px;
}

.scm-compare-panel .scm-compare-result code {
    display: block;
    word-break: break-all;
    color: #475569;
}

.scm-compare-result .badge,
#packCompareResult .badge {
    font-weight: 500;
}

/* ============ 章节维度切换 + 工艺附件 ============ */
.scm-section-dim {
    width: auto;
    min-width: 160px;
    display: inline-block;
}

.scm-craft-attachments {
    border-top: 1px solid var(--acme-color-border, #e2e8f0);
    padding-top: 16px;
}

.scm-craft-file-list .scm-craft-file {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--acme-color-border, #e2e8f0);
}

.scm-craft-file-list .scm-craft-file:last-child {
    border-bottom: 0;
}

.scm-craft-file__name {
    color: #475569;
    word-break: break-all;
}


/* ============ W2b 款式库/详情页 v4 翻新样式 ============ */
.scm-style-page, .scm-style-detail-page {
    --primary: var(--acme-color-primary, #41b584);
    --primary-hover: #369d70; 
    --primary-light: #ecf8f3; 
    --primary-dark: var(--acme-color-primary-dark, #208f67);
    --warning: var(--acme-color-warning, #f59e0b); 
    --warning-deep: #b45309; 
    --warning-light: #fef7e8;
    --danger: #ef4444; 
    --danger-deep: #b91c1c; 
    --danger-light: #fdf0ef;
    --text: #1e293b; 
    --text-sub: #475569; 
    --text-muted: var(--acme-color-text-muted, #94a3b8);
    --border: var(--acme-color-border, #e2e8f0); 
    --border-light: var(--acme-color-border-light, #f1f5f9); 
    --bg: var(--acme-color-bg-base, #f8fafc); 
    --card: var(--acme-color-bg-card, #ffffff); 
    --hover: #f1f5f9;
    --shadow-sm: var(--acme-shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.04);
    --mono: "SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
    --page-bg: var(--acme-color-bg-card, #ffffff);
    --page-text: #1e293b;

    font-family: var(--sans);
    background: var(--page-bg);
    color: var(--page-text);
    font-size: 13px;
    line-height: 1.55;
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px 22px 70px;
}
.scm-style-page *, .scm-style-detail-page * { box-sizing:border-box; }
.scm-style-page .mono, .scm-style-detail-page .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.scm-style-page>header h1, .scm-style-detail-page>header h1 { margin:0 0 4px; font-size:20px; text-wrap:balance; }
.scm-style-page>header p, .scm-style-detail-page>header p { margin:0; opacity:.75; max-width:88ch; }

.scm-style-page .controls, .scm-style-detail-page .controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 0; padding:10px 0; background:var(--page-bg); border-bottom:1px solid var(--border); }
.scm-style-page .lede, .scm-style-detail-page .lede { margin:18px 0 12px; color:var(--page-text); }
.scm-style-page .lede h2, .scm-style-detail-page .lede h2 { font-size:16px; margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scm-style-page .lede h2 .route, .scm-style-detail-page .lede h2 .route { font-family:var(--mono); font-size:12px; opacity:.55; font-weight:500; }
.scm-style-page .lede p, .scm-style-detail-page .lede p { margin:4px 0 0; opacity:.75; max-width:84ch; }

.scm-style-page .stage, .scm-style-detail-page .stage { min-height:600px; display:flex; flex-direction:column; overflow:hidden; position:relative; border:1px solid var(--border); border-radius:8px; background:var(--bg); box-shadow:var(--shadow-md); color:var(--text); }
.scm-style-page .chrome, .scm-style-detail-page .chrome { height:40px; flex:none; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); background:var(--card); font-size:12px; color:var(--text-muted); }
.scm-style-page .chrome .crumb b, .scm-style-detail-page .chrome .crumb b { color:var(--text); }
.scm-style-page .chrome .sep, .scm-style-detail-page .chrome .sep { margin:0 6px; color:var(--border); }
.scm-style-page .chrome .right, .scm-style-detail-page .chrome .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.scm-style-page .stage-flex, .scm-style-detail-page .stage-flex { flex:1; display:flex; min-height:0; }
.scm-style-page .stage-body, .scm-style-detail-page .stage-body { flex:1; min-width:0; overflow-y:auto; padding:16px 18px 24px; }

/* 问询条 */
.scm-style-page .askbar { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-sm); }
.scm-style-page .askbar input { flex:1; border:0; outline:0; font:inherit; font-size:13px; color:var(--text); background:transparent; min-width:120px; }
.scm-style-page .askbar .go { border:1px solid var(--border); background:var(--bg); border-radius:5px; font:inherit; font-size:11.5px; color:var(--text-sub); padding:3px 12px; cursor:pointer; white-space:nowrap; }
.scm-style-page .askbar .go:hover { background:var(--hover); }
.scm-style-page .chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 2px 12px; font-size:12px; color:var(--text-muted); }
.scm-style-page .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--text-sub); font-weight:600; font-size:11.5px; }
.scm-style-page .chip .x { cursor:pointer; opacity:.5; border:0; background:none; font:inherit; padding:0; color:inherit; }
.scm-style-page .chip .x:hover { opacity:1; color:var(--danger); }
.scm-style-page .chip.add { cursor:pointer; border-style:dashed; font-weight:500; color:var(--text-muted); background:transparent; }
.scm-style-page .chip.add:hover { color:var(--primary-dark); border-color:var(--primary); }
.scm-style-page .chips .note { font-size:11px; color:var(--text-muted); }

/* AI 答读 */
.scm-style-page .digest, .scm-style-detail-page .digest { display:none; margin-bottom:14px; border:1px solid var(--border); border-left:3px solid var(--warning); border-radius:6px; background:var(--card); overflow:hidden; }
.scm-style-page .exc .digest, .scm-style-detail-page .exc .digest { display:block; }
.scm-style-page .digest .line, .scm-style-detail-page .digest .line { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12.5px; color:var(--text-sub); cursor:pointer; }
.scm-style-page .digest .line .who, .scm-style-detail-page .digest .line .who { flex:none; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--warning-deep); background:var(--warning-light); border-radius:3px; padding:2px 7px; }
.scm-style-page .digest .line .who::before, .scm-style-detail-page .digest .line .who::before { content:"✦ "; }
.scm-style-page .digest .line .gist b, .scm-style-detail-page .digest .line .gist b { color:var(--text); }
.scm-style-page .digest .line .chev, .scm-style-detail-page .digest .line .chev { margin-left:auto; color:var(--text-muted); font-size:10px; transition:transform .12s; }
.scm-style-page .digest.open .line .chev, .scm-style-detail-page .digest.open .line .chev { transform:rotate(90deg); }
.scm-style-page .digest .detail, .scm-style-detail-page .digest .detail { display:none; padding:0 14px 12px 14px; font-size:12.5px; color:var(--text-sub); }
.scm-style-page .digest.open .detail, .scm-style-detail-page .digest.open .detail { display:block; }
.scm-style-page .digest .selvedge-foot, .scm-style-detail-page .digest .selvedge-foot { display:flex; gap:10px; align-items:center; padding:5px 14px; font-size:11px; color:var(--text-muted); background:var(--bg); border-top:1px solid var(--border-light); }
.scm-style-page .digest .selvedge-foot::before, .scm-style-detail-page .digest .selvedge-foot::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--warning); flex:none; }
.scm-style-page .digest .selvedge-foot .t, .scm-style-detail-page .digest .selvedge-foot .t { margin-left:auto; font-family:var(--mono); }

/* 表格 */
.scm-style-page .tablewrap, .scm-style-detail-page .tablewrap { border:1px solid var(--border); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--card); }
.scm-style-page .tablewrap .scroll, .scm-style-detail-page .tablewrap .scroll { overflow-x:auto; }
.scm-style-page table.data, .scm-style-detail-page table.data { width:100%; border-collapse:collapse; font-size:12.5px; }
.scm-style-page table.data th, .scm-style-detail-page table.data th { text-align:left; font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.5px; padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--border); white-space:nowrap; }
.scm-style-page table.data td, .scm-style-detail-page table.data td { padding:8px 12px; border-bottom:1px solid var(--border-light); white-space:nowrap; vertical-align:middle; }
.scm-style-page table.data tr:last-child td, .scm-style-detail-page table.data tr:last-child td { border-bottom:0; }
.scm-style-page .code, .scm-style-detail-page .code { font-family:var(--mono); font-size:12px; color:var(--text-sub); }
.scm-style-page .status-chip, .scm-style-detail-page .status-chip { display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; font-weight:600; }
.scm-style-page .st-ok, .scm-style-detail-page .st-ok { background:var(--primary-light); color:var(--primary-dark); }
.scm-style-page .st-warn, .scm-style-detail-page .st-warn { background:var(--warning-light); color:var(--warning-deep); }
.scm-style-page .st-mute, .scm-style-detail-page .st-mute { background:var(--hover); color:var(--text-muted); }
.scm-style-page .flag, .scm-style-detail-page .flag { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--warning-deep); }
.scm-style-page .flag::before, .scm-style-detail-page .flag::before { content:"⚑"; font-size:10px; }
.scm-style-page .flag.ref, .scm-style-detail-page .flag.ref { color:var(--text-muted); } .scm-style-page .flag.ref::before, .scm-style-detail-page .flag.ref::before { content:"◦"; }
.scm-style-page .rowacts, .scm-style-detail-page .rowacts { display:inline-flex; gap:10px; align-items:center; }
.scm-style-page .act, .scm-style-detail-page .act { font-size:11.5px; font-weight:600; color:var(--primary-dark); cursor:pointer; border:0; background:none; font-family:inherit; padding:0; white-space:nowrap; }
.scm-style-page .act:hover, .scm-style-detail-page .act:hover { text-decoration:underline; }
.scm-style-page .act.mute, .scm-style-detail-page .act.mute { color:var(--text-muted); font-weight:500; }

.scm-style-page tr.fam td { background:var(--bg); border-top:1px solid var(--border); cursor:pointer; }
.scm-style-page tr.fam:first-child td { border-top:0; }
.scm-style-page tr.fam:hover td { background:var(--hover); }
.scm-style-page .famcell { display:flex; align-items:center; gap:12px; }
.scm-style-page .famcell .chev { flex:none; width:12px; color:var(--text-muted); font-size:10px; transition:transform .12s; display:inline-block; }
.scm-style-page tr.fam.open .chev { transform:rotate(90deg); }
.scm-style-page .famcell .nm b { display:block; line-height:1.3; font-size:13px; }
.scm-style-page .famcell .nm .fc { font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.scm-style-page .thumb, .scm-style-detail-page .thumb { flex:none; border-radius:5px; display:grid; place-items:center; border:1px solid var(--border); color:rgba(255,255,255,.92); background-size: cover; background-position: center; }
.scm-style-page .thumb.s90 { width:72px; height:90px; font-size:32px; border-radius:6px; background-color: var(--border-light); }
.scm-style-detail-page .thumb.s120 { width:120px; height:150px; font-size:52px; border-radius:6px; background-color: var(--border-light); }
.scm-style-detail-page .thumb.s36 { width:36px; height:45px; font-size:16px; background-color: var(--border-light); cursor: pointer; }
.scm-style-detail-page .thumb.s36:hover { border-color: var(--primary); }
/* 缩略图里的"暂无图片"占位符号。🚫 别改成 position:absolute（.scm-img-ph__icon 就是那样，
   放进没有定位的 .thumb 里会整个飞出容器）——父级已是 grid + place-items:center，静态流即居中。 */
.scm-style-detail-page .thumb .scm-thumb-ph { font-size:24px; line-height:1; }
.scm-style-page .sw, .scm-style-detail-page .sw { display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.12); vertical-align:-1px; }
.scm-style-page .pool { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-sub); }
.scm-style-page tr.sub td { background:var(--card); }
.scm-style-page tr.sub:hover td { background:var(--hover); }
.scm-style-page tr.sub td:first-child { padding-left:44px; }
.scm-style-page tr.sub.hide { display:none; }
.scm-style-page tr.sub .nm b { font-weight:600; }

/* 详情页 */
.scm-style-detail-page .detail-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.scm-style-detail-page .detail-head h3 { margin:0; font-size:17px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scm-style-detail-page .kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,240px)); gap:10px 24px; margin-top:10px; }
.scm-style-detail-page .kv .k { font-size:10.5px; color:var(--text-muted); letter-spacing:.5px; }
.scm-style-detail-page .kv .v { font-size:12.5px; color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scm-style-detail-page .surface { background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.scm-style-detail-page .surface h4 { margin:0; padding:10px 14px 4px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.scm-style-detail-page .surface h4 .hint { font-weight:400; color:var(--text-muted); font-size:11px; }
.scm-style-detail-page .surface .inner { padding:6px 6px 10px; overflow-x:auto; }
.scm-style-detail-page .surface .inner table.data td, .scm-style-detail-page .surface .inner table.data th { padding:6px 10px; }
.scm-style-detail-page .matrix { border-collapse:collapse; font-size:11.5px; }
.scm-style-detail-page .matrix th, .scm-style-detail-page .matrix td { border:1px solid var(--border-light); padding:5px 12px; text-align:center; }
.scm-style-detail-page .matrix th { background:var(--bg); color:var(--text-muted); font-weight:600; font-size:10.5px; }
.scm-style-detail-page .matrix td.y { color:var(--primary-dark); font-weight:700; }
.scm-style-detail-page .matrix td.n { color:var(--border); }
.scm-style-detail-page .mxswitch { margin-left:auto; display:inline-flex; gap:4px; }
.scm-style-detail-page .mxswitch .btn { padding:2px 10px; font-size:11px; background:var(--card); border:1px solid var(--border); border-radius:4px; cursor:pointer; color:var(--text-sub); }
.scm-style-detail-page .mxswitch .btn.on { background:var(--primary); border-color:var(--primary); color:#fff; }

.scm-style-detail-page .changelog { margin-top:26px; color:var(--page-text); }
.scm-style-detail-page .changelog h2 { font-size:15px; margin:0 0 8px; }
.scm-style-detail-page .changelog .tw { border:1px solid var(--border); border-radius:6px; overflow-x:auto; background:var(--card); }
.scm-style-detail-page .changelog table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--text); }
.scm-style-detail-page .changelog th { text-align:left; font-size:11px; color:var(--text-muted); padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--border); }
.scm-style-detail-page .changelog td { padding:8px 12px; border-bottom:1px solid var(--border-light); vertical-align:top; }
.scm-style-detail-page .changelog tr:last-child td { border-bottom:0; }
.scm-style-detail-page .changelog td:first-child { white-space:nowrap; font-weight:600; }

/* ── W2b 终审:款式页布局与令牌别名(样稿令牌 → acme 令牌,作用域限款式页) ── */
.scm-style-page, .scm-style-detail-page {
    --primary: var(--acme-color-primary);
    --primary-hover: var(--acme-color-primary-hover);
    --primary-light: var(--acme-color-primary-light);
    --primary-dark: var(--acme-color-primary-dark);
    --warning: var(--acme-color-warning);
    --warning-deep: #b45309;
    --warning-light: #fef7e8;
    --danger: var(--acme-color-danger);
    --danger-deep: #b91c1c;
    --danger-light: #fdf0ef;
    --text: var(--acme-color-text-main);
    --text-sub: var(--acme-color-text-sub);
    --text-muted: var(--acme-color-text-muted);
    --border: var(--acme-color-border);
    --border-light: var(--acme-color-border-light);
    --bg: var(--acme-color-bg-base);
    --card: var(--acme-color-bg-card);
    --hover: var(--acme-color-bg-hover);
    --page-bg: var(--acme-color-bg-card);
    --page-text: var(--acme-color-text-main);
    --shadow-sm: var(--acme-shadow-sm);
    --shadow-md: var(--acme-shadow-md);
    --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: var(--acme-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif);
    padding: 0;
    background: var(--acme-color-bg-card);
    max-width: none;
    width: 100%;
    margin: 0;
    /* _Main 是裸壳(body > section[padding:0] > RenderBody),无 header/nav:
       页面自身即视口满高,内部滚动,外层不产生第二根滚动条 */
    height: 100vh;
    overflow: hidden;
}

/* 主体 + 右舷:产品页真实布局(样稿的 lede/stage/chrome 展览层不进产品) */
.scm-style-page .stage-flex, .scm-style-detail-page .stage-flex {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    background: var(--acme-color-bg-card);
}
.scm-style-page .stage-body, .scm-style-detail-page .stage-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 18px 24px;
}
/* 列表页:表格容器吃掉剩余高度,空态时白卡片盖住背景水印 */
.scm-style-page .tablewrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* 空态浮层的定位基准。⚠️ 基准只能落在 .tablewrap 上 ——
       #styleFamilyGrid 是 ag-Grid 的根节点，它自己管理子节点，🚫 别往里塞东西。 */
    position: relative;
}

/* 查不到东西时的空态。原来是整片纯白（serverSide 行模型不会自动弹 ag 的 noRowsToShow
   overlay，组件里那句"数据为空"其实从没露过面），用户第一反应是"页面坏了"。 */
.scm-style-page .scm-empty-state {
    position: absolute;
    left: 0; right: 0;
    top: 44px;              /* 让开表头，别把它盖住 */
    bottom: 44px;           /* 让开分页条 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;   /* 只有里面的按钮吃点击，🚫 别挡住表格本身 */
    color: var(--text-muted);
    background: var(--card);
}
.scm-style-page .scm-empty-state[hidden] { display: none; }
.scm-style-page .scm-empty-state__icon { font-size: 30px; opacity: .45; }
.scm-style-page .scm-empty-state__title { font-size: 14px; color: var(--text-sub); }
.scm-style-page .scm-empty-state__hint { font-size: 12px; }
.scm-style-page .scm-empty-state__act { pointer-events: auto; margin-top: 4px; }
.scm-style-page .tablewrap > .scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.scm-style-page .tablewrap > .scroll > table.data {
    flex: none;
}
.scm-style-page #emptyState {
    display: none;
    padding: 40px;
    text-align: center;
    color: var(--acme-color-text-muted);
}
.scm-style-page #emptyState.is-on {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 详情页:内容自然流,不参与拉伸 */
.scm-style-detail-page .stage-body > * {
    flex: none;
}
.scm-style-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}
/* ══════════════════════════════════════════════════════════════════════════
   D32 通用页壳别名（本块由 .tasks/tmp 脚本从款式页规则生成，纯追加）

   款式库/款式详情的视觉词汇（askbar / chips / digest / table.data / status-chip
   / flag / thumb / stage-flex …）在上方以 .scm-style-page(-detail) 作用域定义并
   已验收。供应商、物料、打样任务、生产资料包四页复用同一套词汇，故在此追加
   .scm-d32-page 系列别名：

     .scm-d32-page    通用（所有 D32 页必挂）
     .scm-d32-list    列表页专属布局（表格吃满高、空态白卡）
     .scm-d32-detail  详情页专属布局（内容自然流）

   🚫 不要回头去改上方 .scm-style-page 的规则来"合并重复"——那两页已验收，
      合并的收益是代码整洁，代价是可能打碎已交付视觉。整洁留给专门的重构批次。
   ══════════════════════════════════════════════════════════════════════════ */
.scm-d32-page {
    --primary: var(--acme-color-primary, #41b584);
    --primary-hover: #369d70; 
    --primary-light: #ecf8f3; 
    --primary-dark: var(--acme-color-primary-dark, #208f67);
    --warning: var(--acme-color-warning, #f59e0b); 
    --warning-deep: #b45309; 
    --warning-light: #fef7e8;
    --danger: #ef4444; 
    --danger-deep: #b91c1c; 
    --danger-light: #fdf0ef;
    --text: #1e293b; 
    --text-sub: #475569; 
    --text-muted: var(--acme-color-text-muted, #94a3b8);
    --border: var(--acme-color-border, #e2e8f0); 
    --border-light: var(--acme-color-border-light, #f1f5f9); 
    --bg: var(--acme-color-bg-base, #f8fafc); 
    --card: var(--acme-color-bg-card, #ffffff); 
    --hover: #f1f5f9;
    --shadow-sm: var(--acme-shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.04);
    --mono: "SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
    --page-bg: var(--acme-color-bg-card, #ffffff);
    --page-text: #1e293b;

    font-family: var(--sans);
    background: var(--page-bg);
    color: var(--page-text);
    font-size: 13px;
    line-height: 1.55;
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px 22px 70px; }
.scm-d32-page * { box-sizing:border-box; }
.scm-d32-page .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.scm-d32-page >header h1 { margin:0 0 4px; font-size:20px; text-wrap:balance; }
.scm-d32-page >header p { margin:0; opacity:.75; max-width:88ch; }
.scm-d32-page .controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 0; padding:10px 0; background:var(--page-bg); border-bottom:1px solid var(--border); }
.scm-d32-page .lede { margin:18px 0 12px; color:var(--page-text); }
.scm-d32-page .lede h2 { font-size:16px; margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scm-d32-page .lede h2 .route { font-family:var(--mono); font-size:12px; opacity:.55; font-weight:500; }
.scm-d32-page .lede p { margin:4px 0 0; opacity:.75; max-width:84ch; }
.scm-d32-page .stage { min-height:600px; display:flex; flex-direction:column; overflow:hidden; position:relative; border:1px solid var(--border); border-radius:8px; background:var(--bg); box-shadow:var(--shadow-md); color:var(--text); }
.scm-d32-page .chrome { height:40px; flex:none; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); background:var(--card); font-size:12px; color:var(--text-muted); }
.scm-d32-page .chrome .crumb b { color:var(--text); }
.scm-d32-page .chrome .sep { margin:0 6px; color:var(--border); }
.scm-d32-page .chrome .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.scm-d32-page .stage-flex { flex:1; display:flex; min-height:0; }
.scm-d32-page .stage-body { flex:1; min-width:0; overflow-y:auto; padding:16px 18px 24px; }
.scm-d32-page .askbar { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-sm); }
.scm-d32-page .askbar input { flex:1; border:0; outline:0; font:inherit; font-size:13px; color:var(--text); background:transparent; min-width:120px; }
.scm-d32-page .askbar .go { border:1px solid var(--border); background:var(--bg); border-radius:5px; font:inherit; font-size:11.5px; color:var(--text-sub); padding:3px 12px; cursor:pointer; white-space:nowrap; }
.scm-d32-page .askbar .go:hover { background:var(--hover); }
.scm-d32-page .chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 2px 12px; font-size:12px; color:var(--text-muted); }
.scm-d32-page .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--text-sub); font-weight:600; font-size:11.5px; }
.scm-d32-page .chip .x { cursor:pointer; opacity:.5; border:0; background:none; font:inherit; padding:0; color:inherit; }
.scm-d32-page .chip .x:hover { opacity:1; color:var(--danger); }
.scm-d32-page .chip.add { cursor:pointer; border-style:dashed; font-weight:500; color:var(--text-muted); background:transparent; }
.scm-d32-page .chip.add:hover { color:var(--primary-dark); border-color:var(--primary); }
.scm-d32-page .chips .note { font-size:11px; color:var(--text-muted); }
.scm-d32-page .digest { display:none; margin-bottom:14px; border:1px solid var(--border); border-left:3px solid var(--warning); border-radius:6px; background:var(--card); overflow:hidden; }
.scm-d32-page .exc .digest { display:block; }
.scm-d32-page .digest .line { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12.5px; color:var(--text-sub); cursor:pointer; }
.scm-d32-page .digest .line .who { flex:none; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--warning-deep); background:var(--warning-light); border-radius:3px; padding:2px 7px; }
.scm-d32-page .digest .line .who::before { content:"✦ "; }
.scm-d32-page .digest .line .gist b { color:var(--text); }
.scm-d32-page .digest .line .chev { margin-left:auto; color:var(--text-muted); font-size:10px; transition:transform .12s; }
.scm-d32-page .digest.open .line .chev { transform:rotate(90deg); }
.scm-d32-page .digest .detail { display:none; padding:0 14px 12px 14px; font-size:12.5px; color:var(--text-sub); }
.scm-d32-page .digest.open .detail { display:block; }
.scm-d32-page .digest .selvedge-foot { display:flex; gap:10px; align-items:center; padding:5px 14px; font-size:11px; color:var(--text-muted); background:var(--bg); border-top:1px solid var(--border-light); }
.scm-d32-page .digest .selvedge-foot::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--warning); flex:none; }
.scm-d32-page .digest .selvedge-foot .t { margin-left:auto; font-family:var(--mono); }
.scm-d32-list .tablewrap { border:1px solid var(--border); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--card); }
.scm-d32-list .tablewrap .scroll { overflow-x:auto; }
.scm-d32-page table.data { width:100%; border-collapse:collapse; font-size:12.5px; }
.scm-d32-page table.data th { text-align:left; font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.5px; padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--border); white-space:nowrap; }
.scm-d32-page table.data td { padding:8px 12px; border-bottom:1px solid var(--border-light); white-space:nowrap; vertical-align:middle; }
.scm-d32-page table.data tr:last-child td { border-bottom:0; }
.scm-d32-page .code { font-family:var(--mono); font-size:12px; color:var(--text-sub); }
.scm-d32-page .status-chip { display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; font-weight:600; }
.scm-d32-page .st-ok { background:var(--primary-light); color:var(--primary-dark); }
.scm-d32-page .st-warn { background:var(--warning-light); color:var(--warning-deep); }
.scm-d32-page .st-mute { background:var(--hover); color:var(--text-muted); }
.scm-d32-page .flag { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--warning-deep); }
.scm-d32-page .flag::before { content:"⚑"; font-size:10px; }
.scm-d32-page .flag.ref { color:var(--text-muted); }
.scm-d32-page .flag.ref::before { content:"◦"; }
.scm-d32-page .rowacts { display:inline-flex; gap:10px; align-items:center; }
.scm-d32-page .act { font-size:11.5px; font-weight:600; color:var(--primary-dark); cursor:pointer; border:0; background:none; font-family:inherit; padding:0; white-space:nowrap; }
.scm-d32-page .act:hover { text-decoration:underline; }
.scm-d32-page .act.mute { color:var(--text-muted); font-weight:500; }
.scm-d32-list tr.fam td { background:var(--bg); border-top:1px solid var(--border); cursor:pointer; }
.scm-d32-list tr.fam:first-child td { border-top:0; }
.scm-d32-list tr.fam:hover td { background:var(--hover); }
.scm-d32-list .famcell { display:flex; align-items:center; gap:12px; }
.scm-d32-list .famcell .chev { flex:none; width:12px; color:var(--text-muted); font-size:10px; transition:transform .12s; display:inline-block; }
.scm-d32-list tr.fam.open .chev { transform:rotate(90deg); }
.scm-d32-list .famcell .nm b { display:block; line-height:1.3; font-size:13px; }
.scm-d32-list .famcell .nm .fc { font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.scm-d32-page .thumb { flex:none; border-radius:5px; display:grid; place-items:center; border:1px solid var(--border); color:rgba(255,255,255,.92); background-size: cover; background-position: center; }
.scm-d32-page .thumb.s90 { width:72px; height:90px; font-size:32px; border-radius:6px; background-color: var(--border-light); }
.scm-d32-page .thumb.s120 { width:120px; height:150px; font-size:52px; border-radius:6px; background-color: var(--border-light); }
.scm-d32-page .thumb.s36 { width:36px; height:45px; font-size:16px; background-color: var(--border-light); cursor: pointer; }
.scm-d32-page .thumb.s36:hover { border-color: var(--primary); }
.scm-d32-page .sw { display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.12); vertical-align:-1px; }
.scm-d32-list .pool { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-sub); }
.scm-d32-list tr.sub td { background:var(--card); }
.scm-d32-list tr.sub:hover td { background:var(--hover); }
.scm-d32-list tr.sub td:first-child { padding-left:44px; }
.scm-d32-list tr.sub.hide { display:none; }
.scm-d32-list tr.sub .nm b { font-weight:600; }
.scm-d32-detail .detail-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.scm-d32-detail .detail-head h3 { margin:0; font-size:17px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scm-d32-detail .kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,240px)); gap:10px 24px; margin-top:10px; }
.scm-d32-detail .kv .k { font-size:10.5px; color:var(--text-muted); letter-spacing:.5px; }
.scm-d32-detail .kv .v { font-size:12.5px; color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scm-d32-detail .surface { background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.scm-d32-detail .surface h4 { margin:0; padding:10px 14px 4px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.scm-d32-detail .surface h4 .hint { font-weight:400; color:var(--text-muted); font-size:11px; }
.scm-d32-detail .surface .inner { padding:6px 6px 10px; overflow-x:auto; }
.scm-d32-detail .surface .inner table.data td, .scm-d32-detail .surface .inner table.data th { padding:6px 10px; }
.scm-d32-detail .matrix { border-collapse:collapse; font-size:11.5px; }
.scm-d32-detail .matrix th, .scm-d32-detail .matrix td { border:1px solid var(--border-light); padding:5px 12px; text-align:center; }
.scm-d32-detail .matrix th { background:var(--bg); color:var(--text-muted); font-weight:600; font-size:10.5px; }
.scm-d32-detail .matrix td.y { color:var(--primary-dark); font-weight:700; }
.scm-d32-detail .matrix td.n { color:var(--border); }
.scm-d32-detail .mxswitch { margin-left:auto; display:inline-flex; gap:4px; }
.scm-d32-detail .mxswitch .btn { padding:2px 10px; font-size:11px; background:var(--card); border:1px solid var(--border); border-radius:4px; cursor:pointer; color:var(--text-sub); }
.scm-d32-detail .mxswitch .btn.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.scm-d32-detail .changelog { margin-top:26px; color:var(--page-text); }
.scm-d32-detail .changelog h2 { font-size:15px; margin:0 0 8px; }
.scm-d32-detail .changelog .tw { border:1px solid var(--border); border-radius:6px; overflow-x:auto; background:var(--card); }
.scm-d32-detail .changelog table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--text); }
.scm-d32-detail .changelog th { text-align:left; font-size:11px; color:var(--text-muted); padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--border); }
.scm-d32-detail .changelog td { padding:8px 12px; border-bottom:1px solid var(--border-light); vertical-align:top; }
.scm-d32-detail .changelog tr:last-child td { border-bottom:0; }
.scm-d32-detail .changelog td:first-child { white-space:nowrap; font-weight:600; }
.scm-d32-page {
    --primary: var(--acme-color-primary);
    --primary-hover: var(--acme-color-primary-hover);
    --primary-light: var(--acme-color-primary-light);
    --primary-dark: var(--acme-color-primary-dark);
    --warning: var(--acme-color-warning);
    --warning-deep: #b45309;
    --warning-light: #fef7e8;
    --danger: var(--acme-color-danger);
    --danger-deep: #b91c1c;
    --danger-light: #fdf0ef;
    --text: var(--acme-color-text-main);
    --text-sub: var(--acme-color-text-sub);
    --text-muted: var(--acme-color-text-muted);
    --border: var(--acme-color-border);
    --border-light: var(--acme-color-border-light);
    --bg: var(--acme-color-bg-base);
    --card: var(--acme-color-bg-card);
    --hover: var(--acme-color-bg-hover);
    --page-bg: var(--acme-color-bg-card);
    --page-text: var(--acme-color-text-main);
    --shadow-sm: var(--acme-shadow-sm);
    --shadow-md: var(--acme-shadow-md);
    --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: var(--acme-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif);
    padding: 0;
    background: var(--acme-color-bg-card);
    max-width: none;
    width: 100%;
    margin: 0;
    
    height: 100vh;
    overflow: hidden; }
.scm-d32-page .stage-flex {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    background: var(--acme-color-bg-card); }
.scm-d32-page .stage-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 18px 24px; }
.scm-d32-list .tablewrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column; }
.scm-d32-list .tablewrap > .scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column; }
.scm-d32-list .tablewrap > .scroll > table.data {
    flex: none; }
.scm-d32-list #emptyState {
    display: none;
    padding: 40px;
    text-align: center;
    color: var(--acme-color-text-muted); }
.scm-d32-list #emptyState.is-on {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; }
.scm-d32-detail .stage-body > * {
    flex: none; }
.scm-supplier-page .tablewrap { background: var(--acme-color-bg-card); }

.scm-stylepack-page .d32-tabs { border-bottom: 0; }
.scm-stylepack-page .d32-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; font-size: 11.5px; font-weight: 600; color: var(--text-sub); background: transparent; padding: 10px 16px; margin-bottom: 0; }
.scm-stylepack-page .d32-tabs .nav-link:hover { color: var(--text); border-color: transparent; }
.scm-stylepack-page .d32-tabs .nav-link.active { border-bottom-color: var(--primary); color: var(--text); background: transparent; }

/* D32 补充：红色状态 chip（审版驳回 / 异常终态）。款式页原本只有 ok/warn/mute 三档，
   打样任务的「审版驳回」需要第四档，放在通用作用域里供所有 D32 页共用。 */
.scm-d32-page .st-bad { background: var(--danger-light); color: var(--danger-deep); }

/* --- Sample Task Specific Styles --- */
.scm-sampletask-detail-page .timeline-item {
    position: relative;
    padding-bottom: 20px;
}
.scm-sampletask-detail-page .timeline-item:last-child {
    padding-bottom: 0;
}
.scm-sampletask-detail-page .timeline-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: -14px;
    width: 1px;
    background: var(--acme-color-border);
}
.scm-sampletask-detail-page .timeline-item:last-child::before {
    display: none;
}
.scm-sampletask-detail-page .timeline-item .tl-dot {
    position: absolute;
    left: -15px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acme-color-border);
}
.scm-sampletask-detail-page .timeline-item.invalid .tl-dot {
    background: var(--acme-color-text-muted);
}
.scm-sampletask-detail-page .timeline-item .tl-content {
    margin-left: 8px;
}
.scm-sampletask-detail-page .strikethrough {
    text-decoration: line-through;
    opacity: 0.6;
}
.scm-sampletask-detail-page .review-item.invalid {
    background: var(--acme-color-bg-hover);
}

/* ⚠️ 全局水印层压在业务 DOM 之上，透明背景一律会漏水印。
   ag-Grid 默认 root/viewport/卡片容器都是透明的，最后一行以下会透出水印，
   所以 D32 列表页里把 grid 的各层背景显式刷白。 */
.scm-d32-list .ag-root-wrapper,
.scm-d32-list .ag-body-viewport,
.scm-d32-list .ag-center-cols-viewport,
.scm-d32-list .ag-paging-panel {
    background: var(--acme-color-bg-card);
}
.scm-d32-list .acme-card-view-container {
    background: var(--acme-color-bg-card) !important;
}

/* ============ D32 列表页操作条（对齐平台 .operetion-section 约定）============
   平台设计系统（DesignSystem/Tables）规定：列表页操作条左侧 .left-buttons 放业务创建动作，
   右侧 #dataOperationsContainer 由 AcmeGridOperations 注入刷新/导入/导出，🚫 不许自写这三个按钮。
   这里只补 D32 页面需要的排布细节，不改平台基类（app.css 的 .operetion-section）。 */
.scmnext-page .operetion-section .left-buttons,
.scmnext-page .operetion-section .right-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 平台基类给 .operetion-section 带了 border-bottom，那是配「筛选区 + 工具条」老版式的。
   D32 页面工具条下面紧跟一张自带边框的表格卡片，两条平行线只差 8px，看起来像画错了。
   只在 ScmNext 作用域内取消，不动平台基类。 */
/* ❗ 组件内部的排布与按钮尺寸一律交还组件自己，🚫 页面不要改。
   我原先做了三件错事，效果就是「和美好共创的顶部栏完全不一样」：
     1. 把 .data-operations 改成 inline-flex + gap（组件本体是 inline-block +
        .btn-group{margin-right:5px}）；
     2. 把 .btn-group 的 margin-right 归零；
     3. 最要命的是下面这条页面级规则越界压到了组件按钮上 ——
        `.scmnext-page .btn-sm { height:32px; padding:0 14px; line-height:30px }`
        与 data-operations.css 的 `.data-operations .btn-icon{padding:.25rem .5rem;line-height:1.5}`
        **特异度相同**，而 scmnext.css 在它之后加载 → 页面规则赢，图标钮被撑成宽药丸；
        而组件的下拉钮带**内联** padding 不受影响 → 同一条工具栏里两种大小、基线也对不齐。
   这里按更高特异度把组件按钮的尺寸还原成 data-operations.css 的取值。 */
.scmnext-page .operetion-section .data-operations .btn-sm,
.scmnext-page .operetion-section .data-operations .btn {
    height: auto;
    padding: 0.25rem 0.5rem;
    /* ⚠️ font-size 也必须还原：漏掉它的话按钮高度会从 26px 变成 29px
       （页面级规则写的是 13px，bootstrap 的 .btn-sm 是 .75rem = 11.25px），
       图标跟着字号放大，和美好共创那条工具栏就差一档。 */
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* 卡片/列表视图切换钮（acmeAgGrid 卡片扩展注入）与操作钮同排对齐 */
/* 切换器在工具条里排最右，和左边的 data-operation 之间留 8px（.right-buttons 已有 gap:8px，
   这里只需清掉切换器自带的外边距，别再叠一层） */
.scmnext-page .operetion-section .scm-view-toggle {
    margin: 0 !important;
}

/* ============ masterDetail 修容（款式库 族/实例 展开）============ */
/* 箭头垂直居中：族行里有 90px 缩略图，而 agGroupCellRenderer 的包裹层默认 flex-start，
   30px 的展开箭头会被顶到单元格最上沿（实测偏移只有 1px），看着像没对齐。 */
.scmnext-page .ag-cell-wrapper.ag-row-group {
    align-items: center;
}

/* 明细面板左右缩进归零：ag-Grid 默认给 .ag-details-row 加 38px 左右 padding，
   子表左边缘会比主表缩进 38px。列宽由页面 JS 跟随主表实际宽度同步（主表跑了
   sizeColumnsToFit，列宽是动态的，写死明细列宽会随视口漂移）。 */
.scmnext-page .ag-details-row {
    padding-left: 0;
    padding-right: 0;
    background: var(--acme-color-bg-hover);
    /* 层级感靠内嵌左色条 + 浅底，🚫 不能用缩进/border-left —— 那会把子表整体推开、
       破坏刚对齐好的列。inset 阴影不占宽度。 */
    box-shadow: inset 2px 0 0 var(--acme-color-primary);
}

/* 明细行（款式实例）首列单行排布：名称 + 灰色款号同排，配合 30px 行高 */
.scmnext-page .scm-subrow {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.scmnext-page .scm-subrow > b {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scmnext-page .scm-subrow > .code {
    flex: none;
    font-size: 11px;
    color: var(--acme-color-text-muted);
}

/* ============ ScmAskBar 组件补充样式 ============
   askbar/chips/chip/note/go 全部复用上面已验收的规则，这里只加组件新增的两样东西：
   快捷 chip 的选中态、以及「最近查询」下拉。 */
.scmnext-page .chip.shortcut {
    cursor: pointer;
}
.scmnext-page .chip.shortcut.active {
    border-color: var(--acme-color-primary);
    color: var(--acme-color-primary-dark, #2f7f5f);
    background: var(--acme-color-primary-light);
}

.scm-askbar-history {
    position: absolute;
    z-index: 1060;
    min-width: 240px;
    max-width: 420px;
    padding: 6px;
    background: var(--acme-color-bg-card);
    border: 1px solid var(--acme-color-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
}
.scm-askbar-history__hd {
    padding: 4px 8px 6px;
    font-size: 11px;
    color: var(--acme-color-text-muted);
}
.scm-askbar-history__item,
.scm-askbar-history__clear {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--acme-color-text-main);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scm-askbar-history__item:hover,
.scm-askbar-history__clear:hover {
    background: var(--acme-color-bg-hover);
}
.scm-askbar-history__clear {
    margin-top: 4px;
    border-top: 1px solid var(--acme-color-border-light);
    border-radius: 0 0 4px 4px;
    color: var(--acme-color-text-muted);
    font-size: 11px;
}

.scm-askbar-host .chip[data-key] {
    max-width: 300px;
    box-sizing: border-box;
}

.scm-askbar-host .scm-askbar-chip__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-askbar-host .chip[data-key] .x {
    flex: 0 0 auto;
}

.scm-askbar-host .askbar input.is-parsing::placeholder {
    color: var(--acme-color-primary);
    opacity: 1;
}

.scm-askbar-filter-panel {
    position: fixed;
    z-index: 2060;
    display: flex;
    flex-direction: column;
    width: 700px;
    max-width: calc(100vw - 24px);
    max-height: min(500px, calc(100vh - 24px));
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid var(--acme-color-border, #cbd5e1);
    border-radius: 6px;
    background: var(--acme-color-bg-card, #fff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}

.scm-askbar-filter-panel[hidden] {
    display: none !important;
}

.scm-askbar-filter-panel__header,
.scm-askbar-filter-panel__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 10px 14px;
}

.scm-askbar-filter-panel__header {
    justify-content: space-between;
    border-bottom: 1px solid var(--acme-color-border-light, #e2e8f0);
}

.scm-askbar-filter-panel__header h5 {
    margin: 0;
    color: var(--acme-color-text-main, #1e293b);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.scm-askbar-filter-panel__close {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--acme-color-text-muted, #64748b);
    cursor: pointer;
}

.scm-askbar-filter-panel__close:hover {
    background: var(--acme-color-bg-hover, #f8fafc);
    color: var(--acme-color-text-main, #1e293b);
}

.scm-askbar-filter-panel__body {
    min-height: 0;
    padding: 12px 14px;
    overflow-y: auto;
}

.scm-askbar-filter-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

.scm-askbar-filter-panel__field {
    min-width: 0;
    margin: 0;
}

.scm-askbar-filter-panel__field > label {
    display: block;
    margin-bottom: 5px;
    color: var(--acme-color-text-sub, #475569);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.scm-askbar-filter-panel__footer {
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--acme-color-border-light, #e2e8f0);
}

@media (max-width: 760px) {
    .scm-askbar-filter-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .scm-askbar-filter-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* AskBar 使用紧凑 form-control-sm；Select2 内层必须同步压缩，否则会反向撑高外框。 */
.scm-askbar-filter-modal {
    --scm-askbar-control-height: 26px;
    --scm-askbar-control-inner-height: 24px;
}

.scm-askbar-filter-modal .select2-selection--single,
.scm-askbar-filter-modal .scm-askbar-tree__trigger {
    height: var(--scm-askbar-control-height) !important;
    min-height: var(--scm-askbar-control-height) !important;
    border: 1px solid var(--acme-color-border, #cbd5e1) !important;
    border-radius: 4px !important;
}

.scm-askbar-filter-modal .select2-selection--single .select2-selection__rendered {
    line-height: var(--scm-askbar-control-inner-height) !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    font-size: 13px !important;
}

.scm-askbar-filter-modal .select2-selection--single .select2-selection__arrow {
    height: var(--scm-askbar-control-inner-height) !important;
}

.scm-askbar-filter-modal .select2-selection--multiple {
    min-height: var(--scm-askbar-control-height) !important;
    border: 1px solid var(--acme-color-border, #cbd5e1) !important;
    border-radius: 4px !important;
}

.scm-askbar-filter-modal .select2-selection--multiple .select2-selection__rendered {
    min-height: var(--scm-askbar-control-inner-height);
    padding: 0 4px !important;
}

.scm-askbar-filter-modal .select2-selection--multiple .select2-selection__choice {
    height: 22px;
    margin: 1px 3px !important;
    padding: 0 4px !important;
    line-height: 20px;
}

.scm-askbar-filter-modal .select2-selection--multiple .select2-selection__choice__remove {
    height: 20px;
    margin: 0 0 0 4px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    line-height: 20px;
}

.scm-askbar-filter-modal .select2-selection--multiple .select2-selection__clear {
    height: var(--scm-askbar-control-inner-height);
    margin: 0 2px 0 0 !important;
    padding: 0 2px !important;
    line-height: var(--scm-askbar-control-inner-height);
}

.scm-askbar-filter-modal .select2-search--inline,
.scm-askbar-filter-modal .select2-search--inline .select2-search__field {
    height: var(--scm-askbar-control-inner-height) !important;
    min-height: var(--scm-askbar-control-inner-height);
    margin: 0 !important;
    line-height: var(--scm-askbar-control-inner-height);
}

.scm-askbar-filter-modal .select2-search--inline .select2-search__field {
    padding: 0 0.3rem !important;
}

.scm-askbar-filter-modal .acme-sys-dic-tree > .input-group,
.scm-askbar-filter-modal .acme-user-tree__control {
    height: var(--scm-askbar-control-height);
}

.scm-askbar-filter-modal .acme-sys-dic-tree__input,
.scm-askbar-filter-modal .acme-sys-dic-tree__clear,
.scm-askbar-filter-modal .acme-user-tree__input,
.scm-askbar-filter-modal .acme-user-tree__clear {
    height: var(--scm-askbar-control-height) !important;
    min-height: var(--scm-askbar-control-height) !important;
    line-height: var(--scm-askbar-control-inner-height) !important;
}

.scm-askbar-filter-modal .acme-sys-dic-tree__clear,
.scm-askbar-filter-modal .acme-user-tree__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scm-askbar-filter-modal .acme-sys-dic-tree__clear i,
.scm-askbar-filter-modal .acme-user-tree__clear i {
    line-height: 1;
}

.scm-askbar-filter-modal .scm-askbar-tree__panel,
.scm-askbar-filter-modal .acme-sys-dic-tree__dropdown,
.scm-askbar-filter-modal .acme-user-tree__dropdown {
    position: fixed !important;
    right: auto !important;
    min-width: 0 !important;
    margin: 0;
    z-index: 2070;
}

.scm-askbar-tree {
    position: relative;
}

.scm-askbar-tree__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
    background: var(--acme-color-bg-card, #fff);
    color: var(--acme-color-text-main, #1e293b);
    font-size: 13px;
    text-align: left;
}

.scm-askbar-tree__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-askbar-tree__panel {
    position: absolute;
    z-index: 2070;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    padding: 5px 0;
    border: 1px solid var(--acme-color-border, #cbd5e1);
    border-radius: 4px;
    background: var(--acme-color-bg-card, #fff);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
}

.scm-askbar-tree__panel[hidden],
.scm-askbar-tree__children[hidden] {
    display: none;
}

.scm-askbar-tree__group {
    margin: 0;
    padding: 0;
    list-style: none;
}

.scm-askbar-tree__children > .scm-askbar-tree__group {
    padding-left: 18px;
}

.scm-askbar-tree__row {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 8px 2px 4px;
}

.scm-askbar-tree__row:hover {
    background: var(--acme-color-bg-hover, #f8fafc);
}

.scm-askbar-tree__toggle,
.scm-askbar-tree__spacer {
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.scm-askbar-tree__toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--acme-color-text-muted, #64748b);
    cursor: pointer;
}

.scm-askbar-tree__check {
    flex: none;
    margin: 0 7px 0 0;
}

.scm-askbar-tree__row label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.scm-askbar-tree__empty {
    padding: 8px 10px;
    color: var(--acme-color-text-muted, #64748b);
    font-size: 12px;
    list-style: none;
}

/* ============ 锚点抽屉并排模式（主内容区让位，右舷钉死不动）============
   速览抽屉默认是 fixed 覆盖层，会盖住工作台右舷。右舷里的实体锚点就是靠它打开的，
   盖住右舷等于自断后路。并排模式下抽屉嵌在右舷**左侧**，让位的是主内容区。
   🚫 不要把右舷推到抽屉左边（上一版做法，已废弃）：右舷宽度是用户拖出来的变量，
      推走后视觉位置会漂、拖拽把手跟着跑，手感很差。
   🚫 不用 transform 移右舷 —— 命中区会和视觉错位。
   宽度判据与退化在 scmnext-quickview.js（视口 < 1600px 或页面没有右舷时退回覆盖模式）。 */
.scmnext-page .stage-body {
    transition: padding-right .2s ease;
}
html.scm-quickview-side .scmnext-page .stage-body {
    /* 叠加而非覆盖：原来的 18px 右内边距要留住，否则内容会贴死抽屉边线 */
    padding-right: calc(var(--scm-quickview-w, 560px) + 18px);
}

/* ============ 兜住主题的 a:hover 加粗（防 hover 抖行）============
   themes/cust-theme-16.css 里有 `html body a:hover { font-weight: 800 }`，是全平台皮肤规则。
   ScmNext 页面链接多、栏位窄（ag-Grid 单元格、右舷气泡、卡片脚），字重一跳宽度就涨，
   整行被挤换行，鼠标扫过去像鬼畜。特异度 (0,3,1) 压主题的 (0,1,2)。
   🚫 不要去改主题文件 —— 那是全平台皮肤。
   🚫 也不要写成 `.scmnext-page a:hover { font-weight: inherit }` 这种通杀：
      它的特异度 (0,2,1) 反而高于 .scm-entity-link:hover (0,2,0)，会把锚点 hover 压细，
      而且任何自带字重的链接都会被一起削。只点名实际存在的几种链接。
   ⚠️ 每类链接必须还原它自己的基础字重，不能一律 500 —— .act 基础是 600、品牌位是 700，
      统一压 500 只是把「变粗抖动」换成「变细抖动」。 */
.scmnext-page a.scm-entity-link:hover,
.scmnext-page a.scm-entity-link:focus {
    font-weight: 500;
}
.scmnext-page a.act:hover,
.scmnext-page a.act:focus {
    font-weight: 600;
}
.scmnext-page a.act.mute:hover,
.scmnext-page a.act.mute:focus {
    font-weight: 500;
}
.scmnext-page a.scm-workspace-brand:hover,
.scmnext-page a.scm-workspace-brand:focus {
    font-weight: 700;
}
/* .scm-workspace-muted-link 自己不设字重，继承容器；hover 也得跟着继承，不能被主题拽到 800 */
.scmnext-page a.scm-workspace-muted-link:hover,
.scmnext-page a.scm-workspace-muted-link:focus {
    font-weight: inherit;
}

/* ============ 滚动条降噪 ============
   平台默认滚动条在这些大面积白底页面上过于抢眼（尤其 ag-Grid 的横向条）。
   统一改成细窄半透明、hover 才加深。⚠️ ::-webkit-scrollbar 只在 webkit 内核生效，
   公司统一 Chrome 内核可接受；Firefox 用 scrollbar-width/color 兜一层。
   ⚠️ ag-Grid 有自己的滚动容器（.ag-body-viewport / .ag-body-horizontal-scroll-viewport），
      不单独点名的话只会改到页面级滚动条。 */
.scmnext-page,
.scmnext-page .stage-body,
.scmnext-page .ag-body-viewport,
.scmnext-page .ag-body-horizontal-scroll-viewport,
.scmnext-page .ag-center-cols-viewport {
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 41, 59, .18) transparent;
}
.scmnext-page ::-webkit-scrollbar,
.scmnext-page::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scmnext-page ::-webkit-scrollbar-track,
.scmnext-page::-webkit-scrollbar-track {
    background: transparent;
}
.scmnext-page ::-webkit-scrollbar-thumb,
.scmnext-page::-webkit-scrollbar-thumb {
    /* 透明边框 + background-clip 把可见滑块收窄成 4px，视觉更轻但命中区仍是 8px */
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
    background-color: rgba(30, 41, 59, .14);
}
.scmnext-page ::-webkit-scrollbar-thumb:hover,
.scmnext-page::-webkit-scrollbar-thumb:hover {
    background-color: rgba(30, 41, 59, .28);
}
.scmnext-page ::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   款式抽屉：左表单 / 右素材 两栏各管到底
   🚫 别改成上下通栏：通栏会横穿右栏，跟右边一栏一栏往下排的内容对不齐。
   ============================================================ */
/* 🚨 两栏各自带 20px 内边距，外层 body 再补一层就是 40px ——
   表单会比 header 标题和 footer 按钮缩进整整 20px，看着就是"padding 不对"。
   所以走 zones 布局的 body 把自己那层清掉，让两栏的 20px 直接对齐 header/footer。
   🚫 别去动 .scm-style-drawer__body 本身的 padding —— 那条选择器是
      供应商/物料抽屉共用的，它们里面没有 zones，清掉会让那两个页面贴边。 */
.scm-style-drawer__body--zoned {
    padding: 0;
}

.scm-sd-zones {
    display: grid;
    /* 320px 是【含 40px 内边距】的整栏宽，右栏内容实际 280px；
       写 300px 时内容只剩 260px，4:5 素材卡会挤成一条。 */
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 100%;
}

.scm-sd-zone {
    padding: 16px 20px 20px;
    min-width: 0;
}

/* 右栏灰底 + 左侧分隔线，贯到底 */
.scm-sd-zone--aside {
    background: #f8fafc;
    border-left: 1px solid #eef2f6;
}

.scm-sd-zt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.scm-sd-zt h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #334155;
}

.scm-sd-zt .tick,
.scm-sd-vrhd .tick {
    width: 3px;
    height: 13px;
    background: #41b584;
    border-radius: 2px;
    flex: none;
}

/* 12 栏栅格：跟平台其他抽屉一致的字段密度 */
.scm-sd-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 11px 14px;
}

.scm-sd-f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.scm-sd-f.c12 { grid-column: span 12; }
.scm-sd-f.c8 { grid-column: span 8; }
.scm-sd-f.c5 { grid-column: span 5; }
.scm-sd-f.c4 { grid-column: span 4; }
.scm-sd-f.c3 { grid-column: span 3; }

.scm-sd-f > label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.scm-sd-f > label .req { color: #e2564a; }

.scm-sd-f > label .why {
    font-weight: 400;
    font-size: 11px;
    color: #94a3b8;
}

/* 字段底下那行小字说明（波段「这个季节共 N 个」这类）。
   放 label 里会跟 * 挤一行，所以单独一行挂在控件下面。 */
.scm-sd-hint {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
}

.scm-sd-f input,
.scm-sd-f select,
.scm-sd-f textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 7px 10px;
}

.scm-sd-f textarea {
    resize: vertical;
    line-height: 1.6;
}

.scm-sd-f input:focus,
.scm-sd-f select:focus,
.scm-sd-f textarea:focus {
    outline: none;
    border-color: #41b584;
    box-shadow: 0 0 0 3px rgba(65, 181, 132, .16);
}

.scm-sd-f select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* 款号预览：9 位一位一格。
   🚫 别让每位底下各挂说明文字 —— 2 个汉字的说明比 1 个字符宽，会把格子撑成
      两位宽（用户 2026-07-30 的「季节/品类占了两位」）。说明统一放 .legend 一行。 */
.scm-sd-codebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 6px 9px;
}

.scm-sd-codebox .code {
    display: flex;
    align-items: center;
}

.scm-sd-codebox .ch {
    /* 等宽格子 = 一位就是一位，9 个格子连起来读得出是个 9 位码 */
    width: 15px;
    text-align: center;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #1e293b;
    cursor: default;
}

.scm-sd-codebox .ch.ph { color: #cbd5e1; }

.scm-sd-codebox .legend {
    font-size: 10.5px;
    color: #94a3b8;
}

/* ── 颜色与尺码 ──
   🚫 不做交叉表：业务上不存在取消单个 SKU，SKU 恒为「色 × 码」满格。 */
.scm-sd-vr {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.scm-sd-vrhd {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}

.scm-sd-vrhd h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #334155;
}

.scm-sd-vrhd .total {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: #2f7f5f;
    background: rgba(65, 181, 132, .12);
    padding: 3px 10px;
    border-radius: 11px;
    font-variant-numeric: tabular-nums;
}

.scm-sd-vrline {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.scm-sd-vrline + .scm-sd-vrline { margin-top: 12px; }

/* 计数贴着标题，🚫 别用 margin-left:auto 甩到行尾 —— 通栏后会离标题一整屏 */
.scm-sd-vrlab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.scm-sd-vrlab > label {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit;
}

.scm-sd-vrlab .n {
    font-weight: 400;
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* 尺码组下拉贴在行尾、无边框：它是切换器不是要填的空，
   长得像输入框反而让人以为漏填了东西。 */
.scm-sd-selbare {
    margin-left: auto;
    width: auto;
    max-width: 190px;
    border: 0;
    background: transparent;
    padding: 1px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #2f7f5f;
    cursor: pointer;
    border-radius: 4px;
}

.scm-sd-selbare:hover,
.scm-sd-selbare:focus {
    background: rgba(65, 181, 132, .12);
    outline: none;
    box-shadow: none;
}

/* 明细框：tag 和输入框在同一条会换行的流里，整框当输入框用；
   能往下长任意多行，🚫 不能挤成横向滚动。 */
.scm-sd-picked {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 6px;
    min-height: 36px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
}

.scm-sd-picked:focus-within {
    border-color: #41b584;
    box-shadow: 0 0 0 3px rgba(65, 181, 132, .16);
    background: #fff;
}

/* display:contents —— 让 tag 和输入框排进同一条流，
   🚫 别改成普通 div，那样 tag 会被挤成独立一行。 */
.scm-sd-clist,
.scm-sd-szrow {
    display: contents;
}

.scm-sd-tagin {
    flex: 1;
    min-width: 110px;
    width: auto;
    border: 0;
    background: transparent;
    padding: 2px 1px;
    font-size: 12.5px;
    color: #1e293b;
}

.scm-sd-tagin:focus {
    outline: none;
    box-shadow: none;
}

.scm-sd-tagin::placeholder { color: #94a3b8; }

.scm-sd-crow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 3px 4px 3px 8px;
    background: #fff;
    font-size: 12px;
    max-width: 180px;
}

.scm-sd-crow .sw {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .16);
    flex: none;
}

.scm-sd-crow .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-sd-crow .code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
    color: #94a3b8;
    flex: none;
}

.scm-sd-crow .del {
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 3px;
    flex: none;
    border-radius: 50%;
}

.scm-sd-crow .del:hover {
    color: #e2564a;
    background: rgba(226, 86, 74, .12);
}

.scm-sd-empty {
    font-size: 11.5px;
    color: #94a3b8;
}

/* 尺码 chip 按正常 tag 宽度走，🚫 不撑满 */
.scm-sd-szchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    padding: 3px 9px;
    min-width: 30px;
    font-size: 11.5px;
    cursor: pointer;
    background: #fff;
    color: #64748b;
    user-select: none;
    white-space: nowrap;
}

.scm-sd-szchip:hover {
    border-color: #41b584;
    color: #2f7f5f;
}

.scm-sd-szchip.on {
    border-color: #41b584;
    background: #41b584;
    color: #fff;
    font-weight: 600;
}

/* 颜色候选下拉 */
/* 单行输入 + 候选弹层（设计师）：弹层绝对定位要有个 relative 的锚 */
.scm-sd-ac {
    position: relative;
}

.scm-sd-alert {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #f0c36d;
    border-left: 3px solid #e8a33d;
    border-radius: 4px;
    background: #fdf6e7;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8a5b12;
}

.scm-sd-acpop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 3px);
    z-index: 30;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
    max-height: 228px;
    overflow-y: auto;
    padding: 4px;
    display: none;
}

.scm-sd-acpop.is-open { display: block; }

.scm-sd-acpop .hd {
    font-size: 10.5px;
    color: #94a3b8;
    padding: 5px 7px 3px;
    letter-spacing: .03em;
    position: sticky;
    top: 0;
    background: #fff;
}

.scm-sd-acpop .op {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
}

.scm-sd-acpop .op:hover,
.scm-sd-acpop .op.is-hl { background: rgba(65, 181, 132, .12); }

.scm-sd-acpop .op .sw {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .16);
    flex: none;
}

.scm-sd-acpop .op .nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-sd-acpop .op .meta {
    margin-left: auto;
    font-size: 10.5px;
    color: #94a3b8;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.scm-sd-acpop .op.is-new {
    color: #2f7f5f;
    font-weight: 600;
}

.scm-sd-acpop .op.is-new .sw {
    border-style: dashed;
    background: #f8fafc;
}

/* ── 右栏区块 ── */
.scm-sd-band { margin-bottom: 14px; }
.scm-sd-band:last-child { margin-bottom: 0; }

.scm-sd-bandhd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.scm-sd-bandhd span:first-child {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.scm-sd-rsec {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.scm-sd-rsechd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.scm-sd-rsechd span:first-child {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.scm-sd-rsechd .n {
    font-size: 10.5px;
    color: #94a3b8;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.scm-sd-note {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.55;
}

/* 保存计划：纵向进度条，节点全是「待完成」态 */
.scm-sd-tl {
    display: flex;
    flex-direction: column;
}

.scm-sd-tlnode {
    position: relative;
    padding: 0 0 12px 18px;
}

.scm-sd-tlnode:last-child { padding-bottom: 0; }

.scm-sd-tlnode::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    box-sizing: border-box;
}

.scm-sd-tlnode::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 13px;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
}

.scm-sd-tlnode:last-child::after { display: none; }

.scm-sd-tlnode .ev {
    font-size: 11.5px;
    color: #94a3b8;
}

.scm-sd-tlnode .meta {
    font-size: 10.5px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

/* 族级动作会横扫同款式所有款，跟只动本款的必须一眼分得开 */
.scm-sd-tlnode .sc {
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: 1px;
}

.scm-sd-tlnode .sc.fam {
    color: #b06a1a;
    background: rgba(240, 173, 78, .18);
}

.scm-sd-tlnode .sc.own {
    color: #64748b;
    background: #eef2f6;
}

.scm-sd-footnote {
    margin-right: auto;
    font-size: 11.5px;
    color: #94a3b8;
}

.scm-style-drawer__close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.scm-style-drawer__close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

@media (max-width: 900px) {
    .scm-sd-zones { grid-template-columns: 1fr; }

    .scm-sd-zone--aside {
        border-left: 0;
        border-top: 1px solid #eef2f6;
    }

    .scm-sd-selbare { max-width: 130px; }
}

/* ============================================================
   复制款 / 加维度：来源条、影响面板、同款切换、历史、居中弹窗
   ============================================================ */

/* 来源款条：让人一眼确认自己在复制哪一个款 */
.scm-sd-srcbar {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(65, 181, 132, .1);
    border: 1px solid #41b584;
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 14px;
}

.scm-sd-srcbar .tx { min-width: 0; flex: 1; }

.scm-sd-srcbar .cd {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: #2f7f5f;
}

.scm-sd-srcbar .nm {
    display: block;
    font-size: 12px;
    color: #475569;
}

.scm-sd-srcbar .badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #41b584;
    padding: 3px 9px;
    border-radius: 10px;
    flex: none;
}

.scm-sd-zt .hint {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
}

/* 尺码组在复制款/加维度里是死值：换整组是另一件事（族里所有款的码体系都变），
   🚫 不该藏在复制款抽屉里顺手做。 */
.scm-sd-tplfixed { margin-left: auto; }

/* 三态必须一眼分得开，🚫 别让「已在用」长得像「未选」：
     已在用（摘不掉）= 浅绿底 + 绿字 + 绿边 —— 语义是「在用」不是「禁用」
     可选未选        = 白底 + 灰边
     本次新加        = 绿实心 + 光圈
   ⚠️ 我第一版给锁定态用了浅灰底，实测跟未选态几乎分不出来：
      用户会去点已有的码、点不动、然后困惑。 */
.scm-sd-crow.is-locked {
    background: rgba(65, 181, 132, .1);
    border-color: rgba(65, 181, 132, .5);
    color: #2f7f5f;
    padding-right: 8px;
}

.scm-sd-crow.is-locked .code { color: #6aa98d; }

.scm-sd-crow.is-fresh {
    border-color: #41b584;
    background: rgba(65, 181, 132, .12);
}

.scm-sd-crow.is-fresh .nm {
    font-weight: 600;
    color: #2f7f5f;
}

.scm-sd-szchip.on.is-locked {
    background: rgba(65, 181, 132, .1);
    border-color: rgba(65, 181, 132, .5);
    color: #2f7f5f;
    cursor: default;
    font-weight: 600;
}

/* 锁形前缀：光靠颜色不够 —— 色弱用户也要能分出「摘不掉」 */
.scm-sd-szchip.on.is-locked::before,
.scm-sd-crow.is-locked .nm::before {
    content: "\1F512";
    font-size: 8.5px;
    margin-right: 3px;
    opacity: .55;
}

.scm-sd-szchip.on.is-fresh {
    box-shadow: 0 0 0 2px rgba(65, 181, 132, .28);
}

/* 加色加尺码是族级动作，这条账不摆出来用户会以为只动了手上这一个款 */
.scm-sd-impact {
    display: none;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.6;
    color: #b06a1a;
    background: rgba(240, 173, 78, .14);
    border-left: 2px solid #f0ad4e;
    padding: 6px 9px;
    border-radius: 0 3px 3px 0;
}

.scm-sd-impact.is-on { display: block; }

.scm-sd-impactbox {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.scm-sd-impactbox .hd {
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.scm-sd-impactbox .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
}

.scm-sd-impactbox .row + .row { border-top: 1px solid #eef2f6; }

.scm-sd-impactbox .row .cd {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.scm-sd-impactbox .row .nm {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
}

.scm-sd-impactbox .row .st {
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 9px;
    flex: none;
    color: #64748b;
    background: #eef2f6;
}

.scm-sd-impactbox .row .n {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    flex: none;
    font-size: 12px;
}

.scm-sd-impactbox .total {
    padding: 9px 12px;
    background: rgba(65, 181, 132, .12);
    border-top: 1px solid #41b584;
    font-size: 12.5px;
    font-weight: 700;
    color: #2f7f5f;
    display: flex;
}

.scm-sd-impactbox .total .n {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.scm-sd-empty-box {
    padding: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
}

/* 同款式下的款：点一下换过去，不用退出去重开抽屉 */
.scm-sd-fitems {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scm-sd-fitem {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 7px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    width: 100%;
}

.scm-sd-fitem:hover { border-color: #41b584; }

.scm-sd-fitem .tx { min-width: 0; flex: 1; }

.scm-sd-fitem .cd {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    display: block;
    color: #1e293b;
}

.scm-sd-fitem .sub {
    font-size: 10.5px;
    color: #94a3b8;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-sd-fitem.is-cur {
    border-color: #41b584;
    background: rgba(65, 181, 132, .1);
    cursor: default;
}

.scm-sd-fitem.is-cur .cd { color: #2f7f5f; }

.scm-sd-fitem .now {
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    background: #41b584;
    padding: 1px 5px;
    border-radius: 7px;
    flex: none;
}

/* 历史的族/本款过滤：两边本来是两个 objectId，合并显示后必须能拆回去看 */
.scm-sd-tlfilter {
    display: flex;
    gap: 3px;
    margin-left: auto;
}

.scm-sd-tlfilter button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 10.5px;
    color: #94a3b8;
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 8px;
}

.scm-sd-tlfilter button.is-on {
    background: rgba(65, 181, 132, .12);
    color: #2f7f5f;
    font-weight: 700;
}

.scm-sd-tlnode.is-hide { display: none; }

/* 过滤后最后一条要收尾，否则那条竖线会往下悬空一截 */
.scm-sd-tlnode.is-end::after { display: none; }
.scm-sd-tlnode.is-end { padding-bottom: 0; }

.scm-sd-tlnode.is-done::before {
    background: #41b584;
    border-color: #41b584;
}

.scm-sd-tlnode.is-done .ev { color: #475569; font-weight: 600; }
.scm-sd-tlnode.is-done .meta { color: #94a3b8; }

/* 两段切换：加颜色 / 加尺码 */
.scm-sd-segmented {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}

.scm-sd-segmented button {
    border: 0;
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    color: #64748b;
    cursor: pointer;
    padding: 6px 16px;
}

.scm-sd-segmented button + button { border-left: 1px solid #cbd5e1; }

.scm-sd-segmented button.is-on {
    background: #41b584;
    color: #fff;
    font-weight: 600;
}

/* ── 居中弹窗（加色 / 加尺码）── */
.scm-style-modal {
    position: fixed;
    z-index: 1056;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.scm-style-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.scm-style-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity .2s ease;
}

.scm-style-modal.is-open .scm-style-modal__backdrop { opacity: 1; }

.scm-style-modal__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 660px;
    max-width: 94vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .24);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.scm-style-modal.is-open .scm-style-modal__panel {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.scm-style-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
}

/* ── 详情页的颜色尺码（只读）──
   🚫 详情页是只读审计视图（D30 T1–T5）：明细框不要输入框的聚焦态，
      也不要看着像可点 —— 免得用户在这儿找不到"加"的入口反复试。 */
.scm-sd-picked--ro {
    background: #fff;
    border-style: dashed;
    cursor: default;
}

.scm-sd-picked--ro:focus-within {
    border-color: #cbd5e1;
    box-shadow: none;
    background: #fff;
}

.scm-sd-picked--ro .scm-sd-szchip { cursor: default; }

/* 停用的维度：照实标出来但不算进合计（它们不再生成新 SKU） */
.scm-sd-crow.is-off {
    background: #f8fafc;
    border-style: dashed;
    color: #94a3b8;
}

.scm-sd-crow.is-off .nm { text-decoration: line-through; }

.scm-sd-szchip.is-off {
    border-style: dashed;
    color: #cbd5e1;
    text-decoration: line-through;
    cursor: default;
}

.scm-sd-skutotal {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: #2f7f5f;
    background: rgba(65, 181, 132, .12);
    padding: 3px 10px;
    border-radius: 11px;
    font-variant-numeric: tabular-nums;
}

/* 行内动作的不可用态：看得见但点不动，鼠标悬停给原因。
   🚫 别直接隐藏 —— 用户会以为功能没做，而不是"这一行不满足条件"。 */
.rowacts .act.is-disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    text-decoration: none;
}

/* ── 上传区（acme.upload.js）──
   AcmeUpload 会把触发元素包一层 .webuploader-pick 并盖一个透明 file input，
   ⚠️ 所以按钮必须是【定尺寸的块】，🚫 不能靠内容撑开 —— 否则热区对不上按钮。 */
.scm-sd-uploader {
    position: relative;
    display: inline-block;
}

.scm-sd-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 30px;
    padding: 0 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
}

.scm-sd-pick:hover:not(:disabled) {
    border-color: #41b584;
    color: #2f7f5f;
    background: rgba(65, 181, 132, .08);
}

.scm-sd-pick:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    border-style: solid;
}

/* AcmeUpload 注入的包装层要跟按钮同尺寸，否则点击热区会飘 */
.scm-sd-uploader .webuploader-pick {
    padding: 0;
    background: transparent;
    border-radius: 6px;
}

.scm-sd-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.scm-sd-files:empty { display: none; }

.scm-sd-file {
    position: relative;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

/* 图片：4:5 缩略卡（跟物料页的图片卡节奏一致） */
.scm-sd-file.is-img {
    width: 60px;
    aspect-ratio: 4 / 5;
}

.scm-sd-file.is-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 附件：显示文件名 —— 🚫 只给 URL 用户猜不出这是什么文件 */
.scm-sd-file:not(.is-img) {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 4px 4px 8px;
    font-size: 11.5px;
}

.scm-sd-file .fn {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
}

.scm-sd-file .del {
    border: 0;
    background: rgba(255, 255, 255, .88);
    color: #64748b;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
}

.scm-sd-file.is-img .del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}

.scm-sd-file .del:hover { color: #e2564a; }

/* ══════════════════════════════════════════════════════════
   详情即编辑 + 行操作菜单（2026-07-30）
   ══════════════════════════════════════════════════════════ */

/* 🔒 锁定字段：纯文本 + 锁标，🚫 不用 <input disabled>。
   灰掉的输入框读起来像"坏了"，纯文本读起来像"这是事实"。
   ⚠️ min-height 跟输入框的 32px 对齐，否则同一行里锁定项和可改项会错位。 */
.scm-sd-fact {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 2px;
    font-size: 13px;
    color: #1e293b;
}

.scm-sd-fact .sub {
    font-size: 11px;
    color: #94a3b8;
}

.scm-sd-fact.is-empty { color: #94a3b8; }

/* 说明性提示：比 .scm-sd-alert 轻，用来讲"为什么这块只读"而不是报错 */
.scm-sd-alert--quiet {
    border-color: #e2e8f0;
    border-left-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

.scm-sd-vradd {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 状态流转动作条 ──
   走不通的动作是 <span class="sa is-disabled">：看得见、点不动、旁边写清等谁。
   🚫 别用 <button disabled> —— 禁用按钮不触发 hover，原因就没地方露出来。 */
.scm-sd-statusacts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
}

.scm-sd-statusacts .sa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

.scm-sd-statusacts .sa:hover { border-color: #94a3b8; background: #f8fafc; }

.scm-sd-statusacts .sa--primary {
    border-color: #2f6d4f;
    background: #2f6d4f;
    color: #fff;
}

.scm-sd-statusacts .sa--primary:hover { background: #275b42; border-color: #275b42; }

/* 停用是破坏性动作：🚫 不能和"启用/推进"共用绿色，扫一眼要能分出来 */
.scm-sd-statusacts .sa--danger {
    border-color: #e6b1ab;
    background: #fff;
    color: #b4392c;
}

.scm-sd-statusacts .sa--danger:hover { background: #fdf3f2; border-color: #d98a80; }

.scm-sd-statusacts .sa.is-disabled {
    border-style: dashed;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.scm-sd-statusacts .sa .why {
    font-size: 11px;
    font-weight: 400;
    opacity: .85;
}

.scm-sd-statusreason { margin-top: 8px; }

.scm-sd-statusreason input {
    width: 100%;
    font-size: 12px;
    padding: 6px 9px;
    border: 1px solid #e6b1ab;
    border-radius: 6px;
}

.scm-sd-minibtn {
    font: inherit;
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 5px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.scm-sd-minibtn:hover { border-color: #41b584; color: #2f8c65; }

/* 只读素材区：没有删除按钮，纯展示 */
.scm-sd-files--ro { margin-bottom: 16px; }
.scm-sd-files--ro .scm-sd-file .del { display: none; }

/* ── 行操作菜单（⋯）──
   ⚠️ 必须挂在 body 下：ag-Grid 单元格有 overflow 裁剪，放格子里弹层会被切掉。
   ⚠️ 定位由 JS 按触发元素算，所以这里只给 position: fixed 和外观。 */
.scm-rowmenu {
    position: fixed;
    z-index: 1080;
    min-width: 178px;
    max-width: 258px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
    padding: 4px;
    display: none;
}

.scm-rowmenu.is-open { display: block; }

.scm-rowmenu .mi {
    display: block;
    padding: 6px 9px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
}

.scm-rowmenu .mi:hover { background: #f1f5f9; color: #1e293b; }
.scm-rowmenu .mi.danger { color: #e2564a; }
.scm-rowmenu .mi.danger:hover { background: rgba(226, 86, 74, .1); }

/* 置灰项把原因当副标题写出来 —— 🚫 别用 title 提示：
   tooltip 必须先悬停才知道为什么点不了，菜单里有空间直接写。 */
.scm-rowmenu .mi.is-disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.scm-rowmenu .mi.is-disabled:hover { background: transparent; color: #94a3b8; }

.scm-rowmenu .mi .why {
    display: block;
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.45;
    margin-top: 1px;
    white-space: normal;
}

.scm-rowmenu .msep {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 2px;
}

/* 操作列的 ⋯ 触发器 */
.rowacts .act-more {
    font-size: 13px;
    line-height: 30px;
    color: #475569;
    min-width: 32px;
    min-height: 32px;
    padding: 1px 8px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.rowacts .act-more:hover { background: #f1f5f9; }
.rowacts .act-more.is-open { background: #e2e8f0; }

/* 就地加色加尺码的影响面板：只有真加了东西才出现（JS 控制 display）。
   🚨 它有自己的确认按钮，🚫 别跟抽屉底部那个「保存」混在一起 ——
      加色是族级动作，会给同族所有款回填 SKU，量级完全不同。 */
.scm-sd-dimpanel {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #f0c36d;
    border-left: 3px solid #e8a33d;
    border-radius: 5px;
    background: #fdf8ee;
}

.scm-sd-dimpanel .scm-sd-vradd {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #e8cfa2;
    justify-content: flex-end;
}

.scm-sd-dimpanel .scm-sd-footnote {
    margin-right: auto;
    font-size: 11.5px;
    color: #8a5b12;
}

/* 锁定的尺码 chip：看得出是"已有"而不是"选中了" */
.scm-sd-szchip.on.is-locked,
.scm-sd-szchip.is-locked {
    cursor: default;
    opacity: 1;
    border-color: var(--acme-color-primary);
    background: var(--acme-color-primary);
    color: var(--acme-color-bg-card);
}

.scm-sd-szchip.is-locked::before {
    content: "🔒";
    font-size: 8.5px;
    margin-right: 3px;
    vertical-align: 1px;
}

/* 本次待确认的尺码与已落库的锁定尺码用不同语义色。 */
.scm-sd-szchip.on.is-fresh {
    border-color: var(--acme-color-warning);
    background: var(--acme-color-bg-card);
    color: var(--acme-color-warning);
    box-shadow: var(--acme-shadow-sm);
}

/* 锁定字段的紧凑事实条。
   🚨 锁定项是几个字的短文本，🚫 别按输入框的 c3/c4 栅格各占一格 ——
      右边全是空白，整屏松散，可编辑字段反而被挤窄（2026-07-30 用户指出宽度不对）。
   ⚠️ 两条分开：「进款号」和「后台计算」是两种不同的不可改原因，
      混成一条用户会以为价格也是款号的一部分。 */
.scm-sd-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 7px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
}

.scm-sd-facts > .why {
    font-size: 10.5px;
    color: #94a3b8;
    flex: none;
}

.scm-sd-facts .fx {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12.5px;
}

.scm-sd-facts .fx i {
    font-style: normal;
    font-size: 11px;
    color: #94a3b8;
}

.scm-sd-facts .fx b {
    font-weight: 600;
    color: #1e293b;
}

/* 校验未通过的字段。
   🚨 2026-07-30 走查：校验只弹右上角一个 toast，不滚回去也不高亮，
      空表单缺 5 项要点 5 次保存。现在一次报全部 + 全部标红 + 滚到第一个。
   ⚠️ 也要覆盖颜色框 / 尺码行这种【不是表单控件】的容器 —— 它们同样是必填项，
      而且正好落在首屏外，不标出来用户根本不知道缺的是它。 */
.scm-sd-f input.scm-sd-invalid,
.scm-sd-f select.scm-sd-invalid,
.scm-sd-f textarea.scm-sd-invalid,
.scm-sd-invalid {
    border: 2px solid var(--acme-color-danger) !important;
    border-radius: var(--acme-radius-sm);
}

/* 未完成态的统计 chip。🚫 缺东西时不许用成功色 —— 「颜色或尺码未选」
   顶着一片绿，扫一眼会当成已经 OK（2026-07-30 走查原话）。 */
.scm-sd-vrhd .total.is-warn {
    color: var(--acme-color-warning);
    background: var(--acme-color-bg-card);
    border: 1px solid currentColor;
}

/* 洗唛图标条：选中洗涤方案后把这组 GB/T 8685 五要素摊开。
   🚨 中文名是主体，PNG 只是配图 —— 图挂在老库 OSS（oss-scm.ihzxy.com），
      新系统取不取得到没验证过。所以 img 失败时由 onerror 摘掉，
      🚫 别把方案含义只押在图上（「3-常规针织」四个字用户读不出洗涤要求）。 */
.scm-sd-washicons {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 9px 10px;
    border: 1px dashed var(--acme-color-border);
    border-radius: var(--acme-radius-sm);
    background: var(--acme-color-bg-base);
}

.scm-sd-washicons .note {
    width: 100%;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--acme-color-text-sub);
}

.scm-sd-washicons .ic {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 172px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--acme-color-border);
    border-radius: var(--acme-radius-sm);
    background: var(--acme-color-bg-card);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--acme-color-text-main);
}

/* 详情抽屉只高亮本次改过的字段，便于和底部变更摘要对应。 */
.scm-sd-f input.scm-sd-dirty,
.scm-sd-f select.scm-sd-dirty,
.scm-sd-f textarea.scm-sd-dirty {
    border-color: var(--acme-color-primary);
    box-shadow: var(--acme-shadow-sm);
}

.scm-sd-washicons .ic img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

/* 统一的显隐开关：🚫 别用 jQuery .toggle() —— 它会把 span 的 display 设成 block，
   事实条里的 .fx 就从一行变成竖着排。 */
.is-hidden { display: none !important; }

/* ============ 工作台聊天输入框图片上传 ============ */

/* 贴图建款不可用时的提示条。⚠️ 用 [hidden] 控制显隐，JS 只改 .hidden，
   所以这里必须显式写 display:none —— flex 会盖掉 [hidden] 的默认 display:none。 */
.scm-workspace-draft-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 8px;
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    line-height: 1.5;
}

.scm-workspace-draft-hint[hidden] { display: none; }

.scm-workspace-draft-hint__text { flex: 1 1 auto; }

.scm-workspace-draft-hint__action {
    flex: none;
    padding: 3px 10px;
    border: 1px solid #d97706;
    border-radius: 4px;
    background: transparent;
    color: #b45309;
    font-size: 12px;
    cursor: pointer;
}

.scm-workspace-draft-hint__action:hover {
    background: #d97706;
    color: #fff;
}

.scm-workspace-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 4px 8px;
}

.scm-workspace-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.scm-workspace-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scm-workspace-thumb.is-uploading {
    opacity: 0.6;
}

.scm-workspace-thumb__loading {
    color: #94a3b8;
    font-size: 18px;
}

.scm-workspace-thumb__del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    opacity: 0.8;
}

.scm-workspace-thumb__del:hover,
.scm-workspace-thumb__del:focus {
    opacity: 1;
    outline: none;
    background: rgba(15, 23, 42, 0.8);
}

.scm-workspace-thumb__del:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.scm-workspace-upload-btn {
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    background: transparent;
    color: #64748b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: color 0.15s, background 0.15s;
}

.scm-workspace-upload-btn:hover,
.scm-workspace-upload-btn:focus {
    color: #2f7f5f;
    background: #e8f6ef;
    outline: none;
}

.scm-workspace-upload-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.scm-workspace-composer__box.is-dragover {
    border-color: #41b584;
    background: #f4fdf8;
    box-shadow: 0 0 0 2px rgba(65, 181, 132, 0.15);
}

/* 聊天缩略图加载失败的占位：🚫 不要露出浏览器的破图图标 ——
   那看着像"没传上去"，而 URL 其实已经在队列里、发送时会照样带给 dify。 */
.scm-workspace-thumb.is-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scm-bg-subtle, #f3f4f6);
    border: 1px dashed var(--scm-border, #d1d5db);
}
.scm-workspace-thumb.is-broken::after {
    content: "图片";
    font-size: 11px;
    color: var(--scm-text-muted, #6b7280);
}

/* ============ 工作台聊天流图片 ============ */
.scm-workspace-message__images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.scm-workspace-message__images:first-child {
    margin-top: 0;
}
.scm-workspace-message__images .scm-workspace-thumb {
    cursor: pointer;
}
.scm-workspace-modal__panel--image {
    width: auto;
    max-width: 90vw;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.scm-workspace-modal__panel--image .scm-workspace-modal__mhead {
    position: absolute;
    top: -40px;
    right: 0;
    border: none;
    background: transparent;
}
.scm-workspace-modal__panel--image .scm-workspace-modal__close {
    color: #fff;
    font-size: 32px;
}
.scm-workspace-image-preview {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    vertical-align: bottom;
}