.cc-app{--g:#3f8f55;--gl:#6cc788;--gt:#f1faf4;--ink:#2d3748;--line:#dcdfe3;max-width:1000px;margin:30px auto;padding:0 12px;color:var(--ink);font-family:inherit;box-sizing:border-box}
.cc-app *{box-sizing:border-box}
.cc-title{text-align:center;margin:0 0 30px}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 26px}
.cc-card{position:relative;border:2px solid var(--line);border-radius:14px;padding:38px 20px 24px;text-align:center;background:#fff;min-height:170px}
.cc-wide{grid-column:1 / -1}
.cc-num{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:var(--gl);color:#fff;font-weight:600;font-size:22px;display:flex;align-items:center;justify-content:center}
.cc-card h3{margin:0 0 18px;font-size:24px;font-weight:600;color:var(--ink);line-height:1.2}
.cc-choices{display:flex;justify-content:center;gap:26px}
.cc-activity{gap:38px}
.cc-choice{flex:0 1 auto;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;font:inherit;color:var(--g)}
.cc-choice svg{width:56px;height:56px}
.cc-choice span{display:block;min-width:212px;padding:16px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:18px;color:var(--g);transition:background .15s,border-color .15s}
.cc-sex .cc-choice span{min-width:212px}
.cc-activity .cc-choice{flex:1}
.cc-activity .cc-choice span{width:100%;min-width:0}
.cc-choice:hover span{background:var(--gt)}
.cc-choice.is-on span{background:var(--g);border-color:var(--g);color:#fff}
.cc-choice:focus-visible span,.cc-unit:focus-visible,.cc-calc:focus-visible{outline:3px solid #9bd8ae;outline-offset:2px}
.cc-field{display:flex;justify-content:center;align-items:baseline;gap:14px;margin-bottom:18px}
.cc-field input{width:120px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:center;font-size:44px;font-weight:600;color:var(--ink);padding:4px 0;-moz-appearance:textfield;box-shadow:none}
.cc-field input:focus{outline:0;border-bottom-color:var(--g)}
.cc-field input::-webkit-outer-spin-button,.cc-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc-field input::placeholder{color:#a0a7b1}
.cc-field em{font-style:normal;font-size:22px;color:#718096}
.cc-h-ft input{width:80px}
.cc-h-ft[hidden],.cc-h-cm[hidden]{display:none}
.cc-units{display:flex;justify-content:center;gap:26px}
.cc-unit{padding:14px 26px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--g);font-size:18px;cursor:pointer}
.cc-unit.is-on{background:var(--gt);border-color:var(--gt)}
.cc-actions{text-align:center;margin-top:40px}
.cc-calc{background:var(--g);color:#fff;border:0;border-radius:3px;padding:18px 44px;font-size:20px;font-weight:600;cursor:pointer;transition:background .15s}
.cc-calc:hover{background:#2f7544}
.cc-error{text-align:center;color:#c0392b;margin:16px 0 0;font-weight:600}
.cc-result{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.cc-result[hidden],.cc-error[hidden]{display:none}
.cc-box{border:2px solid var(--line);border-radius:14px;padding:22px 12px;text-align:center}
.cc-box small{display:block;font-size:17px;color:#718096;margin-bottom:6px}
.cc-box strong{display:block;font-size:44px;line-height:1.1}
.cc-box span{color:#718096}
.cc-main{border-color:var(--g);background:var(--gt)}
.cc-main strong{color:var(--g)}
@media (max-width:820px){
 .cc-grid{grid-template-columns:1fr}
 .cc-activity{flex-wrap:wrap;gap:20px}
 .cc-activity .cc-choice{flex:1 1 40%}
 .cc-result{grid-template-columns:1fr}
 .cc-sex .cc-choice span{min-width:120px}
}