.percent-card.card-1{
  --accent:#d97706;
  border-color:#f6e1c8;
  border-top-color:#d97706;
}

.percent-card.card-1 .card-num{
  box-shadow:0 4px 10px rgba(217,119,6,.45);
}

.percent-card.card-1 .percent-input:focus{
  border-color:#d97706;
  box-shadow:0 0 0 4px rgba(217,119,6,.14);
}

.percent-card.card-1 .percent-addon{
  background:#f9e9d7;
  color:#9a5a16;
}

.percent-card.card-1 .mode-btn{
  background:#f9e9d7;
  border:1px solid #f4d9b9;
  color:#9a5a16;
}

.percent-card.card-1 .mode-btn.active{
  background:#d97706;
  border-color:#d97706;
  color:#fff;
}

body .percent-card.card-1 .result-coffee.result-coffee{
  background:#f7faf9;
  border:1px solid #b8d9d3;
  border-top:4px solid #0f766e;
  color:#4a3524;
  box-shadow:none;
  padding:18px;
  text-align:left;
}

body .percent-card.card-1 .result-coffee.result-coffee b{
  color:#9a5a16;
}

.moneylife-summary-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:14px;
}

.moneylife-summary-card{
  min-width:0;
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:20px;
  border:1px solid;
  border-radius:16px;
  overflow-wrap:anywhere;
}

.moneylife-summary-main{
  background:#0f766e;
  border-color:#0f766e;
  color:#fff;
}

.moneylife-summary-date{
  background:#fff7e8;
  border-color:#efcf98;
  color:#854d0e;
}

.moneylife-summary-total{
  background:#ecf8f5;
  border-color:#b7ddd4;
  color:#115e59;
}

.moneylife-summary-icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border:1px solid currentColor;
  border-radius:12px;
}

.moneylife-summary-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.moneylife-summary-label{
  font-size:1.08rem;
  line-height:1.45;
  font-weight:800;
}

.moneylife-summary-value{
  display:block;
  margin-top:8px;
  font-size:1.7rem;
  line-height:1.35;
  font-weight:900;
  letter-spacing:0;
}

.moneylife-summary-date .moneylife-summary-value{
  font-size:1.42rem;
}

.moneylife-summary-note{
  display:block;
  margin-top:auto;
  padding-top:12px;
  font-size:.98rem;
  line-height:1.55;
  font-weight:500;
  opacity:.88;
}

.moneylife-analysis{
  margin-top:16px;
  padding:17px 18px;
  background:#fff;
  border:1px solid #e6ded5;
  border-radius:14px;
  color:#4a3524;
  font-size:1rem;
  line-height:1.75;
}

.moneylife-analysis-title{
  display:block;
  margin-bottom:7px;
  color:#0f766e;
  font-weight:850;
}

.moneylife-analysis b{
  color:#9a5a16;
}

@media(max-width:820px){
  .moneylife-summary-grid{
    grid-template-columns:1fr;
  }

  .moneylife-summary-card{
    min-height:0;
  }

  .moneylife-summary-note{
    margin-top:0;
  }
}

@media(max-width:560px){
  body .percent-card.card-1 .result-coffee.result-coffee{
    padding:10px;
  }

  .moneylife-summary-card{
    padding:17px;
  }

  .moneylife-summary-value{
    font-size:1.55rem;
  }

  .moneylife-summary-date .moneylife-summary-value{
    font-size:1.3rem;
  }

  .moneylife-analysis{
    padding:15px;
  }
}