.pb-intro { color: var(--muted); max-width: 62ch; margin: 8px 0 24px; }

/* Table */
.pb-table { width: 100%; border-collapse: collapse; }
.pb-table th[scope="col"] { text-align: left; font-size: 13px; color: var(--faint); font-weight: 600; padding: 0 10px 8px; }
.pb-table th[scope="col"]:not(:first-child) { text-align: center; }
.pb-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); padding: 8px 10px; white-space: nowrap; }
.pb-table td { text-align: center; padding: 6px 10px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pb-table tbody tr:first-child td { border-top: 0; }

/* Stepper */
.pb-stepper { display: inline-flex; align-items: center; gap: 8px; }
.pb-stepper button {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 18px; line-height: 1;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    transition: border-color .15s, background .15s;
}
.pb-stepper button:hover { border-color: var(--accent); }
.pb-stepper button:active { background: var(--accent-weak); }
.pb-stepper > span { min-width: 2ch; font-weight: 600; font-size: 18px; }

/* Inputs use .field (base.css); these are point-buy deltas. */
.pb-bonus { width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.pb-mod { font-weight: 600; }

/* Footer / budget */
.pb-footer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.pb-reset {
    font: inherit; font-weight: 500; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text);
    transition: border-color .15s;
}
.pb-reset:hover { border-color: var(--accent); }
.pb-budget {
    font-weight: 600; padding: 8px 16px; border-radius: 999px;
    background: var(--accent-weak); color: var(--accent-strong); border: 1px solid var(--border-strong);
    font-variant-numeric: tabular-nums;
}
.pb-budget.is-over { background: #fdecec; color: #b42318; border-color: #f3b4ad; }
[data-theme="dark"] .pb-budget.is-over { background: #3a1714; color: #ffb4ab; border-color: #5b211b; }

/* Advanced */
.pb-adv { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.pb-adv summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.pb-adv summary:hover { color: var(--accent); }
.pb-adv-limits { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.pb-adv-limits label, .pb-costs label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pb-adv-limits input { width: 90px; }
.pb-adv-label { font-size: 13px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; }
.pb-costs { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-costs input { width: 54px; }
.pb-adv input { font-variant-numeric: tabular-nums; }