/* =========================================================
           1. 基础布局变量与全局重置
           ========================================================= */
        :root {
            --primary-color: #aa0000;
            --primary-hover: #8a0000;
            --text-main: #2c3e50;
            --text-light: #94a3b8; 
            --border-color: #f1f5f9; 
            --header-height: 56px;   
            --footer-height: 36px;   
            --bg-sidebar: #fafafa;
        }
    
        /* 全局表单控件主题色 */
        input, textarea, select, button { font-family: inherit; }
        input::placeholder, textarea::placeholder { color: #cbd5e1; }
        input[type="radio"],
        input[type="checkbox"] {
            accent-color: var(--primary-color);
        }

        /* 优化：移除不必要的 !important，规范全屏 Flex 布局 */
        body {
            height: 100vh; height: 100dvh; width: 100vw; overflow: hidden; 
            display: flex; flex-direction: column;
            justify-content: flex-start; align-items: stretch;
            margin: 0; padding: 0; background-color: #fff;
            font-family: 'Crimson Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 0; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    
        /* 顶部导航 */
        .site-header {
            height: var(--header-height); min-height: var(--header-height); background: #fff;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 30px; border-bottom: 1px solid #f1f5f9;
            z-index: 100; box-sizing: border-box;
        }
        .header-left { display: flex; align-items: center; gap: 12px; }
        .site-logo { height: 26px; width: auto; } 
        .site-title { font-size: 15px; font-weight: 600; color: var(--text-main); letter-spacing: -0.3px; }

        /* 移动端头像菜单 — PC端隐藏 */
        .header-avatar-wrap { display: none; position: relative; }
        .header-avatar-btn {
            background: none; color: var(--text-light);
            border: 1px solid var(--border-color); border-radius: 50%;
            width: 30px; height: 30px; padding: 0;
            font-size: 12px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.25s;
        }
        .header-avatar-btn:active { border-color: var(--primary-color); color: var(--primary-color); }
        .header-user-menu {
            display: none; position: absolute; top: calc(100% + 8px); right: 0;
            background: #fff; border-radius: 0;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
            min-width: 180px; padding: 8px 0; z-index: 9999;
            animation: fadeIn 0.15s ease;
        }
        .header-user-menu.open { display: block; }
        .header-user-menu-name {
            padding: 10px 16px 8px; font-size: 13px; font-weight: 700;
            color: #1e293b; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px;
        }
        .header-user-menu-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 16px; font-size: 13px; color: #475569;
            text-decoration: none; transition: background 0.15s;
        }
        .header-user-menu-item:hover { background: #f8fafc; }
        .header-user-menu-logout { color: #ef4444; }
        .header-user-menu-logout:hover { background: #fef2f2; }
    
        .main-container { flex: 1; display: flex; overflow: hidden; width: 100%; }
    
        /* =========================================================
           2. 核心框架布局 (Stepper, Scroll, Buttons)
           ========================================================= */
        .config-main { flex: 1; display: flex; flex-direction: column; height: 100%; border-right: 1px solid #f1f5f9; position: relative; overflow: hidden; }
        
        .stepper { padding: 20px 40px 0; display: flex; gap: 20px; background: #fff; z-index: 10; flex-shrink: 0; }
        .step { flex: 1; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; font-size: 11px; color: #cbd5e1; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; cursor: pointer; }
        .step.active { border-bottom-color: var(--primary-color); color: var(--primary-color); font-weight: 700; }
    
        .config-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 30px 45px 40px; box-sizing: border-box; }
        .button-group { padding: 15px 45px; background: #fff; border-top: 1px solid #f1f5f9; display: flex; gap: 15px; z-index: 10; flex-shrink: 0; }
        
        .summary-sidebar { width: 340px; min-width: 340px; background-color: var(--bg-sidebar); padding: 35px; overflow-y: auto; height: 100%; box-sizing: border-box; }
        
        .site-footer { height: var(--footer-height); min-height: var(--footer-height); background: #fff; border-top: 1px solid #f1f5f9; padding: 0 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #94a3b8; z-index: 100; box-sizing: border-box; letter-spacing: 0.5px; flex-shrink: 0; }
    
        /* =========================================================
           3. ODM 款式网格与卡片 (电商大气风格)
           ========================================================= */
        .step-desc { font-size: 13px; color: #64748b; background: #f8fafc; padding: 14px 20px; border-left: 3px solid var(--primary-color); border-radius: 0; margin-bottom: 30px; line-height: 1.6; }
        .section-heading { font-size: 14px; border-left: 3px solid var(--primary-color); padding-left: 10px; margin-bottom: 15px; }
        
        .option-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
            gap: 30px; 
            margin-top: 20px; 
        }

        /* 定制面料卡片特殊样式 */
        .fabric-item.custom-sourcing-card {
            border: 2px dashed #cbd5e1;
            background: #fff;
        }
        .fabric-item.custom-sourcing-card:hover {
            border-color: var(--primary-color);
        }
        .fabric-item.custom-sourcing-card.selected {
            border: 2px solid var(--primary-color);
            background-color: #fff9f9;
        }
        .custom-sourcing-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            transition: all 0.4s ease;
            border-bottom: 1px dashed #e2e8f0;
        }
        .fabric-item.custom-sourcing-card:hover .custom-sourcing-img {
            background: #f1f5f9;
            color: var(--primary-color);
        }

        /* 配置面板内部的网格布局 */
        .fabric-config-row { display: flex; gap: 20px; margin-bottom: 20px; }
        .fabric-config-col { flex: 1; }

        .option-item { 
            border: 1px solid transparent; 
            background: #fff; 
            cursor: pointer; 
            position: relative; 
            border-radius: 0; 
            overflow: hidden; 
            transition: all 0.3s ease;
        }
    
        .option-item:hover { 
            transform: translateY(-6px); 
            box-shadow: 0 12px 24px rgba(0,0,0,0.08); 
        }
    
        .option-item.selected { 
            border-color: var(--primary-color); 
            background-color: #fff9f9; 
            outline: 1px solid var(--primary-color); 
        }

        .option-item.style-item.selected::before {
            content: '✓';
            position: absolute; top: 10px; left: 10px;
            width: 24px; height: 24px;
            background: var(--primary-color); color: #fff;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: bold; z-index: 10;
            box-shadow: 0 2px 6px rgba(170,0,0,0.3);
            animation: fadeIn 0.2s ease;
        }
    
        .option-img { 
            width: 100%; 
            aspect-ratio: 1 / 1; /* 默认为正方形 */
            object-fit: cover; 
            object-position: top; 
            background: #fdfdfd; 
            display: block;
            transition: transform 0.6s ease;
        }
        /* 仅 ODM 款式卡片保持 3:4 比例 */
        .style-item .option-img { 
            aspect-ratio: 3 / 4; 
        }
        .option-item:hover .option-img { transform: scale(1.06); }
    
        .option-info { padding: 16px 18px; position: relative; z-index: 2; background: inherit; }
        .option-info h4 { margin: 0 0 6px; font-size: 15px; color: var(--text-main); font-weight: 600; letter-spacing: 0.3px; }
        .option-info p { margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.5; }

        /* 面料卡片标签样式 */
        .fabric-tags-wrapper { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
        .fabric-tag-item { 
            font-size: 10px; background: #f1f5f9; color: #64748b; 
            padding: 1px 6px; border-radius: 0; font-weight: 500;
            border: 1px solid #e2e8f0; white-space: nowrap;
        }
        /* 特殊标签高亮 (可选：如识别到 '常用' 或 '推荐') */
        .fabric-tag-item.highlight { background: #fff0f0; color: var(--primary-color); border-color: #fecaca; }


        /* QA 标签交互样式 */
        .qa-badge-container {
            position: relative; cursor: help; display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; border-radius: 0; transition: all 0.3s;
        }
        .qa-badge-container:hover { background: #f8fafc; color: var(--primary-color) !important; }
        .qa-tooltip {
            position: absolute; bottom: 130%; left: 0; width: 240px; background: #1e293b; color: #fff;
            padding: 15px; border-radius: 0; font-size: 11px; line-height: 1.6;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); opacity: 0; visibility: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(10px); z-index: 100;
        }
        .qa-badge-container:hover .qa-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
        .qa-tooltip::after {
            content: ''; position: absolute; top: 100%; left: 20px;
            border: 6px solid transparent; border-top-color: #1e293b;
        }
        .qa-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .qa-item svg { color: #10b981; }

        /* =========================================================
           4. 弹窗 (Modal) - 现代大气风格
        ========================================================= */
        .details-btn { 
            position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; 
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); 
            border-radius: 50%; display: flex; align-items: center; justify-content: center; 
            cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: #64748b; 
            z-index: 5; opacity: 0; visibility: hidden; transform: scale(0.8); transition: all 0.3s ease; 
        }
        .option-item:hover .details-btn,
        .option-item.selected .details-btn { opacity: 1; visibility: visible; transform: scale(1); }
        .details-btn:hover { background: var(--primary-color); color: #fff; }
    
        .modal-overlay { 
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
            background: rgba(15, 23, 42, 0.65); 
            z-index: 9999; display: flex; align-items: center; justify-content: center; 
            opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
            backdrop-filter: blur(6px); padding: 20px;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        
        .modal-content { 
            background: #fff; border-radius: 0; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); 
            transform: scale(0.95) translateY(10px); 
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
            overflow: hidden; position: relative; display: flex; flex-direction: column;
        }
        .modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
    
        .modal-content.modal-lg { width: 100%; max-width: 960px; height: 600px; flex-direction: row; }
    
        .modal-gallery-side { flex: 1.3; background: #f1f5f9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .modal-carousel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        .modal-carousel img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
    
        .carousel-btn { 
            position: absolute; top: 50%; transform: translateY(-50%); 
            width: 44px; height: 44px; min-width: 44px; min-height: 44px; 
            padding: 0; margin: 0; border-radius: 50%;
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.5); color: #1e293b; 
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; cursor: pointer; z-index: 10; 
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
        }
        .carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); color: var(--primary-color); }
        .carousel-btn:active { transform: translateY(-50%) scale(0.95); }
        .carousel-btn.left { left: 24px; }
        .carousel-btn.right { right: 24px; }
        
        .carousel-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 10; }
        .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.2); cursor: pointer; transition: all 0.3s; box-shadow: 0 1px 2px rgba(255,255,255,0.5); }
        .carousel-dot.active { background: var(--primary-color); transform: scale(1.3); }
    
        .modal-info-side { flex: 1; padding: 40px; display: flex; flex-direction: column; overflow-y: auto; background: #fff; }
        .modal-header-simple { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
        .modal-header-simple h3 { margin: 0; font-size: 24px; color: var(--text-main); font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
        
        .modal-close-abs {
            position: absolute; top: 20px; right: 20px; z-index: 50;
            width: 36px; height: 36px; min-width: 36px; min-height: 36px; 
            padding: 0; margin: 0; border-radius: 50%;
            background: #f1f5f9; border: 1px solid transparent; color: #64748b;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; line-height: 1; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .modal-close-abs:hover { background: #fee2e2; color: #ef4444; transform: rotate(90deg); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15); }
        
        .modal-desc { font-size: 14px; color: #475569; line-height: 1.7; flex: 1; }
        .modal-desc div[style*="background:#f9f9f9"] { background: #f8fafc !important; border-radius: 0 !important; padding: 20px !important; border: 1px solid #f1f5f9; }
    
        .modal-content.modal-md { width: 100%; max-width: 640px; padding: 0; }
        .custom-modal-header { padding: 30px 35px 20px; border-bottom: 1px solid #f1f5f9; }
        .custom-modal-header h3 { margin: 0; font-size: 20px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        .custom-modal-body { padding: 30px 35px 35px; }
    
        #customRemark {
            width: 100%; height: 140px; padding: 16px; background: #fbfcfd; border: 1px solid #e2e8f0; border-radius: 0;
            font-family: inherit; font-size: 14px; color: #334155; line-height: 1.6; box-sizing: border-box; resize: none; margin-bottom: 25px;
            transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
        }
        #customRemark:focus { background: #fff; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(170, 0, 0, 0.08); outline: none; }
        #customRemark::placeholder { color: #cbd5e1; }
    
        .premium-upload-row {
            display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #fff; border: 1px dashed #cbd5e1;
            border-radius: 0; transition: all 0.3s; cursor: pointer;
        }
        .premium-upload-row:hover, .premium-upload-row.dragover { border-color: var(--primary-color); background: #fffafb; }
        .premium-upload-row.dragover { transform: scale(1.01); }
        .upload-label-group { display: flex; flex-direction: column; }
        .upload-label-main { font-size: 14px; font-weight: 600; color: #334155; }
        .upload-label-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }
    
        .modal-footer { margin-top: 30px; display: flex; justify-content: flex-end; gap: 15px; padding-top: 20px; border-top: 1px solid #f8fafc; }
        .modal-footer button { padding: 12px 28px; font-size: 14px; border-radius: 0; }
    
        @media (max-width: 768px) {
            .modal-content.modal-lg { flex-direction: column; height: auto; max-height: 85vh; overflow-y: auto; }
            .modal-gallery-side { height: 300px; flex: none; }
            .modal-info-side { padding: 25px; flex: none; }
            .modal-close-abs { top: 15px; right: 15px; background: rgba(255,255,255,0.8); }
            .carousel-btn { width: 36px; height: 36px; font-size: 14px; }
        }

        .file-list-container { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; max-height: 200px; overflow-y: auto; }
        .file-item {
            display: flex; align-items: center; justify-content: space-between; padding: 10px 15px;
            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0; transition: all 0.2s;
        }
        .file-item:hover { background: #f1f5f9; border-color: #cbd5e1; }
        .file-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }
        .file-icon {
            width: 32px; height: 32px; min-width: 32px; border-radius: 0; background: #e2e8f0; color: #64748b;
            display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; text-transform: uppercase;
        }
        .file-icon.img { background: #e0e7ff; color: #4f46e5; }
        .file-icon.pdf { background: #fee2e2; color: #ef4444; }
        .file-icon.ai { background: #fef08a; color: #ca8a04; }
        .file-details { display: flex; flex-direction: column; overflow: hidden; }
        .file-name { font-size: 13px; color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
        .file-size { font-size: 11px; color: #94a3b8; margin-top: 2px; }
        .file-remove {
            background: none; border: none; color: #94a3b8; cursor: pointer; padding: 5px; border-radius: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
        }
        .file-remove:hover { background: #fee2e2; color: #ef4444; }

        /* =========================================================
           5. 面料配置台 
           ========================================================= */
        .sub-tabs { display: flex; gap: 30px; border-bottom: 2px solid #f1f5f9; margin-bottom: 30px; }
        .sub-tab { padding: 12px 0; cursor: pointer; font-size: 13px; color: #94a3b8; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.3s; white-space: nowrap; }
        .sub-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
        .fabric-pane { display: none; }
        .fabric-pane.active { display: block; animation: fadeIn 0.4s ease; }
        .fabric-config-panel { 
            grid-column: 1 / -1; 
            margin-top: 10px; 
            margin-bottom: 10px; 
            padding: 30px; 
            background: #fffcfc; /* 显眼的微红暖色背景 */
            border: 1px solid #fecaca; /* 红色系边框 */
            border-radius: 0; 
            position: relative; 
            box-shadow: 0 10px 25px rgba(170, 0, 0, 0.06); /* 带有主色调的阴影 */
            animation: panelSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .config-arrow { 
            position: absolute; 
            top: -9px; 
            left: 40px; 
            width: 16px; 
            height: 16px; 
            background: #fffcfc; /* 与面板背景色保持一致 */
            border-top: 1px solid #fecaca; 
            border-left: 1px solid #fecaca; 
            transform: rotate(45deg); 
            transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
            z-index: 1; 
        }
        @keyframes panelSlideDown { 
            from { opacity: 0; transform: translateY(-10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }
        .config-header { margin-bottom: 20px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .config-header h4 { margin: 0; font-size: 16px; color: var(--text-main); }
        .color-palette { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); 
            gap: 15px 12px; 
        }
        .color-swatch-wrapper { 
            position: relative; /* 确保子元素绝对定位的基准 */
            display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.2s; 
        }
        .color-tag-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ef4444;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            padding: 2px 5px;
            border-radius: 0;
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
            z-index: 2;
            pointer-events: none;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .color-swatch-wrapper:hover { transform: translateY(-4px); }
        .color-swatch { 
            width: 100%; aspect-ratio: 4 / 3; border-radius: 0; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; transition: all 0.2s; 
        }
        .color-swatch-wrapper.selected .color-swatch { 
            border: 2px solid var(--primary-color); 
            box-shadow: 0 0 0 2px #fff inset, 0 4px 12px rgba(170, 0, 0, 0.15); 
        }
        .color-swatch-text { 
            font-size: 11px; color: #64748b; margin-top: 6px; text-align: center; line-height: 1.3; 
        }
        .color-swatch-wrapper.selected .color-swatch-text { color: var(--primary-color); font-weight: 600; }
        .color-swatch-code { font-weight: 700; color: #334155; }
        .color-swatch-wrapper.selected .color-swatch-code { color: var(--primary-color); }
        .fabric-notes-area { margin-top: 25px; padding-top: 20px; border-top: 1px solid #f1f5f9; }
        #fabric-remark { width: 100%; height: 80px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 0; font-family: inherit; font-size: 13px; box-sizing: border-box; resize: none; transition: border 0.3s; }
        #fabric-remark:focus { outline: none; border-color: var(--primary-color); }
    
        /* =========================================================
           6. 切换器与导航
           ========================================================= */
        .mode-switcher { display: inline-flex; background: #f1f5f9; padding: 4px; border-radius: 0; }
        .mode-option { padding: 8px 24px; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; border-radius: 0; transition: all 0.25s ease; }
        .mode-option.active { background: #fff; color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .category-nav { display: flex; gap: 35px; margin-bottom: 30px; border-bottom: 1px solid #f1f5f9; padding-bottom: 2px; overflow-x: auto; }
        .cat-item { font-size: 14px; color: #94a3b8; cursor: pointer; padding-bottom: 10px; position: relative; transition: all 0.3s; white-space: nowrap; }
        .cat-item.active { color: var(--primary-color); font-weight: 600; }
        .cat-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary-color); border-radius: 0; }
        .toggle-section { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding: 16px 20px; background: #f8fafc; border-radius: 0; border: 1px solid #f1f5f9; }
        .toggle-title { font-weight: 600; font-size: 14px; color: #475569; }
        .toggle-options label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; margin-right: 15px; }
    
        /* =========================================================
           7. 上传框与通用按钮
           ========================================================= */
        .premium-upload-box { border: 2px dashed #e2e8f0; background-color: #f8fafc; border-radius: 0; padding: 40px 20px; text-align: center; transition: all 0.3s; cursor: pointer; }
        .premium-upload-box:hover { border-color: var(--primary-color); background-color: #fffafb; }

        button {
            padding: 12px 36px;
            border-radius: 0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            /* 核心交互动画：平滑、快速 */
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            outline: none;
        }
        
        /* 上一步按钮：保持低调的次要按钮风格 */
        #prevBtn {
            background: #fff;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }
        
        #prevBtn:hover:not(:disabled) {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: var(--text-main);
            transform: translateY(-1px); /* 极轻微的上浮 */
        }
        
        #prevBtn:active:not(:disabled) {
            transform: translateY(0) scale(0.98); /* 点击时按下的触感 */
        }
        
        #prevBtn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #f1f5f9;
        }
        
        /* 暂存按钮（汇总栏顶部） */
        .draft-btn {
            background: none;
            color: #94a3b8;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            padding: 6px 10px;
            border-radius: 0;
            gap: 4px;
            transition: all 0.2s;
        }
        .draft-btn:hover {
            background: #f0fdf4;
            color: #065f46;
        }
        .draft-btn:active {
            transform: scale(0.97);
        }

        /* 下一步/提交按钮：强化品牌感 */
        #nextBtn {
            background: var(--primary-color);
            color: #fff;
            border: 1px solid var(--primary-color);
            box-shadow: 0 2px 4px rgba(170, 0, 0, 0.15); /* 淡淡的投影 */
        }
        
        #nextBtn:hover:not(:disabled) {
            background: #c00000; /* 略微加深 */
            filter: brightness(1.1); /* 稍微提亮一点点 */
            box-shadow: 0 4px 12px rgba(170, 0, 0, 0.25);
            transform: translateY(-1px);
        }
        
        #nextBtn:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
        }
        
        /* 特殊：第五步提交状态的样式增强（不再使用绿色） */
        #nextBtn.is-final {
            background: #1e293b;
            border-color: #1e293b;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
            padding-left: 45px;
            padding-right: 45px;
        }
        
        #nextBtn.is-final:hover:not(:disabled) {
            background: #0f172a;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
        }
    
        /* =========================================================
           8. 右侧侧边栏汇总细节
           ========================================================= */
        .summary-title { font-size: 14px; font-weight: 700; margin-bottom: 30px; display: block; color: #1e293b; }
        .summary-row { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 13px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 12px; align-items: center; }
        .summary-row .label { color: #64748b; }
        .summary-row .value { color: var(--text-main); font-weight: 700; text-align: right; }
        .summary-sub-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; padding-left: 12px; color: #94a3b8; }
        .summary-sub-row .value { font-weight: 500; color: #475569; }
        .placeholder-box { padding: 60px 20px; border: 1px dashed #e2e8f0; text-align: center; color: #94a3b8; font-size: 13px; background: #fff; border-radius: 0; }

        .clear-all-btn {
            background: none; border: none; color: #94a3b8; font-size: 12px; font-weight: 500; cursor: pointer; 
            display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 0; transition: all 0.2s ease; gap: 4px;
        }
        .clear-all-btn:hover { background: #fee2e2; color: #ef4444; }

        /* Validation status dots */
        .status-dot {
            display: inline-block; width: 7px; height: 7px; border-radius: 50%;
            margin-right: 6px; vertical-align: middle; flex-shrink: 0;
            background: #cbd5e1; transition: background 0.3s ease;
        }
        .status-dot.ok { background: #10b981; }
        .status-dot.warn { background: #ef4444; animation: pulse-warn 1.5s ease-in-out infinite; }
        @keyframes pulse-warn { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

        .summary-row .label, .summary-sub-row .label { display: inline-flex; align-items: center; }

        /* =========================================================
           9. 状态类与定制标签
           ========================================================= */
        .hidden { display: none !important; }
        .cat-pane { display: none; animation: fadeIn 0.4s; }
        .cat-pane.active { display: block; }
        .sub-pane { display: none; animation: fadeIn 0.3s; }
        .sub-pane.active { display: block; }

        .customize-btn { 
            position: absolute; top: 52px; right: 12px; width: 32px; height: 32px; 
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; 
            cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: #64748b; z-index: 5; opacity: 0; visibility: hidden; transform: scale(0.8); transition: all 0.3s ease; 
        }
        .option-item:hover .customize-btn, .option-item.selected .customize-btn { opacity: 1; visibility: visible; transform: scale(1); }
        .customize-btn:hover { background: var(--primary-color); color: #fff; }
        
        .custom-badge {
            display: none; font-size: 10px; font-weight: 600; color: var(--primary-color);
            background: #fff0f0; padding: 2px 6px; border-radius: 0; margin-left: 6px; vertical-align: middle; letter-spacing: 0.5px;
        }
        .custom-badge.active { display: inline-block; animation: fadeIn 0.3s ease; }
        .btn-outline { background: #fff; color: #64748b; border: 1px solid #e2e8f0; }
        .btn-outline:hover { background: #f8fafc; color: var(--text-main); }

        /* 金属饰品专属样式 */
        .metal-finish-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
        .finish-item { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: all 0.3s; }
        .finish-swatch { 
            width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; 
            box-shadow: 0 0 0 1px #e2e8f0; transition: all 0.3s; position: relative;
        }
        .finish-item:hover .finish-swatch { transform: scale(1.1); box-shadow: 0 0 0 1px var(--primary-color); }
        .finish-item.selected .finish-swatch { box-shadow: 0 0 0 2px var(--primary-color); transform: scale(1.1); }
        .finish-item.selected .finish-swatch::after {
            content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 18px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .finish-label { font-size: 11px; color: #64748b; font-weight: 500; }
        .finish-item.selected .finish-label { color: var(--primary-color); font-weight: 700; }

        /* 金属颜色渐变定义 */
        .bg-gold { background: linear-gradient(135deg, #e6be8a 0%, #f7e1ad 50%, #ccac70 100%); }
        .bg-silver { background: linear-gradient(135deg, #cfd1d3 0%, #e2e4e5 50%, #a9abad 100%); }
        .bg-rose { background: linear-gradient(135deg, #e29a86 0%, #f4c2b3 50%, #d4836f 100%); }
        .bg-gunmetal { background: linear-gradient(135deg, #434343 0%, #6d6d6d 50%, #2b2b2b 100%); }
        .bg-black { background: #1a1a1a; }
        
        .brand-custom-box {
            background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 0; padding: 25px;
            margin-top: 15px; animation: fadeIn 0.4s ease;
        }
        /* 标签定位选择器样式 */
        .placement-container { display: flex; gap: 40px; background: #f8fafc; padding: 25px; border-radius: 0; align-items: center; margin-left: 13px; }
        .swimwear-map { position: relative; width: 180px; height: 220px; background: #fff; border-radius: 0; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; }
        .map-svg { width: 140px; height: auto; opacity: 0.15; }
        .hotspot { 
            position: absolute; width: 14px; height: 14px; background: #cbd5e1; border: 2px solid #fff; border-radius: 50%; 
            cursor: pointer; transition: all 0.3s; z-index: 10;
        }
        .hotspot:hover { transform: scale(1.3); background: var(--primary-color); }
        .hotspot.selected { background: var(--primary-color); box-shadow: 0 0 0 4px rgba(170, 0, 0, 0.15); transform: scale(1.3); }
        .hotspot-label { position: absolute; white-space: nowrap; font-size: 10px; color: #94a3b8; pointer-events: none; opacity: 0; transition: 0.3s; }
        .hotspot:hover .hotspot-label, .hotspot.selected .hotspot-label { opacity: 1; transform: translateY(-18px); color: var(--primary-color); font-weight: bold; }

         /* 标签内容示例框 */
        /* 缝制方式卡片样式 */
        .sewing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
        .sewing-card {
            padding: 10px; border: 1px solid #e2e8f0; border-radius: 0; background: #fff; cursor: pointer;
            text-align: center; transition: all 0.2s;
        }
        .sewing-card:hover { border-color: var(--primary-color); background: #fffafb; }
        .sewing-card.selected { border-color: var(--primary-color); background: #fff0f0; color: var(--primary-color); font-weight: 600; box-shadow: 0 2px 4px rgba(170, 0, 0, 0.05); }
        .sewing-card .sewing-name { font-size: 12px; display: block; }
        .sewing-card .sewing-desc { font-size: 10px; color: #94a3b8; font-weight: normal; }
        .sewing-card.selected .sewing-desc { color: var(--primary-color); opacity: 0.8; }   
        /* 优化后的高级复选框容器 (圆角、动态边框、选中底色) */
        .premium-checkbox-box {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 10px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 0;
            cursor: pointer; transition: all 0.3s ease; user-select: none;
        }
        .premium-checkbox-box:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(170, 0, 0, 0.05);
        }
        .premium-checkbox-box input[type="checkbox"] {
            width: 16px; height: 16px; accent-color: var(--primary-color); margin: 0; cursor: pointer;
        }
        .premium-checkbox-box.selected {
            border-color: var(--primary-color);
            background: #fffafb;
        }

        /* 吊牌专属高级样式 */
        .hangtag-shape-card {
            display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 15px;
            border: 1px solid #e2e8f0; border-radius: 0; background: #fff; cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
        }
        .hangtag-shape-card:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.05); }
        .hangtag-shape-card.selected { border-color: var(--primary-color); background: #fffafb; box-shadow: 0 0 0 1px var(--primary-color); }
        .hangtag-shape-card.selected::after {
            content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--primary-color); font-weight: bold; font-size: 14px;
        }
        .shape-icon { margin-bottom: 12px; color: #cbd5e1; transition: all 0.3s; }
        .hangtag-shape-card.selected .shape-icon { color: var(--primary-color); }
        .shape-name { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
        .hangtag-shape-card.selected .shape-name { color: var(--primary-color); }
        .shape-desc { font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.4; }

        .string-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; transition: all 0.2s; position: relative; }
        .string-color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 1px var(--primary-color); }
        .string-color-swatch.selected { box-shadow: 0 0 0 2px var(--primary-color); transform: scale(1.15); }
        .string-color-swatch.selected::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        /* 包装袋配置面板专属样式 */
        #bag-config-panel {
            background: #fbfcfd; /* 微淡蓝偏白，区别于面料的微红 */
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }
        #bag-config-panel .config-arrow {
            background: #fbfcfd;
            border-top: 1px solid #e2e8f0; 
            border-left: 1px solid #e2e8f0; 
        }
        /* 包装袋专属高级样式 */
        .eco-badge {
            position: absolute; top: 10px; right: 10px; background: #10b981; color: #fff;
            font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 0;
            z-index: 10; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
        }
        
        /* 确保包装袋尺寸卡片样式与其他模块对齐 */
        .bag-size-card {
            display: flex; flex-direction: column; justify-content: center; padding: 20px 15px;
            border: 1px solid #e2e8f0; border-radius: 0; background: #fff; cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; position: relative;
        }
        
        /* 悬停时的轻微上浮与阴影 */
        .bag-size-card:hover { 
            border-color: var(--primary-color); 
            transform: translateY(-3px); 
            box-shadow: 0 8px 15px rgba(0,0,0,0.05); 
        }

        .bag-size-card.selected {
            border-color: var(--primary-color);
            background: #fff0f0;
            color: var(--primary-color);
            font-weight: 600;
        }

        .bag-size-card.selected::after {
            content: '✓'; 
            position: absolute; top: 8px; right: 10px; 
            color: var(--primary-color); 
            font-weight: bold; font-size: 14px;
        }

        /* 卡片内部文字颜色的状态切换 */
        .size-val { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; transition: color 0.2s; }
        .bag-size-card.selected .size-val { color: var(--primary-color); }
        .size-scene { font-size: 11px; color: #94a3b8; line-height: 1.4; }

        .print-icon-box { height: 90px; background: #f8fafc; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f5f9; transition: all 0.3s; }
        .option-item.selected .print-icon-box { background: #fffafb; }

        /* 统一样式的金属件卡片 */
        .metal-item .option-img-alt {
            height: 100px; background: #f8fafc; display: flex; align-items: center; 
            justify-content: center; color: #cbd5e1; border-bottom: 1px solid #f1f5f9;
        }
        .metal-item.selected .option-img-alt { background: #fff; color: var(--primary-color); }
        
        /* 针对 Logo 上传行的微调 - 强制高度与下拉框对齐 */
        .upload-row-sm {
            padding: 0 12px !important; height: 38px; border-radius: 0; 
            background: #fff !important; display: flex; align-items: center; justify-content: space-between;
            border: 1px solid #e2e8f0; box-sizing: border-box;
        }
        .upload-row-sm:hover { border-color: var(--primary-color); }
        
        /* 提示文案样式 */
        .metal-notice { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 4px; margin-top: 8px; }
        .metal-notice svg { color: #f59e0b; }

        /* 多选标签样式 */
        .chip-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
        .chip { 
            padding: 6px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 0; 
            font-size: 12px; color: #64748b; cursor: pointer; transition: all 0.2s; 
        }
        .chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .chip.selected { 
            background: #fff0f0; border-color: var(--primary-color); color: var(--primary-color); 
            font-weight: 600; box-shadow: 0 2px 4px rgba(170, 0, 0, 0.05);
        }

        /* 统一大货表格内所有控件的高度 */
        .bulk-table-input {
            width: 100%;
            height: 120px !important; /* 固定高度，确保对齐 */
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 0;
            font-family: inherit;
            font-size: 13px;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s;
            background: #fff;
            display: block;
        }
        
        /* 针对下拉框和输入框的垂直居中处理 */
        select.bulk-table-input {
            line-height: 1.5;
        }
        
        /* 针对明细文本框的特殊处理 */
        textarea.bulk-table-input {
            resize: none; /* 禁止用户手动拉伸 */
            line-height: 1.2;
            padding-top: 8px;
        }
        
        .bulk-table-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(170, 0, 0, 0.05);
        }
        
        /* 调整表格单元格对齐方式 */
        #bulk-logic-table td {
            vertical-align: middle;
            padding: 12px 15px;
        }


        /* =========================================================
           10. OEM 模块与商业需求评估
           ========================================================= */
        /* 新增：紧凑型预览网格，消除大间隙 */
        .tight-preview-grid {
            display: grid !important;
            /* 强制列宽为 50px，不再自动撑开 */
            grid-template-columns: repeat(auto-fill, 50px) !important;
            gap: 8px !important;
            margin-top: 10px;
        }
        
        /* 确保内部预览项完全适配 50px */
        .tight-preview-grid .oem-preview-item {
            width: 50px !important;
            height: 50px !important;
            margin: 0 !important;
        }

        .oem-input-mini { padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 0; font-size: 13px; color: var(--text-main); transition: all 0.3s; }
        .oem-input-mini:focus { outline: none; border-color: var(--primary-color); }
        .oem-input-mini::placeholder {
            color: #cbd5e1;
        }
    
        .oem-upload-section { background: #fff; position: relative; }
        .oem-section-header { margin-bottom: 12px; }
        .oem-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 4px; }
        .oem-subtitle { font-size: 12px; color: #94a3b8; }
    
        .oem-dropzone {
            border: 2px dashed #e2e8f0; border-radius: 0; padding: 30px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.3s; background: #fafbfc;
        }
        .oem-dropzone:hover, .oem-dropzone.dragover { border-color: var(--primary-color); background: #fffafb; }
        .oem-dropzone.dragover { transform: scale(1.01); }
    
        .oem-image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 12px; }
        .oem-preview-item { position: relative; aspect-ratio: 1 / 1; border-radius: 0; overflow: hidden; border: 1px solid #f1f5f9; background: #f8fafc; }
        .oem-preview-item img { width: 100%; height: 100%; object-fit: cover; }
        .oem-preview-remove {
            position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; margin: 0; border-radius: 50%; border: none;
            background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.2s; z-index: 10;
        }
        .oem-preview-remove:hover { background: #ef4444; transform: scale(1.1); }
    
        .oem-textarea {
            width: 100%; height: 100px; padding: 15px; border: 1px solid #e2e8f0; border-radius: 0; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; transition: all 0.3s;
        }
        .oem-textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 3px 10px rgba(0,0,0,0.03); }
        .oem-checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #475569; font-weight: 600; cursor: pointer; padding: 8px 0; }
        .oem-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); }

        .profile-section { margin-bottom: 35px; }
        .profile-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 15px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.3px; }
        .profile-title .required { color: #ef4444; font-weight: normal; }
        .profile-title .optional { color: #94a3b8; font-size: 12px; font-weight: normal; }
        
        .radio-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .radio-card-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
        .radio-card { display: block; cursor: pointer; height: 100%; }
        .radio-card input { display: none; }
        .radio-card .card-content { border: 1px solid #e2e8f0; border-radius: 0; padding: 18px 16px; background: #fff; transition: all 0.25s ease; height: 100%; box-sizing: border-box; position: relative; overflow: hidden; }
        .radio-card:hover .card-content { border-color: #cbd5e1; background: #f8fafc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
        .radio-card input:checked + .card-content { border-color: var(--primary-color); background: #fffafb; box-shadow: 0 0 0 1px var(--primary-color), 0 4px 12px rgba(170, 0, 0, 0.08); transform: translateY(-2px); }
        .radio-card input:checked + .card-content::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--primary-color); font-size: 14px; font-weight: bold; }
        .radio-card .card-content h5 { margin: 0 0 6px; font-size: 14px; color: var(--text-main); font-weight: 600; }
        .radio-card .card-content p { margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.5; }
        .radio-card input:checked + .card-content h5 { color: var(--primary-color); }
        
        .flex-row { display: flex; gap: 30px; }
        .flex-half { flex: 1; }
        .input-group { display: flex; flex-direction: column; gap: 15px; }
        .input-group input, .input-group select, #final_remark {
            width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 0; font-family: inherit; font-size: 13px; color: var(--text-main); box-sizing: border-box; transition: all 0.3s ease; background: #fdfdfd;
        }
        .input-group input:focus, .input-group select:focus, #final_remark:focus { outline: none; border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 3px rgba(170, 0, 0, 0.05); }
        #final_remark { height: 120px; resize: vertical; }

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

        @media (max-width: 900px) {
            .radio-card-grid, .radio-card-grid.grid-4 { grid-template-columns: 1fr 1fr; }
            .flex-row { flex-direction: column; gap: 20px; }
        }
        @media (max-width: 600px) { .radio-card-grid, .radio-card-grid.grid-4 { grid-template-columns: 1fr; } }

/* Sample table styles */
                            .sample-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0; overflow: hidden; font-size: 13px; }
                            .sample-table th { background: #f1f5f9; color: #475569; text-align: left; padding: 12px 15px; font-weight: 600; border-bottom: 2px solid #e2e8f0; }
                            .sample-table td { padding: 10px 15px; border-bottom: 1px solid #f1f5f9; }
                            .sample-table select, .sample-table input { width: 100%; padding: 8px; border: 1px solid #e2e8f0; border-radius: 0; font-size: 12px; outline: none; transition: border 0.2s; }
                            .sample-table select:focus, .sample-table input:focus { border-color: var(--primary-color); }
                            .btn-remove-row { color: #94a3b8; cursor: pointer; transition: color 0.2s; background: none; border: none; font-size: 18px; }
                            .btn-remove-row:hover { color: #ef4444; }

/* Bulk textarea styles */
                                /* 针对大货表格文本框的微调 */
                                .bulk-size-textarea {
                                    width: 100%;
                                    height: 65px; /* 稍微大一些的高度 */
                                    padding: 8px;
                                    border: 1px solid #e2e8f0;
                                    border-radius: 0;
                                    font-family: inherit;
                                    font-size: 12px;
                                    resize: vertical;
                                    box-sizing: border-box;
                                    line-height: 1.4;
                                }
                                .bulk-size-textarea:focus { border-color: var(--primary-color); outline: none; background: #fff; }

        /* =========================================================
           Mobile Responsive
           ========================================================= */

        /* ---- Tablet / Small Desktop ---- */
        @media (max-width: 1024px) {
            .config-main { border-right: none; }
            .config-scroll-area { padding: 24px 28px 32px; }
            .button-group { padding: 12px 28px; }
            .stepper { padding: 16px 28px 0; }
        }

        /* ---- Tablet Portrait / Large Phone ---- */
        @media (max-width: 768px) {
            .site-footer { display: none; }
            .site-header { padding: 0 16px; }
            .header-right { font-size: 12px; gap: 10px !important; }
            .header-right .header-user-text { display: none !important; }
            .header-right .header-btn-label { display: none; }
            .header-avatar-wrap { display: block; }
            .site-title { font-size: 17px; font-weight: 700; }
            .site-logo { height: 32px; }

            .stepper { padding: 12px 16px 0; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
                -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
                mask-image: linear-gradient(to right, black 80%, transparent 100%);
            }
            .stepper.scrolled-end { -webkit-mask-image: none; mask-image: none; }
            .stepper::-webkit-scrollbar { display: none; }
            .step { flex: none; font-size: 10px; letter-spacing: 0.5px; padding: 8px 14px 10px; white-space: nowrap; }

            .category-nav {
                -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
                mask-image: linear-gradient(to right, black 80%, transparent 100%);
                scrollbar-width: none; -webkit-overflow-scrolling: touch;
            }
            .category-nav.scrolled-end { -webkit-mask-image: none; mask-image: none; }
            .category-nav::-webkit-scrollbar { display: none; }

            .config-scroll-area { padding: 16px 16px 28px; }
            .button-group { padding: 12px 16px; gap: 10px; }
            .button-group #prevBtn,
            .button-group #nextBtn { flex: 1; min-width: 0; font-size: 13px; }

            .step-desc { font-size: 12px; padding: 12px 14px; margin-bottom: 20px; }

            .option-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
            .option-info { padding: 12px 14px; }
            .option-info h4 { font-size: 13px; }

            .fabric-config-row { flex-direction: column; gap: 12px; }
            .oem-upload-section { grid-template-columns: 1fr; }
            .premium-upload-box { padding: 24px 14px; }

            .modal-content.modal-lg { flex-direction: column; height: auto; max-height: 90vh; overflow-y: auto; }
            .modal-gallery-side { height: 280px; flex: none; }
            .modal-info-side { padding: 20px; flex: none; }
            .modal-close-abs { top: 12px; right: 12px; background: rgba(255,255,255,0.9); }
            .carousel-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 14px; }
            .carousel-btn.left { left: 12px; }
            .carousel-btn.right { right: 12px; }

            .color-palette { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); gap: 10px 8px; }
            .sewing-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

            .sample-table th, .sample-table td { padding: 8px 10px; font-size: 12px; }
            .sample-table select, .sample-table input { padding: 6px; font-size: 11px; }

            /* step4 打样表格 → 移动端卡片化布局 */
            #sample-logic-table thead { display: none; }
            #sample-logic-table,
            #sample-logic-table tbody { display: block; width: 100%; }
            #sample-logic-table tr {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 0;
                padding: 14px;
                margin-bottom: 12px;
                position: relative;
            }
            #sample-logic-table tr::before {
                content: attr(data-card-title);
                grid-column: 1 / -1;
                font-size: 11px;
                font-weight: 700;
                color: var(--primary-color);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                padding-bottom: 10px;
                margin-bottom: 4px;
                border-bottom: 1px dashed #e2e8f0;
            }
            #sample-logic-table td {
                display: flex;
                flex-direction: column;
                padding: 6px 0;
                border: none;
                font-size: 12px;
            }
            #sample-logic-table td::before {
                content: attr(data-label);
                font-size: 10px;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                margin-bottom: 4px;
            }
            /* 款式下拉：独占一行 */
            #sample-logic-table td[data-label="对应款式"],
            #sample-logic-table td[data-label="Style"] { grid-column: 1 / -1; }
            /* 备注：独占一行 */
            #sample-logic-table td[data-label="备注"],
            #sample-logic-table td[data-label="Notes"] { grid-column: 1 / -1; }
            /* 删除按钮：绝对定位到卡片右上角 */
            #sample-logic-table td.sample-card-remove {
                position: absolute;
                top: 4px;
                right: 6px;
                padding: 0;
                width: auto;
            }
            #sample-logic-table td.sample-card-remove::before { display: none; }
            #sample-logic-table td.sample-card-remove .btn-remove-row {
                font-size: 20px;
                color: #cbd5e1;
            }

            /* step4 大货表格 → 移动端卡片化布局 */
            #bulk-logic-table thead { display: none; }
            #bulk-logic-table,
            #bulk-logic-table tbody { display: block; width: 100%; }
            #bulk-logic-table tr {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 0;
                padding: 14px;
                margin-bottom: 12px;
                position: relative;
            }
            #bulk-logic-table tr::before {
                content: attr(data-card-title);
                grid-column: 1 / -1;
                font-size: 11px;
                font-weight: 700;
                color: var(--primary-color);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                padding-bottom: 10px;
                margin-bottom: 4px;
                border-bottom: 1px dashed #e2e8f0;
            }
            #bulk-logic-table td {
                display: flex;
                flex-direction: column;
                padding: 6px 0;
                border: none;
                font-size: 12px;
            }
            #bulk-logic-table td::before {
                content: attr(data-label);
                font-size: 10px;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                margin-bottom: 4px;
            }
            /* 款式下拉：独占一行 */
            #bulk-logic-table td[data-label="对应款式"],
            #bulk-logic-table td[data-label="Style"] { grid-column: 1 / -1; }
            /* 尺码明细 & 备注：独占一行 */
            #bulk-logic-table td[data-label="尺码及数量明细"],
            #bulk-logic-table td[data-label="Size Details"] { grid-column: 1 / -1; }
            #bulk-logic-table td[data-label="备注 / 描述"],
            #bulk-logic-table td[data-label="Notes"] { grid-column: 1 / -1; }
            /* 删除按钮：绝对定位到卡片右上角 */
            #bulk-logic-table td.bulk-card-remove {
                position: absolute;
                top: 4px;
                right: 6px;
                padding: 0;
                width: auto;
            }
            #bulk-logic-table td.bulk-card-remove::before { display: none; }
            #bulk-logic-table td.bulk-card-remove .btn-remove-row {
                font-size: 20px;
                color: #cbd5e1;
            }
            #bulk-logic-table select,
            #bulk-logic-table input,
            #bulk-logic-table textarea {
                width: 100%;
                padding: 8px 10px;
                font-size: 13px;
                border-radius: 0;
                box-sizing: border-box;
            }

            /* 大货价格区域：期望价格 & 核算说明各占一行 */
            #bulk-price-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }

            /* 大货包装区域：描述 & 上传各占一行 */
            #bulk-packing-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }

            /* Step 5 所有网格：移动端各项各占一行 */
            #step5-grid-a1,
            #step5-grid-a2,
            #step5-grid-b,
            #step5-grid-c1,
            #step5-grid-c2 {
                grid-template-columns: 1fr !important;
                gap: 15px !important;
            }
            /* C区预览行隐藏左侧占位符 */
            #step5-grid-c2 > div:first-child:empty { display: none; }
            #sample-logic-table select,
            #sample-logic-table input {
                width: 100%;
                padding: 8px 10px;
                font-size: 13px;
                border-radius: 0;
                box-sizing: border-box;
            }

            .input-group input, .input-group select, #final_remark { padding: 10px 12px; font-size: 13px; }

            .site-footer { font-size: 10px; padding: 0 16px; }

            /* 移动端：禁用卡片 hover 效果，避免需要点两次 */
            .option-item:hover { transform: none; box-shadow: none; }
            .option-item:hover .option-img { transform: none; }
            /* hover 不显示按钮，仅选中后显示 */
            .option-item:hover .details-btn,
            .option-item:hover .customize-btn { opacity: 0; visibility: hidden; transform: scale(0.8); }
            .option-item.selected .details-btn,
            .option-item.selected .customize-btn { opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; }

            /* step3 子标签可横向滑动 */
            .sub-tabs {
                overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
                flex-wrap: nowrap;
                -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
                mask-image: linear-gradient(to right, black 80%, transparent 100%);
            }
            .sub-tabs.scrolled-end {
                -webkit-mask-image: none;
                mask-image: none;
            }
            .sub-tabs::-webkit-scrollbar { display: none; }

            /* 金属饰品配置面板：文本/上传各占一行，Logo提示移到checkbox下方 */
            #metal-config-panel > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
            #metal-config-panel > div:last-of-type > div:first-child { flex-direction: column !important; align-items: flex-start !important; }
            #metal-config-panel > div:last-of-type > div:first-child > div:last-child { margin-top: 8px; }

            /* 胸垫A区(形状定制)和D区(材质描述)：文本/上传各占一行 */
            #pad-shape-custom-area > div[style*="grid-template-columns"],
            #pad-custom-details .attr-section > div > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* 包装袋B区(印刷设计)：文件上传和文本输入各占一行 */
            #bag-print-panel > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* 吊牌tab：所有自定义区域的文件上传和文本输入各占一行 */
            #content-hangtag div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* 标签tab：2区域及AB自定义的文件上传和文本输入各占一行 */
            #content-label div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* 卫生贴tab：ABC自定义区域的文件上传和文本输入各占一行 */
            #hygiene-custom-details div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* step4 A区域：ODM/OEM数量及note各占一行 */
            #pane-delivery-sample .attr-section > div[style*="display: flex"],
            #pane-delivery-bulk .attr-section > div[style*="display: flex"] { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }

            /* step4 打样规格建议弹窗：各项各占一行 */
            .sample-guide-grid { grid-template-columns: 1fr !important; }

            /* step4 C区：目的地和快递方式各占一行 */
            #pane-delivery-sample .attr-section > div > div[style*="grid-template-columns: 1fr 1.5fr"] { grid-template-columns: 1fr !important; }

            /* step4 D区：预估数量和期望单价各占一行 */
            #sample-bulk-intent-fields > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

            /* step3 toggle-section 字体缩小，保证单行放下 */
            .toggle-section { gap: 10px !important; padding: 12px 14px !important; }
            .toggle-title { font-size: 12px !important; }
            .toggle-options label { font-size: 11px !important; margin-right: 8px !important; gap: 4px !important; }

            /* 轻定制弹窗：标题缩小 + 隐藏左侧图片 */
            #customModal .custom-modal-header { padding: 20px 18px 14px; }
            #customModal .custom-modal-header h3 { font-size: 15px; gap: 6px; }
            #customModal .custom-modal-header h3 span[style*="font-size:12px"] { font-size: 10px !important; padding: 3px 6px !important; }
            #customModal .custom-modal-body { flex-direction: column; padding: 18px 16px 20px; gap: 0; }
            #customModal .custom-modal-body > div:first-child { display: none !important; }

            /* OEM模块：B/C各占一行，D内两部分各占一行 */
            #custom-upload > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
            #custom-upload .oem-upload-section > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
        }

        /* ---- Phone ---- */
        @media (max-width: 480px) {
            .config-scroll-area { padding: 12px 12px 24px; }
            .stepper { padding: 10px 12px 0; gap: 4px; }
            .step { font-size: 9px; padding: 6px 10px 8px; }
            .button-group { padding: 10px 12px; }

            .option-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

            .premium-upload-box { padding: 20px 10px; }
            .premium-upload-box .upload-icon-container { display: none; }

            .modal-overlay { padding: 10px; }
            .modal-content { border-radius: 0; }
            .modal-gallery-side { height: 220px; }
            .modal-info-side { padding: 16px; }
            .modal-header-simple h2 { font-size: 18px; }

            .site-header { padding: 0 12px; }
            .site-logo { height: 28px; }
            .site-title { font-size: 15px; font-weight: 700; }

            /* 大图预览：隐藏箭头和提示文字 */
            #swatch-prev-btn, #swatch-next-btn { display: none !important; }
            .swatch-hint-desktop { display: none !important; }
        }