.mbc-widget {
--mbc-accent: #1f9d6b;
--mbc-accent-light: color-mix(in srgb, var(--mbc-accent) 15%, white);
--mbc-ink: #1a2332;
--mbc-ink-soft: #5b6678;
--mbc-line: #e4e7ec;
--mbc-surface: #ffffff;
--mbc-surface-soft: #f6f8f9;
--mbc-danger: #d64545;
--mbc-radius: 14px;
--mbc-radius-sm: 10px;
box-sizing: border-box;
max-width: 560px;
margin: 0 auto;
padding: 28px;
background: var(--mbc-surface);
border: 1px solid var(--mbc-line);
border-radius: var(--mbc-radius);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.04);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--mbc-ink);
line-height: 1.45;
}
.mbc-widget *,
.mbc-widget *::before,
.mbc-widget *::after {
box-sizing: inherit;
}
.mbc-widget [hidden] {
display: none !important;
} .mbc-progress {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 22px;
}
.mbc-progress__dot {
width: 28px;
height: 4px;
border-radius: 4px;
background: var(--mbc-line);
transition: background-color 0.25s ease;
}
.mbc-progress__dot.is-active,
.mbc-progress__dot.is-complete {
background: var(--mbc-accent);
}
.mbc-progress__label {
margin-left: auto;
font-size: 13px;
color: var(--mbc-ink-soft);
font-weight: 500;
} .mbc-step__title {
margin: 0 0 18px;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
}
.mbc-field-group {
margin-bottom: 18px;
}
.mbc-field-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mbc-ink-soft);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mbc-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mbc-field-group--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mbc-row--buttons {
grid-template-columns: auto 1fr;
align-items: center;
margin-top: 8px;
}
.mbc-error {
background: color-mix(in srgb, var(--mbc-danger) 8%, white);
border: 1px solid color-mix(in srgb, var(--mbc-danger) 30%, white);
color: var(--mbc-danger);
border-radius: var(--mbc-radius-sm);
padding: 10px 14px;
font-size: 14px;
margin-bottom: 16px;
} .mbc-input-suffix {
display: flex;
align-items: center;
border: 1px solid var(--mbc-line);
border-radius: var(--mbc-radius-sm);
background: var(--mbc-surface-soft);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mbc-input-suffix:focus-within {
border-color: var(--mbc-accent);
box-shadow: 0 0 0 3px var(--mbc-accent-light);
}
.mbc-input-suffix input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 12px 4px 12px 14px;
font-size: 16px;
font-weight: 600;
color: var(--mbc-ink);
outline: none;
-moz-appearance: textfield;
}
.mbc-input-suffix span {
padding: 0 14px;
font-size: 13px;
color: var(--mbc-ink-soft);
font-weight: 600;
white-space: nowrap;
} .mbc-toggle {
display: inline-flex;
background: var(--mbc-surface-soft);
border: 1px solid var(--mbc-line);
border-radius: 999px;
padding: 3px;
}
.mbc-toggle__option {
appearance: none;
border: none;
background: transparent;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--mbc-ink-soft);
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.mbc-toggle__option.is-active {
background: var(--mbc-ink);
color: #fff;
} .mbc-pill-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mbc-pill {
position: relative;
flex: 1 1 0;
min-width: 92px;
text-align: center;
padding: 12px 10px;
border: 1px solid var(--mbc-line);
border-radius: var(--mbc-radius-sm);
font-size: 14px;
font-weight: 600;
color: var(--mbc-ink-soft);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
background: var(--mbc-surface);
}
.mbc-pill input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.mbc-pill:has(input:checked) {
border-color: var(--mbc-accent);
color: var(--mbc-accent);
background: var(--mbc-accent-light);
}
.mbc-pill:has(input:focus-visible) {
outline: 2px solid var(--mbc-accent);
outline-offset: 2px;
} .mbc-card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mbc-card {
position: relative;
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 14px;
border: 1px solid var(--mbc-line);
border-radius: var(--mbc-radius-sm);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mbc-card input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.mbc-card__title {
font-size: 14px;
font-weight: 700;
color: var(--mbc-ink);
}
.mbc-card__desc {
font-size: 12px;
color: var(--mbc-ink-soft);
}
.mbc-card:has(input:checked) {
border-color: var(--mbc-accent);
background: var(--mbc-accent-light);
}
.mbc-card:has(input:focus-visible) {
outline: 2px solid var(--mbc-accent);
outline-offset: 2px;
} .mbc-btn {
appearance: none;
border: none;
border-radius: 999px;
padding: 13px 22px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.mbc-btn:active {
transform: scale(0.98);
}
.mbc-btn--primary {
background: var(--mbc-accent);
color: #fff;
width: 100%;
}
.mbc-btn--primary:disabled {
opacity: 0.6;
cursor: default;
}
.mbc-btn--ghost {
background: transparent;
color: var(--mbc-ink-soft);
border: 1px solid var(--mbc-line);
}
.mbc-row--buttons .mbc-btn--primary {
width: auto;
justify-self: end;
} .mbc-result-top {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.mbc-gauge {
position: relative;
width: 140px;
flex-shrink: 0;
}
.mbc-gauge svg {
width: 100%;
display: block;
}
.mbc-gauge__track,
.mbc-gauge__fill {
fill: none;
stroke-width: 10;
stroke-linecap: round;
}
.mbc-gauge__track {
stroke: var(--mbc-line);
}
.mbc-gauge__fill {
stroke: var(--mbc-accent);
stroke-dasharray: 157;
stroke-dashoffset: 157;
transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mbc-gauge__value {
position: absolute;
inset: auto 0 0 0;
text-align: center;
display: flex;
flex-direction: column;
}
.mbc-gauge__number {
font-size: 26px;
font-weight: 800;
line-height: 1;
}
.mbc-gauge__label {
font-size: 11px;
font-weight: 700;
color: var(--mbc-ink-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mbc-result-top__meta {
flex: 1;
}
.mbc-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: var(--mbc-accent-light);
color: var(--mbc-accent);
margin-bottom: 8px;
}
.mbc-badge.is-underweight,
.mbc-badge.is-overweight {
background: #fff3e0;
color: #b5690a;
}
.mbc-badge.is-obese {
background: #fdecec;
color: var(--mbc-danger);
}
.mbc-result-top__stat {
margin: 0;
font-size: 14px;
color: var(--mbc-ink-soft);
}
.mbc-result-top__stat strong {
color: var(--mbc-ink);
} .mbc-calorie-target {
text-align: center;
background: var(--mbc-surface-soft);
border-radius: var(--mbc-radius);
padding: 20px;
margin-bottom: 20px;
}
.mbc-calorie-target__number {
display: block;
font-size: 40px;
font-weight: 800;
color: var(--mbc-accent);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.mbc-calorie-target__label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mbc-ink-soft);
margin-top: 2px;
}
.mbc-calorie-target__sub {
margin: 10px 0 0;
font-size: 12.5px;
color: var(--mbc-ink-soft);
}
.mbc-calorie-target__sub strong {
color: var(--mbc-ink);
} .mbc-macros {
display: flex;
flex-direction: column;
gap: 14px;
}
.mbc-macro__head {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
}
.mbc-macro__bar {
height: 9px;
border-radius: 999px;
background: var(--mbc-line);
overflow: hidden;
}
.mbc-macro__bar span {
display: block;
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mbc-macro--protein .mbc-macro__bar span { background: #2f6fed; }
.mbc-macro--carbs .mbc-macro__bar span   { background: #f2a93b; }
.mbc-macro--fat .mbc-macro__bar span     { background: #e0578a; } @media (max-width: 480px) {
.mbc-widget {
padding: 20px;
border-radius: 0;
border-left: none;
border-right: none;
max-width: 100%;
}
.mbc-row,
.mbc-card-row {
grid-template-columns: 1fr;
}
.mbc-pill-row {
flex-wrap: wrap;
}
.mbc-result-top {
flex-direction: column;
text-align: center;
}
.mbc-calorie-target__number {
font-size: 34px;
}
.mbc-row--buttons {
grid-template-columns: 1fr 1fr;
}
.mbc-row--buttons .mbc-btn--primary {
width: 100%;
}
} @media (prefers-reduced-motion: reduce) {
.mbc-widget * {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
} @supports not selector(:has(*)) {
.mbc-pill input:checked + span {
color: var(--mbc-accent);
}
.mbc-pill input:checked ~ * {
color: var(--mbc-accent);
}
}