.prc-calculator,
.prc-calculator * {
    box-sizing: border-box;
}

.prc-calculator {
    --prc-green: #148d55;
    --prc-green-dark: #0b7143;
    --prc-green-soft: #eff9f4;
    --prc-blue: #1976d2;
    --prc-orange: #f39a22;
    --prc-purple: #6f42c1;
    --prc-red: #e4514d;
    --prc-text: #142033;
    --prc-muted: #5f6875;
    --prc-border: #dfe8e4;
    --prc-shadow: 0 5px 18px rgba(22, 59, 44, .07);
    width: 100%;
    max-width: 1540px;
    margin: 24px auto;
    color: var(--prc-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.prc-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.prc-heading__icon {
    flex: 0 0 104px;
    color: var(--prc-green);
}

.prc-heading__icon svg {
    display: block;
    width: 104px;
    height: 72px;
    fill: currentColor;
}

.prc-heading h2 {
    margin: 0;
    color: #0f1a2b;
    font-size: clamp(24px, 2.2vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .2px;
}

.prc-heading p {
    margin: 5px 0 0;
    color: #505967;
    font-size: clamp(15px, 1.25vw, 20px);
}

.prc-layout {
    display: grid;
    grid-template-columns: minmax(320px, 33%) minmax(0, 67%);
    gap: 18px;
    align-items: stretch;
}

.prc-panel {
    overflow: hidden;
    border: 1px solid #bcd9cd;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--prc-shadow);
}

.prc-panel-title,
.prc-results-title {
    padding: 15px 22px;
    color: var(--prc-green);
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

.prc-results-title {
    color: #fff;
    background: linear-gradient(90deg, #0f874f, #178d53);
}

.prc-form-section {
    padding: 4px 26px 22px;
    border-bottom: 1px solid #e5ece9;
}

.prc-benefit-section {
    padding-top: 18px;
}

.prc-form-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--prc-green);
    font-size: 17px;
    font-weight: 800;
}

.prc-form-section h3 span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: #35a36b;
}

.prc-form-section h3 svg,
.prc-input-icon svg,
.prc-calculate-button svg,
.prc-formula-box svg,
.prc-disclaimer svg,
.prc-kpi__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.prc-label {
    display: block;
    margin: 0 0 8px;
    color: #2e3743;
    font-weight: 700;
}

.prc-package-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 16px;
    align-items: center;
}

.prc-package-select,
.prc-input-control input {
    width: 100%;
    min-height: 52px;
    border: 1px solid #d8dfdc;
    border-radius: 7px;
    background: #fff;
    color: #202936;
    font: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.prc-package-select {
    padding: 8px 42px 8px 15px;
    cursor: pointer;
}

.prc-package-select:focus,
.prc-input-control input:focus {
    border-color: var(--prc-green);
    box-shadow: 0 0 0 3px rgba(20, 141, 85, .13);
}

.prc-package-price {
    text-align: right;
}

.prc-package-price strong {
    display: block;
    color: var(--prc-green-dark);
    font-size: 18px;
    line-height: 1.3;
}

.prc-package-price span {
    color: #69727e;
    font-size: 13px;
}

.prc-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.prc-input-row > label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    color: #343d49;
    font-weight: 500;
    line-height: 1.35;
}

.prc-input-icon {
    display: inline-flex;
    width: 21px;
    height: 21px;
    color: #4da574;
}

.prc-input-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 10px;
    align-items: center;
}

.prc-input-control input {
    min-height: 46px;
    padding: 8px 12px;
    font-weight: 700;
}

.prc-input-control > span {
    color: #6c7480;
    font-size: 13px;
}

.prc-calculate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    margin-top: 22px;
    padding: 12px 18px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(90deg, #0e854e, #14965a);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 15px rgba(20, 141, 85, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.prc-calculate-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(20, 141, 85, .25);
}

.prc-calculate-button:focus-visible {
    outline: 3px solid rgba(20, 141, 85, .25);
    outline-offset: 3px;
}

.prc-calculate-button svg {
    width: 22px;
    height: 22px;
}

.prc-calculate-button.is-calculated {
    animation: prcButtonPulse .35s ease;
}

@keyframes prcButtonPulse {
    50% { transform: scale(.985); }
}

.prc-formula-box {
    margin: 22px;
    padding: 18px 20px;
    border: 1px solid #faedbd;
    border-radius: 8px;
    background: #fffaf0;
}

.prc-formula-box h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #55451b;
    font-size: 16px;
}

.prc-formula-box h4 span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #f3c33a;
}

.prc-formula-box ul {
    margin: 0;
    padding-left: 20px;
}

.prc-formula-box li {
    margin: 7px 0;
    color: #303844;
    font-size: 13px;
}

.prc-results-panel {
    padding-bottom: 18px;
}

.prc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 16px 12px;
}

.prc-kpi {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    min-height: 142px;
    padding: 17px 14px;
    border: 1px solid #e2e8e5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(32, 57, 46, .05);
}

.prc-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 50%;
}

.prc-kpi h3 {
    min-height: 42px;
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.45;
}

.prc-kpi strong {
    display: block;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
}

.prc-kpi p {
    margin: 5px 0 0;
    color: #69717c;
    font-size: 12px;
}

.prc-kpi--blue { color: var(--prc-blue); }
.prc-kpi--blue .prc-kpi__icon { background: #eaf4ff; }
.prc-kpi--green { color: var(--prc-green); }
.prc-kpi--green .prc-kpi__icon { background: #eaf8f0; }
.prc-kpi--orange { color: var(--prc-orange); }
.prc-kpi--orange .prc-kpi__icon { background: #fff4e6; }
.prc-kpi--purple { color: var(--prc-purple); }
.prc-kpi--purple .prc-kpi__icon { background: #f4edff; }

.prc-info-grid,
.prc-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 14px;
    padding: 0 16px 14px;
}

.prc-chart-grid {
    grid-template-columns: 1.08fr .92fr;
    padding-bottom: 0;
}

.prc-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e9e6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(32, 57, 46, .045);
}

.prc-card > h3 {
    margin: 0;
    padding: 15px 16px;
    border-bottom: 1px solid #e7ecea;
    color: var(--prc-green);
    font-size: 15px;
    font-weight: 800;
}

.prc-card > h3 small {
    font-size: 12px;
    font-style: italic;
}

.prc-table-wrap {
    overflow-x: auto;
}

.prc-table {
    width: 100%;
    border-collapse: collapse;
    color: #242d39;
    font-size: 13px;
}

.prc-table th,
.prc-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #e8eeeb;
    vertical-align: middle;
}

.prc-table th {
    background: #fbfdfc;
    text-align: left;
    font-weight: 700;
}

.prc-table th:last-child,
.prc-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.prc-investment-table tr.is-selected td {
    background: #edf8f3;
    color: var(--prc-green-dark);
    font-weight: 700;
}

.prc-total-row td {
    background: #eef9f4;
    color: var(--prc-green);
    font-size: 14px;
    font-weight: 800;
}

.prc-bar-card,
.prc-efficiency-card {
    min-height: 318px;
}

.prc-bar-chart {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    height: 190px;
    padding: 22px 28px 0 18px;
}

.prc-bar-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 28px;
    color: #59636f;
    font-size: 10px;
    text-align: right;
}

.prc-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 30px;
    padding: 0 14px 28px;
    border-bottom: 1px solid #cfd8d4;
    background: repeating-linear-gradient(to top, transparent 0, transparent 39px, #eef2f0 40px);
}

.prc-bar-item {
    position: relative;
    display: flex;
    flex: 0 1 130px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.prc-bar-item > strong {
    position: absolute;
    top: -19px;
    color: #27303b;
    font-size: 12px;
    white-space: nowrap;
}

.prc-bar-item > small {
    position: absolute;
    top: calc(100% + 6px);
    width: 145px;
    color: #59636f;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.prc-bar {
    display: block;
    width: 100%;
    max-width: 102px;
    min-height: 8px;
    border-radius: 3px 3px 0 0;
    transition: height .45s ease;
}

.prc-bar--cost { background: linear-gradient(#e9635d, #e14944); }
.prc-bar--saving { background: linear-gradient(#39a76f, #168c54); }

.prc-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 22px 15px 15px;
    color: #555e69;
    font-size: 11px;
}

.prc-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.prc-chart-legend i {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 2px;
}

.prc-legend-cost { background: var(--prc-red); }
.prc-legend-saving { background: var(--prc-green); }

.prc-donut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 24px 22px 20px;
}

.prc-donut-item {
    text-align: center;
}

.prc-donut {
    --progress: 0;
    --donut-color: var(--prc-green);
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: conic-gradient(var(--donut-color) calc(var(--progress) * 1%), #edf0ef 0);
    transform: rotate(12deg);
    transition: background .45s ease;
}

.prc-donut::before {
    position: absolute;
    width: 91px;
    height: 91px;
    border-radius: 50%;
    background: #fff;
    content: '';
}

.prc-donut > span {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    color: var(--donut-color);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    transform: rotate(-12deg);
}

.prc-donut > span small {
    margin-top: 2px;
    font-size: 12px;
}

.prc-donut--payback { --donut-color: var(--prc-blue); }

.prc-donut-item h4 {
    margin: 0;
    color: var(--prc-green-dark);
    font-size: 14px;
}

.prc-donut-item:nth-child(2) h4 {
    color: #2e6599;
}

.prc-donut-item p {
    margin: 4px 0 0;
    color: #68717c;
    font-size: 12px;
}

.prc-disclaimer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 20px;
    border-radius: 7px;
    background: #edf8ff;
    color: #4c5b68;
    font-size: 12px;
    text-align: center;
}

.prc-disclaimer > span {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    color: #2474b7;
}

.prc-disclaimer p {
    margin: 0;
}

.prc-disclaimer a {
    color: var(--prc-green-dark);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 1180px) {
    .prc-layout {
        grid-template-columns: minmax(300px, 38%) minmax(0, 62%);
    }

    .prc-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prc-info-grid,
    .prc-chart-grid {
        grid-template-columns: 1fr;
    }
}

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

    .prc-heading__icon {
        flex-basis: 72px;
    }

    .prc-heading__icon svg {
        width: 72px;
        height: 52px;
    }
}

@media (max-width: 560px) {
    .prc-calculator {
        margin: 16px auto;
        font-size: 14px;
    }

    .prc-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .prc-heading__icon {
        flex-basis: 52px;
    }

    .prc-heading__icon svg {
        width: 52px;
        height: 42px;
    }

    .prc-heading h2 {
        font-size: 21px;
    }

    .prc-panel-title,
    .prc-results-title {
        font-size: 17px;
    }

    .prc-form-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .prc-package-picker,
    .prc-input-row {
        grid-template-columns: 1fr;
    }

    .prc-package-price {
        text-align: left;
    }

    .prc-input-control {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .prc-formula-box {
        margin: 16px;
    }

    .prc-kpi-grid {
        grid-template-columns: 1fr;
        padding-right: 10px;
        padding-left: 10px;
    }

    .prc-kpi {
        min-height: 120px;
    }

    .prc-info-grid,
    .prc-chart-grid {
        padding-right: 10px;
        padding-left: 10px;
    }

    .prc-bar-chart {
        padding-right: 10px;
        padding-left: 5px;
    }

    .prc-bars {
        gap: 12px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .prc-donut-grid {
        grid-template-columns: 1fr;
    }

    .prc-disclaimer {
        text-align: left;
    }
}