@layer theme,properties,base,utilities,components;@layer theme{:root,:host{--spacing: .25rem;--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family: var(--font-primary);--default-mono-font-family: var(--font-mono);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--text-7xl: 4.5rem;--text-xs-line-height: calc(1 / .75);--text-sm-line-height: calc(1.25 / .875);--text-base-line-height: 1.5 ;--text-lg-line-height: calc(1.5 / 1.125);--text-xl-line-height: calc(1.75 / 1.25);--text-2xl-line-height: calc(2 / 1.5);--text-3xl-line-height: 1.2 ;--text-4xl-line-height: calc(2.5 / 2.25);--text-5xl-line-height: 1 ;--text-6xl-line-height: 1 ;--text-7xl-line-height: 1 ;--font-primary: "Arial", sans-serif;--font-secondary: "Inter", sans-serif;--transparent: transparent;--color-background: #fafafa;--color-primary: #3078d0;--color-primary-50: color-mix(in srgb, var(--color-primary) 10%, white);--color-primary-100: color-mix(in srgb, var(--color-primary) 20%, white);--color-primary-200: color-mix(in srgb, var(--color-primary) 35%, white);--color-primary-300: color-mix(in srgb, var(--color-primary) 50%, white);--color-primary-400: color-mix(in srgb, var(--color-primary) 70%, white);--color-primary-500: var(--color-primary);--color-primary-600: color-mix(in srgb, var(--color-primary) 90%, black);--color-primary-700: color-mix(in srgb, var(--color-primary) 75%, black);--color-primary-800: color-mix(in srgb, var(--color-primary) 60%, black);--color-primary-900: color-mix(in srgb, var(--color-primary) 45%, black);--color-primary-light: var(--color-primary-50);--color-primary-dark: var(--color-primary-900);--color-secondary: #ecf2fc;--color-secondary-50: color-mix(in srgb, var(--color-secondary) 10%, white);--color-secondary-100: color-mix(in srgb, var(--color-secondary) 20%, white);--color-secondary-200: color-mix(in srgb, var(--color-secondary) 35%, white);--color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, white);--color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, white);--color-secondary-500: var(--color-secondary);--color-secondary-600: color-mix(in srgb, var(--color-secondary) 90%, black);--color-secondary-700: color-mix(in srgb, var(--color-secondary) 75%, black);--color-secondary-800: color-mix(in srgb, var(--color-secondary) 60%, black);--color-secondary-900: color-mix(in srgb, var(--color-secondary) 45%, black);--color-secondary-light: var(--color-secondary-50);--color-secondary-dark: var(--color-secondary-900);--color-tertiary: #ffedd4;--color-tertiary-50: color-mix(in srgb, var(--color-tertiary) 10%, white);--color-tertiary-100: color-mix(in srgb, var(--color-tertiary) 20%, white);--color-tertiary-200: color-mix(in srgb, var(--color-tertiary) 35%, white);--color-tertiary-300: color-mix(in srgb, var(--color-tertiary) 50%, white);--color-tertiary-400: color-mix(in srgb, var(--color-tertiary) 70%, white);--color-tertiary-500: var(--color-tertiary);--color-tertiary-600: color-mix(in srgb, var(--color-tertiary) 90%, black);--color-tertiary-700: color-mix(in srgb, var(--color-tertiary) 75%, black);--color-tertiary-800: color-mix(in srgb, var(--color-tertiary) 60%, black);--color-tertiary-900: color-mix(in srgb, var(--color-tertiary) 45%, black);--color-tertiary-light: var(--color-tertiary-50);--color-tertiary-dark: var(--color-tertiary-900);--color-black: #111827;--color-black-50: color-mix(in srgb, var(--color-black) 50%, transparent);--color-black-20: color-mix(in srgb, var(--color-black) 20%, transparent);--color-black-10: color-mix(in srgb, var(--color-black) 10%, transparent);--color-black-0: color-mix(in srgb, var(--color-black) 0%, transparent);--color-gray: #808080;--color-gray-50: color-mix(in srgb, var(--color-gray) 50%, transparent);--color-gray-20: color-mix(in srgb, var(--color-gray) 20%, transparent);--color-gray-10: color-mix(in srgb, var(--color-gray) 10%, transparent);--color-gray-light: color-mix(in srgb, var(--color-gray) 20%, white);--color-gray-dark: color-mix(in srgb, var(--color-gray) 60%, black);--color-white: #ffffff;--color-white-50: color-mix(in srgb, var(--color-white) 50%, transparent);--color-white-20: color-mix(in srgb, var(--color-white) 20%, transparent);--color-white-10: color-mix(in srgb, var(--color-white) 10%, transparent);--color-white-0: color-mix(in srgb, var(--color-white) 0%, transparent);--color-success: #52c41a;--color-info: #1890ff;--color-warning: #faad14;--color-alert: #fa541c;--color-danger: #ff4d4f;--color-success-dark: color-mix(in srgb, var(--color-success) 75%, black);--color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);--color-warning-dark: color-mix(in srgb, var(--color-warning) 75%, black);--color-alert-dark: color-mix(in srgb, var(--color-alert) 75%, black);--color-danger-dark: color-mix(in srgb, var(--color-danger) 75%, black)}}@layer base{.bmi-calculator input[type=text],.bmi-calculator input[type=email],.bmi-calculator input[type=tel],.bmi-calculator input[type=url],.bmi-calculator input[type=number],.bmi-calculator input[type=date],.bmi-calculator input[type=time],.bmi-calculator input[type=password],.bmi-calculator input[type=search],.bmi-calculator textarea,.bmi-calculator select,.bmi-calculator button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;border:none;background:transparent}.bmi-calculator input[type=text],.bmi-calculator input[type=email],.bmi-calculator input[type=tel],.bmi-calculator input[type=url],.bmi-calculator input[type=number],.bmi-calculator input[type=date],.bmi-calculator input[type=time],.bmi-calculator input[type=password],.bmi-calculator input[type=search],.bmi-calculator textarea,.bmi-calculator select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.bmi-calculator button{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}.bmi-calculator button:active,.bmi-calculator input[type=button]:active,.bmi-calculator input[type=reset]:active,.bmi-calculator input[type=submit]:active{outline:none}.bmi-calculator input:focus,.bmi-calculator select:focus,.bmi-calculator textarea:focus,.bmi-calculator button:focus{outline:none}.bmi-calculator input:disabled,.bmi-calculator select:disabled,.bmi-calculator textarea:disabled,.bmi-calculator button:disabled{opacity:.6;cursor:not-allowed}.bmi-calculator label{display:inline-block;margin:0;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}}@layer components{.bmi-calculator{width:100%;background-color:var(--color-primary-light);padding:calc(var(--spacing) * 6);margin-bottom:calc(var(--spacing) * 6)}.bmi-calculator__header{text-align:center;margin-bottom:calc(var(--spacing) * 6)}.bmi-calculator__title{margin:0 0 calc(var(--spacing) * 2) 0;font-size:var(--text-2xl);font-weight:700;color:var(--color-black)}.bmi-calculator__description{margin:0;font-size:var(--text-sm);color:var(--color-gray)}.bmi-calculator__content{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing) * 8);align-items:stretch}@media(max-width:768px){.bmi-calculator__content{grid-template-columns:1fr;gap:calc(var(--spacing) * 6)}}.bmi-calculator__form{display:flex;flex-direction:column;gap:calc(var(--spacing) * 6)}.bmi-calculator__input-field{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.bmi-calculator__input-field label{font-size:var(--text-sm);font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#333}.bmi-calculator__input-wrapper{display:flex;align-items:center;position:relative}.bmi-calculator__input{width:100%;padding:calc(var(--spacing) * 3) calc(var(--spacing) * 4);border:1px solid #e0e0e0;font-family:inherit;font-size:var(--text-base);background-color:#fff;color:var(--color-black);transition:border-color var(--default-transition-duration) var(--default-transition-timing-function),box-shadow var(--default-transition-duration) var(--default-transition-timing-function)}.bmi-calculator__input::placeholder{color:#999}.bmi-calculator__input:focus{border-color:#333;box-shadow:0 0 0 3px #3333331a}.bmi-calculator__input.bmi-calculator__input--error{border-color:var(--color-danger)}.bmi-calculator__input.bmi-calculator__input--error:focus{box-shadow:0 0 0 3px #ff4d4f33}.bmi-calculator__unit{position:absolute;right:calc(var(--spacing) * 4);color:#999;font-size:var(--text-sm);font-weight:500;pointer-events:none}.bmi-calculator__error{font-size:var(--text-xs);color:var(--color-danger);opacity:0;transition:opacity var(--default-transition-duration) var(--default-transition-timing-function);margin-top:calc(var(--spacing) * -1)}.bmi-calculator__button{display:inline-flex;justify-content:center;align-items:center;padding:calc(var(--spacing) * 3) calc(var(--spacing) * 6);background-color:var(--color-primary);border:1px solid var(--color-primary);color:#fff;font-size:var(--text-base);font-weight:600;cursor:pointer;transition:background-color var(--default-transition-duration) var(--default-transition-timing-function),border-color var(--default-transition-duration) var(--default-transition-timing-function);margin-top:calc(var(--spacing) * 2)}.bmi-calculator__button:hover{background-color:var(--color-primary-light);color:var(--color-primary)}.bmi-calculator__button:active{background-color:var(--color-primary-light);color:var(--color-primary)}.bmi-calculator__button:disabled{opacity:.5;cursor:not-allowed}.bmi-calculator__button.bmi-calculator__button--calculate{width:100%}.bmi-calculator__results{display:flex;flex-direction:column;gap:calc(var(--spacing) * 6);align-items:center;justify-content:center;background-color:#f5f5f5;border:1px solid #e0e0e0}.bmi-calculator__results-placeholder{text-align:center;color:#999;font-size:var(--text-sm);padding:calc(var(--spacing) * 6)}.bmi-calculator__results-content{display:flex;flex-direction:column;width:100%}.bmi-calculator__score-box,.bmi-calculator__category-box{padding:calc(var(--spacing) * 6);background-color:var(--color-primary);text-align:center}.bmi-calculator__category-box{background-color:var(--color-primary-light)}.bmi-calculator__label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-white);text-transform:uppercase;letter-spacing:.05em;margin-bottom:calc(var(--spacing) * 2)}.bmi-calculator__category-box .bmi-calculator__label{color:var(--color-black)}.bmi-calculator__value{display:block;font-size:var(--text-3xl);font-weight:700;color:var(--color-primary-light)}.bmi-calculator__category-box .bmi-calculator__value{font-size:var(--text-xl);color:var(--color-primary)}.bmi-calculator__scale{padding:calc(var(--spacing) * 4)}.bmi-calculator__scale-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--spacing) * 1);height:25px;margin-bottom:calc(var(--spacing) * 3);overflow:visible;position:relative}.bmi-calculator__scale-marker{position:absolute;top:-30px;transform:translate(-50%);width:auto;height:auto;opacity:0;transition:left var(--default-transition-duration) var(--default-transition-timing-function),opacity var(--default-transition-duration) var(--default-transition-timing-function);pointer-events:none;z-index:10;display:flex;flex-direction:column;align-items:center}.bmi-calculator__scale-marker-label{font-size:var(--text-xs);font-weight:600;color:var(--color-white);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background-color:var(--color-primary);padding:6px;border-radius:1px;line-height:8px}.bmi-calculator__scale-marker-arrow{position:relative;top:10px;width:0;height:0;border-left:calc(var(--spacing) * 1.5) solid transparent;border-right:calc(var(--spacing) * 1.5) solid transparent;border-top:calc(var(--spacing) * 1.5) solid var(--color-white)}.bmi-calculator__scale-marker-arrow--bottom{top:auto;bottom:0;border-top:none;border-bottom:calc(var(--spacing) * 1.5) solid var(--color-white);border-left:calc(var(--spacing) * 1.5) solid transparent;border-right:calc(var(--spacing) * 1.5) solid transparent}.bmi-calculator__scale-marker-line{position:relative;top:4px;width:2px;height:calc(var(--spacing) * 6);background-color:var(--color-white)}.bmi-calculator__scale-section.bmi-calculator__scale-section--underweight{background-color:#64afcd}.bmi-calculator__scale-section.bmi-calculator__scale-section--healthy{background-color:var(--color-success)}.bmi-calculator__scale-section.bmi-calculator__scale-section--overweight{background-color:var(--color-warning)}.bmi-calculator__scale-section.bmi-calculator__scale-section--obese{background-color:var(--color-danger)}.bmi-calculator__scale-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--spacing) * 1);text-align:center}.bmi-calculator__scale-labels span{font-size:var(--text-xs);color:#999;font-weight:500}.bmi-calculator__healthy-range{padding:calc(var(--spacing) * 6);background-color:#f0fdf4;border:1px solid #86efac}.bmi-calculator__healthy-range p{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--color-success);text-align:center}.bmi-calculator__healthy-range-value{color:#333;font-weight:700}@media(max-width:600px){.bmi-calculator__title{font-size:var(--text-xl)}.bmi-calculator__input{font-size:16px}.bmi-calculator__button{font-size:.9375rem;padding:calc(var(--spacing) * 2.5) calc(var(--spacing) * 5)}.bmi-calculator__results{margin-top:calc(var(--spacing) * 4)}}}