.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 28px; align-items: stretch; }
@media (max-width: 760px) { .sb-grid { grid-template-columns: minmax(0, 1fr); } }
.sb-form { min-width: 0; display: grid; gap: 22px; align-content: start; }
.field { min-width: 0; display: grid; gap: 10px; font: 400 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: -0.03em; color: var(--slate); }
.money { display: flex; gap: 8px; }
.money select { width: 84px; border: 0; border-radius: 12px; background: var(--mist); font: 700 28px var(--display); text-align: center; color: var(--ink); }
.money input { flex: 1; min-width: 0; width: 100%; height: 84px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 12px; background: var(--mist); font: 700 56px/1 var(--display); color: var(--ink); }
.money input:focus { outline: none; border-color: var(--ink); }
.seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.seg button, .seg input { height: 52px; border: 0; border-radius: 12px; background: var(--mist); font: 600 16px var(--sans); color: var(--ink); cursor: pointer; min-width: 0; text-align: center; }
.seg input { padding: 0 6px; border: 1.5px solid transparent; }
.seg input:focus { outline: none; border-color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font: 500 30px var(--sans); cursor: pointer; }
.stepper output { min-width: 90px; text-align: center; font: 700 64px/1 var(--display); color: var(--ink); }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--slate); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.sb-out { min-width: 0; background: var(--ink); color: var(--paper); border-radius: 28px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.sb-out > .mono { color: var(--smoke); }
.sb-out strong { font: 700 clamp(64px, 12vw, 120px)/.9 var(--display); color: var(--mint); letter-spacing: -0.03em; word-break: break-all; }
.rows { display: grid; gap: 8px; margin-top: 12px; border-top: 1px solid var(--graphite); padding-top: 14px; }
.rows div { display: flex; justify-content: space-between; color: var(--smoke); }
.rows b { color: var(--paper); font-weight: 600; }
.rows .tot b { font-size: 20px; }
.note { margin: 0; color: var(--volt); }
.btn-light { justify-self: start; margin-top: 8px; }