.calculator-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.calculator-form .form-group { display: grid; gap: .4rem; }
.calculator-form label { color: var(--ink-soft); font-size: .82rem; font-weight: 800; }
.calculator-form input { width: 100%; min-height: 52px; padding: .75rem .85rem; color: var(--ink); background: #fbfcfb; border: 1px solid var(--line); border-radius: 9px; outline: 0; font: inherit; transition: border-color .18s, box-shadow .18s, background .18s; }
.calculator-form input:hover { border-color: #b6c9bc; }
.calculator-form input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 107, 80, .12); }
.calculator-actions { display: flex; flex-wrap: wrap; gap: .65rem; grid-column: 1 / -1; padding-top: .35rem; }
.calculator-actions .button { min-width: 150px; }
.calculator-actions .button.secondary { color: var(--ink-soft); background: var(--surface); border-color: var(--line); }
.calculator-result { margin-top: 1.5rem; padding: 1.25rem; background: var(--accent-soft); border: 1px solid #c7dfcf; border-radius: var(--radius-md); }
.result-heading { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.result-heading h2 { margin: 0; color: var(--ink); font-size: 1.05rem; }
.result-check { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; background: var(--accent); border-radius: 50%; font-size: .8rem; font-weight: 900; }
.result-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.result-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; background: rgba(255, 255, 255, .72); border: 1px solid rgba(199, 223, 207, .95); border-radius: 8px; }
.result-item span { color: var(--muted); font-size: .78rem; }
.result-item strong { color: var(--accent-dark); font-size: .98rem; text-align: right; }
.calculator-result .error-message { margin: 0; color: var(--danger, #a84b3e); font-weight: 750; }
@media (max-width: 600px) { .calculator-form { grid-template-columns: 1fr; } .calculator-actions { grid-column: auto; } .calculator-actions .button { flex: 1; min-width: 0; } .result-items { grid-template-columns: 1fr; } }