.earnings__intro { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.earnings__intro > p:last-child { margin: 1.25rem auto 0; color: #ffffff99; font-size: 1rem; line-height: 1.75; }
.earnings__dashboard { border: 1px solid #ffffff26; border-radius: 1.5rem; background: linear-gradient(135deg, #15151f80, #070709 60%); overflow: hidden; }
.earnings__top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 2rem; border-bottom: 1px solid #ffffff1a; }
.earnings__top h3 { margin-top: .5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; }
.earnings__top > p { font-size: .75rem; color: #ffffff80; }
.earnings__body { display: grid; grid-template-columns: 19rem minmax(0, 1fr); }
.earnings__controls { display: flex; flex-direction: column; gap: 1.75rem; padding: 2rem; border-right: 1px solid #ffffff1a; }
.earnings__control-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.earnings__control label, .earnings__fixed-label { font-size: .8125rem; font-weight: 500; line-height: 1.5; color: #ffffffd9; }
.earnings__control input[type="number"] { flex: 0 0 5rem; width: 5rem; min-width: 0; padding: .4rem .5rem; border: 1px solid #ffffff26; border-radius: .5rem; color: #fff; background: #010101; font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums; }
.earnings__control input[aria-invalid="true"] { border-color: #eea393; }
.earnings__range { display: block; width: 100%; height: 1.5rem; margin-top: .875rem; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; accent-color: #d4af37; }
.earnings__range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #d4af37 0%, #d4af37 var(--range-fill), #ffffff26 var(--range-fill), #ffffff26 100%); }
.earnings__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #e0bd5c; box-shadow: 0 0 12px #d4af374d; }
.earnings__range::-moz-range-track { height: 4px; border-radius: 4px; background: #ffffff26; }
.earnings__range::-moz-range-progress { height: 4px; border-radius: 4px; background: #d4af37; }
.earnings__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #e0bd5c; box-shadow: 0 0 12px #d4af374d; }
.earnings__fixed { padding-bottom: 1.25rem; border-bottom: 1px solid #ffffff1a; }
.earnings__fixed-price { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; padding: .4rem .65rem; border: 1px solid #d4af3733; border-radius: .5rem; color: #e0bd5c; background: #d4af370a; font-size: .875rem; font-weight: 600; }
.earnings__fixed-price svg { width: .8rem; height: .8rem; }
.earnings__fixed-note { margin-top: .65rem; color: #ffffff80; font-size: .6875rem; line-height: 1.6; }
.earnings__results { min-width: 0; padding: 2rem; }
.earnings__primary { padding: 1.5rem; border: 1px solid #d4af3755; border-radius: 1rem; background: linear-gradient(120deg, #d4af3710, #d4af3704); }
.earnings__metric-label { color: #ffffff80; font-size: .625rem; line-height: 1.6; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.earnings__primary output { display: block; margin: .5rem 0; color: #e0bd5c; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.earnings__support { color: #ffffff80; font-size: .75rem; line-height: 1.65; }
.earnings__summary { margin-top: .75rem; }
.earnings__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; margin-top: .875rem; }
.earnings__metric { min-width: 0; padding: 1.125rem; border: 1px solid #ffffff26; border-radius: .875rem; background: #01010140; }
.earnings__metric output { display: block; margin: .35rem 0; color: #fff; font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.earnings__breakdown { margin-top: .875rem; padding: 1.25rem; border: 1px solid #ffffff26; border-radius: .875rem; }
.earnings__breakdown dl { margin-top: .75rem; }
.earnings__breakdown dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .8125rem; line-height: 1.6; }
.earnings__breakdown dt { color: #ffffff99; }
.earnings__breakdown dd { flex-shrink: 0; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.earnings__breakdown .earnings__total { margin-top: .5rem; padding-top: .875rem; border-top: 1px solid #ffffff26; }
.earnings__total dt { color: #fff; font-weight: 600; }
.earnings__total dd { color: #e0bd5c; font-weight: 600; }
.earnings__metrics--small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.earnings__metrics--small output { font-size: 1.25rem; }
.earnings__note { margin-top: 1.25rem; color: #ffffff80; font-size: .6875rem; line-height: 1.75; }
.earnings__formula { margin-top: 1rem; color: #ffffff99; font-size: .75rem; line-height: 1.75; }
.earnings__formula summary { width: fit-content; color: #e0bd5c; cursor: pointer; }
.earnings__formula p { margin-top: .75rem; }
[data-earnings-calculator][data-loss="true"] .earnings__primary output,
[data-earnings-calculator][data-loss="true"] .earnings__total dd { color: #eea393; }
.earnings__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1023px) {
  .earnings__body { grid-template-columns: 16rem minmax(0, 1fr); }
  .earnings__controls, .earnings__results { padding: 1.25rem; }
  .earnings__metrics--small { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .earnings__top { padding: 1.25rem; align-items: flex-start; flex-direction: column; gap: .75rem; }
  .earnings__body { grid-template-columns: minmax(0, 1fr); }
  .earnings__controls { border-right: 0; border-bottom: 1px solid #ffffff1a; gap: 1.25rem; }
  .earnings__metrics { grid-template-columns: minmax(0, 1fr); }
  .earnings__primary { padding: 1.125rem; }
  .earnings__breakdown dl > div { flex-wrap: wrap; gap: .25rem 1rem; }
}