/* Fee calculator. Tokens come from home.css and article.css; this only adds the inputs. */
.fee-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; margin: 0 0 32px; padding: 24px 32px; border: 2px dashed var(--m9); border-radius: 24px; }
.fee-form label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; color: var(--m12); }
.fee-form input[type="number"] { min-width: 0; padding: 10px 12px; border: 1px solid var(--m9); border-radius: 8px; font: inherit; font-size: 16px; color: var(--body); background: transparent; }
.fee-form .fee-check { flex-direction: row; align-items: center; align-self: end; gap: 10px; padding-bottom: 10px; }
.fee-form .fee-check input { width: 18px; height: 18px; }
#fee-result table { width: 100%; }
#fee-result td:not(:first-child), #fee-result th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.fee-note { color: var(--m11); font-size: 15px; }
@media (max-width: 639px) { .fee-form { padding: 24px 16px; } #fee-result { overflow-x: auto; } }