.mos-dli-calculator {
    --mos-accent: #22643b;
    --mos-border: #cbd5d1;
    --mos-surface: #f7faf8;
    max-width: 48rem;
    margin: 2rem auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--mos-border);
    border-radius: .75rem;
    background: var(--mos-surface);
    color: #17211b;
}

.mos-dli-calculator .mos-calculator__title { margin-top: 0; }
.mos-dli-calculator .mos-calculator__field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.mos-dli-calculator .mos-calculator__field { display: grid; gap: .35rem; }
.mos-dli-calculator label { font-weight: 650; }
.mos-dli-calculator input,
.mos-dli-calculator select { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid #6b7971; border-radius: .35rem; background: #fff; color: inherit; }
.mos-dli-calculator .mos-calculator__actions { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.mos-dli-calculator .mos-calculator__field--compact { min-width: 11rem; }
.mos-dli-calculator .mos-calculator__button { min-height: 2.75rem; padding: .65rem 1rem; border: 2px solid var(--mos-accent); border-radius: .35rem; background: var(--mos-accent); color: #fff; font-weight: 700; cursor: pointer; }
.mos-dli-calculator :is(input, select, button):focus-visible { outline: 3px solid #075985; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.mos-dli-calculator .mos-calculator__error { padding: .75rem; border-left: 4px solid #a61b1b; background: #fff0f0; color: #761414; }
.mos-dli-calculator .mos-calculator__result { margin-top: 1.25rem; padding: 1rem; border-left: 4px solid var(--mos-accent); background: #fff; }
.mos-dli-calculator .mos-calculator__result-title { margin-top: 0; }

@media (max-width: 32rem) {
    .mos-dli-calculator .mos-calculator__actions { align-items: stretch; flex-direction: column; }
}