/* 肌膚檢測結果頁（步驟四）換成跟新首頁同一套視覺（2026-09-28）
   只改外觀：顏色、字體、圓角、邊框。分數、指標、鎖住的 Pro 區塊、推薦商品的內容與功能都沒動。
   指標條的紅／黃／綠是「分數高低」的意思，保留不改。 */

#step4 {
    --primary-color: #1e3a2f; --primary-light: #c8a96e; --primary-dark: #12241c;
    --accent-color: #a8874a; --accent-light: #c8a96e;
    border: 1px solid #e4ddce; border-radius: 22px;
    box-shadow: 0 20px 50px -34px rgba(30, 58, 47, .45);
    color: #1e3a2f;
}

/* 分頁 */
#step4 .result-tabs { background: #f5f0e8; border-bottom: 1px solid #e4ddce; border-radius: 22px 22px 0 0; }
#step4 .tab-btn { color: #8a8474; font-weight: 600; }
#step4 .tab-btn.active { color: #1e3a2f; font-weight: 800; }
#step4 .tab-btn.active::after { background: #c8a96e; }

/* 分數 */
#step4 .score-ring { border-color: #ece6d8; background: #fdfcf9; }
#step4 .score-ring::before { border-top-color: #1e3a2f; border-right-color: #c8a96e; }
#step4 .score-value { color: #1e3a2f; font-family: "Fraunces", Georgia, serif; font-weight: 900; }
#step4 .score-title { color: #3a5a4c; font-weight: 600; }

/* 區塊標題與卡片 */
#step4 .section-card > h3,
#step4 .radar-section h3, #step4 .metrics-section h3,
#step4 .product-recommendations h3, #step4 .problem-content h3,
#step4 #photoAnalysisSection h3 { font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 900; font-size: 19px; color: #1e3a2f; }
#step4 .ai-suggestion-card { background: #f5f0e8; border: 1px solid #e4ddce; border-left: 4px solid #c8a96e; border-radius: 16px; }
#step4 .ai-suggestion-card h3 { color: #1e3a2f; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 900; font-size: 16px; }
#step4 .ai-suggestion-card p { color: #3a5a4c; }
#step4 .problem-advice { background: #fdfaf3; border-color: #e4ddce; }

/* 小分頁、切換鈕 */
#step4 .problem-tab, #step4 .trend-tab, #step4 .zone-btn, #step4 .period-btn { background: #fff; border: 1px solid #e4ddce; color: #3a5a4c; font-weight: 600; }
#step4 .problem-tab.active, #step4 .trend-tab.active, #step4 .period-btn.active,
#step4 .zone-btn.active, #step4 .severity-label.active { background: #1e3a2f; border-color: #1e3a2f; color: #c8a96e; box-shadow: none; }
#step4 .eye-type.active { background: #f5f0e8; border-color: #c8a96e; box-shadow: none; }
#step4 .solution-btn { background: #fff; border: 1.5px solid #1e3a2f; color: #1e3a2f; border-radius: 100px; font-weight: 800; }
#step4 .solution-btn:hover { background: #f5f0e8; }
#step4 .metric-fill { background: linear-gradient(to right, #1e3a2f, #3a5a4c); }
#step4 .share-result-btn { background: linear-gradient(135deg, #d4b87e 0%, #c8a96e 100%); color: #1e3a2f; border-radius: 100px; font-weight: 900; }

/* 寫在程式裡的舊灰綠色：統一換成深綠 */
#step4 [style*="linear-gradient(135deg,#5f7a73"], #step4 [style*="linear-gradient(135deg, #5f7a73"],
#step4 [style*="background:#5f7a73"], #step4 [style*="background: #5f7a73"],
.upgrade-modal [style*="linear-gradient(135deg,#5f7a73"], .upgrade-modal [style*="linear-gradient(135deg, #5f7a73"] { background: #1e3a2f !important; }
#step4 [style*="color:#5f7a73"], #step4 [style*="color: #5f7a73"] { color: #1e3a2f !important; }
#step4 [style*="solid #5f7a73"], #step4 [style*="solid#5f7a73"] { border-color: #c8a96e !important; }

/* 推薦商品卡 */
#step4 .product-card { border: 1px solid #e4ddce; border-radius: 16px; box-shadow: none; }
#step4 .product-card:hover { border-color: #c8a96e; box-shadow: 0 12px 40px -18px rgba(30, 58, 47, .35); }
#step4 .product-tag { background: #f5f0e8; color: #a8874a; font-weight: 700; }
#step4 .product-name { color: #1e3a2f; }
#step4 .product-price { color: #1e3a2f; font-family: "Fraunces", Georgia, serif; font-weight: 900; }
#step4 .product-btn { border-radius: 100px; background: #1e3a2f; color: #f3ecdf; }
#step4 .main-rec-go { border-radius: 100px; }
#step4 .restart-btn { background: transparent; border: 1.5px solid #1e3a2f; color: #1e3a2f; border-radius: 100px; }

/* 免費版說明與鎖住的 Pro 區塊：橘色換成深綠金 */
#step4 .pro-upgrade-banner { background: #1e3a2f; border: 1px solid rgba(200, 169, 110, .5); border-radius: 18px; color: #f3ecdf; }
#step4 .pro-banner-title { color: #c8a96e; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 900; font-size: 16px; }
#step4 .badge-free { background: rgba(243, 236, 223, .18); color: #f3ecdf; }
#step4 .pro-banner-desc { color: rgba(243, 236, 223, .86); }
#step4 .pro-banner-btn, #step4 .paywall-btn,
.upgrade-modal .plan-card.popular .plan-badge { background: linear-gradient(135deg, #d4b87e 0%, #c8a96e 100%); color: #1e3a2f; box-shadow: 0 14px 30px -14px rgba(200, 169, 110, .9); border-radius: 100px; font-weight: 900; }
#step4 .pro-banner-features { border-top-color: rgba(200, 169, 110, .3); }
#step4 .pro-banner-features span { color: #f3ecdf; background: rgba(243, 236, 223, .12); border-radius: 100px; }
#step4 .paywall-overlay { background: rgba(253, 252, 249, .9) !important; }
#step4 .paywall-title { color: #1e3a2f; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 900; }
#step4 .paywall-desc { color: #3a5a4c; }

/* 升級視窗 */
.upgrade-modal { border-radius: 24px; border: 1px solid rgba(200, 169, 110, .45); }
.upgrade-modal .upgrade-header h3 { font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 900; color: #1e3a2f; }
.upgrade-modal .plan-card { border-color: #e4ddce; border-radius: 16px; }
.upgrade-modal .plan-card:hover, .upgrade-modal .plan-card.popular { border-color: #c8a96e; }
.upgrade-modal .plan-price { color: #1e3a2f; font-family: "Fraunces", Georgia, serif; }

/* 「排使用順序」那一塊：收合式（js/result-ux.js）。
   平常是右上角一顆小按鈕，點了展開；還沒滑到商品區之前整個不出現。 */
#mainRecStickyBar { transition: transform .25s ease, opacity .25s ease; }
#mainRecStickyBar.sk-bar-wait { transform: translateY(-160%); opacity: 0; pointer-events: none; }
#mainRecStickyBar .sk-bar-toggle {
    display: block; margin: 0 0 8px auto; padding: 6px 14px;
    border: 1px solid #e4ddce; border-radius: 100px; background: #fff; color: #3a5a4c;
    font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer; font-family: inherit;
}
#mainRecStickyBar .sk-bar-toggle::after { content: " ▴"; font-size: 11px; }
#mainRecStickyBar.sk-bar-collapsed {
    left: auto; right: 12px; width: auto; margin-top: 8px; padding: 0;
    background: transparent; box-shadow: none;
}
#mainRecStickyBar.sk-bar-collapsed > *:not(.sk-bar-toggle) { display: none !important; }
#mainRecStickyBar.sk-bar-collapsed .sk-bar-toggle {
    margin: 0; padding: 9px 16px; border-color: #1e3a2f; background: #1e3a2f; color: #f3ecdf;
    box-shadow: 0 10px 24px -10px rgba(30, 58, 47, .7);
}
#mainRecStickyBar.sk-bar-collapsed .sk-bar-toggle::after { content: " ▾"; }
#mainRecStickyBar.sk-bar-collapsed.sk-bar-has .sk-bar-toggle { background: linear-gradient(135deg, #d4b87e 0%, #c8a96e 100%); border-color: #c8a96e; color: #1e3a2f; }
/* 那一塊平常收起來了，商品格上面不用再空出一大段 */
#step4 #productsGrid { margin-top: 14px !important; }