.fire-layout{
  align-items:start;
}

.tool-card-inputs{
  position:relative;
}

.fire-results-card{
  position:sticky;
  top:24px;
}

.form-section-body,
.faq-answer{
  overflow:hidden;
  pointer-events:none;
}

.form-section.is-open .form-section-body,
.faq-item.is-open .faq-answer{
  pointer-events:auto;
  max-height:3000px;
  opacity:1;
}

.form-subheading{
  margin:22px 0 12px;
  font-size:1.05rem;
  color:#1a2f54;
}

.helper-text{
  margin:6px 0 12px;
  color:#60708d;
  font-size:.92rem;
  line-height:1.5;
}

.strategy-options{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

.strategy-option{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #d9deea;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.strategy-option:hover,
.strategy-option.is-selected{
  border-color:#30cfc0;
  box-shadow:0 10px 24px rgba(48, 207, 192, .14);
  transform:translateY(-1px);
}

.strategy-option input{
  width:18px;
  height:18px;
  min-height:auto;
}

.strategy-option-main{
  display:grid;
  gap:4px;
}

.strategy-option-main strong{
  color:#1a2f54;
}

.strategy-option-main small,
.strategy-return{
  color:#60708d;
  line-height:1.35;
}

.strategy-return{
  font-weight:700;
  white-space:nowrap;
}

.custom-strategy-grid{
  display:none;
}

.custom-strategy-grid.is-visible{
  display:grid;
}

.fire-checkbox-group{
  margin-bottom:18px;
}

.fire-checkbox-group .toggle-label{
  display:flex;
  align-items:center;
  gap:10px;
}

.fire-checkbox-group input{
  min-height:auto;
}

.property-grid.is-disabled{
  opacity:.45;
}

.property-grid.is-disabled input{
  pointer-events:none;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  background:#fff4da;
  color:#7a5600;
}

.status-badge--good{
  background:#ddfbf5;
  color:#126b60;
}

.fire-hero-metrics{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.fire-result-grid{
  grid-template-columns:1fr;
}

.fire-chart-wrap{
  position:relative;
  width:100%;
  height:clamp(320px, 46vw, 520px);
}

.fire-chart-wrap canvas{
  width:100% !important;
  height:100% !important;
}

.chart-tooltip{
  position:absolute;
  z-index:5;
  min-width:190px;
  max-width:300px;
  padding:16px 20px;
  border-radius:22px;
  background:#1d2642;
  color:#ffffff;
  box-shadow:0 22px 45px rgba(12, 20, 38, 0.18);
  pointer-events:none;
  transform:translate(-50%, calc(-100% - 14px));
  opacity:0;
  transition:opacity .12s ease;
}

.chart-tooltip.is-visible{
  opacity:.9;
}

.chart-tooltip-title{
  margin:0 0 8px;
  color:rgba(255,255,255,.86);
  font-size:.85rem;
  font-weight:600;
}

.chart-tooltip-value{
  margin:0;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
}

.chart-tooltip-change{
  margin:6px 0 0;
  color:rgba(255,255,255,.9);
  font-size:.85rem;
  font-weight:600;
}

.income-need-equation{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:center;
  margin:16px 0 18px;
}

.equation-part{
  min-height:94px;
  padding:16px;
  border:1px solid #d9deea;
  border-radius:18px;
  background:#fff;
  display:grid;
  gap:8px;
  align-content:center;
}

.equation-part span{
  color:#60708d;
  font-size:.88rem;
  line-height:1.35;
}

.equation-part strong{
  color:#1a2f54;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
}

.equation-subnote,
.mini-card-note{
  display:block;
  margin-top:4px;
  color:#60708d;
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
}

.equation-part--highlight{
  border-color:#30cfc0;
  background:linear-gradient(135deg, rgba(48, 207, 192, .14), rgba(255,255,255,.95));
}

.equation-symbol{
  color:#60708d;
  font-weight:900;
  font-size:1.35rem;
}

.pension-phase-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}

.pension-phase-note{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:#eefbf8;
  color:#1a2f54;
  line-height:1.5;
}

.pension-phase-note--soft{
  background:#f5f7fb;
}

.chart-legend-item--net-worth .chart-legend-swatch{
  background:#30cfc0;
}

.chart-legend-item--fire-pot .chart-legend-swatch{
  background:#5f6fa3;
}

.chart-legend-item--required .chart-legend-swatch{
  background:#f0a642;
}

.chart-legend-item--debt .chart-legend-swatch{
  background:#d95d59;
}

.milestone-list{
  display:grid;
  gap:12px;
}

.milestone-item{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid #d9deea;
  border-radius:16px;
  background:#fff;
}

.milestone-item.is-achieved{
  border-color:#30cfc0;
  background:linear-gradient(135deg, rgba(48, 207, 192, .12), rgba(255, 255, 255, .96));
}

.milestone-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#edf1f7;
  color:#51627f;
  font-weight:900;
}

.milestone-item.is-achieved .milestone-icon{
  background:#30cfc0;
  color:#fff;
}

.milestone-main{
  display:grid;
  gap:4px;
}

.milestone-main strong{
  color:#1a2f54;
}

.milestone-main span,
.milestone-meta span{
  color:#60708d;
  line-height:1.4;
}

.milestone-meta{
  display:grid;
  gap:3px;
  text-align:right;
  min-width:118px;
}

.milestone-meta strong{
  color:#1a2f54;
}

.fire-monte-carlo-stats,
.fire-key-grid{
  margin-top:16px;
}

.notes-list{
  display:grid;
  gap:10px;
  margin:0;
  padding-left:20px;
  color:#51627f;
}

.notes-list li{
  line-height:1.5;
}


@media (max-width: 780px){
  .chart-tooltip{
    min-width:160px;
    padding:14px 16px;
  }

  .income-need-equation{
    grid-template-columns:1fr;
  }

  .pension-phase-grid{
    grid-template-columns:1fr;
  }

  .equation-symbol{
    text-align:center;
  }
}

@media (max-width: 980px){
  .fire-results-card{
    position:static;
  }

  .fire-hero-metrics{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .strategy-option,
  .milestone-item{
    grid-template-columns:1fr;
  }

  .strategy-option input{
    justify-self:start;
  }

  .strategy-return,
  .milestone-meta{
    text-align:left;
  }

  .fire-chart-wrap{
    height:340px;
  }

  .results-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}