.bonus-calc { margin: 8px 0 28px; padding: 22px 22px 18px; border-radius: 14px; background: linear-gradient(180deg, #0B3B2E, #062319); color: #E7F1EC; }
.bonus-calc .bonus-calc-title, .bonus-calc h3, .bonus-calc .h3 { font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0 0 16px; padding: 0; color: #F6D27A; font-size: 18px; font-weight: 600; line-height: 24px; }
.bonus-calc .bonus-calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.bonus-calc .bonus-calc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.bonus-calc .bonus-calc-field.is-wide { grid-column: 1 / -1; }
.bonus-calc .bonus-calc-label { color: #A9C4B9; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; }
.bonus-calc .bonus-calc-input { width: 100%; min-height: 46px; margin: 0; padding: 0 12px; border: 1px solid rgba(239, 185, 63, 0.35); border-radius: 10px; background: #041A13; color: #FFFFFF; font-family: inherit; font-size: 17px; line-height: 22px; transition: border-color 0.2s, box-shadow 0.2s; }
.bonus-calc .bonus-calc-input:hover { border-color: #EFB93F; }
.bonus-calc .bonus-calc-input:focus { outline: none; border-color: #EFB93F; box-shadow: 0 0 0 3px rgba(239, 185, 63, 0.3); }
.bonus-calc .bonus-calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.bonus-calc .bonus-calc-result { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(239, 185, 63, 0.22); }
.bonus-calc .bonus-calc-result-label { color: #A9C4B9; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; }
.bonus-calc .bonus-calc-result-value { color: #FFFFFF; font-size: 22px; font-weight: 600; line-height: 28px; font-variant-numeric: tabular-nums; }
.bonus-calc .bonus-calc-result-value.is-negative { color: #F2A39B; }
.bonus-calc .bonus-calc-result-value.is-positive { color: #9FE3C4; }
.bonus-calc .bonus-calc-note { margin: 0; color: #A9C4B9; font-size: 13px; line-height: 19px; }
@media (max-width: 599px) {
  .bonus-calc .bonus-calc-field.is-choice { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .bonus-calc .bonus-calc-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bonus-calc .bonus-calc-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}