.ob-calculator {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    max-width: 980px;
    padding: 32px;
    border: 1px solid rgba(196, 120, 138, .3);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
}
.ob-calculator__inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    align-content: start;
}
.ob-calculator__field { display: grid; gap: 8px; min-width: 0; }
.ob-calculator__label,
.ob-calculator__rent-mode legend { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.ob-calculator__input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid rgba(196, 120, 138, .4);
    border-radius: 8px;
    background: #18120e;
    color: #fff;
    font: 16px/1.4 Onest, Arial, sans-serif;
    appearance: textfield;
    -moz-appearance: textfield;
}
.ob-calculator__input::-webkit-inner-spin-button,
.ob-calculator__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ob-calculator__number { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
.ob-calculator__step {
    min-height: 48px;
    padding: 0;
    border: 1px solid rgba(196, 120, 138, .4);
    border-radius: 8px;
    background: rgba(196, 120, 138, .12);
    color: #fbceb5;
    font: 24px/1 Onest, Arial, sans-serif;
    cursor: pointer;
}
.ob-calculator__step:hover { border-color: #c4788a; background: rgba(196, 120, 138, .25); }
.ob-calculator__step:focus-visible { outline: 2px solid #fbceb5; outline-offset: 3px; }
.ob-calculator__input::placeholder { color: rgba(255, 255, 255, .45); }
.ob-calculator__input:focus-visible { outline: 2px solid #c4788a; outline-offset: 3px; }
.ob-calculator__rent-mode { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.ob-calculator__rent-mode legend { margin-bottom: 10px; }
.ob-calculator__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-calculator__choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(196, 120, 138, .4);
    border-radius: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}
.ob-calculator__choice:has(input:checked) { border-color: #c4788a; background: rgba(196, 120, 138, .18); color: #fff; }
.ob-calculator__choice:focus-within { outline: 2px solid #fbceb5; outline-offset: 3px; }
.ob-calculator__choice input { margin: 0; accent-color: #c4788a; }
.ob-calculator__rent-field { grid-column: 1 / -1; }
.ob-calculator__results { margin: 0; display: grid; align-content: start; gap: 18px; }
.ob-calculator__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ob-calculator__row dt { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.ob-calculator__row dd { margin: 0; font-size: 18px; font-weight: 700; color: #fff; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.ob-calculator__row--balance { display: grid; gap: 12px; padding-top: 22px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ob-calculator__row--balance dt { color: #fff; font-weight: 600; max-width: 270px; }
.ob-calculator__row--balance dd { color: #e8a4b8; font-size: clamp(28px, 3vw, 40px); line-height: 1.25; text-align: left; }
@media (max-width: 800px) {
    .ob-calculator { grid-template-columns: minmax(0, 1fr); max-width: 620px; gap: 28px; padding: 24px; }
    .ob-calculator__results { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; }
}
@media (max-width: 480px) {
    .ob-calculator { padding: 22px 18px; }
    .ob-calculator__inputs { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
