.goals-list-head{margin-bottom:15px;}

.goals-list{
  display:flex;
  flex-direction:row;
  gap:14px;
  margin-top:12px;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
}

.goal-row{
  position:relative;
  width:360px;
  display:flex;
  justify-content:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid;
  border-radius:12px;
  text-decoration:none;
  transition:transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  cursor:pointer;
  align-items:flex-start;
  flex-direction:column;
}

.goal-main{
  width:100%;
  min-width:0;
  text-align:left;
}

.goal-title{
  font-weight:600;
  font-size:1.05rem;
}

.goal-meta{
  margin-top:4px;
  font-size:0.9rem;
}

.goal-stats{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}

.goal-numbers{
  font-size:0.95rem;
}

.goal-sep{
  margin:0 6px;
}

.goal-current{
  font-weight:600;
}

.goal-estimate{
  font-size: 15px;
}

.goal-estimate-duration{
    font-weight: 600;
}

@media (max-width:720px){
  .goal-row{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }

  .goal-row.open{
    width:100%;
    flex-basis:100%;
  }

  .goal-stats{
    width:100%;
    align-items:stretch;
  }

}

.goal-form-card{
  border:1px solid;
  border-radius:12px;
  padding:12px;
  margin-top:auto;
}

.goal-form-card-title{
  font-weight:600;
  margin-bottom:10px;
}

.goal-input{
  width:100%;
  padding:10px 12px;
  border:1px solid;
  border-radius:10px;
  outline:none;
}

.goal-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:end;
  margin:0 0 6px;
}

.goal-input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.goal-input-wrap .goal-input{
  flex:1;
}

.goal-suffix{
  min-width:18px;
  font-size:0.95rem;
  white-space:nowrap;
}

.goal-add-layout{
  display:flex;
  flex-direction:column;
  gap:0;
}

.goal-add-full{
  width:100%;
}

.goal-add-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:end;
}

.goal-add-two .goal-form-card{
  height:100%;
}

.goal-card-income,
.goal-card-expense{
  transition:all 0.3s ease;
  margin:10px;
}

@media (max-width:350px){
  .goal-add-two{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .goal-inline-top{
    flex-direction:column;
    align-items:center;
  }

  .goal-actions-top{
    justify-content:flex-end;
  }
}

.goal-detail-slot{
  display:none;
  width:100%;
}

.goal-row.open .goal-detail-slot{
  display:block;
}

.goal-detail-panel{
  width:100%;
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid;
  cursor:default;
}

.goal-detail-top{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.goal-detail-box{
  border:1px solid;
  border-radius:12px;
  padding:10px;
  text-align: center; 
}

.goal-detail-label{
  font-size:.78rem;
  opacity:.75;
  margin-bottom:4px;
}

.goal-detail-value{
  font-size:1rem;
  font-weight:700;
}

.goal-score-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.goal-chart-wrap{
  height:280px;
  border:1px solid;
  border-radius:12px;
  padding:10px;
}

.goal-chart-wrap canvas{
  width:100%;
  height:100%;
}

.goal-chart-fallback{
  font-size:.9rem;
  opacity:.75;
  padding:10px 0;
}

@media (max-width:720px){
  .goal-detail-top{
    grid-template-columns:1fr 1fr;
  }

  .goal-history-mini-row{
    grid-template-columns:58px 1fr 82px;
    gap:8px;
  }

  .goal-forecast-row{
    grid-template-columns:58px 1fr 82px;
    gap:8px;
  }

  .goal-forecast-bar-line{
    grid-template-columns:34px 1fr;
    gap:5px;
  }
}

@media (max-width:420px){
  .goal-detail-top{
    grid-template-columns:1fr;
  }
}

 .goal-saving-recommendation{
  padding:14px;
  border:1px solid;
  border-radius:14px;
}

.goal-saving-recommendation-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.goal-saving-recommendation-card{
  border:1px solid;
  border-radius:12px;
  padding:10px;
}

.goal-saving-recommendation-label{
  font-size:.78rem;
  opacity:.72;
  margin-bottom:4px;
  line-height:1.25;
}

.goal-saving-recommendation-value{
  font-weight:700;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}


@media (max-width:420px){
  .goal-saving-recommendation-grid{
    grid-template-columns:1fr;
  }
}

.goal-saving-recommendation-control{
  margin:0 0 12px 0;
  padding:0px 20px;
  border:1px solid;
  border-radius:14px;
  display:flex;
  gap:10px;
  align-items:center;
}

.goal-saving-recommendation-control-label{
  font-weight:600;
}

.goal-saving-recommendation-control-value{
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.goal-saving-recommendation-range{
  width:100%;
  cursor:pointer;
}

.goal-saving-recommendation-control-text{
  min-width:120px;
  text-align:right;
}

.goal-saving-recommendation-footnote{
  width:100%;
  margin: 0 0 10px 0;
  font-size:15px;
  line-height:1.45;
  text-align:justify;
  padding:0px 10px;
}

.goal-saving-recommendation-footnote strong{
  font-weight:700;
}

@media (max-width:520px){
  .goal-saving-recommendation-control{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
    gap:0px;
  }

  .goal-saving-recommendation-control-text{
    min-width:0;
    display:flex;
    gap:5px;
    justify-content:center;
    align-items:center;
  }
}

.goal-detail-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.goal-detail-modal-body .goal-detail-panel {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.goal-detail-modal-body .goal-detail-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.goal-detail-modal-body .goal-detail-box {
  border-radius: 14px;
  padding: 12px;
}

.goal-detail-modal-body .goal-detail-label {
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.goal-detail-modal-body .goal-detail-value {
  font-size: 1rem;
  font-weight: 700;
}

.goal-detail-modal-body .goal-chart-wrap {
  height: 320px;
  min-height: 320px;
  padding: 10px;
  border-radius: 14px;
}

.goal-detail-modal-body .goal-detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 780px) {
  .goal-detail-modal-body .goal-detail-top {
grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.create-modal-footer-right{display: contents;}