.visual-guide-container{margin:1.5rem 0}.visual-guide-header{text-align:center;margin-bottom:1.5rem}.visual-guide-title{color:#1e293b;margin-bottom:.5rem;font-size:1.125rem;font-weight:700}.visual-guide-subtitle{color:#64748b;font-size:.875rem}.visual-reference-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.75rem;margin-bottom:1.5rem;display:grid}.visual-reference-card{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:1rem;flex-direction:column;align-items:center;padding:1rem .75rem;transition:all .3s;display:flex;position:relative;overflow:hidden}.visual-reference-card:before{content:"";background:linear-gradient(90deg,#e2e8f0 0%,#cbd5e1 100%);height:3px;transition:all .3s;position:absolute;top:0;left:0;right:0}.visual-reference-card:hover{border-color:#d8b4fe;transform:translateY(-3px);box-shadow:0 8px 16px #0000001a}.visual-reference-card.selected{background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 100%);border-color:#a855f7;box-shadow:0 8px 20px #a855f733}.visual-reference-card.selected:before{background:linear-gradient(90deg,#a855f7 0%,#9333ea 100%)}.visual-reference-card.essential:hover{border-color:#fca5a5}.visual-reference-card.essential.selected{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border-color:#ef4444}.visual-reference-card.essential.selected:before{background:linear-gradient(90deg,#ef4444 0%,#dc2626 100%)}.visual-reference-card.athlete:hover{border-color:#67e8f9}.visual-reference-card.athlete.selected{background:linear-gradient(135deg,#cffafe 0%,#a5f3fc 100%);border-color:#06b6d4}.visual-reference-card.athlete.selected:before{background:linear-gradient(90deg,#06b6d4 0%,#0891b2 100%)}.visual-reference-card.fitness:hover{border-color:#86efac}.visual-reference-card.fitness.selected{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border-color:#10b981}.visual-reference-card.fitness.selected:before{background:linear-gradient(90deg,#10b981 0%,#059669 100%)}.visual-reference-card.average:hover{border-color:#fde047}.visual-reference-card.average.selected{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#f59e0b}.visual-reference-card.average.selected:before{background:linear-gradient(90deg,#f59e0b 0%,#d97706 100%)}.visual-reference-card.average-high:hover,.visual-reference-card.high:hover{border-color:#fca5a5}.visual-reference-card.average-high.selected,.visual-reference-card.high.selected{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border-color:#ef4444}.visual-reference-card.very-high:hover{border-color:#f87171}.visual-reference-card.very-high.selected{background:linear-gradient(135deg,#fecaca 0%,#fca5a5 100%);border-color:#dc2626}.reference-emoji{margin-bottom:.5rem;font-size:1.75rem;transition:transform .3s}.visual-reference-card:hover .reference-emoji{transform:scale(1.1)}.reference-percentage{background:linear-gradient(135deg,#a855f7 0%,#9333ea 100%);-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem;font-size:1.5rem;font-weight:800}.reference-category{color:#475569;margin-bottom:.25rem;font-size:.8125rem;font-weight:600}.reference-description{color:#64748b;text-align:center;margin-bottom:.75rem;font-size:.75rem}.reference-bar{background:#e2e8f0;border-radius:2px;width:100%;height:4px;margin-top:auto;overflow:hidden}.reference-bar-fill{background:linear-gradient(90deg,#a855f7 0%,#9333ea 100%);height:100%;transition:width .3s}.selected-info{background:linear-gradient(135deg,#faf5ff 0%,#f3e8ff 100%);border:2px solid #a855f7;border-radius:1rem;padding:1.5rem;animation:.3s ease-out fadeInUp}.selected-info-header{border-bottom:2px solid #e9d5ff;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;display:flex}.selected-percentage{background:linear-gradient(135deg,#a855f7 0%,#9333ea 100%);-webkit-text-fill-color:transparent;background-clip:text;font-size:2rem;font-weight:800}.selected-category{color:#7c3aed;font-size:1.25rem;font-weight:700}.selected-details{flex-direction:column;gap:.75rem;display:flex}.detail-item{align-items:flex-start;gap:.5rem;display:flex}.detail-label{color:#6b21a8;min-width:100px;font-size:.875rem;font-weight:600}.detail-value{color:#475569;flex:1;font-size:.875rem}.detail-value.essential{color:#dc2626;font-weight:600}.detail-value.athlete{color:#0891b2;font-weight:600}.detail-value.fitness{color:#059669;font-weight:600}.detail-value.average{color:#d97706;font-weight:600}.detail-value.average-high,.detail-value.high{color:#ef4444;font-weight:600}.detail-value.very-high{color:#dc2626;font-weight:600}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.visual-reference-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.visual-reference-card{padding:.75rem .5rem}.reference-emoji{font-size:1.5rem}.reference-percentage{font-size:1.25rem}.reference-category{font-size:.75rem}.reference-description{font-size:.7rem}.selected-info{padding:1rem}.selected-percentage{font-size:1.5rem}.selected-category{font-size:1rem}.detail-label{min-width:80px}}.bodyfat-calculator{width:100%}.method-select{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.method-option{cursor:pointer;text-align:left;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;flex-direction:column;align-items:flex-start;width:100%;padding:1.25rem;transition:all .3s;display:flex}.method-option:hover{background:#faf5ff;border-color:#d8b4fe}.method-option.active{background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 100%);border-color:#a855f7}.method-title{color:#334155;margin-bottom:.25rem;font-size:1rem;font-weight:600}.method-desc{color:#64748b;font-size:.8125rem}.gender-buttons{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;display:grid}.gender-btn{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.25rem;font-size:.9375rem;font-weight:500;transition:all .3s;display:flex}.gender-btn:hover{background:#f8fafc;border-color:#cbd5e1}.gender-btn.active.male{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-color:#3b82f6}.gender-btn.active.female{background:linear-gradient(135deg,#fce7f3 0%,#fbcfe8 100%);border-color:#ec4899}.gender-icon{font-size:1.75rem}.input-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.input-field{width:100%}.input-wrapper{position:relative}.modern-input{background:#f8fafc;border:2px solid #e2e8f0;border-radius:.75rem;width:100%;padding:.875rem 3rem .875rem 1rem;font-size:1rem;transition:all .3s}.modern-input:focus{background:#fff;border-color:#a855f7;outline:none;box-shadow:0 0 0 3px #a855f71a}.modern-input::placeholder{color:#cbd5e1}.input-suffix{color:#94a3b8;pointer-events:none;font-size:.875rem;font-weight:500;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.measurements-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.visual-guide{margin:1.5rem 0}.visual-title{color:#475569;text-align:center;margin-bottom:1rem;font-size:.875rem;font-weight:600}.visual-options{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem;display:grid}.visual-option{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;flex-direction:column;align-items:center;padding:.75rem;transition:all .3s;display:flex}.visual-option:hover{background:#faf5ff;border-color:#d8b4fe}.visual-option.active{background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 100%);border-color:#a855f7}.visual-percentage{color:#7c3aed;margin-bottom:.25rem;font-size:1.125rem;font-weight:700}.visual-label{color:#64748b;text-align:center;font-size:.75rem}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#a855f7 0%,#9333ea 100%);border:none;border-radius:.75rem;width:100%;padding:.875rem 2rem;font-size:1rem;font-weight:700;transition:all .3s;box-shadow:0 8px 20px #a855f740}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px #a855f759}.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.results-container{margin-top:2rem;animation:.5s ease-out fadeInUp}.results-title{text-align:center;color:#1e293b;margin-bottom:1.5rem;font-size:1.5rem;font-weight:700}.results-grid{gap:1.5rem;margin-bottom:1.5rem;display:grid}.result-main{text-align:center;background:linear-gradient(135deg,#faf5ff 0%,#f3e8ff 100%);border:2px solid #a855f7;border-radius:1rem;padding:2rem;position:relative;overflow:hidden}.result-main:before{content:"";background:linear-gradient(90deg,#a855f7 0%,#9333ea 100%);height:4px;position:absolute;top:0;left:0;right:0}.result-percentage{background:linear-gradient(135deg,#a855f7 0%,#9333ea 100%);-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;font-size:4rem;font-weight:800;line-height:1}.result-category{color:#7c3aed;margin-bottom:.25rem;font-size:1.5rem;font-weight:700}.result-label{color:#6b21a8;font-size:.875rem;font-weight:500}.composition-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;display:grid}.composition-card{text-align:center;border-radius:.75rem;padding:1.25rem;transition:all .3s}.composition-card.fat{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border:2px solid #f87171}.composition-card.lean{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border:2px solid #10b981}.composition-card:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000026}.composition-icon{margin-bottom:.5rem;font-size:1.5rem}.composition-label{color:#475569;margin-bottom:.5rem;font-size:.875rem;font-weight:500}.composition-value{color:#1e293b;font-size:2rem;font-weight:800;line-height:1}.composition-unit{color:#64748b;margin-top:.25rem;font-size:.875rem;font-weight:600}.category-badge{border-radius:.5rem;margin-top:1rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:inline-block}.category-badge.essential{color:#dc2626;background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%)}.category-badge.athlete{color:#0891b2;background:linear-gradient(135deg,#cffafe 0%,#a5f3fc 100%)}.category-badge.fitness{color:#16a34a;background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%)}.category-badge.average{color:#ca8a04;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%)}.category-badge.high{color:#dc2626;background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%)}@media (width<=640px){.method-select,.input-grid,.measurements-grid{grid-template-columns:1fr}.visual-options{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.composition-cards{grid-template-columns:1fr}}