.sbp-app {
    --sbp-navy: #0A1F44;
    --sbp-teal: #2ABFBA;
    --sbp-blue: #005B96;
    --sbp-amber: #FFC857;
    --sbp-border: #dfe5ea;
    --sbp-bg: #f9fafb;
    color: #333;
}

.sbp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.sbp-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--sbp-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.sbp-card h2 {
    color: var(--sbp-navy);
    margin-top: 0;
}

/*
 * Each budget item deliberately uses multiple lines inside a category card:
 *  Row 1: Item description (full width)
 *  Row 2: Amount + Frequency
 *  Row 3: Remove action
 * This prevents controls overflowing when three category cards sit side by side.
 */
.sbp-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "name name"
        "amount frequency"
        "remove remove";
    gap: 10px 12px;
    align-items: end;
    min-width: 0;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f2;
}

.sbp-field {
    min-width: 0;
}

.sbp-field-name {
    grid-area: name;
}

.sbp-field-amount {
    grid-area: amount;
}

.sbp-field-frequency {
    grid-area: frequency;
}

.sbp-field-remove {
    grid-area: remove;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.sbp-field label,
.sbp-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.sbp-field input,
.sbp-field select,
.sbp-form-row input,
.sbp-add-row select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #aab5bf;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}

.sbp-field input:focus,
.sbp-field select:focus,
.sbp-form-row input:focus,
.sbp-add-row select:focus,
.sbp-button:focus,
.sbp-link-button:focus,
.sbp-remove-row:focus {
    outline: 3px solid rgba(0, 91, 150, .28);
    outline-offset: 2px;
}

.sbp-remove-row,
.sbp-link-button {
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    min-height: 36px;
    padding: 4px 2px;
}

.sbp-add-row {
    margin-top: 16px;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sbp-button {
    display: inline-block;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--sbp-teal);
    color: #fff;
    font-weight: 700;
    padding: 11px 18px;
    cursor: pointer;
}

.sbp-button-secondary {
    background: var(--sbp-blue);
}

.sbp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.sbp-result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sbp-result-grid > div {
    background: var(--sbp-bg);
    border-radius: 8px;
    padding: 14px;
}

.sbp-result-grid span,
.sbp-result-grid strong {
    display: block;
}

.sbp-result-grid strong {
    margin-top: 6px;
    font-size: 1.35rem;
    color: var(--sbp-navy);
}

.sbp-positive { color: #0b6b61 !important; }
.sbp-negative {
    color: #d00000 !important;
    font-weight: 700 !important;
}
.sbp-result-message { margin-top: 16px; }
.sbp-status { margin-bottom: 16px; }

.sbp-status.sbp-error {
    border-left: 4px solid #a43d2e;
    background: #fff4f2;
    padding: 12px;
}

.sbp-status.sbp-success {
    border-left: 4px solid #187a68;
    background: #f0fbf8;
    padding: 12px;
}

.sbp-form-row { margin-bottom: 16px; }

.sbp-checkbox-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

.sbp-checkbox-row input {
    width: 20px;
    min-height: 20px;
    margin-top: 4px;
}

.sbp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

#sb-general-improve,
#sb-recommendations,
#sb-rec-shortfall,
#sb-rec-accommodation,
#sb-rec-subscriptions,
#sb-rec-takeaways,
#sb-rec-travel,
#sb-rec-course-materials,
#sb-rec-flexible-high,
#sb-rec-termly-income,
#sb-rec-borrowing,
#sb-rec-emergency,
#sb-rec-none {
    display: none;
}

.sbp-show {
    display: block !important;
}

@media (max-width: 980px) {
    .sbp-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .sbp-card {
        padding: 16px;
    }

    .sbp-item-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "amount"
            "frequency"
            "remove";
    }

    .sbp-field-remove {
        justify-content: flex-start;
    }

    .sbp-result-grid {
        grid-template-columns: 1fr;
    }

    .sbp-actions {
        display: grid;
    }

    .sbp-actions .sbp-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}