.card-spend-control{--slider-thumb-size:28px;--slider-track-edge:14px;grid-template-columns:minmax(220px,1fr) 150px}
.card-spend-control label{position:relative}
.card-spend-control>label:first-child{grid-template-columns:92px minmax(0,1fr);gap:14px}
.card-spend-control>.card-spend-value{width:150px;min-width:0}
.card-spend-range{grid-column:2;grid-row:1;position:relative;z-index:2;margin:0}
.card-profit-markers{grid-column:2;grid-row:1;position:relative;z-index:3;height:0;margin:0 var(--slider-track-edge);align-self:center;pointer-events:none}
.card-profit-marker{position:absolute;top:16px;width:0;height:7px;border-left:1px solid #8798a7;transform:translateX(-50%);transition:border-color .15s ease}
.card-profit-marker.is-guide{border-left-color:#94a4b1}
.card-profit-marker[data-net-target]:not(.is-break-even):not(.is-achieved){opacity:0}
.card-profit-marker.is-achieved{border-left-color:#079b57}
.card-profit-marker.is-break-even{top:15px;height:10px;border-left:3px solid #607482}
.card-profit-marker.is-cashback-cap{top:13px;height:14px;border-left:2px solid #e5484d}
.card-profit-result{grid-column:1/-1;display:grid;grid-template-columns:92px minmax(0,1fr) 150px;align-items:start;gap:14px;min-height:42px;margin-top:9px;color:#445665;font-size:11px;font-weight:800}
.card-profit-result>span{font-size:13px;font-weight:750;color:#263747}
.profit-result-track{position:relative;height:7px;margin-inline:var(--slider-track-edge);border-radius:999px;background:#dfe7ed}
.profit-current-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:#aebbc5;transition:width .12s ease,background .12s ease}.profit-current-fill.is-positive{background:#18b56b}.profit-current-fill.is-negative{background:#ef777b}.profit-current-fill.is-zero{background:#aebbc5}
.profit-cap-pin{position:absolute;top:-5px;width:0;height:17px;border-left:2px solid #d93e45;transform:translateX(-50%)}
.profit-result-track output{position:absolute;top:13px;min-width:58px;padding:3px 6px;border:1px solid #c9d4dc;border-radius:5px;background:#fff;color:#526574;font-size:11px;line-height:1.2;text-align:center;white-space:nowrap;transform:translateX(-50%);box-shadow:0 2px 5px rgba(23,55,78,.08)}
.profit-result-track output.is-positive{border-color:#7ed5a9;color:#087847}.profit-result-track output.is-negative{border-color:#efaaad;color:#c9343b}.profit-result-track output.is-zero{color:#526574}
.profit-cap-explanation{grid-column:2;display:flex;align-items:flex-start;gap:7px;margin:31px 0 0;color:#596a77;font-size:11px;font-weight:500;line-height:1.45}.profit-cap-explanation i{flex:0 0 auto;width:9px;height:9px;margin-top:3px;border-radius:50%;background:#d93e45}.profit-cap-explanation strong{color:#a82d34;font-weight:800}
.profit-cap-explanation.is-standard i{background:#607482}
.card-profit-result.is-unavailable .profit-result-track output{left:50%;color:#627482}
@media(max-width:760px){.card-spend-control{grid-template-columns:1fr}.card-spend-control>label:first-child{grid-template-columns:1fr}.card-spend-control>.card-spend-value{width:150px}.card-spend-range,.card-profit-markers{grid-column:1;grid-row:2}}
@media(max-width:760px){.card-profit-result{grid-template-columns:1fr;margin-top:18px}.card-profit-result>span{display:none}.profit-cap-explanation{grid-column:1}}

/* Draw the spend rail independently of browser-native track metrics so the thumb stays centered. */
.card-spend-range{box-sizing:border-box;height:30px!important;margin:0!important;padding:0!important;border:0!important;appearance:none!important;-webkit-appearance:none!important;background:linear-gradient(#c7d5e3,#c7d5e3) center/calc(100% - 28px) 7px no-repeat!important;line-height:normal;vertical-align:middle}
.card-spend-range::-webkit-slider-runnable-track{height:30px!important;background:transparent!important}
.card-spend-range::-webkit-slider-thumb{box-sizing:border-box;width:var(--slider-thumb-size)!important;height:var(--slider-thumb-size)!important;margin-top:1px!important;-webkit-appearance:none;border:3px solid #fff;border-radius:50%;background:#3275dc;box-shadow:0 2px 7px rgba(20,67,120,.32);cursor:grab}
.card-spend-range::-moz-range-track{height:30px!important;background:transparent!important}
.card-spend-range::-moz-range-progress{height:30px;background:transparent}
.card-spend-range::-moz-range-thumb{box-sizing:border-box;width:var(--slider-thumb-size)!important;height:var(--slider-thumb-size)!important;border:3px solid #fff;border-radius:50%;background:#3275dc;box-shadow:0 2px 7px rgba(20,67,120,.32);cursor:grab}

/* Keep the spend slider full-width and comfortably touchable on phones. */
@media(max-width:760px){
  .calc-card.has-card-details .card-spend-control{
    --slider-thumb-size:40px;
    --slider-track-edge:20px;
  }
  .calc-card.has-card-details .card-spend-control>label:first-child{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 44px;
    gap:6px;
    width:100%;
    min-width:0;
  }
  .calc-card.has-card-details .card-spend-control>label:first-child>span{
    grid-column:1;
    grid-row:1;
  }
  .calc-card.has-card-details .card-spend-range,
  .calc-card.has-card-details .card-profit-markers{
    grid-column:1;
    grid-row:2;
    min-width:0;
  }
  .calc-card.has-card-details .card-spend-range{
    width:100%;
    height:44px!important;
    background-size:calc(100% - 40px) 9px!important;
  }
  .calc-card.has-card-details .card-profit-markers{
    width:auto;
    justify-self:stretch;
  }
  .calc-card.has-card-details .card-spend-range::-webkit-slider-runnable-track{height:44px!important}
  .calc-card.has-card-details .card-spend-range::-webkit-slider-thumb{margin-top:2px!important}
  .calc-card.has-card-details .card-spend-range::-moz-range-track,
  .calc-card.has-card-details .card-spend-range::-moz-range-progress{height:44px!important}
}