.hehun-container { max-width: 960px; margin: 0 auto; }
.hehun-forms { display: flex; gap: 20px; flex-wrap: wrap; }
.hehun-box { flex: 1; min-width: 320px; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.hehun-box h4 { margin-top: 0; text-align: center; font-size: 16px; }
.hehun-box .male { color: #1976d2; }
.hehun-box .female { color: #e91e63; }
.form-row { margin-bottom: 10px; display: flex; align-items: center; }
.form-row label { width: 80px; flex-shrink: 0; font-size: 13px; }
.form-row input, .form-row select { padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; background: #fff; }
.form-row input { flex: 1; }
.form-row select { min-width: 120px; }
.form-row .full { flex: 1; display: flex; gap: 6px; }
.points-info { text-align: center; margin: 12px 0; padding: 10px; background: #fff3e0; border-radius: 6px; font-size: 13px; color: #e65100; }
.points-info a { color: #1976d2; font-weight: bold; }
.calc-btn { display: block; margin: 20px auto; padding: 12px 40px; background: linear-gradient(135deg, #d4a574, #b8860b); color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
.calc-btn:hover { opacity: 0.9; }
.calc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.result-area { display: none; margin-top: 24px; padding: 24px; background: #fff; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.score-circle { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: bold; color: #fff; }
.score-excellent { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.score-good { background: linear-gradient(135deg, #8bc34a, #558b2f); }
.score-moderate { background: linear-gradient(135deg, #ff9800, #e65100); }
.score-fair { background: linear-gradient(135deg, #ff5722, #bf360c); }
.score-poor { background: linear-gradient(135deg, #f44336, #b71c1c); }
.detail-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.detail-item:last-child { border-bottom: none; }
.detail-label { width: 120px; font-size: 13px; color: #666; flex-shrink: 0; }
.detail-bar { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; margin: 0 12px; overflow: hidden; }
.detail-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.detail-score { width: 40px; text-align: right; font-size: 13px; font-weight: bold; }
.summary-box { margin-top: 16px; padding: 16px; background: #fafafa; border-radius: 6px; border-left: 3px solid #d4a574; line-height: 1.8; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-hint { text-align: center; color: #999; margin-top: 16px; }