.bodyfat-calculator-wrapper{--bodyfat-primary: #8b5cf6;--bodyfat-primary-dark: #7c3aed;--bodyfat-primary-light: #a78bfa;--bodyfat-secondary: #06b6d4;--bodyfat-gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);--bodyfat-card-bg: #ffffff;--bodyfat-border: #e5e7eb;--bodyfat-text: #1f2937;--bodyfat-text-muted: #6b7280;--bodyfat-essential: #3b82f6;--bodyfat-athletes: #10b981;--bodyfat-fitness: #22c55e;--bodyfat-average: #f59e0b;--bodyfat-obese: #ef4444;font-family:system-ui,-apple-system,sans-serif;max-width:900px;margin:0 auto}.bodyfat-header{text-align:center;margin-bottom:2rem}.bodyfat-title{font-size:2.25rem;font-weight:800;background:var(--bodyfat-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.75rem}.bodyfat-description{font-size:1.1rem;color:var(--bodyfat-text-muted);max-width:600px;margin:0 auto}.bodyfat-formula-section{background:linear-gradient(135deg,#faf5ff,#ecfeff);border-radius:16px;padding:1.5rem;margin-bottom:2rem;border:1px solid #e9d5ff}.bodyfat-formula-title{font-size:1.1rem;font-weight:700;color:var(--bodyfat-primary-dark);margin-bottom:1rem;text-align:center}.bodyfat-formula-grid{display:flex;flex-direction:column;gap:1rem}.bodyfat-formula-card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 2px 8px #8b5cf61a;border:1px solid #e9d5ff}.bodyfat-formula-label{font-size:.9rem;font-weight:700;color:var(--bodyfat-primary);margin-bottom:.75rem;text-align:center}.bodyfat-formula-display{min-height:5rem;display:flex;align-items:center;justify-content:center;overflow-x:auto;overflow-y:hidden;padding:.5rem;-webkit-overflow-scrolling:touch}.bodyfat-calculator-container{background:var(--bodyfat-card-bg);border-radius:20px;padding:2rem;box-shadow:0 10px 40px #8b5cf626;border:1px solid var(--bodyfat-border);margin-bottom:2rem}.bodyfat-unit-toggle{display:flex;gap:.5rem;margin-bottom:1.5rem;background:#f3f4f6;padding:.375rem;border-radius:12px}.bodyfat-unit-btn{flex:1;padding:.75rem 1rem;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.125rem}.bodyfat-unit-btn:hover{background:#8b5cf61a}.bodyfat-unit-btn.active{background:var(--bodyfat-gradient);box-shadow:0 4px 12px #8b5cf64d}.bodyfat-unit-label{font-weight:700;font-size:.95rem;color:var(--bodyfat-text)}.bodyfat-unit-btn.active .bodyfat-unit-label{color:#fff}.bodyfat-unit-detail{font-size:.75rem;color:var(--bodyfat-text-muted)}.bodyfat-unit-btn.active .bodyfat-unit-detail{color:#ffffffd9}.bodyfat-gender-group{margin-bottom:1.5rem}.bodyfat-gender-buttons{display:flex;gap:.75rem}.bodyfat-gender-btn{flex:1;padding:1rem;border:2px solid var(--bodyfat-border);background:#fff;border-radius:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;color:var(--bodyfat-text)}.bodyfat-gender-btn:hover{border-color:var(--bodyfat-primary-light);background:#faf5ff}.bodyfat-gender-btn.active{border-color:var(--bodyfat-primary);background:linear-gradient(135deg,#faf5ff,#ecfeff);color:var(--bodyfat-primary-dark)}.bodyfat-gender-icon{font-size:1.25rem}.bodyfat-form{display:flex;flex-direction:column;gap:1rem}.bodyfat-form-group{display:flex;flex-direction:column;gap:.5rem}.bodyfat-label{font-weight:600;font-size:.9rem;color:var(--bodyfat-text)}.bodyfat-input-wrapper{display:flex;align-items:center;background:#f9fafb;border:2px solid var(--bodyfat-border);border-radius:12px;padding:0 1rem;transition:all .2s}.bodyfat-input-wrapper:focus-within{border-color:var(--bodyfat-primary);box-shadow:0 0 0 3px #8b5cf61a;background:#fff}.bodyfat-input{flex:1;padding:.875rem 0;border:none;background:transparent;font-size:1.1rem;font-weight:600;color:var(--bodyfat-text);outline:none}.bodyfat-input::-moz-placeholder{color:#9ca3af;font-weight:400}.bodyfat-input::placeholder{color:#9ca3af;font-weight:400}.bodyfat-input-unit{font-size:.9rem;font-weight:600;color:var(--bodyfat-text-muted);margin-left:.5rem}.bodyfat-input-hint{font-size:.8rem;color:var(--bodyfat-text-muted);font-style:italic}.bodyfat-actions{display:flex;gap:.75rem;margin-top:1rem}.bodyfat-calculate-btn{flex:2;padding:1rem 2rem;background:var(--bodyfat-gradient);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #8b5cf64d}.bodyfat-calculate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf666}.bodyfat-reset-btn{flex:1;padding:1rem;background:#f3f4f6;color:var(--bodyfat-text-muted);border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.bodyfat-reset-btn:hover{background:#e5e7eb;color:var(--bodyfat-text)}.bodyfat-results{margin-top:2rem;padding-top:2rem;border-top:2px solid var(--bodyfat-border)}.bodyfat-results-title{font-size:1.25rem;font-weight:700;color:var(--bodyfat-text);margin-bottom:1.25rem;text-align:center}.bodyfat-results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.bodyfat-result-card{background:#f9fafb;border-radius:12px;padding:1.25rem;text-align:center;border:1px solid var(--bodyfat-border)}.bodyfat-result-primary{background:linear-gradient(135deg,#faf5ff,#ecfeff);border-color:var(--bodyfat-primary-light)}.bodyfat-result-label{display:block;font-size:.8rem;font-weight:600;color:var(--bodyfat-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.bodyfat-result-value{display:block;font-size:1.75rem;font-weight:800;color:var(--bodyfat-primary);margin-bottom:.25rem}.bodyfat-result-desc{font-size:.8rem;color:var(--bodyfat-text-muted)}.bodyfat-category-essential .bodyfat-result-value{color:var(--bodyfat-essential)}.bodyfat-category-athletes .bodyfat-result-value{color:var(--bodyfat-athletes)}.bodyfat-category-fitness .bodyfat-result-value{color:var(--bodyfat-fitness)}.bodyfat-category-average .bodyfat-result-value{color:var(--bodyfat-average)}.bodyfat-category-obese .bodyfat-result-value{color:var(--bodyfat-obese)}.bodyfat-visual{margin-top:1.5rem}.bodyfat-bar{position:relative;display:flex;height:24px;border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.bodyfat-bar-segment{height:100%}.bodyfat-essential{background:var(--bodyfat-essential)}.bodyfat-athletes{background:var(--bodyfat-athletes)}.bodyfat-fitness{background:var(--bodyfat-fitness)}.bodyfat-average{background:var(--bodyfat-average)}.bodyfat-obese{background:var(--bodyfat-obese)}.bodyfat-marker{position:absolute;top:-4px;bottom:-4px;width:4px;background:var(--bodyfat-text);border-radius:2px;box-shadow:0 2px 4px #0000004d;transition:left .5s ease;transform:translate(-50%)}.bodyfat-bar-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.7rem;color:var(--bodyfat-text-muted);padding:0 .25rem}.bodyfat-content{margin-top:3rem}.bodyfat-content-section{margin-bottom:2.5rem}.bodyfat-section-title{font-size:1.5rem;font-weight:700;color:var(--bodyfat-text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:3px solid var(--bodyfat-primary);display:inline-block}.bodyfat-paragraph{color:var(--bodyfat-text);line-height:1.7;margin-bottom:1rem}.bodyfat-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}.bodyfat-feature-card{background:linear-gradient(135deg,#faf5ff,#ecfeff);border-radius:12px;padding:1.25rem;text-align:center;border:1px solid #e9d5ff}.bodyfat-feature-icon{font-size:2rem;display:block;margin-bottom:.75rem}.bodyfat-feature-title{font-size:1rem;font-weight:700;color:var(--bodyfat-primary-dark);margin-bottom:.5rem}.bodyfat-feature-desc{font-size:.85rem;color:var(--bodyfat-text-muted);line-height:1.5}.bodyfat-tips-list,.bodyfat-limitations-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.bodyfat-tip-card,.bodyfat-limitation-card{display:flex;gap:1rem;background:#f9fafb;padding:1.25rem;border-radius:12px;border-left:4px solid var(--bodyfat-primary)}.bodyfat-tip-icon,.bodyfat-limitation-icon{font-size:1.5rem;flex-shrink:0}.bodyfat-tip-title,.bodyfat-limitation-title{font-size:1rem;font-weight:700;color:var(--bodyfat-text);margin-bottom:.25rem}.bodyfat-tip-text,.bodyfat-limitation-text{font-size:.9rem;color:var(--bodyfat-text-muted);line-height:1.5}.bodyfat-table-wrapper{overflow-x:auto;margin-top:1rem;border-radius:12px;border:1px solid var(--bodyfat-border)}.bodyfat-table{width:100%;border-collapse:collapse;font-size:.9rem}.bodyfat-table th,.bodyfat-table td{padding:.875rem 1rem;text-align:left;border-bottom:1px solid var(--bodyfat-border)}.bodyfat-table th{background:var(--bodyfat-primary);color:#fff;font-weight:600}.bodyfat-table th:first-child{border-top-left-radius:11px}.bodyfat-table th:last-child{border-top-right-radius:11px}.bodyfat-table tbody tr:hover{background:#f9fafb}.bodyfat-row-essential td:first-child{border-left:4px solid var(--bodyfat-essential)}.bodyfat-row-athletes td:first-child{border-left:4px solid var(--bodyfat-athletes)}.bodyfat-row-fitness td:first-child{border-left:4px solid var(--bodyfat-fitness)}.bodyfat-row-average td:first-child{border-left:4px solid var(--bodyfat-average)}.bodyfat-row-obese td:first-child{border-left:4px solid var(--bodyfat-obese)}.bodyfat-faq-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.bodyfat-faq-item{background:#f9fafb;border-radius:12px;border:1px solid var(--bodyfat-border);overflow:hidden}.bodyfat-faq-question{padding:1rem 1.25rem;font-weight:600;color:var(--bodyfat-text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none}.bodyfat-faq-question::-webkit-details-marker{display:none}.bodyfat-faq-question:after{content:"+";font-size:1.25rem;font-weight:300;color:var(--bodyfat-primary);transition:transform .2s}.bodyfat-faq-item[open] .bodyfat-faq-question:after{transform:rotate(45deg)}.bodyfat-faq-item[open] .bodyfat-faq-question{background:linear-gradient(135deg,#faf5ff,#ecfeff);border-bottom:1px solid var(--bodyfat-border)}.bodyfat-faq-answer{padding:1rem 1.25rem;color:var(--bodyfat-text-muted);line-height:1.6}@media (max-width: 640px){.bodyfat-calculator-container{padding:1.25rem}.bodyfat-title{font-size:1.75rem}.bodyfat-results-grid{grid-template-columns:1fr}.bodyfat-actions{flex-direction:column}.bodyfat-calculate-btn,.bodyfat-reset-btn{flex:none}.bodyfat-features-grid{grid-template-columns:1fr}.bodyfat-bar-labels{font-size:.6rem}.bodyfat-formula-display{min-height:4rem;font-size:.85rem}.bodyfat-table{font-size:.8rem}.bodyfat-table th,.bodyfat-table td{padding:.625rem .5rem}}
