.cfsc-wrap { margin-block: 24px; font-family: Helvetica, Arial, sans-serif; color: #333; }
.cfsc-wrap *, .cfsc-wrap *::before, .cfsc-wrap *::after { box-sizing: border-box; }
.cfsc-wrap [hidden] { display: none !important; }
.cfsc { width: 100%; border: 1px solid #d9ded6; border-radius: 12px; background: #fff; }
.cfsc-main { padding: 25px 24px; }
.cfsc-heading { margin: 0 0 8px; padding-left: 7px; font-size: 21px; line-height: 1.3; font-weight: 700; color: #1a1a1a; }
.cfsc-intro { margin: 0 0 23px; padding-left: 7px; font-size: 13px; line-height: 1.5; }
.cfsc-group { min-width: 0; margin: 0 0 23px; padding: 0; border: 0; }
.cfsc-group legend { margin: 0 0 11px; padding: 0 0 0 7px; font-size: 14px; line-height: 1.4; font-weight: 700; color: #333; }
.cfsc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cfsc-field { min-width: 0; }
.cfsc-field label, .cfsc-more label { display: block; margin-bottom: 8px; padding-left: 7px; font-size: 13px; line-height: 1.4; font-weight: 600; color: #333; }
.cfsc-control { position: relative; }
.cfsc-control input, .cfsc-more select { display: block; width: 100%; height: 46px; min-height: 46px; padding: 0 13px; border: 1px solid #cdd2cb; border-radius: 7px; background: #fff; color: #333; box-shadow: none; font: 400 13px/1.3 Helvetica, Arial, sans-serif; }
.cfsc-control input { padding-right: 32px; }
.cfsc-control input[aria-invalid="true"] { border-color: #b33a2b; }
.cfsc-control input:focus-visible, .cfsc-more select:focus-visible, .cfsc-button:focus-visible, .cfsc-more summary:focus-visible, .cfsc-details summary:focus-visible { outline: 2px solid #387d00; outline-offset: 2px; }
.cfsc-unit { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: #626a61; font-size: 13px; pointer-events: none; }
.cfsc-help { margin: 7px 0 0; padding-left: 7px; font-size: 12px; line-height: 1.5; color: #5b625a; }
.cfsc-group > .cfsc-help-intro { margin: -5px 0 13px; }
.cfsc-error { display: block; margin-top: 5px; color: #a22f21; font-size: 12px; line-height: 1.4; }
.cfsc-more { margin: 0 0 16px; font-size: 12px; line-height: 1.5; }
.cfsc-more summary, .cfsc-details summary { display: list-item; width: fit-content; cursor: pointer; color: #485344; }
.cfsc-more label { margin-top: 13px; }
.cfsc-more select { max-width: 310px; }
.cfsc .cfsc-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 7px; background: #387d00; color: #fff; font: 600 13px/1.4 Helvetica, Arial, sans-serif; text-align: center; cursor: pointer; }
.cfsc .cfsc-button:hover { background: #2c6400; color: #fff; }
.cfsc-result { padding: 23px 24px; border-top: 1px solid #d9ded6; border-radius: 0 0 11px 11px; background: #f7f9f6; }
.cfsc-result-label { display: block; font-size: 13px; line-height: 1.4; }
.cfsc-result-value { display: block; min-height: 37px; margin: 5px 0; font-size: 28px; line-height: 1.3; font-weight: 700; color: #387d00; }
.cfsc-status { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.cfsc-metrics { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 15px; font-size: 12px; line-height: 1.5; color: #555; }
.cfsc-metrics output { font-weight: 600; color: #333; }
.cfsc-safety { margin: 14px 0 0; color: #5b625a; font-size: 12px; line-height: 1.5; }
.cfsc-details { margin-top: 15px; font-size: 12px; line-height: 1.5; }
.cfsc-details-body { max-width: 80ch; padding-top: 5px; }
.cfsc-details-body p { margin: 8px 0; }
@media (max-width: 700px) {
  .cfsc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cfsc-main { padding: 23px 20px; }
  .cfsc-result { padding: 23px 20px; }
  .cfsc-fields { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .cfsc .cfsc-button { width: 100%; }
}