/* ======================================== Section Common Styles ======================================== */
.section-header { margin-bottom: 45px; text-align: center; }
.section-badge { align-items: center; background: rgba(54, 105, 239, 0.1); border-radius: 20px; color: var(--brand-blue); display: inline-flex; font-size: 13px; font-weight: 500; gap: 8px; margin-bottom: 10px; padding: 8px 16px; }
.section-title { color: var(--brand-black); font-size: clamp(28px, 4vw, 36px); font-weight: 700; margin-bottom: 8px; }
.section-subtitle { color: var(--brand-blue); font-size: 16px; font-weight: 500; }
/********************************************皮肤测试*********************************************/ /* ======================================== Skin Test Section ======================================== */
.skin-test-section { background: var(--brand-white); overflow: hidden; padding: 100px 0; position: relative; }
.test-container { margin: 0 auto; max-width: 800px; }
.test-card { background: var(--brand-white); border-radius: 24px; box-shadow: var(--shadow-xl); margin-bottom: 40px; overflow: hidden; transition: all var(--transition-slow); }
.test-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); transform: translateY(-4px); }
.test-header { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%); color: var(--brand-white); padding: 40px 40px 24px; }
.test-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.test-description { color: rgba(255, 255, 255, 0.9); font-size: 15px; line-height: 1.6; }
.test-content { padding: 40px; }
/* Tree Question Styles */
.tree-container { margin-bottom: 32px; }
.tree-question { color: var(--brand-black); font-size: 20px; font-weight: 600; margin-bottom: 24px; text-align: center; }
.tree-options { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.tree-option { align-items: center; background: var(--brand-gray2); border: 2px solid transparent; border-radius: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; padding: 20px; text-align: center; transition: all var(--transition-normal); }
.tree-option:hover { background: rgba(54, 105, 239, 0.05); border-color: rgba(54, 105, 239, 0.3); transform: translateY(-2px); }
.tree-option.active { background: rgba(54, 105, 239, 0.1); border-color: var(--brand-blue); }
/* Option Image Styles */
.option-image { background: var(--brand-white); border-radius: 12px; box-shadow: var(--shadow-sm); height: 120px; overflow: hidden; width: 100%; }
.option-image img { height: 100%; object-fit: cover; transition: transform var(--transition-normal); width: 100%; }
.tree-option:hover .option-image img { transform: scale(1.05); }
.option-icon { align-items: center; background: var(--brand-white); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--brand-blue); display: flex; flex-shrink: 0; font-size: 20px; height: 48px; justify-content: center; width: 48px; }
.tree-option.active .option-icon { background: var(--brand-blue); color: var(--brand-white); }
.option-text { flex: 1; }
.option-title { color: var(--brand-black); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.option-desc { color: var(--brand-gray1); font-size: 13px; line-height: 1.5; }
/* Test Navigation */
.test-navigation { border-top: 1px solid var(--brand-gray3); display: flex; gap: 16px; justify-content: space-between; padding-top: 24px; }
.btn { align-items: center; border-radius: 28px; cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 500; gap: 8px; justify-content: center; padding: 14px 28px; transition: all var(--transition-normal); }
.btn-secondary { background: var(--brand-gray2); color: var(--brand-gray1); }
.btn-secondary:hover { background: var(--brand-gray3); color: var(--brand-black); }
.btn-primary { background: var(--brand-blue); box-shadow: 0 4px 14px rgba(54, 105, 239, 0.3); color: var(--brand-white); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(54, 105, 239, 0.4); transform: scale(1.05); }
.btn-primary svg { transition: transform var(--transition-fast); }
.btn-primary:hover svg { transform: translateX(4px); }
/* Result Container */
.result-container { padding: 20px 0; text-align: center; }
.result-icon { align-items: center; background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 50%; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); color: var(--brand-white); display: flex; font-size: 40px; height: 80px; justify-content: center; margin: 0 auto 24px; width: 80px; }
.result-title { color: var(--brand-black); font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.result-description { color: var(--brand-gray1); font-size: 16px; line-height: 1.7; margin: 0 auto 32px; max-width: 500px; }
.result-product { background: var(--brand-gray2); border-radius: 20px; margin-top: 32px; padding: 32px; text-align: left; }
.product-header { align-items: center; border-bottom: 1px solid var(--brand-gray3); display: flex; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; }
.product-icon { align-items: center; background: var(--brand-blue); border-radius: 12px; color: var(--brand-white); display: flex; font-size: 20px; font-weight: 700; height: 56px; justify-content: center; width: 56px; }
.product-info h3 { color: var(--brand-black); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.product-info p { color: var(--brand-gray1); font-size: 14px; }
.product-features { list-style: none; margin-bottom: 24px; }
.product-features li { color: var(--brand-gray1); font-size: 15px; line-height: 1.9; margin-bottom: 2px; padding-left: 28px; position: relative; }
.product-features li::before { align-items: center; background: var(--brand-blue); border-radius: 50%; content: ""; display: flex; height: 18px; justify-content: center; left: 0; position: absolute; top: 5px; width: 18px; }
.product-features li::after { color: var(--brand-white); content: "✓"; font-size: 11px; font-weight: 700; left: 4px; position: absolute; top: 4px; }
.result-product > p { background: rgba(54, 105, 239, 0.05); border-left: 3px solid var(--brand-blue); border-radius: 12px; color: var(--brand-gray1); font-size: 15px; line-height: 1.7; margin-bottom: 24px; padding: 16px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-actions .btn { flex: 1; min-width: 150px; }
.ceshi-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ceshi-actions .btn { flex: 1; min-width: 150px; }
/* ======================================== 皮肤测试 Responsive Design ======================================== */
@media (max-width: 1024px) {
    .tree-options { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .test-header { padding: 32px 24px 20px; }
    .test-content { padding: 15px; }
    .test-title { font-size: 24px; }
    .tree-option { padding: 16px; }
    .option-icon { font-size: 16px; height: 40px; width: 40px; }
    .result-title { font-size: 24px; }
    .result-product { padding: 15px; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }
    .product-info h3 { font-size: 17px; }
}