.oww-tool {
    --oww-green: #176b54;
    --oww-green-dark: #0f4e3d;
    --oww-green-soft: #e9f5ef;
    --oww-cream: #fffdf7;
    --oww-gold: #d59b35;
    --oww-text: #1d2c27;
    --oww-muted: #61726c;
    --oww-border: #dce8e2;
    max-width: 1120px;
    margin: 32px auto;
    padding: clamp(18px, 3vw, 36px);
    border: 1px solid var(--oww-border);
    border-radius: 24px;
    background: linear-gradient(145deg, #fff 0%, var(--oww-cream) 100%);
    box-shadow: 0 18px 50px rgba(20, 70, 54, .08);
    color: var(--oww-text);
    font-family: inherit;
}

.oww-tool *, .oww-tool *::before, .oww-tool *::after { box-sizing: border-box; }
.oww-tool h2, .oww-tool h3, .oww-tool p { margin-top: 0; }
.oww-tool__header { max-width: 780px; margin-bottom: 22px; }
.oww-tool__header h2 { margin: 7px 0 10px; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; color: var(--oww-green-dark); }
.oww-tool__header p { color: var(--oww-muted); font-size: 17px; line-height: 1.65; }
.oww-feature-strip { display: flex; flex-wrap: wrap; gap: 9px 18px; color: var(--oww-green-dark); font-size: 13px; font-weight: 700; }
.oww-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.oww-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f1f5f3; color: var(--oww-muted); font-size: 13px; font-weight: 700; }
.oww-steps li b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #dce8e2; color: var(--oww-green-dark); }
.oww-steps li.is-active { background: var(--oww-green-soft); color: var(--oww-green-dark); }
.oww-steps li.is-active b { background: var(--oww-green); color: #fff; }
.oww-eyebrow, .oww-result-kicker { color: var(--oww-green); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.oww-notice { margin-bottom: 22px; padding: 13px 16px; border-left: 4px solid var(--oww-gold); border-radius: 8px; background: #fff8e8; color: #68512a; font-size: 14px; }
.oww-grid { display: grid; gap: 20px; align-items: start; }
.oww-grid--recipe { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.oww-grid--gap { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); }
.oww-card, .oww-suggestions { padding: 22px; border: 1px solid var(--oww-border); border-radius: 18px; background: #fff; }
.oww-field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 16px; }
.oww-field-row--three { grid-template-columns: repeat(3, 1fr); }
.oww-field { display: flex; flex-direction: column; gap: 7px; }
.oww-field > span { font-size: 13px; font-weight: 750; color: #354b43; }
.oww-field input, .oww-field select, .oww-ingredient-row input, .oww-ingredient-row select {
    width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cbdad3; border-radius: 10px; background: #fff; color: var(--oww-text); font: inherit;
}
.oww-field input:focus, .oww-field select:focus, .oww-ingredient-row input:focus, .oww-ingredient-row select:focus { outline: 3px solid rgba(23,107,84,.14); border-color: var(--oww-green); }
.oww-ingredient-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 10px; }
.oww-ingredient-heading h3 { margin: 0; font-size: 18px; }
.oww-ingredient-row { display: grid; grid-template-columns: minmax(145px, .9fr) minmax(180px, 1.4fr) minmax(80px, .55fr) minmax(75px, .5fr) 38px; gap: 8px; margin-bottom: 12px; align-items: center; }
.oww-remove { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff0ef; color: #a1322d; font-size: 20px; cursor: pointer; }
.oww-custom-food { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 7px; padding: 10px; border-radius: 10px; background: #f5f8f6; }
.oww-custom-food[hidden] { display: none; }
.oww-custom-food input { min-width: 0; }
.oww-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.oww-button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--oww-green); border-radius: 999px; background: var(--oww-green); color: #fff; font: inherit; font-weight: 750; cursor: pointer; transition: .18s ease; }
.oww-button:hover { background: var(--oww-green-dark); transform: translateY(-1px); }
.oww-button--secondary { min-height: 38px; padding: 7px 13px; background: var(--oww-green-soft); color: var(--oww-green-dark); }
.oww-button--ghost { background: transparent; color: var(--oww-green); }
.oww-error { min-height: 20px; margin: 10px 0 0; color: #a1322d; font-size: 13px; }
.oww-results { position: sticky; top: 24px; min-height: 330px; background: linear-gradient(160deg, var(--oww-green-dark), var(--oww-green)); color: #fff; }
.oww-results .oww-result-kicker { color: #cdeadd; }
.oww-results h3 { color: #fff; }
.oww-empty-state { display: flex; min-height: 285px; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: rgba(255,255,255,.82); }
.oww-empty-state h3 { margin-bottom: 8px; }
.oww-empty-state__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 50%; background: rgba(255,255,255,.13); font-size: 27px; }
.oww-empty-state--inline { min-height: 150px; color: var(--oww-muted); }
.oww-empty-state--inline h3 { color: var(--oww-text); }
.oww-result-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.oww-result-tabs button { padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 12px; cursor: pointer; }
.oww-result-tabs button.is-active { background: #fff; color: var(--oww-green-dark); font-weight: 750; }
.oww-macro-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
.oww-macro-card { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.11); }
.oww-macro-card strong { display: block; font-size: 22px; color: #fff; }
.oww-macro-card span { color: rgba(255,255,255,.75); font-size: 12px; }
.oww-result-summary { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.6; }
.oww-save-trigger { width: 100%; margin-top: 14px; padding: 11px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: #fff; color: var(--oww-green-dark); font: inherit; font-weight: 800; cursor: pointer; }
.oww-save-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; padding: 24px; border: 1px solid #aed4c4; border-radius: 18px; background: linear-gradient(135deg, #effaf5, #fffaf0); }
.oww-save-panel[hidden] { display: none; }
.oww-save-panel h3 { margin: 4px 0 8px; color: var(--oww-green-dark); }
.oww-save-panel p { color: var(--oww-muted); line-height: 1.55; }
.oww-consent { display: flex; gap: 9px; margin: 12px 0; color: #4a5f57; font-size: 12px; line-height: 1.5; }
.oww-consent input { width: 18px; height: 18px; flex: 0 0 auto; }
.oww-form-status { margin: 9px 0 0 !important; min-height: 20px; font-size: 13px; font-weight: 700; }
.oww-form-status.is-success { color: var(--oww-green-dark); }
.oww-form-status.is-error { color: #a1322d; }
.oww-methodology { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--oww-border); border-radius: 12px; background: #fff; }
.oww-methodology summary { cursor: pointer; color: var(--oww-green-dark); font-weight: 750; }
.oww-methodology p { margin: 10px 0 0; color: var(--oww-muted); font-size: 14px; line-height: 1.6; }
.oww-source { margin: 14px 2px 0 !important; color: var(--oww-muted); font-size: 12px; line-height: 1.55; }
.oww-tool-description { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--oww-border); }
.oww-tool-description h2,.oww-tool-description h3 { color: var(--oww-green-dark); }
.oww-tool-description h2 { font-size: clamp(25px,3vw,34px); }
.oww-tool-description h3 { margin-top: 25px; font-size: 21px; }
.oww-tool-description p,.oww-tool-description li { color: var(--oww-muted); line-height: 1.75; }
.oww-tool-description a { color: var(--oww-green); font-weight: 750; }
.oww-tool-description details { margin: 9px 0; padding: 13px 15px; border: 1px solid var(--oww-border); border-radius: 11px; background: #fff; }
.oww-tool-description summary { cursor: pointer; color: var(--oww-green-dark); font-weight: 750; }
.oww-tool-description details p { margin: 10px 0 0; }
.oww-example-box { margin: 20px 0; padding: 17px 19px; border-left: 4px solid var(--oww-gold); border-radius: 10px; background: #fff8e8; }
.oww-example-box strong { color: #604b27; }
.oww-example-box p { margin: 6px 0 0; color: #685a3e; }
.oww-legacy-enhancement { max-width: 1120px; margin: 26px auto; padding: clamp(20px,3vw,34px); border: 1px solid #dce8e2; border-radius: 20px; background: #fff; color: #1d2c27; box-shadow: 0 12px 35px rgba(20,70,54,.06); }
.oww-legacy-enhancement h2,.oww-legacy-enhancement h3 { color: #0f4e3d; }
.oww-legacy-enhancement p,.oww-legacy-enhancement li { color: #53675f; line-height: 1.7; }
.oww-legacy-enhancement details { margin: 9px 0; padding: 12px 14px; border: 1px solid #dce8e2; border-radius: 10px; }
.oww-legacy-enhancement summary { cursor: pointer; color: #0f4e3d; font-weight: 750; }
.oww-journey-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 20px 0; }
.oww-journey-card { padding: 18px; border: 1px solid #dce8e2; border-radius: 15px; background: linear-gradient(145deg,#f5fbf8,#fffdf7); }
.oww-journey-card h3 { margin: 0 0 7px; font-size: 18px; }
.oww-journey-card p { margin-bottom: 12px; font-size: 14px; }
.oww-journey-card a { color: #176b54; font-weight: 800; text-decoration: none; }
.oww-safety-note { margin-bottom: 20px; padding: 15px 17px; border-left: 4px solid #d59b35; border-radius: 9px; background: #fff8e8; color: #604b27; line-height: 1.6; }
.oww-article-tools { margin: 24px 0; padding: 18px; border: 1px solid #b9d8ca; border-radius: 14px; background: #f3faf6; }
.oww-article-tools strong { color: #0f4e3d; font-size: 18px; }
.oww-article-tools p { margin: 6px 0 12px; }
.oww-article-tools a { display: inline-block; margin: 5px 9px 5px 0; padding: 8px 13px; border-radius: 999px; background: #176b54; color: #fff; text-decoration: none; font-weight: 750; }
.oww-gap-overview { text-align: center; }
.oww-gap-number strong { display: block; font-size: 58px; line-height: 1; color: var(--oww-green-dark); }
.oww-gap-number span { color: var(--oww-muted); font-size: 14px; }
.oww-progress { height: 9px; margin: 18px 0 9px; overflow: hidden; border-radius: 999px; background: #e7eeeb; }
.oww-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--oww-gold), var(--oww-green)); transition: width .35s ease; }
.oww-gap-overview > p:last-child { color: var(--oww-muted); font-size: 13px; }
.oww-suggestions { margin-top: 20px; }
.oww-suggestions__heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.oww-suggestions__heading h3 { margin-bottom: 0; }
.oww-badge { padding: 6px 10px; border-radius: 999px; background: var(--oww-green-soft); color: var(--oww-green-dark); font-size: 12px; font-weight: 750; }
.oww-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.oww-option { position: relative; padding: 17px; border: 1px solid var(--oww-border); border-radius: 15px; background: #fff; }
.oww-option:first-child { border-color: #9ac9b7; background: #f4fbf7; }
.oww-option__rank { position: absolute; top: 12px; right: 12px; color: var(--oww-green); font-size: 11px; font-weight: 800; }
.oww-option h4 { margin: 0 30px 9px 0; color: var(--oww-green-dark); font-size: 17px; }
.oww-option ul { margin: 0 0 14px; padding-left: 18px; color: var(--oww-muted); font-size: 13px; line-height: 1.55; }
.oww-option__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.oww-option__metric { padding: 8px; border-radius: 9px; background: #f1f5f3; }
.oww-option__metric strong { display: block; color: var(--oww-text); font-size: 14px; }
.oww-option__metric span { color: var(--oww-muted); font-size: 10px; }

@media (max-width: 820px) {
    .oww-grid--recipe, .oww-grid--gap { grid-template-columns: 1fr; }
    .oww-results { position: static; }
    .oww-option-grid { grid-template-columns: 1fr 1fr; }
    .oww-save-panel { grid-template-columns: 1fr; }
    .oww-journey-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .oww-tool { margin: 18px auto; padding: 16px; border-radius: 18px; }
    .oww-card, .oww-suggestions { padding: 16px; }
    .oww-field-row, .oww-field-row--three { grid-template-columns: 1fr; }
    .oww-ingredient-row { grid-template-columns: 1fr 72px 70px 36px; }
    .oww-food-search, .oww-ingredient-row select[aria-label="Ingredient"] { grid-column: 1 / -1; }
    .oww-custom-food { grid-template-columns: 1fr 1fr; }
    .oww-option-grid { grid-template-columns: 1fr; }
    .oww-suggestions__heading { align-items: flex-start; flex-direction: column; }
    .oww-steps { grid-template-columns: 1fr; }
    .oww-journey-grid { grid-template-columns: 1fr; }
}