.cntnr-matcalc {
    --mc-accent: var(--brand-color-main);
    --mc-bg: var(--main-white);
    --mc-border: #d0d5dd;
    --mc-radius: 6px;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    padding-top: var(--grid__medium);
    padding-right: var(--grid__small);
    padding-bottom: var(--grid__medium);
    padding-left: var(--grid__small);
    background-color: var(--main-light);
    border-radius: var(--radius-small);
}

.cntnr-matcalc *,
.cntnr-matcalc *::before,
.cntnr-matcalc *::after { box-sizing: border-box; }

.cntnr-matcalc h3 {
    margin: 0 0 16px;
    font-size: 1.25em;
    color: var(--mc-accent);
}

#matcalc__densities {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
#matcalc__densities button {
    padding: 7px 16px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, border-color .15s;
}
#matcalc__densities button:hover { border-color: var(--mc-accent); }
#matcalc__densities button.active {
    background: var(--mc-accent);
    color: #fff;
    border-color: var(--mc-accent);
}

#matcalc__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin-bottom: 28px;
}
#matcalc__inputs label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #555;
}
#matcalc__inputs input {
    padding: 8px 10px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    font-size: 15px;
    width: 100%;
    transition: border-color .15s;
}
#matcalc__inputs input:focus {
    outline: none;
    border-color: var(--mc-accent);
}

#matcalc__results {
    background: var(--mc-bg);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 20px 24px;
}
#matcalc__results h3 { margin-bottom: 12px; }
#matcalc__results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}
.matcalc__result-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--mc-border);
    font-size: 14px;
}
.matcalc__result-item span:last-child {
    font-weight: 600;
    color: var(--mc-accent);
}

@media (max-width: 560px) {
    #matcalc__inputs,
    #matcalc__results-grid { grid-template-columns: 1fr; }
}