:root{
  --tfh-bg: #ffffff;
  --tfh-text: #111111;
  --tfh-muted: rgba(17,17,17,0.70);
  --tfh-border: rgba(0,0,0,0.14);
  --tfh-border-strong: rgba(0,0,0,0.25);
  --tfh-focus: rgba(0,0,0,0.10);
  --tfh-surface: #ffffff;
  --tfh-surface-2: #fafafa;
  --tfh-btn-bg: #111111;
  --tfh-btn-text: #ffffff;
  --tfh-font-size: 14px;
  --tfh-font-size-kpi: 20px;
  --tfh-font-weight: 600;
  --tfh-font-weight-kpi: 800;
  --tfh-pad-page-y: 18px;
  --tfh-pad-page-x: 12px;
  --tfh-card-pad: 22px;
  --tfh-row-gap: 12px;
  --tfh-row-margin: 12px;
  --tfh-label-col: 240px;
  --tfh-input-col: 320px;
  --tfh-radius-card: 12px;
  --tfh-radius-input: 10px;
  --tfh-radius-btn: 12px;
  --tfh-shadow-focus: 0 0 0 3px var(--tfh-focus);
}

.tfh-calculator{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--tfh-pad-page-y) var(--tfh-pad-page-x);
  color: var(--tfh-text);
  font-size: var(--tfh-font-size);
}

.tfh-calculator .tfh-card{
  border: none !important;
  background: var(--tfh-surface) !important;
  padding: var(--tfh-card-pad) !important;
}

.tfh-calculator .tfh-row{
  display: grid !important;
  grid-template-columns: var(--tfh-label-col) var(--tfh-input-col);
  gap: var(--tfh-row-gap) !important;
  align-items: center !important;
  margin: var(--tfh-row-margin) 0 !important;
}

.tfh-calculator .tfh-label{
  min-width: 0 !important;
  margin: 0 !important;
  font-weight: var(--tfh-font-weight) !important;
}

.tfh-calculator .tfh-input,
.tfh-calculator .tfh-select{
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--tfh-border-strong) !important;
  border-radius: var(--tfh-radius-input) !important;
  background: var(--tfh-bg) !important;
  font-size: var(--tfh-font-size) !important;
  line-height: 1.2 !important;
  color: var(--tfh-text);
}

.tfh-calculator .tfh-input:focus,
.tfh-calculator .tfh-select:focus{
  outline: none !important;
  box-shadow: var(--tfh-shadow-focus) !important;
  border-color: rgba(0,0,0,0.42) !important;
}

.tfh-calculator .tfh-button{
  width: fit-content !important;
  padding: 10px 16px !important;
  border-radius: var(--tfh-radius-btn) !important;
  border: 1px solid rgba(0,0,0,.20) !important;
  background: var(--tfh-btn-bg) !important;
  color: var(--tfh-btn-text) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: var(--tfh-font-size) !important;
}

.tfh-muted{
  color: var(--tfh-muted);
  font-size: 13px;
}

.fc-ppf-subhead{
  margin: 18px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.fc-ppf-status{
  display:inline-block;
  margin-left:10px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid #d0d7de;
  background:#f6f8fa;
  color:#24292f;
  font-size:12px;
}
.fc-ppf-status.ok{background:#dafbe1;border-color:#2da44e;color:#116329}
.fc-ppf-status.err{background:#ffebe9;border-color:#cf222e;color:#a40e26}
.fc-ppf-status.busy{background:#fff8c5;border-color:#9a6700;color:#7d4e00}

.fc-ppf-errors{
  margin-top:10px;
  color:#a40e26;
  font-weight:600;
}

.fc-ppf-results{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.10);
}

.fc-ppf-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

.fc-ppf-kpi-card{
  border:1px solid #d0d7de;
  border-radius:10px;
  padding:10px;
  background:#f6f8fa;
}

.fc-ppf-kpi-key{
  font-size:12px;
  color:#57606a;
  margin-bottom:4px;
  text-transform: capitalize;
}

.fc-ppf-kpi-val{
  font-size:var(--tfh-font-size-kpi);
  font-weight:var(--tfh-font-weight-kpi);
  color:#24292f;
  word-break:break-word;
}

.fc-ppf-chart-wrap{
  border:1px solid #d0d7de;
  border-radius:10px;
  padding:10px;
  background:#fff;
  overflow:auto;
}

.fc-ppf-table-wrap{
  overflow:auto;
  border:1px solid #d0d7de;
  border-radius:10px;
  background:#fff;
}

.fc-ppf-table{
  width:100%;
  border-collapse:collapse;
}

.fc-ppf-table th,.fc-ppf-table td{
  border-bottom:1px solid #eaeef2;
  padding:8px;
  text-align:left;
  white-space:nowrap;
}

.fc-ppf-table th{
  background:#f6f8fa;
  font-size:12px;
  color:#57606a;
}

.fc-ppf-entry-mode{
  display:flex;
  gap:16px;
  margin:8px 0 10px;
}

.fc-ppf-entry-mode label{
  font-size:13px;
  font-weight:600;
}

.fc-ppf-input-table{
  width:100%;
  border-collapse:collapse;
}

.fc-ppf-input-table th,
.fc-ppf-input-table td{
  border-bottom:1px solid #eaeef2;
  padding:8px;
  vertical-align:middle;
}

.fc-ppf-input-table th{
  background:#f6f8fa;
  font-size:12px;
  color:#57606a;
  text-align:left;
}

.fc-ppf-input-table .tfh-input,
.fc-ppf-input-table .tfh-select{
  min-width:130px;
}

.fc-ppf-table-actions{
  margin:10px 0;
}

.tfh-button-light{
  background:#fff !important;
  color:#111 !important;
}

.fc-tip{
  display:inline-block;
  width:16px;
  height:16px;
  line-height:16px;
  text-align:center;
  border:1px solid #9aa4af;
  border-radius:999px;
  font-size:11px;
  color:#57606a;
  cursor:help;
}

.fc-ppf-mapper{
  margin-top:10px;
  border:1px solid #d0d7de;
  border-radius:8px;
  padding:8px 10px;
}

.fc-ppf-mapper-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  margin-top:8px;
}

.fc-ppf-mapper-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media (max-width:780px){
  .tfh-calculator .tfh-row{
    grid-template-columns:1fr !important;
  }
  .tfh-calculator .tfh-card{
    padding:16px !important;
  }
}