.income-calculator { margin-top: 1rem; }
.calculator-workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 1.25rem; align-items: start; }
.calculator-picker, .calculator-selection, .calculator-list-section { min-width: 0; padding: 1rem; border: 1px solid var(--rule); background: var(--surface); }
.income-calculator h3 { margin-top: 0; }
.calculator-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.calculator-filters label, .calculator-list-heading label { display: grid; gap: .3rem; font-size: .85rem; }
.income-calculator :is(select, input[type="search"], input[type="number"]) { width: 100%; min-width: 0; min-height: 44px; padding: .5rem; color: var(--ink); background: #102638; border: 1px solid #42647b; border-radius: 3px; font: inherit; }
.income-calculator button { min-height: 44px; padding: .5rem .75rem; color: var(--ink); background: #102638; border: 1px solid #42647b; border-radius: 3px; cursor: pointer; font: inherit; }
.income-calculator button:hover:not(:disabled) { background: #1d4056; border-color: #91cddd; }
.income-calculator button:disabled { opacity: .5; cursor: default; }
.income-calculator :is(button, input, select, a):focus-visible { outline: 2px solid #a7e5f4; outline-offset: 3px; }
.calculator-muted { color: var(--muted); font-size: .85rem; }
.calculator-dino-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; max-height: 460px; overflow-y: auto; padding: .25rem .3rem .25rem .1rem; scrollbar-gutter: stable; }
.income-calculator .calculator-dino { display: grid; gap: .25rem; min-width: 0; padding: .4rem; text-align: center; }
.calculator-dino[hidden], .income-calculator [hidden] { display: none; }
.income-calculator button[aria-pressed="true"] { border-color: #a7e5f4; box-shadow: inset 0 0 0 1px #a7e5f4; background: #1b3e54; }
.calculator-dino__art { display: flex; justify-content: center; align-items: center; min-height: 76px; }
.calculator-dino__art img { display: block; width: 100%; height: 76px; object-fit: contain; }
.calculator-dino__name { font-size: .8rem; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.calculator-dino small { color: var(--muted); font-size: .65rem; line-height: 1.25; }
.calculator-image-pending { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 70px; border: 1px dashed #365b73; color: var(--muted); font-size: .7rem; }
.calculator-selection { position: sticky; top: 1rem; }
.calculator-selected-art { display: flex; align-items: center; justify-content: center; height: 145px; margin-bottom: .65rem; background: #102638; }
.calculator-selected-art img { width: 100%; height: 145px; object-fit: contain; }
.calculator-selected-art .calculator-image-pending { height: 145px; }
.calculator-selection h3 { margin-bottom: .3rem; }
.calculator-selection #income-selected-details { margin-top: 0; }
.calculator-age { margin: 1rem 0; padding: 0; border: 0; min-width: 0; }
.calculator-age legend { margin-bottom: .4rem; font-weight: 600; }
.calculator-age-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.calculator-age-buttons button { flex: 1 1 28%; padding-inline: .35rem; font-size: .78rem; }
.calculator-quantity { display: grid; grid-template-columns: 1fr minmax(0, 155px); align-items: center; gap: .5rem; }
.calculator-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.calculator-stepper input[type="number"] { text-align: center; appearance: textfield; -moz-appearance: textfield; }
.calculator-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.income-calculator__fed { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .5rem; }
.income-calculator__fed input { width: 20px; height: 20px; accent-color: #64bddb; }
.calculator-selected-rate { margin-top: .7rem; color: #a6dfc3; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.income-calculator__error { color: #ffb8a9; font-size: .85rem; }
.income-calculator__error:empty { display: none; }
.income-calculator [aria-invalid="true"] { border-color: #ffb8a9; }
.income-calculator .calculator-add { width: 100%; margin-bottom: .8rem; border-color: #6ac39e; background: #194736; font-weight: 700; }
.calculator-list-section { margin-top: 1.25rem; }
.calculator-list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.calculator-list-heading h3 { margin-bottom: 0; }
.calculator-list { margin: .75rem 0; padding: 0; list-style: none; }
.calculator-list-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.calculator-list-art img { width: 72px; height: 62px; object-fit: contain; }
.calculator-list-art .calculator-image-pending { min-height: 62px; }
.calculator-list-copy { display: grid; gap: .25rem; }
.calculator-list-copy a { font-weight: 600; }
.calculator-list-copy small { color: var(--muted); font-size: .78rem; }
.calculator-list-copy strong { color: #a6dfc3; font-variant-numeric: tabular-nums; }
.calculator-row-controls { display: flex; align-items: center; gap: .3rem; }
.calculator-row-controls button { min-width: 44px; }
.calculator-row-quantity { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.calculator-total { display: grid; gap: .35rem; padding: 1rem; margin: 1rem 0; border-left: 3px solid #6ac39e; background: #122a3d; }
.calculator-total strong { color: #a6dfc3; font-size: clamp(1.5rem, 3vw, 2rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calculator-total small { color: var(--muted); }
@media (max-width: 950px) { .calculator-workspace { grid-template-columns: minmax(0, 1fr); } .calculator-selection { position: static; } .calculator-selected-art, .calculator-selected-art img { height: 125px; } .calculator-age-buttons button { flex: 1; } }
@media (max-width: 600px) { .calculator-picker, .calculator-selection, .calculator-list-section { padding: .75rem; } .calculator-dino-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 350px; } .calculator-filters { grid-template-columns: 1fr; } .calculator-age-buttons button { flex: 1 1 28%; } .calculator-list-row { grid-template-columns: 54px minmax(0, 1fr); gap: .6rem; } .calculator-list-art img { width: 54px; } .calculator-row-controls { grid-column: 1 / -1; justify-content: flex-end; } .calculator-list-heading label { width: 100%; } }