:root {
    --brand-peanut: #cfb59e;
    --brand-powder: #dee5ed;
    --brand-stone: #f7f2f0;
    --brand-pecan: #6b4d38;
    --color-canvas: var(--flare-color-background, #f7f2f0);
    --color-canvas-muted: var(--flare-color-surface-container-low, #f7f2f0);
    --color-surface: var(--flare-color-surface-container, #fffdfc);
    --color-surface-soft: var(--flare-color-surface-container-high, #efe8e3);
    --color-text: var(--flare-color-on-surface, #382820);
    --color-text-muted: var(--flare-color-on-surface-variant, #716159);
    --color-brand: var(--flare-color-primary, #6b4d38);
    --color-brand-strong: var(--flare-color-on-primary-container, #382820);
    --color-brand-soft: var(--flare-color-primary-container, #cfb59e);
    --color-border: var(--flare-color-outline-variant, #d8ccc5);
    --color-control-border: var(--flare-color-outline, #c8b8ae);
    --color-error: var(--flare-color-error, #b3261e);
    --color-error-surface: var(--flare-color-error-container, #fdecea);
    --color-success: var(--flare-color-success, #2e6b4f);
    --color-success-surface: var(--flare-color-success-container, #e7f4ec);
    --color-warning: var(--flare-color-warning, #8a5a13);
    --focus-ring: var(--flare-color-secondary, #647f91);
    --color-active-surface: var(--brand-powder);
    --color-active-text: #314653;
    --color-icon-surface: var(--brand-powder);
    --color-icon-text: #4b6170;
    --color-field-fill: var(--color-surface);
    --color-field-border: var(--color-control-border);
    --color-result-surface: var(--brand-peanut);
    --color-result-metric: var(--brand-stone);
    --radius-small: .75rem;
    --radius-card: 1rem;
    --shadow-card: 0 .65rem 1.8rem rgba(65, 43, 33, .08);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --content-width: 48rem;
    --navigation-height: 4.25rem;
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    color: var(--color-text);
    background: var(--color-canvas);
    font-synthesis: none;
}

html.flare-mode-dark {
    --color-active-surface: #3a454c;
    --color-active-text: var(--brand-powder);
    --color-icon-surface: #3a464e;
    --color-icon-text: var(--brand-powder);
    --color-field-fill: #3a3430;
    --color-field-border: transparent;
    --color-result-surface: #31393e;
    --color-result-metric: #252c30;
    --shadow-card: 0 .65rem 1.8rem rgba(0, 0, 0, .18);
}

html.flare-theme-md3-expressive.flare-palette-sweetmetry-peanut-powder.flare-mode-dark,
html.flare-theme-md3-expressive.flare-palette-sweetmetry-peanut-powder.flare-mode-dark .flare-root {
    --flare-input-bg: #3a3430;
    --flare-input-border-color: transparent;
    --flare-input-border-bottom-color: transparent;
    --flare-input-hover-border-bottom-color: transparent;
    --flare-input-focus-ring: none;
    --flare-input-focus-outline: 3px solid #8da7b9;
    --flare-input-focus-outline-offset: 2px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    color: var(--color-text);
    background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-canvas-muted) 100%);
}
input, select { min-height: 3rem; font: inherit; font-variant-numeric: tabular-nums; }
strong, .component-result, .line-result, .nutrition-summary, .result-summary-grid { font-variant-numeric: tabular-nums; }
h1, .result-overview h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    color: var(--flare-color-on-primary, #fff);
    background: var(--color-brand);
    border-radius: var(--radius-small);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100dvh; }
.app-header {
    z-index: 20;
    min-height: calc(4.25rem + env(safe-area-inset-top));
    padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) var(--space-2) max(var(--space-3), env(safe-area-inset-left));
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    backdrop-filter: blur(1rem) saturate(135%);
}
.brand-lockup { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.brand-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    color: var(--color-icon-text);
    background: var(--color-icon-surface);
    border-radius: var(--radius-small);
}
.brand-copy { display: grid; min-width: 0; gap: .05rem; line-height: 1.1; }
.brand-copy strong { font-size: 1.02rem; letter-spacing: -.01em; }
.brand-copy small { overflow: hidden; color: var(--color-text-muted); font-size: .68rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.local-state { display: none; align-items: center; gap: .3rem; color: var(--color-text-muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.primary-navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(var(--navigation-height) + env(safe-area-inset-bottom));
    padding: .35rem max(var(--space-1), env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(var(--space-1), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
    box-shadow: 0 -.45rem 1.5rem rgba(65, 43, 33, .1);
    backdrop-filter: blur(1rem) saturate(135%);
}
.primary-navigation a {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 3.65rem;
    padding: .4rem .15rem;
    color: var(--color-text-muted);
    font-size: clamp(.65rem, 2.8vw, .78rem);
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border-radius: 1rem;
}
.primary-navigation a.active,
.primary-navigation a[aria-current="page"] { color: var(--color-active-text); background: var(--color-active-surface); }
.app-content {
    display: grid;
    gap: var(--space-4);
    width: min(calc(100% - 1.25rem), var(--content-width));
    margin: 0 auto;
    padding: var(--space-4) 0 calc(var(--navigation-height) + env(safe-area-inset-bottom) + var(--space-5));
}
.app-content:focus { outline: none; }

.hero { display: grid; gap: var(--space-3); padding: .65rem .2rem .35rem; }
.hero h1, .hero p { margin: 0; }
.hero h1 { max-width: 18ch; overflow-wrap: anywhere; font-size: clamp(2rem, 8vw, 2.5rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.05; }
.hero p { color: var(--color-text-muted); line-height: 1.5; }
.eyebrow { color: var(--color-brand); font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

.card { min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); }
.card h2 { margin: 0 0 var(--space-4); font-size: 1.2rem; }
.section-icon { display: grid; flex: 0 0 auto; place-items: center; color: var(--color-icon-text); background: var(--color-icon-surface); }
.section-icon { width: 2.65rem; height: 2.65rem; border-radius: var(--radius-small); }
.step-label { color: var(--color-brand); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.calculator-grid, .diagram-grid, .product-binding-row, .nutrition-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
label { display: grid; min-width: 0; gap: .35rem; color: var(--color-text-muted); font-size: .88rem; font-weight: 650; }
input, select { min-width: 0; max-width: 100%; padding: .65rem .75rem; color: var(--color-text); background: var(--color-field-fill); border: 1px solid var(--color-field-border); border-radius: var(--radius-small); }
select option { color: #382820; background: var(--brand-stone); }
select option:checked { color: #314653; background: var(--brand-powder) linear-gradient(0deg, var(--brand-powder) 0%, var(--brand-powder) 100%); }
.flare-mode-dark select option { color: var(--brand-stone); background: #332e2b; }
.flare-mode-dark select option:checked { color: var(--brand-stone); background: #4a565e linear-gradient(0deg, #4a565e 0%, #4a565e 100%); }
button:disabled, input:disabled { cursor: not-allowed; opacity: .6; }
.primary-action { margin-top: var(--space-4); font-weight: 700; }

figure { min-width: 0; margin: 0; }
svg { display: block; width: 100%; color: #5d4d44; }
svg line { stroke: currentColor; }
figcaption { color: var(--color-text-muted); text-align: center; }
.cake-shape { fill: #eef3f7; stroke: #6b4d38; stroke-width: 3; }
.sponge-layer { fill: #e4b56d; stroke: #7c5423; }
.filling-layer { fill: #cfb59e; stroke: #6b4d38; }

.component-result { display: grid; min-width: 0; gap: .55rem; padding: .9rem 0; border-top: 1px solid var(--color-border); }
.component-result:first-of-type { border-top: 0; }
.component-result header, .line-result { display: grid; gap: .15rem; }
.component-result details { min-width: 0; color: var(--color-text-muted); font-size: .82rem; }
.component-result code { display: block; margin-top: .45rem; overflow-wrap: anywhere; }
.save-card, .backup-card, .editor-card { display: grid; gap: var(--space-3); }
.save-card h2, .backup-card h2 { margin-bottom: .2rem; }
.editor-progress { display: grid; gap: var(--space-3); position: sticky; top: var(--space-2); z-index: 12; padding: var(--space-3); background: color-mix(in srgb, var(--color-surface) 96%, transparent); box-shadow: 0 .45rem 1.5rem rgba(65, 43, 33, .08); backdrop-filter: blur(.8rem); }
.editor-progress__summary { display: grid; min-width: 0; gap: .15rem; }
.editor-progress__summary > span:last-child { color: var(--color-text-muted); font-size: .82rem; line-height: 1.4; }
.editor-progress__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.editor-progress__steps .flare-btn { min-width: 0; min-height: 3rem; padding-inline: .25rem; font-size: clamp(.64rem, 2.8vw, .78rem); line-height: 1.1; overflow-wrap: anywhere; }
.editor-progress__steps .flare-btn[aria-current="step"] { font-weight: 750; }
.editor-panel { min-width: 0; }
.editor-stage-actions { padding: 0 var(--space-2); }
.message, [role="status"], [role="alert"] { overflow-wrap: anywhere; }
.message { margin: 0; color: var(--color-brand); font-weight: 650; }
.message.error { padding: .8rem; color: var(--color-error); background: var(--color-error-surface); border-radius: var(--radius-small); }
.restore-confirmation { grid-template-columns: auto 1fr; align-items: start; font-weight: 500; }
.restore-confirmation input { min-height: auto; margin-top: .2rem; }
.page-heading { grid-template-columns: minmax(0, 1fr); }
.more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.more-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.more-card .section-icon { grid-row: 1; grid-column: 1; }
.more-card-copy { grid-row: 1; grid-column: 2; min-width: 0; }
.more-card-copy h2 { margin: 0 0 var(--space-1); }
.more-card-copy p { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.more-card > .flare-btn, .more-card--appearance > div:last-child { grid-column: 1 / -1; min-height: 3rem; }
.more-card--appearance > div:last-child { display: flex; align-items: center; }
.flare-mode-dark .more-card { background: #30383d; border-color: transparent; }
.recipe-list-item, .product-row, .component-heading, .ingredient-editor-row { display: flex; align-items: stretch; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.recipe-list-item:first-of-type, .product-row:first-of-type { border-top: 0; }
.recipe-open { display: grid; width: 100%; gap: .15rem; text-align: left; border: 0; }
.recipe-open small, .product-row span, .product-row small { color: var(--color-text-muted); }
.compact-actions, .editor-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.compact-actions > button, .editor-actions > button { flex: 1 1 9rem; }
.component-editor { display: grid; min-width: 0; gap: .55rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: .8rem; }
.component-heading { border-top: 0; }
.component-heading input, .ingredient-editor-row input:first-child { flex: 1; }
.ingredient-editor-row input[type="number"] { width: 100%; }
.inline-product { color: var(--color-text-muted); }
.inline-product summary { cursor: pointer; font-weight: 700; }
.inline-product .ingredient-editor-row { margin-top: .55rem; }
.product-row > div:first-child { display: grid; gap: .15rem; }
.layer-editor-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.layer-editor-row:first-of-type { border-top: 0; }
.layer-editor-row input[type="color"] { width: 100%; }
.nutrition-summary { display: grid; gap: .2rem; padding: var(--space-3); background: var(--color-surface-soft); border-radius: var(--radius-small); }
.nutrition-warning { color: var(--color-warning); }
.result-overview { gap: var(--space-3); overflow: hidden; color: var(--color-text); background: var(--color-result-surface); border-color: transparent; }
.result-overview h2 { margin-bottom: 0; font-size: clamp(1.55rem, 7vw, 2.2rem); }
.result-status, .section-intro { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.result-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.result-summary-grid article { display: grid; gap: .2rem; min-width: 0; padding: var(--space-3); background: var(--color-result-metric); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.flare-mode-dark .result-summary-grid article { border-color: transparent; }
.result-summary-grid small { color: var(--color-text-muted); }
.result-summary-grid strong { overflow-wrap: anywhere; }
.result-jump-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.result-jump-links > * { flex: 1 1 8rem; }
.result-section { min-width: 0; scroll-margin-top: 5rem; }
.result-actions { position: sticky; bottom: calc(var(--navigation-height) + env(safe-area-inset-bottom) + var(--space-2)); z-index: 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) calc(var(--space-2) * -1) 0; padding: var(--space-2); background: color-mix(in srgb, var(--color-surface) 96%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-small); box-shadow: 0 .4rem 1.5rem rgba(65, 43, 33, .1); }
.result-actions button:first-child { font-weight: 750; }

#blazor-error-ui { position: fixed; right: 0; bottom: var(--navigation-height); left: 0; z-index: 1000; display: none; padding: .8rem 3rem .8rem 1rem; color: #fff; background: #8c1d18; }
#blazor-error-ui a { color: inherit; }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; cursor: pointer; }
.loading-progress { display: block; margin: 20vh auto var(--space-4); }

@media (min-width: 40rem) {
    .calculator-grid, .diagram-grid, .product-binding-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nutrition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .component-result header, .line-result { display: flex; justify-content: space-between; gap: var(--space-4); }
    .page-heading--action { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .page-heading--action .eyebrow, .page-heading--action h1 { grid-column: 1; }
    .page-heading--action > button { grid-row: 1 / span 2; grid-column: 2; }
    .recipe-list-item, .product-row { align-items: center; justify-content: space-between; flex-direction: row; }
    .component-heading, .ingredient-editor-row { align-items: center; flex-direction: row; border-top: 0; }
    .ingredient-editor-row input[type="number"] { width: 8rem; }
    .layer-editor-row { grid-template-columns: minmax(9rem, 1.5fr) minmax(9rem, 1.5fr) minmax(7rem, 1fr); align-items: center; }
    .result-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .more-card--appearance { grid-column: 1 / -1; }
}

@media (min-width: 48rem) {
    .app-header { padding: .65rem max(var(--space-5), env(safe-area-inset-right)) .65rem max(var(--space-5), env(safe-area-inset-left)); }
    .local-state { display: inline-flex; }
    .primary-navigation { position: static; display: flex; gap: .35rem; min-height: 0; padding: 0; background: transparent; box-shadow: none; }
    .primary-navigation a { min-height: 2.75rem; padding: .55rem .7rem; font-size: .88rem; }
    .app-content { padding-top: var(--space-5); padding-bottom: 4rem; }
    .result-actions { position: static; margin-inline: 0; box-shadow: none; }
    #blazor-error-ui { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}