@charset "UTF-8";

#diagnosis_overlay { --border-color:#d0dcd6; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
#diagnosis_overlay.show { display: flex; opacity: 1; }
#diagnosis { max-width:440px; width: 90%; max-height: 90vh; background:white; line-height:var(--line-height-mono); border-radius:16px; overflow: hidden; transform:scale(0.8); transition: transform 0.3s ease; position: relative; }
#diagnosis_overlay.show #diagnosis { transform: scale(1); }
#diagnosis_close { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size:24px; color: #999; cursor: pointer; z-index: 10; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }
#diagnosis_close:hover { opacity:.8; }
#diagnosis .progress { display:none; background: rgba(255,255,255,0.2);  height: 8px; overflow: hidden; margin-bottom: 10px; }
#diagnosis_progress { background: #eee; height: 100%; width: 0%; transition: width 0.5s ease; }
#diagnosis .content { text-align:center; height:600px; max-height:90vh; overflow-y:auto; display: flex; flex-direction: column; }
#diagnosis_result {  padding:var(--column-gap); }
#diagnosis_question { opacity: 1; transform: translateX(0); transition: all 0.5s ease; padding:var(--column-gap); }
#diagnosis_question.fade-out { opacity: 0; transform: translateX(-30px); }
#diagnosis_question.fade-in { opacity: 0; transform: translateX(30px); }
#diagnosis .question-number { display: block; font-weight: bold; margin-bottom: 1em; }
#diagnosis .question { font-size:1.2em; font-weight: bold; margin-bottom: 2em; }
#diagnosis .options { display: flex; flex-direction: column; gap:12px; }
#diagnosis .options + .button { margin-top:24px; }
#diagnosis .option { background: #eee; padding: 1em; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; line-height:var(--line-height-mono); }
#diagnosis .option:hover { background: #e1ffed; transform: translateY(-2px); }
#diagnosis .option.selected { border-color: var(--theme-color); background:#e1ffed; transform: scale(0.98);  }
#diagnosis .result-container { opacity: 0; transform: scale(0.9); transition: all 0.6s ease; }
#diagnosis .result-container.show { opacity: 1; transform: scale(1); }
#diagnosis .result-subtitle { margin:0; font-size:.95em; color:var(--theme-color); font-weight: bold; }
#diagnosis .result-title { margin:1em 0 0; font-size:1.25em; font-weight: bold; }
#diagnosis .product-card { padding:var(--column-gap) 0; margin:0 ; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; }
#diagnosis .product-card + .product-card { border-top:1px solid var(--border-color); }
#diagnosis .product-card:hover { opacity: .9; }
#diagnosis .product-image { max-width:16em; border-radius:8px; margin:0 auto; display:block; width: 100%; aspect-ratio:1/1; object-fit: cover; }
#diagnosis .product-name { margin:12px 0; }
#diagnosis .product-price { font-size:1.2em; }
#diagnosis .product-description { font-size:14px; color: #666; margin:8px 0 0; text-align:left }
#diagnosis .loading-spinner { display:block; width: 40px; height: 40px; border: 3px solid var(--border-color); border-top: 3px solid #4facfe; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#diagnosis .button { padding:.5em 1em; display:block; width:10em; margin:8px auto 0; border-radius:100px; }
#diagnosis .error-message { color: #666; font-size:18px; padding: 20px; }
#diagnosis .error-message a { color: var(--theme-color); text-decoration: none; }