/* Only the estimate in the existing yield section; preserve the XORA shell. */
.simple-estimate { width: 100%; min-width: 0; padding: clamp(20px, 3vw, 40px); background: var(--bg); border: 1px solid var(--border, #252529); container-type: inline-size; border-radius: 0; }
.simple-estimate h3 { margin: 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.estimate-amount-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.estimate-amount-row label { color: #b8bac2; font-size: 1rem; }
.estimate-input-wrap { display: flex; align-items: baseline; max-width: 100%; gap: 8px; font-size: 1.15rem; }
#estimateAmount { width: 9ch; min-width: 0; max-width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid #666; border-radius: 0; font: inherit; font-variant-numeric: tabular-nums; text-align: right; color: #fff; background: transparent; appearance: textfield; }
#estimateAmount::-webkit-inner-spin-button, #estimateAmount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#estimateSlider { --fill: 40%; display: block; width: 100%; height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
#estimateSlider::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, #d4d4d8 var(--fill), #404040 var(--fill)); }
#estimateSlider::-moz-range-track { height: 6px; border-radius: 6px; background: #404040; }
#estimateSlider::-moz-range-progress { height: 6px; border-radius: 6px; background: #d4d4d8; }
#estimateSlider::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid #151515; box-shadow: 0 0 0 1px #fff; }
#estimateSlider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #151515; box-shadow: 0 0 0 1px #fff; }
.estimate-bounds { display: flex; justify-content: space-between; margin-top: 8px; color: #a3a3a3; font-size: .8rem; } /* clears the 2px+5px focus ring of the slider */
.estimate-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.estimate-apy { color: #4ade80; font-size: .9rem; font-weight: 600; }
.estimate-period { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: #b8bac2; }
#estimateTerm { min-width: 0; max-width: 100%; min-height: 44px; border: 1px solid #404044; border-radius: 0; padding: 8px 32px 8px 12px; font: inherit; color: #f4f4f5; background: #111114; }
.estimate-result { margin: 24px 0 16px; }
.estimate-result-label { margin: 0 0 4px; color: #b8bac2; font-size: .95rem; }
.estimate-total { margin: 0 0 24px; font-size: clamp(1.4rem, 10cqi, 4.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; color: #4ade80; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.estimate-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; padding-top: 20px; border-top: 1px solid #303033; }
.estimate-breakdown > div { min-width: 0; }
.estimate-reward-label, .estimate-value, .estimate-listing { display: block; font-size: .85rem; line-height: 1.5; color: #b8bac2; }
.estimate-breakdown strong { display: block; margin: 6px 0; font-size: clamp(1.05rem, 4cqi, 1.65rem); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: #f4f4f5; }
.estimate-listing { margin-top: 8px; color: #4ade80; }
.estimate-note { max-width: 720px; font-size: .875rem; line-height: 1.6; color: #a3a3a3; }
.estimate-more { margin-top: 20px; color: #b8bac2; font-size: .9rem; }
.estimate-more summary { cursor: pointer; min-height: 44px; display: list-item; padding: 12px 0; color: #e4e4e7; }
.estimate-more p { margin: 12px 0; max-width: 720px; }
.estimate-more a { text-decoration: underline; text-underline-offset: 4px; }
.estimate-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; text-align: center; }
.estimate-actions .btn-primary { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 20px; min-height: 48px; background: #f4f4f5; color: #08080a; font: inherit; font-weight: 700; text-decoration: none; border: 0; border-radius: 0; }
#estimateDetailsLink { color: #b8bac2; text-decoration: underline; text-underline-offset: 5px; font-size: .9rem; padding: 12px 0; }
.simple-estimate :focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
#yield .yield-right { width: 100%; min-width: 0; }