/* 智能推荐组件样式 - 选择部分优化 - 对比度优化版 */
.smart-recommend-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12); /* 加深阴影: 0.08 -> 0.12 */
    overflow: hidden;
    border: 2px solid #e0e7ff; /* 添加边框 */
}

/* 表单区域 - 新风格 */
.sr-form-container {
    padding: 40px;
    background: #ffffff;
    position: relative;
}

.sr-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px; /* 加粗: 4px -> 5px */
    background: linear-gradient(90deg, #059669, #2563eb); /* 加深渐变: #10b981 -> #059669 */
}

.sr-form-title {
    font-size: 32px; /* 增大字体: 28px -> 32px */
    font-weight: 800; /* 增加字重: 700 -> 800 */
    color: #000000; /* 加深颜色: #111827 -> #000000 */
    margin-bottom: 16px; /* 增大间距: 12px -> 16px */
    text-align: center;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.sr-form-subtitle {
    font-size: 16px; /* 增大字体: 15px -> 16px */
    color: #475569; /* 加深颜色: #6b7280 -> #475569 */
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500; /* 增加字重 */
}

.sr-form-item {
    margin-bottom: 32px; /* 增大间距: 28px -> 32px */
    position: relative;
}

.sr-form-label {
    display: block;
    font-size: 17px; /* 增大字体: 16px -> 17px */
    font-weight: 700; /* 增加字重: 600 -> 700 */
    color: #1e293b; /* 加深颜色: #374151 -> #1e293b */
    margin-bottom: 14px; /* 增大间距: 12px -> 14px */
    padding-left: 4px;
    letter-spacing: -0.3px; /* 优化字母间距 */
}

.sr-form-label::before {
    content: '';
    display: inline-block;
    width: 8px; /* 增大: 6px -> 8px */
    height: 8px; /* 增大: 6px -> 8px */
    background: #059669; /* 加深颜色: #10b981 -> #059669 */
    border-radius: 50%;
    margin-right: 10px; /* 增大间距: 8px -> 10px */
    vertical-align: middle;
    border: 2px solid #059669; /* 添加边框 */
}

/* 选择框 - 新风格 */
.sr-form-select {
    width: 100%;
    padding: 18px 24px; /* 增大内边距: 16px 20px -> 18px 24px */
    font-size: 17px; /* 增大字体: 16px -> 17px */
    border: 3px solid #d1d5db; /* 加粗边框: 2px -> 3px, 加深颜色: #e5e7eb -> #d1d5db */
    border-radius: 12px;
    background: #f8fafc; /* 加深背景: #f9fafb -> #f8fafc */
    color: #1e293b; /* 加深颜色: #1f2937 -> #1e293b */
    cursor: pointer;
    transition: all 0.25s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* 加深箭头颜色 */
    background-repeat: no-repeat;
    background-position: right 20px center; /* 调整位置 */
    background-size: 20px; /* 增大图标 */
    padding-right: 60px; /* 增大右边距: 50px -> 60px */
    font-weight: 600; /* 增加字重: 500 -> 600 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 添加阴影 */
}

.sr-form-select:hover {
    background-color: #ffffff;
    border-color: #94a3b8; /* 加深悬停颜色: #9ca3af -> #94a3b8 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加悬停阴影 */
}

.sr-form-select:focus {
    outline: none;
    border-color: #059669; /* 加深焦点颜色: #10b981 -> #059669 */
    background-color: #ffffff;
    box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.15); /* 增大发光效果: 4px -> 5px, 0.1 -> 0.15 */
}

.sr-form-select option {
    padding: 14px; /* 增大内边距: 12px -> 14px */
    font-size: 16px; /* 增大字体: 15px -> 16px */
    font-weight: 500;
}

/* 选项分组样式优化 */
.sr-form-select option[value=""] {
    color: #64748b; /* 加深颜色: #9ca3af -> #64748b */
    font-style: italic;
    font-weight: 500;
}

.sr-form-select option:not([value=""]) {
    color: #1e293b; /* 加深颜色: #1f2937 -> #1e293b */
    padding: 16px; /* 增大内边距: 14px -> 16px */
    font-weight: 500;
}

/* 提交按钮 - 新风格 */
.sr-submit-btn {
    width: 100%;
    padding: 20px; /* 增大内边距: 18px -> 20px */
    font-size: 18px; /* 增大字体: 17px -> 18px */
    font-weight: 700; /* 增加字重: 600 -> 700 */
    background: linear-gradient(135deg, #059669 0%, #2563eb 100%); /* 加深渐变 */
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 28px; /* 增大间距: 24px -> 28px */
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent; /* 添加边框 */
    text-transform: uppercase; /* 改为大写字母 */
}

.sr-submit-btn:hover:not(:disabled) {
    transform: translateY(-3px); /* 增大上移距离: -2px -> -3px */
    box-shadow: 0 16px 32px rgba(5, 150, 105, 0.3); /* 加深阴影: 0.25 -> 0.3 */
    border-color: #059669; /* 添加悬停边框 */
}

.sr-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.sr-submit-btn:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); /* 加深禁用状态 */
    cursor: not-allowed;
    opacity: 0.8; /* 提高不透明度: 0.7 -> 0.8 */
    border-color: #cbd5e0; /* 添加禁用边框 */
}

/* 加载状态 - 新风格 */
.sr-loading {
    text-align: center;
    padding: 80px 20px;
}

.sr-loading-spinner {
    width: 70px; /* 增大: 60px -> 70px */
    height: 70px; /* 增大: 60px -> 70px */
    border: 5px solid rgba(5, 150, 105, 0.1); /* 加粗边框: 4px -> 5px */
    border-top: 5px solid #059669; /* 加粗边框: 4px -> 5px, 加深颜色: #10b981 -> #059669 */
    border-radius: 50%;
    animation: sr-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 0 auto 30px; /* 增大间距: 25px -> 30px */
}

@keyframes sr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sr-loading-text {
    font-size: 18px; /* 增大字体: 16px -> 18px */
    color: #475569; /* 加深颜色: #4b5563 -> #475569 */
    font-weight: 600; /* 增加字重: 500 -> 600 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .smart-recommend-container {
        margin: 20px;
        border-radius: 12px;
        border-width: 1px; /* 移动端边框稍细 */
    }
    
    .sr-form-container {
        padding: 30px 24px;
    }
    
    .sr-form-title {
        font-size: 28px; /* 调整字体大小 */
    }
    
    .sr-form-subtitle {
        font-size: 15px; /* 调整字体大小 */
        margin-bottom: 32px;
    }
    
    .sr-form-select {
        padding: 16px 20px; /* 调整内边距 */
        font-size: 16px; /* 调整字体大小 */
        border-width: 2px; /* 移动端边框稍细 */
    }
    
    .sr-submit-btn {
        padding: 18px; /* 调整内边距 */
        font-size: 17px; /* 调整字体大小 */
    }
}

@media (max-width: 480px) {
    .sr-form-container {
        padding: 24px 20px;
    }
    
    .sr-form-title {
        font-size: 24px; /* 调整字体大小 */
    }
    
    .sr-form-label {
        font-size: 16px; /* 调整字体大小 */
    }
}

/* 结果区域 */
.sr-result-container {
    animation: sr-fadeIn 0.5s ease;
}

@keyframes sr-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.sr-result-title {
    font-size: 24px; /* 增大字体: 22px -> 24px */
    font-weight: 800; /* 增加字重: 600 -> 800 */
    color: #000000; /* 加深颜色: #2c3e50 -> #000000 */
    margin-bottom: 24px; /* 增大间距: 20px -> 24px */
    padding-bottom: 16px; /* 增大间距: 15px -> 16px */
    border-bottom: 3px solid #4f46e5; /* 加粗下划线: 2px -> 3px, 加深颜色: #667eea -> #4f46e5 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.sr-result-content {
    font-size: 17px; /* 增大字体: 16px -> 17px */
    line-height: 1.8;
    color: #1e293b; /* 加深颜色: #333 -> #1e293b */
    padding: 24px; /* 增大内边距: 20px -> 24px */
    background: #f5f7ff; /* 加深背景: #f8f9ff -> #f5f7ff */
    border-radius: 12px; /* 增大圆角: 8px -> 12px */
    margin-bottom: 36px; /* 增大间距: 30px -> 36px */
    border: 2px solid #e0e7ff; /* 添加边框 */
    font-weight: 500; /* 增加字重 */
}

.sr-result-content strong {
    color: #4f46e5; /* 加深颜色: #667eea -> #4f46e5 */
    font-weight: 700; /* 增加字重: 600 -> 700 */
}

/* 产品区域 */
.sr-products-section {
    margin-bottom: 36px; /* 增大间距: 30px -> 36px */
    padding: 24px; /* 增大内边距: 20px -> 24px */
    background: white;
    border-radius: 12px; /* 增大圆角: 10px -> 12px */
    border: 2px solid #e0e7ff; /* 加粗边框: 1px -> 2px, 加深颜色 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 添加阴影 */
}

.sr-section-title {
    font-size: 20px; /* 增大字体: 18px -> 20px */
    font-weight: 800; /* 增加字重: 600 -> 800 */
    color: #000000; /* 加深颜色: #2c3e50 -> #000000 */
    margin-bottom: 24px; /* 增大间距: 20px -> 24px */
    display: flex;
    align-items: center;
    gap: 12px; /* 增大间距: 10px -> 12px */
    letter-spacing: -0.3px; /* 优化字母间距 */
}

.sr-title-badge {
    background: #047857; /* 加深绿色: #48bb78 -> #047857 */
    color: white;
    padding: 6px 16px; /* 增大内边距: 4px 12px -> 6px 16px */
    border-radius: 20px;
    font-size: 15px; /* 增大字体: 14px -> 15px */
    font-weight: 700; /* 增加字重: 600 -> 700 */
    border: 2px solid #047857; /* 添加边框 */
}

.sr-secondary-badge {
    background: #b45309; /* 加深橙色: #ed8936 -> #b45309 */
    border-color: #b45309;
}

/* 产品列表 */
.sr-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px; /* 增大间距: 20px -> 24px */
}

.sr-product-card {
    border: 2px solid #e2e8f0; /* 加粗边框: 1px -> 2px */
    border-radius: 12px; /* 增大圆角: 8px -> 12px */
    padding: 20px; /* 增大内边距: 15px -> 20px */
    transition: all 0.3s ease;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 添加阴影 */
}

.sr-product-card:hover {
    transform: translateY(-4px); /* 增大上移距离: -3px -> -4px */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); /* 加深阴影: 0.1 -> 0.15 */
    border-color: #4f46e5; /* 加深悬停边框颜色: #667eea -> #4f46e5 */
}

.sr-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px; /* 增大圆角: 6px -> 8px */
    margin-bottom: 20px; /* 增大间距: 15px -> 20px */
    border: 2px solid #e2e8f0; /* 添加边框 */
}

.sr-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sr-product-card:hover .sr-product-image img {
    transform: scale(1.05);
}

.sr-product-title {
    font-size: 17px; /* 增大字体: 16px -> 17px */
    font-weight: 800; /* 增加字重: 600 -> 800 */
    color: #000000; /* 加深颜色: #2c3e50 -> #000000 */
    margin-bottom: 8px; /* 增大间距: 5px -> 8px */
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.sr-product-brand {
    font-size: 15px; /* 增大字体: 14px -> 15px */
    color: #475569; /* 加深颜色: #718096 -> #475569 */
    margin-bottom: 16px; /* 增大间距: 10px -> 16px */
    font-weight: 500; /* 增加字重 */
}

.sr-product-meta {
    display: flex;
    align-items: center;
    gap: 12px; /* 增大间距: 10px -> 12px */
    margin-bottom: 20px; /* 增大间距: 15px -> 20px */
    flex-wrap: wrap;
}

.sr-product-price {
    font-size: 20px; /* 增大字体: 18px -> 20px */
    font-weight: 800; /* 增加字重: 600 -> 800 */
    color: #b91c1c; /* 加深红色: #e53e3e -> #b91c1c */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.sr-product-reports {
    font-size: 14px;
    color: #475569; /* 加深颜色: #718096 -> #475569 */
    background: #f1f5f9; /* 加深背景: #f7fafc -> #f1f5f9 */
    padding: 5px 12px; /* 增大内边距: 3px 8px -> 5px 12px */
    border-radius: 12px;
    font-weight: 600; /* 增加字重 */
    border: 1px solid #e2e8f0; /* 添加边框 */
}

.sr-product-type {
    font-size: 13px; /* 增大字体: 12px -> 13px */
    font-weight: 700; /* 增加字重: 600 -> 700 */
    padding: 6px 14px; /* 增大内边距: 3px 10px -> 6px 14px */
    border-radius: 12px;
    color: white;
    border: 2px solid transparent; /* 添加边框 */
}

.sr-product-type.mild {
    background: #047857; /* 加深绿色: #38a169 -> #047857 */
    border-color: #047857;
}

.sr-product-type.balanced {
    background: #1d4ed8; /* 加深蓝色: #3182ce -> #1d4ed8 */
    border-color: #1d4ed8;
}

.sr-product-type.strong {
    background: #b45309; /* 加深橙色: #dd6b20 -> #b45309 */
    border-color: #b45309;
}

.sr-product-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px; /* 增大间距: 10px -> 12px */
    margin-bottom: 20px; /* 增大间距: 15px -> 20px */
}

.sr-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px; /* 添加内边距 */
    background: #f8fafc; /* 添加背景 */
    border-radius: 8px;
    border: 1px solid #e2e8f0; /* 添加边框 */
    flex: 1;
}

.sr-stat-label {
    font-size: 12px;
    color: #475569; /* 加深颜色: #718096 -> #475569 */
    margin-bottom: 5px; /* 增大间距: 3px -> 5px */
    font-weight: 600; /* 增加字重 */
    text-transform: uppercase; /* 改为大写 */
    letter-spacing: 0.5px; /* 添加字母间距 */
}

.sr-stat-value {
    font-size: 15px; /* 增大字体: 14px -> 15px */
    font-weight: 800; /* 增加字重: 600 -> 800 */
    color: #000000; /* 加深颜色: #2d3748 -> #000000 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.sr-view-detail-btn {
    width: 100%;
    padding: 12px; /* 增大内边距: 10px -> 12px */
    background: #4f46e5; /* 加深蓝色: #667eea -> #4f46e5 */
    color: white;
    border: none;
    border-radius: 8px; /* 增大圆角: 6px -> 8px */
    font-size: 15px; /* 增大字体: 14px -> 15px */
    font-weight: 700; /* 增加字重: 500 -> 700 */
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase; /* 改为大写 */
    letter-spacing: 0.5px; /* 添加字母间距 */
    border: 2px solid #4f46e5; /* 添加边框 */
}

.sr-view-detail-btn:hover {
    background: #4338ca; /* 更深蓝色: #5a67d8 -> #4338ca */
    transform: translateY(-2px); /* 添加上移效果 */
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); /* 添加阴影 */
}

/* 重新推荐按钮 */
.sr-restart-btn {
    display: block;
    width: 220px; /* 增大宽度: 200px -> 220px */
    margin: 36px auto 0; /* 增大间距: 30px -> 36px */
    padding: 14px 28px; /* 增大内边距: 12px 24px -> 14px 28px */
    background: #475569; /* 加深灰色: #718096 -> #475569 */
    color: white;
    border: none;
    border-radius: 10px; /* 增大圆角: 8px -> 10px */
    font-size: 17px; /* 增大字体: 16px -> 17px */
    font-weight: 700; /* 增加字重: 500 -> 700 */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #475569; /* 添加边框 */
    text-transform: uppercase; /* 改为大写 */
    letter-spacing: 0.5px; /* 添加字母间距 */
}

.sr-restart-btn:hover {
    background: #334155; /* 更深灰色: #4a5568 -> #334155 */
    transform: translateY(-2px); /* 增大上移距离: -1px -> -2px */
    box-shadow: 0 6px 20px rgba(71, 85, 105, 0.3); /* 添加阴影 */
}

/* 模态框 */
.sr-product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.sr-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 加深遮罩: 0.5 -> 0.6 */
    backdrop-filter: blur(8px); /* 增强模糊: 5px -> 8px */
}

.sr-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px; /* 增大圆角: 12px -> 16px */
    padding: 36px; /* 增大内边距: 30px -> 36px */
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4); /* 加深阴影: 0.3 -> 0.4 */
    border: 2px solid #e0e7ff; /* 添加边框 */
}

.sr-modal-close {
    position: absolute;
    top: 20px; /* 增大距离: 15px -> 20px */
    right: 20px; /* 增大距离: 15px -> 20px */
    width: 40px; /* 增大: 36px -> 40px */
    height: 40px; /* 增大: 36px -> 40px */
    background: #f1f5f9; /* 加深背景: #f7fafc -> #f1f5f9 */
    border: 2px solid #e2e8f0; /* 添加边框 */
    border-radius: 50%;
    font-size: 22px; /* 增大字体: 20px -> 22px */
    color: #475569; /* 加深颜色: #718096 -> #475569 */
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 700; /* 增加字重 */
}

.sr-modal-close:hover {
    background: #e2e8f0; /* 加深悬停背景: #e2e8f0 */
    color: #334155; /* 更深颜色: #4a5568 -> #334155 */
    border-color: #cbd5e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .smart-recommend-container {
        padding: 15px;
        margin: 0 10px;
        border-width: 1px; /* 移动端边框稍细 */
    }
    
    .sr-form-container {
        padding: 24px; /* 调整内边距 */
    }
    
    .sr-product-list {
        grid-template-columns: 1fr;
    }
    
    .sr-modal-content {
        width: 95%;
        padding: 24px; /* 调整内边距 */
        border-width: 1px; /* 移动端边框稍细 */
    }
}

@media (max-width: 480px) {
    .sr-form-title {
        font-size: 24px; /* 调整字体大小 */
    }
    
    .sr-result-title {
        font-size: 20px; /* 调整字体大小 */
    }
    
    .sr-modal-close {
        width: 36px; /* 调整大小 */
        height: 36px; /* 调整大小 */
        font-size: 20px; /* 调整字体大小 */
    }
}

/* 无障碍优化 */
@media (prefers-contrast: high) {
    .smart-recommend-container {
        border: 3px solid #000000;
    }
    
    .sr-form-title,
    .sr-result-title,
    .sr-section-title,
    .sr-product-title {
        color: #000000;
    }
    
    .sr-form-select,
    .sr-submit-btn,
    .sr-view-detail-btn,
    .sr-restart-btn {
        border: 2px solid #000000;
    }
}

/* 打印样式 */
@media print {
    .smart-recommend-container {
        box-shadow: none;
        border: 2px solid #000000;
    }
    
    .sr-form-container::before {
        background: #000000;
    }
    
    .sr-form-title,
    .sr-result-title,
    .sr-section-title,
    .sr-product-title {
        color: #000000;
    }
    
    .sr-submit-btn,
    .sr-view-detail-btn,
    .sr-restart-btn {
        display: none; /* 打印时隐藏按钮 */
    }
}