.spscc-calculator {
    --spscc-primary: #1f4e78;
    --spscc-soft: #eef5fa;
    --spscc-border: #d5e0e8;
    --spscc-success: #e7f4e2;
    --spscc-text: #1f2933;
    max-width: 1050px;
    margin: 24px auto;
    color: var(--spscc-text);
    font-family: inherit;
}

.spscc-calculator * { box-sizing: border-box; }

.spscc-header {
    background: var(--spscc-primary);
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 24px;
}

.spscc-header h2 { margin: 0 0 6px; color: #fff; font-size: 28px; }
.spscc-header p { margin: 0; opacity: .9; }

.spscc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.spscc-card {
    background: #fff;
    border: 1px solid var(--spscc-border);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(24, 57, 84, .07);
}

.spscc-card h3 { margin-top: 0; }

.spscc-card label {
    display: block;
    margin-bottom: 16px;
}

.spscc-card label > span {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.spscc-card input,
.spscc-card select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #b8c8d4;
    border-radius: 8px;
    padding: 9px 12px;
    background: #fff;
    font: inherit;
}

.spscc-money-input {
    display: flex;
    align-items: center;
    border: 1px solid #b8c8d4;
    border-radius: 8px;
    overflow: hidden;
}

.spscc-money-input > span {
    padding: 10px 12px;
    background: var(--spscc-soft);
    font-weight: 700;
}

.spscc-money-input input { border: 0; border-radius: 0; }
.spscc-custom-wrap small { display: block; margin-top: 5px; color: #667784; }
.spscc-custom-wrap.is-disabled { opacity: .55; }

.spscc-calculate {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 13px 18px;
    background: var(--spscc-primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.spscc-calculate:hover { filter: brightness(.93); }

.spscc-results { margin: 0; }
.spscc-results > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #e5edf2;
}
.spscc-results dt { font-weight: 600; }
.spscc-results dd { margin: 0; font-weight: 700; text-align: right; }
.spscc-results .spscc-total-row {
    margin-top: 12px;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: var(--spscc-success);
    font-size: 1.12em;
}

.spscc-chart-card { margin-top: 20px; }
.spscc-table-wrap { overflow-x: auto; }
.spscc-chart-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.spscc-chart-table th,
.spscc-chart-table td { padding: 11px; border: 1px solid var(--spscc-border); text-align: right; }
.spscc-chart-table th { background: var(--spscc-soft); }
.spscc-chart-table th:first-child,
.spscc-chart-table td:first-child { text-align: center; }
.spscc-chart-table tbody tr:nth-child(even) { background: #fafcfd; }

@media (max-width: 760px) {
    .spscc-grid { grid-template-columns: 1fr; }
    .spscc-header h2 { font-size: 23px; }
    .spscc-card { padding: 18px; }
}