/* ==========================================================================
   macOS Liquid Glassmorphism Split-View 产品系列双栏选择器 (Product Series Picker)
   统一固定 16:9 尺寸卡片 + 顺畅纵向滚动 + 左侧分类目录树 + 顶部品牌与搜索栏
   ========================================================================== */

.product-series-selector {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 隐藏原生 Select */
.signal-power-config-page .product-series-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 触发器胶囊按钮 (Trigger Button) */
.signal-power-config-page .product-series-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #1d1d1f !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.signal-power-config-page .product-series-trigger:hover {
    border-color: #0071e3 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 113, 227, 0.08) !important;
}

.product-series-selector.is-open .product-series-trigger {
    border-color: #0071e3 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18) !important;
}

.product-series-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d1d1f !important;
}

.product-series-trigger-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.product-series-trigger-icon {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #86868b;
    border-bottom: 2px solid #86868b;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-series-selector.is-open .product-series-trigger-icon {
    transform: rotate(225deg) translate(-2px, -2px);
    border-color: #0071e3;
}

/* ==========================================================================
   全屏毛玻璃遮罩 (Backdrop)
   ========================================================================== */

.product-series-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    animation: pspFadeIn 0.2s ease-out !important;
}

.product-series-backdrop[hidden] {
    display: none !important;
}

@keyframes pspFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   macOS 屏幕正居中 Split-View 毛玻璃弹窗面板 (Center Popup Panel)
   ========================================================================== */

.product-series-popup {
    position: fixed !important;
    z-index: 100000 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(980px, calc(100vw - 32px)) !important;
    height: min(660px, 86vh) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 20px !important;
    background: rgba(250, 250, 252, 0.94) !important;
    backdrop-filter: blur(36px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    animation: pspCenterPop 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes pspCenterPop {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.product-series-popup[hidden] {
    display: none !important;
}

/* 顶部标题与工具栏 */
.psp-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.psp-title-brand-area {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.psp-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* 品牌分段选择器 (Brand Segmented Control) */
.psp-brand-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: rgba(120, 120, 128, 0.12);
}

.psp-seg-btn {
    border: 0 !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0.32rem 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #48484a !important;
    background: transparent !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
}

.psp-seg-btn:hover {
    color: #1d1d1f !important;
    background: rgba(255, 255, 255, 0.4) !important;
}

.psp-seg-btn.is-active {
    background: #ffffff !important;
    color: #0071e3 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04) !important;
}

/* 搜索与关闭按钮区域 */
.psp-top-right-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    max-width: 380px;
    justify-content: flex-end;
}

.psp-search-box {
    position: relative;
    width: 100%;
    min-width: 250px;
}

.psp-search-input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 2rem 0 2.2rem !important;
    font-size: 0.88rem !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1d1d1f !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
}

.psp-search-input:focus {
    background: #ffffff !important;
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.2) !important;
}

.psp-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.88rem;
    color: #86868b;
    pointer-events: none;
}

.psp-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c7c7cc;
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.psp-search-clear:hover {
    background: #8e8e93;
    transform: translateY(-50%) scale(1.08);
}

.psp-close-btn {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    outline: none !important;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.psp-close-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: #0f172a !important;
    box-shadow: none !important;
    filter: none !important;
    transform: scale(1.06) !important;
}

.psp-close-btn:active {
    transform: scale(0.94) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.psp-close-btn svg {
    display: block !important;
    pointer-events: none !important;
}

/* ==========================================================================
   双栏主体区域 (Split Body View)
   ========================================================================== */

.psp-split-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* 左侧分类目录树栏 (Sidebar) */
.psp-sidebar-tree {
    width: 200px;
    flex-shrink: 0;
    background: rgba(243, 244, 246, 0.65);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    padding: 0.75rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
}

.psp-sidebar-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.5rem 0.4rem;
}

/* 分类目录树项按钮 */
.psp-tree-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.45rem 0.65rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #374151 !important;
    font-family: inherit !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.psp-tree-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1d1d1f !important;
}

.psp-tree-item.is-active {
    background: #0071e3 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25) !important;
}

.psp-tree-title {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psp-tree-count {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: #64748b;
    font-weight: 600;
}

.psp-tree-item.is-active .psp-tree-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* 右侧产品卡片内容区 (Main Content) */
.psp-main-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.1rem 1.1rem;
    background: rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
}

.psp-content-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.psp-current-cat-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1d1d1f;
}

/* ==========================================================================
   矩形网格容器（固定高度、开启顺畅滚动、绝不拉伸折叠）
   ========================================================================== */

.product-series-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 4px 2px 12px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   统一固定尺寸的 16:9 Apple 现代硬件媒体卡片 (Fixed 16:9 Media Cards)
   ========================================================================== */

.product-series-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

.product-series-card[hidden],
.product-series-card.is-hidden {
    display: none !important;
}

.product-series-card:hover {
    border-color: #0071e3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.14) !important;
}

/* 激活选中卡片 (macOS Blue) */
.product-series-card.is-selected {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 2px #0071e3, 0 8px 24px rgba(0, 113, 227, 0.28) !important;
}

/* 16:9 比例图片区域（固定高度与 16:9 比例，绝对不折叠） */
.psc-media {
    width: 100% !important;
    height: 118px !important;
    aspect-ratio: 16 / 9 !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    flex-shrink: 0 !important;
}

.psc-image {
    width: 85% !important;
    height: 85% !important;
    object-fit: contain !important;
    transition: transform 0.25s ease !important;
}

.product-series-card:hover .psc-image {
    transform: scale(1.06) !important;
}

.psc-fallback-icon {
    font-size: 2.2rem !important;
    color: #94a3b8 !important;
    opacity: 0.8 !important;
}

/* 卡片文字与元信息区（固定高度 padding） */
.psc-body {
    padding: 0.65rem 0.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.product-series-card.is-selected .psc-body {
    background: #0071e3 !important;
    color: #ffffff !important;
}

.psc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.psc-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #1d1d1f !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.product-series-card.is-selected .psc-title {
    color: #ffffff !important;
}

/* 产品标题右侧点间距胶囊 */
.psc-pitch-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    background: rgba(59, 130, 246, 0.1) !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}

.psc-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    gap: 4px !important;
}

/* 徽章 Badge */
.psc-badge {
    display: inline-block !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #48484a !important;
}

.psc-badge-indoor {
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
}

.psc-badge-outdoor {
    background: rgba(255, 149, 0, 0.12) !important;
    color: #c2410c !important;
}

/* 推荐尺寸胶囊 */
.psc-size-tag {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* 选中项对比度优化 */
.product-series-card.is-selected .psc-badge,
.product-series-card.is-selected .psc-badge-indoor,
.product-series-card.is-selected .psc-badge-outdoor {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.product-series-card.is-selected .psc-pitch-tag,
.product-series-card.is-selected .psc-size-tag {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   深色模式 (macOS Dark Glassmorphism)
   ========================================================================== */

[data-theme="dark"] .signal-power-config-page .product-series-trigger {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .product-series-popup {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .psp-top-header {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .psp-sidebar-tree {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .psp-tree-item {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .psp-tree-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .psp-tree-item.is-active {
    background: #0284c7 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .psp-modal-title,
[data-theme="dark"] .psp-current-cat-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .psp-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .psp-close-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .psp-search-input {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .psp-brand-segmented {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .psp-seg-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .psp-seg-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .psp-seg-btn.is-active {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .product-series-card {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .psc-media {
    background: rgba(15, 23, 42, 0.6) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .psc-body {
    background: rgba(30, 41, 59, 0.8) !important;
}

[data-theme="dark"] .psc-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .psc-pitch-tag {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .product-series-card.is-selected .psc-pitch-tag {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .product-series-card.is-selected .psc-body {
    background: #0284c7 !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .product-series-popup {
        width: calc(100vw - 16px) !important;
        height: 90vh !important;
    }
    .psp-split-body {
        flex-direction: column !important;
    }
    .psp-sidebar-tree {
        width: 100% !important;
        height: 110px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .psp-tree-item {
        width: auto !important;
    }
}

/* ==========================================================================
   自定义产品命名 macOS 风格模态弹窗 (Custom Product Name Prompt Modal)
   ========================================================================== */

.custom-prod-modal-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100005 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.custom-prod-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.custom-prod-modal-dialog {
    position: relative !important;
    z-index: 2 !important;
    width: min(420px, calc(100vw - 32px)) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif !important;
    overflow: hidden !important;
    animation: pspCenterPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.custom-prod-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.85rem 1.1rem !important;
    background: rgba(248, 249, 250, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.custom-prod-modal-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.custom-prod-modal-close {
    border: 0 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    transition: all 0.15s ease !important;
}

.custom-prod-modal-close:hover {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #1d1d1f !important;
}

.custom-prod-modal-body {
    padding: 1.1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.custom-prod-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.custom-prod-input {
    width: 100% !important;
    height: 38px !important;
    padding: 0 0.85rem !important;
    font-size: 0.9rem !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.18s ease !important;
}

.custom-prod-input:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}

.custom-prod-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.6rem !important;
    padding: 0.75rem 1.1rem !important;
    background: rgba(248, 249, 250, 0.85) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.custom-prod-btn {
    border: 0 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.custom-prod-btn-cancel {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
}

.custom-prod-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
}

.custom-prod-btn-confirm {
    background: #0071e3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25) !important;
}

.custom-prod-btn-confirm:hover {
    background: #0077ed !important;
}

[data-theme="dark"] .custom-prod-modal-dialog {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .custom-prod-modal-header,
[data-theme="dark"] .custom-prod-modal-footer {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .custom-prod-modal-title,
[data-theme="dark"] .custom-prod-label {
    color: #f8fafc !important;
}

[data-theme="dark"] .custom-prod-input {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   产品选型卡片内部紧凑参数栏 (SPC Enhancement Controls)
   ========================================================================== */

.spc-enhancement-bar {
    display: flex !important;
    align-items: center !important;
    gap: 1.6rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.85rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.spc-ctrl-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.spc-ctrl-label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.spc-segmented-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(120, 120, 128, 0.1) !important;
    padding: 3px !important;
    border-radius: 8px !important;
    gap: 2px !important;
}

.spc-seg-opt {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #48484a !important;
    padding: 0.3rem 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    line-height: 1.25 !important;
    transition: all 0.16s ease !important;
    user-select: none !important;
}

.spc-seg-opt:hover {
    color: #1d1d1f !important;
}

.spc-seg-opt.is-active {
    background: #ffffff !important;
    color: #0071e3 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .spc-enhancement-bar {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .spc-ctrl-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .spc-segmented-control {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .spc-seg-opt {
    color: #94a3b8 !important;
}

[data-theme="dark"] .spc-seg-opt:hover {
    color: #ffffff !important;
}

[data-theme="dark"] .spc-seg-opt.is-active {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

/* 选型 4 列自适应网格 */
.spc-specs-4col-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

.spc-specs-4col-grid label {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.35rem !important;
}

@media (max-width: 768px) {
    .spc-specs-4col-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 🍎 macOS 风格标准向下滑动下拉组件 & 单值只读胶囊 */
.spc-specs-4col-grid > div,
.spc-country-select-row > div,
.spc-routing-grid > div,
.spc-power-fields-group .form-grid > div,
.apple-filter-card,
.form-grid > div {
    position: relative !important;
}

.has-open-select,
div:has(> .spc-apple-select-wrapper.is-open),
.spc-specs-4col-grid > div:has(.spc-apple-select-wrapper.is-open),
.spc-specs-4col-grid > div.has-open-select,
.spc-country-select-row > div:has(.spc-apple-select-wrapper.is-open),
.spc-country-select-row > div.has-open-select,
.spc-routing-grid > div:has(.spc-apple-select-wrapper.is-open),
.spc-routing-grid > div.has-open-select,
.apple-filter-card:has(.spc-apple-select-wrapper.is-open),
.apple-filter-card.has-open-select,
.form-grid > div:has(.spc-apple-select-wrapper.is-open),
.form-grid > div.has-open-select,
.form-grid4 > div:has(.spc-apple-select-wrapper.is-open),
.form-grid4 > div.has-open-select,
.spc-section-card:has(.spc-apple-select-wrapper.is-open),
.spc-section-card.has-open-select,
.spc-section-card.has-open-dropdown {
    z-index: 1000 !important;
    overflow: visible !important;
}

/* 🔒 强制保护主滚动容器，绝不被任何 has-open-select 规则覆盖 */
.form-section,
.output-section,
.signal-power-config-page .results-active .form-section,
.signal-power-config-page .results-active .output-section,
body.spc-results-active .form-section,
body.spc-results-active .output-section,
.modal-body {
    overflow-y: auto !important;
}

.spc-apple-select-wrapper {
    position: relative !important;
    width: 100% !important;
}

.spc-apple-select-wrapper.is-open {
    z-index: 1050 !important;
}

.spc-apple-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 38px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: #0f172a !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.spc-apple-select-trigger:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

.spc-apple-select-wrapper.is-open .spc-apple-select-trigger {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

.spc-apple-select-wrapper.is-disabled .spc-apple-select-trigger {
    opacity: 0.6 !important;
    background: #f1f5f9 !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

.spc-apple-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.spc-apple-select-arrow {
    color: #64748b !important;
    font-size: 0.72rem !important;
    margin-left: 6px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.spc-apple-select-wrapper.is-open .spc-apple-select-arrow {
    transform: rotate(180deg) !important;
}

.spc-apple-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08) !important;
    padding: 4px !important;
    z-index: 99999 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    display: none !important;
    box-sizing: border-box !important;
}

.spc-apple-dropdown-menu.drop-up {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}

.spc-apple-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.spc-apple-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.spc-apple-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 999px;
}
.spc-apple-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.spc-apple-select-wrapper.is-open .spc-apple-dropdown-menu {
    display: block !important;
    animation: spcAppleMenuFade 0.14s ease-out !important;
}

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

.spc-apple-option-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    font-size: 0.84rem !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    user-select: none !important;
}

.spc-apple-option-item:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
}

.spc-apple-option-item.is-selected {
    font-weight: 600 !important;
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
}

.spc-apple-option-item.is-selected:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
}

.spc-apple-check {
    font-size: 0.8rem !important;
    color: #0071e3 !important;
    visibility: hidden !important;
}

.spc-apple-option-item.is-selected .spc-apple-check {
    visibility: visible !important;
}

.spc-apple-option-item:hover .spc-apple-check {
    color: #ffffff !important;
}

/* 🟢 单值固定只读胶囊 */
.spc-single-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 10px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03) !important;
}

.spc-single-pill .spc-pill-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
    flex-shrink: 0 !important;
}

/* 暗黑模式 */
[data-theme="dark"] .spc-apple-select-trigger {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .spc-apple-select-wrapper.is-disabled .spc-apple-select-trigger {
    background: #0f172a !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .spc-apple-dropdown-menu {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .spc-apple-option-item {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .spc-apple-option-item.is-selected {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .spc-single-pill {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   Cabinet & Screen 极简工程布局样式 (对标 distributor-price)
   ========================================================================== */

.quote-layout-mode-compact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.quote-layout-mode-compact input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: #0071e3;
}

.quote-field-spacer {
    min-height: 1px;
    pointer-events: none;
}

/* ==========================================================================
   macOS 苹果风格多箱体智能混拼容器 (Multi Cabinet macOS Style System)
   ========================================================================== */

.spc-multi-card-panel {
    background: rgba(248, 250, 252, 0.75);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-top: 0.85rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.02);
}

.spc-multi-dim-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0;
}

.spc-multi-field-box label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
}

.spc-multi-input-control {
    width: 100%;
    height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-multi-input-control:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16);
    background: #ffffff;
}

.spc-multi-input-control.is-readonly {
    background: rgba(241, 245, 249, 0.85);
    color: #0f172a;
    border-color: rgba(226, 232, 240, 0.9);
    cursor: default;
    user-select: text;
}

/* macOS 风格操作工具栏 */
.spc-multi-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0 0.5rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 0.6rem;
}

.spc-multi-btn-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spc-multi-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    background: #ffffff;
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-multi-btn-add:hover {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.spc-multi-btn-add:active {
    transform: scale(0.98);
    background: #f1f5f9;
}

/* 模式 1: 重新计算按钮 (Emerald Green 商务科技绿) */
.spc-multi-btn-recalc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 11px;
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-multi-btn-recalc:hover {
    background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.38);
}

.spc-multi-btn-recalc:active {
    transform: scale(0.98);
}

/* 模式 2: 智能混拼按钮 (Royal Blue 智能极光蓝) */
.spc-multi-btn-smart {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-multi-btn-smart:hover {
    background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.42);
}

.spc-multi-btn-smart:active {
    transform: scale(0.98);
}

/* 兼容旧 calc class */
.spc-multi-btn-calc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    background: linear-gradient(180deg, #0077ED 0%, #0062C4 100%);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 119, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-multi-btn-calc:hover {
    background: linear-gradient(180deg, #0082FB 0%, #006CD9 100%);
    box-shadow: 0 4px 10px rgba(0, 119, 237, 0.4);
}

.spc-multi-btn-calc:active {
    transform: scale(0.98);
}

.spc-multi-toolbar-tip {
    font-size: 0.73rem;
    color: #64748b;
    margin-top: -4px;
    margin-bottom: 8px;
    padding-left: 2px;
    font-weight: 500;
    line-height: 1.3;
}

.spc-multi-badge-coverage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
    transition: all 0.2s ease;
}

.spc-multi-badge-coverage.is-diff {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.25);
}

/* 多箱体表格与行设计 (2:1:1 黄金比例，macOS 原生等高严格对齐) */
.spc-multi-table-header {
    display: grid;
    grid-template-columns: 24px 2fr 1fr 1fr;
    gap: 10px;
    padding: 0 10px 5px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-sizing: border-box;
}

.spc-multi-row-card {
    display: grid;
    grid-template-columns: 24px 2fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 10px;
    padding: 6px 10px;
    margin-bottom: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.spc-multi-row-card.is-main-row {
    border-color: rgba(0, 113, 227, 0.35);
    background: #fbfdff;
}

.spc-multi-row-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.spc-multi-row-card.is-main-row:hover {
    border-color: #0071e3;
}

/* 主箱体单选切换器 (Interactive Main/Default Switcher) */
.spc-main-radio-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    position: relative;
    outline: none;
}

.spc-main-radio-btn:hover {
    border-color: #0071e3;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.spc-main-radio-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: block;
}

.spc-multi-row-card.is-main-row .spc-main-radio-btn {
    border-color: #0071e3;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.2);
}

.spc-multi-row-card.is-main-row .spc-main-radio-inner {
    width: 10px;
    height: 10px;
    background-color: #0071e3 !important;
}

/* 规格选择容器与 DEFAULT 徽章定位 */
.spc-multi-spec-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.spc-multi-spec-cell .cabinet-size-selector {
    flex: 1;
    min-width: 0;
}

/* 主箱体标识徽章 (Default / Main Cabinet Badge) */
.spc-main-cabinet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    border: 1px solid rgba(0, 113, 227, 0.25);
    margin-left: 2px;
    letter-spacing: 0.2px;
    vertical-align: middle;
    flex-shrink: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-theme="dark"] .spc-main-cabinet-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
}

[data-theme="dark"] .spc-main-radio-btn {
    border-color: #475569;
    background: #1e293b;
}

[data-theme="dark"] .spc-main-radio-btn:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .spc-multi-row-card.is-main-row .spc-main-radio-btn {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .spc-multi-row-card.is-main-row .spc-main-radio-inner {
    background-color: #38bdf8 !important;
}

/* 主箱体行不可删除：隐藏删除按钮，仅显示面积 */
.spc-multi-row-card.is-main-row .spc-multi-delete-btn {
    display: none !important;
}

.spc-multi-row-card.is-main-row .spc-multi-action-group {
    justify-content: flex-end;
}


.spc-multi-row-color-indicator {
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background-color: transparent;
    transition: background-color 0.2s ease;
    justify-self: center;
}

.spc-multi-row-card .cabinet-size-selector {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.spc-multi-row-card .cabinet-size-trigger {
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 7px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.spc-multi-row-card .cabinet-size-trigger:hover {
    border-color: #0071e3 !important;
    background: #fbfdff !important;
}

.spc-multi-select-control {
    width: 100%;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 9px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 7px;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.spc-multi-select-control:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.spc-multi-qty-input-control {
    width: 100%;
    height: 35px !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    text-align: center;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 7px;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.spc-multi-qty-input-control:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.spc-multi-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    height: 35px;
    box-sizing: border-box;
}

.spc-multi-area-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 3px 7px;
    border-radius: 5px;
    white-space: nowrap;
    line-height: 1;
    min-width: 54px;
    text-align: center;
    box-sizing: border-box;
}

.spc-multi-delete-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(203, 213, 225, 0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    filter: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.spc-multi-delete-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.1) !important;
    transform: scale(1.02) !important;
}

.spc-multi-delete-btn:active {
    transform: scale(0.96) !important;
    background: rgba(239, 68, 68, 0.16) !important;
}

.spc-multi-delete-btn svg {
    display: block !important;
    pointer-events: none !important;
}

[data-theme="dark"] .spc-multi-card-panel {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.8);
}

[data-theme="dark"] .spc-multi-input-control {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .spc-multi-input-control.is-readonly {
    background: rgba(15, 23, 42, 0.6);
    color: #94a3b8;
}

[data-theme="dark"] .spc-multi-row-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .spc-multi-row-card .cabinet-size-trigger,
[data-theme="dark"] .spc-multi-select-control,
[data-theme="dark"] .spc-multi-qty-input-control {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .spc-multi-area-display {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .spc-multi-delete-btn {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #64748b !important;
}

/* ==========================================================================
   macOS 苹果风格多箱体上半部分分栏+下半部分全宽布局 (Top Split & Full-Width Bottom)
   ========================================================================== */
.spc-multi-top-split {
    display: grid;
    grid-template-columns: minmax(220px, 4fr) minmax(300px, 6fr);
    gap: 1.15rem;
    align-items: stretch;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .spc-multi-top-split {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.spc-multi-inputs-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.25rem 0;
    min-width: 0;
    gap: 0.6rem;
}

.spc-multi-preview-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    min-height: 0;
}

/* 实时预览卡片 (macOS Apple Card Design，与左侧严格 1:1 等高对齐) */
.spc-multi-preview-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-sizing: border-box;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.spc-multi-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    flex-shrink: 0;
}

.spc-multi-preview-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.spc-multi-preview-title svg {
    color: #0071e3;
}

.signal-power-config-page .spc-multi-preview-actions,
.spc-multi-preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 极简 Apple 风格刷新/工具微型按钮 */
.signal-power-config-page .spc-multi-preview-tool-btn,
.spc-multi-preview-tool-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(203, 213, 225, 0.85) !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.signal-power-config-page .spc-multi-preview-tool-btn:hover,
.spc-multi-preview-tool-btn:hover {
    background: #f0f7ff !important;
    color: #0071e3 !important;
    border-color: #93c5fd !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.15) !important;
    transform: translateY(-1px) !important;
}

.signal-power-config-page .spc-multi-preview-tool-btn:active,
.spc-multi-preview-tool-btn:active {
    transform: translateY(0) !important;
}

.signal-power-config-page .spc-multi-preview-tool-btn svg,
.spc-multi-preview-tool-btn svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    stroke: currentColor !important;
}

.spc-multi-preview-viewport {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    background: #f8fafc;
    border: 1px dashed rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 4px;
    box-sizing: border-box;
}

.spc-multi-svg-container {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spc-multi-svg-container svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.04));
    transition: transform 0.2s ease;
}

/* 下半部分全宽箱体操作与明细容器 */
.spc-multi-bottom-section {
    width: 100%;
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

/* 图例统计胶囊区 */
.spc-multi-legend-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding-top: 0.1rem;
    min-height: 20px;
}

.spc-multi-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    background: #f1f5f9;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 5px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
}

.spc-multi-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* 暗黑模式适配 */
[data-theme="dark"] .spc-multi-bottom-section {
    border-top-color: rgba(51, 65, 85, 0.8);
}

/* 暗黑模式适配 */
[data-theme="dark"] .spc-multi-preview-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .spc-multi-preview-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .spc-multi-preview-title {
    color: #f8fafc;
}

[data-theme="dark"] .spc-multi-preview-viewport {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .spc-multi-legend-chip {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .spc-multi-preview-tool-btn {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

/* ==========================================================================
   🌍 国家/地区选择弹层 (Country Picker Modal & Two-Column Region Grid)
   ========================================================================== */

/* 顶部三列等宽水平完全对齐容器 */
.spc-country-select-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.spc-country-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.spc-country-field-label {
    display: block !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.spc-country-field-control {
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

/* 触发器胶囊按钮（与 Apple Select 触发器像素级高度统一） */
.spc-country-trigger-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

.spc-country-trigger-btn:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

.spc-country-trigger-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.spc-country-trigger-flag {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.spc-country-trigger-text {
    flex: 1 !important;
    text-align: left !important;
    color: #0f172a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.spc-country-trigger-arrow {
    color: #64748b !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* 弹窗遮罩背景（默认隐藏，打开时由 .is-open 强力唤出） */
.spc-country-modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
}

.spc-country-modal-backdrop.is-open {
    display: flex !important;
    animation: spcModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes spcModalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* 弹窗主卡片 */
.spc-country-modal-card {
    width: 100%;
    max-width: 960px;
    height: 640px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 弹窗头部 */
.spc-country-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.spc-country-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spc-country-modal-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #eff6ff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
}

.spc-country-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.spc-country-modal-subtitle {
    margin: 0.15rem 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

.spc-country-modal-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.06) !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    outline: none !important;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.spc-country-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    transform: scale(1.08) !important;
    box-shadow: none !important;
}

.spc-country-modal-close-btn:active {
    transform: scale(0.92) !important;
    background: rgba(239, 68, 68, 0.2) !important;
}

.spc-country-modal-close-btn svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    pointer-events: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
}

/* 搜索栏 */
.spc-country-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

.spc-country-search-icon {
    color: #94a3b8;
    flex-shrink: 0;
}

.spc-country-search-input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.spc-country-search-input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.spc-country-search-clear {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spc-country-search-clear:hover {
    color: #475569;
}

/* 两栏内容主体 */
.spc-country-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

/* 左侧大区导航侧栏 */
.spc-country-regions-sidebar {
    width: 215px !important;
    flex-shrink: 0 !important;
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    overflow-y: auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

/* 大区 Tab 按钮 - 强力重置去除一切全局 button 干扰 */
.spc-country-region-item {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}

.spc-country-region-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.spc-country-region-item.is-active {
    background: #eff6ff !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
    border-color: #bae6fd !important;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.06) !important;
}

.spc-country-region-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.spc-country-region-icon {
    font-size: 14px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.spc-country-region-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    color: inherit !important;
}

.spc-country-region-badge {
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
    color: #64748b !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}

.spc-country-region-item.is-active .spc-country-region-badge {
    background: #dbeafe !important;
    color: #0369a1 !important;
}

/* 右侧国家卡片主区域 */
.spc-country-cards-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
}

.spc-country-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

#spc_country_current_region_title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.spc-country-count-badge {
    font-size: 0.78rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* 国家网格 */
.spc-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
}

/* ====== 🌍 升级版 Apple 极简高级国家卡片 ====== */
.spc-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 10px;
    padding: 2px;
}

.spc-country-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    min-height: 74px;
    box-sizing: border-box;
}

.spc-country-card:hover {
    border-color: #94a3b8;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.spc-country-card.is-selected {
    border: 1.5px solid #0071e3 !important;
    background: #f0f7ff !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.12) !important;
}

.spc-country-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.spc-country-card-title-group {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
}

.spc-country-card-flag {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.spc-country-card-name-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.spc-country-card-name-primary {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spc-country-card.is-selected .spc-country-card-name-primary {
    color: #0071e3;
    font-weight: 700;
}

.spc-country-card-name-secondary {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spc-country-card-check {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0071e3;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spc-country-card.is-selected .spc-country-card-check {
    display: flex;
}

.spc-country-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.spc-country-badge {
    display: inline-flex;
    align-items: center;
    padding: 1.5px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.spc-country-badge--cert {
    background: #f0f7ff;
    color: #0071e3;
    border: 1px solid #dbeafe;
    font-weight: 600;
}

.spc-country-card.is-selected .spc-country-badge--cert {
    background: #ffffff;
    border-color: #bfdbfe;
}

.spc-country-badge--volt {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.spc-country-badge--theater {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    max-width: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 空结果状态 */
.spc-country-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #64748b;
}

/* 暗黑模式适配 */
[data-theme="dark"] .spc-country-field-label {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .spc-country-trigger-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .spc-country-trigger-btn:hover {
    background: #334155 !important;
    border-color: #38bdf8 !important;
}

[data-theme="dark"] .spc-country-trigger-text {
    color: #f8fafc !important;
}

[data-theme="dark"] .spc-country-modal-card {
    background: #0f172a;
    border: 1px solid #334155;
}

[data-theme="dark"] .spc-country-modal-header {
    background: #1e293b;
    border-bottom-color: #334155;
}

[data-theme="dark"] .spc-country-modal-title {
    color: #f8fafc;
}

[data-theme="dark"] .spc-country-modal-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .spc-country-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .spc-country-search-box {
    background: #1e293b;
    border-bottom-color: #334155;
}

[data-theme="dark"] .spc-country-search-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .spc-country-regions-sidebar {
    background: #0f172a;
    border-right-color: #334155;
}

[data-theme="dark"] .spc-country-region-item {
    color: #94a3b8;
}

[data-theme="dark"] .spc-country-region-item:hover {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .spc-country-region-item.is-active {
    background: #1e3a8a;
    color: #60a5fa;
    border-color: #3b82f6;
}

[data-theme="dark"] .spc-country-cards-main {
    background: #0f172a;
}

[data-theme="dark"] .spc-country-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .spc-country-card:hover {
    background: #1e293b;
    border-color: #38bdf8;
}

[data-theme="dark"] .spc-country-card-name-zh {
    color: #f8fafc;
}

[data-theme="dark"] .spc-country-card-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .spc-multi-btn-add {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

/* ==========================================================================
   ⚡ 顶部快捷认证与电压微型小胶囊 (Compact Quick Parameters)
   ========================================================================== */
.spc-quick-control-compact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
}

.spc-quick-mini-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    height: 32px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.spc-quick-mini-item:hover {
    border-color: #0071e3 !important;
    box-shadow: 0 2px 5px rgba(0, 113, 227, 0.1) !important;
}

.spc-quick-mini-label {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin: 0 !important;
    user-select: none !important;
}

.spc-quick-mini-dropdown {
    border: none !important;
    background: transparent !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   产品规格选择模态框 (Product Specification Modal)
   参考 astro-vip-unilumin-com/src/react-app/products/led/ProductSpecificationModal.tsx
   ========================================================================== */

.product-spec-modal-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100050 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.product-spec-modal-container.is-open {
    display: flex !important;
}

.product-spec-modal-container[hidden],
.product-spec-modal-container.is-hidden {
    display: none !important;
}

.product-spec-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    animation: psmFadeIn 0.2s ease-out !important;
}

@keyframes psmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.product-spec-modal-dialog {
    position: relative !important;
    z-index: 100051 !important;
    width: min(1080px, calc(100vw - 32px)) !important;
    max-height: min(720px, 90vh) !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif !important;
    animation: psmPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes psmPopIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 顶部 Header */
.psm-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.5rem !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.psm-title-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.psm-product-thumb {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 2px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.psm-product-thumb-fallback {
    width: 44px !important;
    height: 44px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 10px !important;
}

.psm-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.psm-subtitle {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

.psm-close-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-size: 14px !important;
    padding: 0 !important;
}

.psm-close-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
    transform: scale(1.06) !important;
}

/* 筛选区 Filters Bar */
.psm-filter-bar {
    padding: 0.85rem 1.5rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
}

.psm-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

.psm-filter-label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    min-width: 80px !important;
}

.psm-capsule-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.psm-capsule-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    border-radius: 100px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
}

.psm-capsule-btn:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.psm-capsule-btn.is-active {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25) !important;
}

.psm-capsule-count {
    opacity: 0.75 !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

/* 规格明细表格 Table Container */
.psm-table-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    position: relative !important;
    background: #ffffff !important;
}

.psm-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    font-size: 0.84rem !important;
}

.psm-thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.psm-thead th {
    padding: 9px 14px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.psm-thead th:first-child {
    text-align: left !important;
    padding-left: 20px !important;
}

.psm-tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
}

.psm-tbody tr:nth-child(even) {
    background: #fafbfc !important;
}

.psm-tbody tr:hover {
    background: #f0f9ff !important;
}

.psm-tbody tr.is-selected {
    background: #eff6ff !important;
    box-shadow: inset 4px 0 0 #0071e3 !important;
}

.psm-tbody td {
    padding: 10px 14px !important;
    text-align: center !important;
    color: #334155 !important;
    white-space: nowrap !important;
}

.psm-tbody td:first-child {
    text-align: left !important;
    padding-left: 20px !important;
}

.psm-model-col {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.psm-model-name {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.psm-check-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #0071e3 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.3) !important;
}

.psm-pitch-tag {
    font-weight: 700 !important;
    color: #0284c7 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
}

.psm-size-tag {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.psm-bright-tag {
    font-weight: 600 !important;
    color: #d97706 !important;
}

.psm-weight-tag {
    color: #64748b !important;
}

.psm-rate-tag {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* 底部操作栏 Footer */
.psm-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.9rem 1.5rem !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    gap: 1rem !important;
}

.psm-count-info {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

.psm-selected-summary {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    color: #1d4ed8 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.psm-selected-summary strong {
    font-weight: 700 !important;
    color: #1e40af !important;
}

.psm-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.psm-btn {
    padding: 7px 18px !important;
    border-radius: 9px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border: none !important;
    user-select: none !important;
}

.psm-btn-cancel {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.psm-btn-cancel:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.psm-btn-confirm {
    background: #0071e3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.28) !important;
}

.psm-btn-confirm:hover {
    background: #0077ed !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35) !important;
}

.spc-quick-voltage-dropdown {
    color: #166534 !important;
}

[data-theme="dark"] .spc-quick-mini-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .spc-quick-mini-item:hover {
    border-color: #38bdf8 !important;
}

[data-theme="dark"] .spc-quick-mini-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .spc-quick-mini-dropdown {
    color: #f8fafc !important;
}

[data-theme="dark"] .spc-quick-voltage-dropdown {
    color: #86efac !important;
}

/* 📐 自定义箱体预置卡片列表与分段切换样式 */
.spc-custom-preset-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    box-sizing: border-box;
    user-select: none;
}

.spc-custom-preset-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.spc-custom-preset-card.is-selected {
    background: #eff6ff !important;
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 1px #0071e3, 0 3px 8px rgba(0, 113, 227, 0.18) !important;
}

.spc-custom-preset-card .preset-size-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.spc-custom-preset-card.is-selected .preset-size-text {
    color: #0071e3;
}

.spc-custom-preset-card .preset-sub-text {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.spc-custom-preset-card.is-selected .preset-sub-text {
    color: #0284c7;
}

/* 预置库空状态 */
.spc-custom-presets-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
    font-size: 0.86rem;
}