*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #3B82F6;--primary-dark: #1D4ED8;--secondary: #EC4899;--secondary-dark: #BE185D;--accent: #8B5CF6;--accent-dark: #7C3AED;--success: #10B981;--success-dark: #059669;--warning: #F59E0B;--warning-dark: #D97706;--light-bg: #f8fafc;--light-card: #ffffff;--light-text: #1e293b;--light-subtext: #64748b;--light-border: #e2e8f0;--light-hover: #f1f5f9;--dark-bg: #0f172a;--dark-card: #1e293b;--dark-text: #e2e8f0;--dark-subtext: #94a3b8;--dark-border: #334155;--dark-hover: #334155}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--light-bg);color:var(--light-text);transition:background-color .3s ease,color .3s ease}body.dark-mode{background-color:var(--dark-bg);color:var(--dark-text)}.app{min-height:100vh;padding:20px 0}.container{max-width:600px;margin:0 auto;padding:0 20px}.header{text-align:center;margin-bottom:32px}.header-icon{display:flex;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);border-radius:16px;box-shadow:0 4px 6px #3b82f633}.title{font-size:32px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,var(--light-text) 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark-mode .title{background:linear-gradient(135deg,var(--dark-text) 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:16px;color:var(--light-subtext);margin-bottom:24px}.dark-mode .subtitle{color:var(--dark-subtext)}.settings-row{display:flex;justify-content:center;gap:16px;margin-top:20px}.setting-button{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--light-hover);border:1px solid var(--light-border);border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s ease}.setting-button:hover{background-color:var(--light-border);transform:translateY(-2px)}.dark-mode .setting-button{background-color:var(--dark-card);border-color:var(--dark-border);color:var(--dark-text)}.dark-mode .setting-button:hover{background-color:var(--dark-hover)}.setting-text{font-weight:500}.form-section{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.input-card{background-color:var(--light-card);padding:20px;border-radius:16px;box-shadow:0 4px 6px #0000000d;transition:all .3s ease;border-left:4px solid var(--primary)}.input-card:nth-child(2){border-left-color:var(--secondary)}.input-card:nth-child(3){border-left-color:var(--accent)}.dark-mode .input-card{background-color:var(--dark-card);box-shadow:0 4px 6px #0003}.input-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0000001a}.dark-mode .input-card:hover{box-shadow:0 8px 15px #0000004d}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.input-label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--light-text)}.dark-mode .input-label{color:var(--dark-text)}.input-label-text{font-size:16px}.unit-toggle{display:flex;background-color:var(--light-hover);border-radius:8px;padding:4px;border:1px solid var(--light-border)}.dark-mode .unit-toggle{background-color:var(--dark-hover);border-color:var(--dark-border)}.unit-option{padding:6px 12px;border:none;background:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--light-subtext)}.unit-option.active{background-color:var(--primary);color:#fff;box-shadow:0 2px 4px #0000001a}.dark-mode .unit-option{color:var(--dark-subtext)}.dark-mode .unit-option.active{background-color:var(--primary);color:#fff;box-shadow:0 2px 4px #0000004d}.input-with-unit{position:relative;display:flex;align-items:center}.input{width:100%;padding:16px;border:2px solid var(--light-border);border-radius:12px;font-size:16px;transition:all .2s ease;background-color:#fff;color:var(--light-text)}.dark-mode .input{background-color:#1a243b;border-color:var(--dark-border);color:var(--dark-text)}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f633}.large-input{padding-right:60px;font-size:18px;font-weight:600}.input-unit{position:absolute;right:16px;font-weight:600;color:var(--light-subtext)}.dark-mode .input-unit{color:var(--dark-subtext)}.height-row{display:flex;gap:12px}.height-row .input-with-unit{flex:1}.gender-toggle{display:flex;background-color:var(--light-hover);border-radius:12px;padding:4px;border:1px solid var(--light-border);gap:4px}.dark-mode .gender-toggle{background-color:var(--dark-hover);border-color:var(--dark-border)}.gender-option{flex:1;padding:12px;border:none;background:none;border-radius:10px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--light-subtext)}.gender-option.active{background-color:var(--secondary);color:#fff;box-shadow:0 2px 8px #0000001a}.dark-mode .gender-option{color:var(--dark-subtext)}.dark-mode .gender-option.active{background-color:var(--secondary);color:#fff;box-shadow:0 2px 8px #0000004d}.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.activity-option{display:flex;flex-direction:column;align-items:flex-start;padding:16px;border:2px solid var(--light-border);border-radius:12px;background:none;cursor:pointer;transition:all .2s ease;text-align:left;background-color:var(--light-card)}.dark-mode .activity-option{border-color:var(--dark-border);background-color:var(--dark-card)}.activity-option:hover{border-color:var(--primary);transform:translateY(-2px)}.activity-option.active{border-color:var(--primary);background-color:#3b82f61a}.dark-mode .activity-option.active{background-color:#3b82f633}.activity-option:nth-child(1).active{border-color:var(--primary);background-color:#3b82f61a}.activity-option:nth-child(2).active{border-color:var(--secondary);background-color:#ec48991a}.activity-option:nth-child(3).active{border-color:var(--accent);background-color:#8b5cf61a}.activity-option:nth-child(4).active{border-color:var(--success);background-color:#10b9811a}.dark-mode .activity-option:nth-child(1).active{background-color:#3b82f633}.dark-mode .activity-option:nth-child(2).active{background-color:#ec489933}.dark-mode .activity-option:nth-child(3).active{background-color:#8b5cf633}.dark-mode .activity-option:nth-child(4).active{background-color:#10b98133}.activity-option-text{font-weight:600;margin-bottom:4px;color:var(--light-text)}.dark-mode .activity-option-text{color:var(--dark-text)}.activity-option-desc{font-size:14px;color:var(--light-subtext)}.dark-mode .activity-option-desc{color:var(--dark-subtext)}.calculate-section{position:sticky;bottom:20px;z-index:10;display:flex;justify-content:center}.calculate-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:400px;padding:20px;background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-dark) 100%);border:none;border-radius:16px;color:#fff;font-size:18px;font-weight:600;cursor:pointer;box-shadow:0 8px 15px #ec489966;transition:all .3s ease}.calculate-button:hover:not(.disabled){transform:translateY(-3px);box-shadow:0 12px 20px #ec489980}.calculate-button:active:not(.disabled){transform:translateY(0)}.calculate-button.disabled{background:#cbd5e1;cursor:not-allowed;box-shadow:none}.dark-mode .calculate-button.disabled{background:#475569}.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.back-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:none;background-color:var(--light-hover);cursor:pointer;transition:all .2s ease}.back-button:hover{background-color:var(--light-border);transform:translate(-2px)}.dark-mode .back-button{background-color:var(--dark-card);color:var(--dark-text)}.dark-mode .back-button:hover{background-color:var(--dark-hover)}.results-title{font-size:28px;font-weight:700;text-align:center;flex:1}.placeholder{width:48px}.result-card{background-color:var(--light-card);padding:24px;border-radius:16px;box-shadow:0 4px 6px #0000000d;margin-bottom:24px;border-left:4px solid var(--primary);transition:all .3s ease}.result-card:nth-child(2){border-left-color:var(--accent)}.dark-mode .result-card{background-color:var(--dark-card);box-shadow:0 4px 6px #0003}.result-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0000001a}.dark-mode .result-card:hover{box-shadow:0 8px 15px #0000004d}.bmi-header,.calorie-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.icon-container{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%)}.calorie-header .icon-container{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%)}.card-title{font-size:20px;font-weight:600;color:var(--light-text)}.dark-mode .card-title{color:var(--dark-text)}.bmi-value{font-size:48px;font-weight:800;text-align:center;margin-bottom:8px;color:var(--primary)}.bmi-category{font-size:20px;font-weight:600;text-align:center;margin-bottom:16px;color:var(--success)}.bmi-message{text-align:center;color:var(--light-subtext);line-height:1.6}.dark-mode .bmi-message{color:var(--dark-subtext)}.calorie-range{font-size:32px;font-weight:700;text-align:center;margin-bottom:8px;color:var(--accent)}.calorie-subtext{text-align:center;color:var(--light-subtext);margin-bottom:16px}.dark-mode .calorie-subtext{color:var(--dark-subtext)}.info-box{display:flex;align-items:flex-start;gap:12px;padding:16px;background-color:var(--light-hover);border-radius:12px;margin-top:16px;border-left:3px solid var(--warning)}.dark-mode .info-box{background-color:var(--dark-hover)}.info-text{font-size:14px;color:var(--light-subtext);line-height:1.5}.dark-mode .info-text{color:var(--dark-subtext)}.section-header{margin-bottom:20px}.section-subtitle{color:var(--light-subtext);margin-top:4px}.dark-mode .section-subtitle{color:var(--dark-subtext)}.tips-container{display:flex;flex-direction:column;gap:16px}.tip-card{display:flex;align-items:flex-start;gap:16px;padding:16px;background-color:var(--light-bg);border-radius:12px;transition:all .2s ease;border-left:3px solid var(--success)}.dark-mode .tip-card{background-color:var(--dark-bg)}.tip-card:hover{transform:translate(4px)}.tip-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--success)}.tip-text{font-weight:500;line-height:1.5;color:var(--light-text)}.dark-mode .tip-text{color:var(--dark-text)}.exercise-card{padding:20px;background-color:var(--light-bg);border-radius:12px;margin-bottom:20px;transition:all .2s ease;border-left:3px solid var(--warning)}.dark-mode .exercise-card{background-color:var(--dark-bg)}.exercise-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.dark-mode .exercise-card:hover{box-shadow:0 4px 8px #0000004d}.exercise-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}.exercise-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--warning)}.exercise-title-container{flex:1}.exercise-title{font-size:18px;font-weight:600;margin-bottom:4px;color:var(--light-text)}.dark-mode .exercise-title{color:var(--dark-text)}.exercise-description{color:var(--light-subtext);line-height:1.5}.dark-mode .exercise-description{color:var(--dark-subtext)}.examples-container,.resources-container{margin-bottom:20px}.examples-title,.resources-title{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--light-text)}.dark-mode .examples-title,.dark-mode .resources-title{color:var(--dark-text)}.example-item{display:flex;align-items:center;gap:12px;margin-bottom:8px}.bullet-point{width:8px;height:8px;border-radius:50%;flex-shrink:0;background-color:var(--primary)}.example-text{color:var(--light-subtext)}.dark-mode .example-text{color:var(--dark-subtext)}.resource-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;background:none;border:1px solid var(--light-border);border-radius:8px;cursor:pointer;transition:all .2s ease;margin-bottom:8px}.dark-mode .resource-link{border-color:var(--dark-border)}.resource-link:hover{border-color:var(--primary);background-color:#3b82f61a;transform:translate(4px)}.dark-mode .resource-link:hover{background-color:#3b82f633}.resource-text{font-weight:500;color:var(--primary)}.recalculate-section{display:flex;justify-content:center;margin-top:32px}.recalculate-button{display:flex;align-items:center;gap:12px;padding:16px 32px;background-color:var(--light-hover);border:2px solid var(--light-border);border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.dark-mode .recalculate-button{background-color:var(--dark-card);border-color:var(--dark-border);color:var(--dark-text)}.recalculate-button:hover{background-color:var(--light-border);transform:translateY(-2px)}.dark-mode .recalculate-button:hover{background-color:var(--dark-hover)}.recalculate-button-text{color:var(--primary)}@media (max-width: 640px){.container{padding:0 16px}.title{font-size:28px}.subtitle{font-size:14px}.settings-row{flex-direction:column;align-items:center}.activity-grid{grid-template-columns:1fr}.height-row{flex-direction:column}.bmi-value{font-size:36px}.calorie-range{font-size:24px}.exercise-header{flex-direction:column;align-items:flex-start}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app{animation:fadeIn .4s ease-out}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--light-hover)}.dark-mode ::-webkit-scrollbar-track{background:var(--dark-card)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.dark-mode ::-webkit-scrollbar-thumb{background:#475569}::-webkit-scrollbar-thumb:hover{background:#94a3b8}