/* Phase 3 budget layer. Legacy bg-* rules remain in app.css and are migrated here incrementally. */
.bg-nav-wrap { margin-bottom: var(--space-5); }
.bg-nav-bar.ui-segmented { display: flex; width: fit-content; box-shadow: var(--shadow-soft); }
.bg-nav-btn.ui-segmented__item { padding-inline: 16px; font-size: 13px; }
.bg-nav-btn.ui-segmented__item.on { box-shadow: none; }

.bg-card-main,
.bg-card-sidebar {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.bg-card-title { letter-spacing: -0.01em; }
.bg-fieldset,
.bg-details-wrap { border-radius: var(--radius-md); }

.bg-amount-wrap.ui-money-field .bg-amount-symbol { inset-inline-start: 14px; left: auto; }
.bg-amount-input.ui-money-input { min-height: 52px; padding: 12px 14px 12px 34px; border-radius: var(--radius-md); font-size: 20px; }

.bg-txn-item.ui-compact-row { padding-block: var(--space-3); }
.bg-txn-info,
.bg-txn-left,
.bg-txn-right { min-width: 0; }
.bg-txn-cat,
.bg-txn-note { overflow-wrap: anywhere; }

@container main-content (max-width: 719px) {
  .bg-card-main { padding: 16px; }
  .bg-card-header { align-items: flex-start; }
  .bg-nav-bar.ui-segmented { width: 100%; }
  .bg-txn-item.ui-compact-row { align-items: flex-start; }
}

/* Phase 4 — household expense information architecture */
.ui-sheet-open { overflow: hidden; }

#budget-panel,
.b4-overview,
.b4-overview-content,
.b4-dashboard-grid,
.b4-side-stack {
  min-width: 0;
  max-width: 100%;
}

.b4-budget-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.b4-budget-header > div { min-width: 0; }
.b4-budget-header h2,
.b4-budget-header > div > p { overflow-wrap: anywhere; }
.b4-budget-header h2 { margin: 2px 0 4px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.04em; }
.b4-budget-header > div > p:last-child { color: var(--text-secondary); font-size: 13px; }
.b4-eyebrow { margin: 0; color: var(--accent-blue); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.b4-budget-header .b4-eyebrow,
.b4-overview .b4-eyebrow,
#budget-panel .b4-link { color: #9f1d2d; }
.b4-add-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: #9f1d2d;
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--accent-gold-rgb), 0.22);
  font-weight: 800;
  cursor: pointer;
}
.b4-add-primary span { margin-inline-end: 5px; font-size: 20px; line-height: 1; }
.b4-nav-wrap { position: sticky; top: 0; z-index: 45; max-width: 100%; padding: 6px 0 14px; overflow-x: auto; background: linear-gradient(var(--bg-app) 78%, transparent); scrollbar-width: none; }
.b4-nav-wrap::-webkit-scrollbar { display: none; }
.b4-nav-wrap .bg-nav-bar.ui-segmented { width: max-content; max-width: 100%; }
.b4-nav-wrap .ui-segmented__item { min-width: 92px; }
.b4-nav-wrap .ui-segmented__item.on { background: #9f1d2d; color: #fff; }

.b4-overview-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.b4-overview-toolbar h3 { margin-top: 3px; font-size: 20px; letter-spacing: -0.025em; }
.b4-month-control { display: grid; gap: 4px; color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.b4-month-control input { min-height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font-size: 14px; font-weight: 700; }
.b4-loading { display: flex; min-height: 240px; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); }
.b5-spending-hero { margin-bottom: 16px; padding: clamp(20px, 4vw, 32px); border: 1px solid #eadfd8; border-radius: 28px; background: linear-gradient(145deg, #fffaf7 0%, #fff 58%, #f9efeb 100%); color: #211d1b; box-shadow: 0 18px 48px rgba(91, 48, 39, 0.08); }
.b5-hero-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.b5-hero-label { margin: 0 0 7px; color: #756964; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.b5-household-total { display: block; color: #211d1b; font-size: clamp(34px, 7vw, 54px); font-variant-numeric: tabular-nums; letter-spacing: -0.055em; line-height: 1.05; }
.b5-month-badge { flex: none; padding: 7px 10px; border-radius: 999px; background: rgba(159, 29, 45, 0.08); color: #8f1d2c; font-size: 11px; font-weight: 800; }
.b5-payer-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.b5-payer-option { display: grid; min-width: 0; gap: 5px; padding: 16px; border: 1px solid #eadfd8; border-radius: 18px; background: rgba(255, 255, 255, 0.72); color: #211d1b; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.b5-payer-option:hover { transform: translateY(-1px); border-color: rgba(159, 29, 45, 0.36); }
.b5-payer-option.is-selected { border-color: #9f1d2d; background: #fff; box-shadow: 0 0 0 3px rgba(159, 29, 45, 0.08); }
.b5-payer-option span { color: #685d58; font-size: 12px; font-weight: 800; }
.b5-payer-option strong { overflow-wrap: anywhere; color: #211d1b; font-size: clamp(21px, 4vw, 30px); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.b5-payer-option small { color: #8a7e78; font-size: 11px; }
.b5-person-summary { display: grid; grid-template-columns: minmax(128px, 0.35fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee4de; }
.b5-person-heading { display: flex; align-items: center; gap: 10px; }
.b5-person-heading > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #f8e9e9; font-size: 20px; }
.b5-person-heading div { display: grid; }
.b5-person-heading small { color: #8a7e78; font-size: 10px; }
.b5-person-heading strong { font-size: 18px; }
.b5-person-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b5-person-metrics > div, .b5-settlement { display: grid; min-width: 0; align-content: start; gap: 6px; padding: 12px; border: 0; border-radius: 14px; background: rgba(241, 235, 231, 0.7); color: #211d1b; text-align: left; }
.b5-person-metrics span { color: #756964; font-size: 10px; font-weight: 700; }
.b5-person-metrics strong { overflow-wrap: anywhere; font-size: 14px; font-variant-numeric: tabular-nums; }
.b5-settlement { width: 100%; cursor: pointer; }
.b5-settlement span { display: grid; gap: 2px; }
.b5-settlement small { color: #958983; font-size: 9px; }
.b5-settlement.is-receivable strong, .b5-person-metrics .is-receivable { color: #167052; }
.b5-settlement.is-payable strong, .b5-person-metrics .is-payable { color: #a21d33; }
.b5-settlement.is-clear strong { color: #5d6a66; }
.b5-settlement.is-unavailable strong { color: #8a5b18; }
.b4-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.b4-kpi { display: grid; min-width: 0; gap: 8px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow-soft); }
.b4-kpi span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.b4-kpi strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(19px, 3vw, 28px); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.is-expense { color: var(--accent-red) !important; }
.is-income { color: var(--accent-green) !important; }
.b4-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr); gap: 16px; margin-bottom: 16px; }
.b4-side-stack { display: grid; align-content: start; gap: 16px; }
.b4-panel { min-width: 0; padding: 20px; border: 1px solid #eee5df; border-radius: 22px; background: #fffdfa; box-shadow: 0 8px 28px rgba(68, 42, 34, 0.045); }
.b4-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.b4-panel-heading h4 { margin-top: 3px; font-size: 16px; }
.b4-link { min-height: 36px; padding: 6px 8px; border: 0; background: transparent; color: var(--accent-blue); font-size: 12px; font-weight: 800; cursor: pointer; }
.b4-category-row + .b4-category-row { margin-top: 15px; }
.b4-category-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: 13px; }
.b4-category-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4-category-meta strong { flex: none; font-variant-numeric: tabular-nums; }
.b4-category-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--bg-input); }
.b4-category-track span { display: block; height: 100%; border-radius: inherit; background: #9f1d2d; }
.b4-balance { display: grid; gap: 8px; padding: 14px; border-radius: 13px; background: var(--bg-active-tab); }
.b4-balance > span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.b4-balance > strong { color: var(--accent-blue); font-size: 22px; font-variant-numeric: tabular-nums; }
.b4-balance button { justify-self: start; min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--accent-blue); font-weight: 800; cursor: pointer; }
.b4-balance.is-clear { background: rgba(21, 128, 61, 0.08); }
.b4-balance.is-clear strong { color: var(--accent-green); font-size: 15px; }
.b4-balance.is-unavailable { background: rgba(180, 83, 9, 0.08); }
.b4-balance.is-unavailable strong { color: #8a5b18; font-size: 15px; }
.b4-recurring-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.b4-recurring-row > span { display: grid; min-width: 0; max-width: 100%; flex: 1 1 0%; overflow: hidden; }
.b4-recurring-row > span > strong,
.b4-recurring-row small { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4-recurring-row small { margin-top: 2px; color: var(--text-secondary); }
.b4-recurring-row > strong { flex: none; font-variant-numeric: tabular-nums; }
.b4-empty { padding: 18px 8px; color: var(--text-secondary); font-size: 13px; text-align: center; }
.b4-recent-row { display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.b4-recent-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--bg-input); font-size: 18px; }
.b4-recent-copy { display: grid; min-width: 0; }
.b4-recent-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4-recent-copy small { margin-top: 3px; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.b4-recent-amount { font-weight: 800; font-variant-numeric: tabular-nums; }

.b4-activity { padding: 20px; border-color: #eee5df; border-radius: 24px; background: #fffdfa; }
.b4-search-wrap { position: relative; margin-bottom: 12px; }
.b4-search-wrap > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 20px; pointer-events: none; }
.b4-search-wrap .bg-search-input { min-height: 46px; padding-left: 40px; border-color: var(--border); background: var(--bg-card); }
.b4-primary-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b4-primary-filters label { display: grid; gap: 4px; color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.b4-primary-filters .bg-filter-input { min-height: 42px; background: var(--bg-card); }
.b4-active-filters { margin-top: 12px; }
.b4-activity .bg-filter-panel { margin-top: 12px; padding: 0; overflow: hidden; }
.b4-activity .bg-filter-summary { min-height: 42px; padding: 10px 12px; }
.b4-activity .bg-filter-body { padding: 0 12px 12px; }
.bg-txn-open { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.b4-activity .bg-txn-item { margin-bottom: 0; padding: 16px 4px; border: 0; border-bottom: 1px solid #eee7e2; border-radius: 0; background: transparent; box-shadow: none; }
.b4-activity .bg-txn-item:hover { border-color: #ddcdc4; background: rgba(159, 29, 45, 0.025); }
.b4-activity .bg-txn-icon { border-radius: 14px; background: #f8eeea; }
.b4-activity .bg-txn-payer-chip { background: #f8e9e9; color: #8f1d2c; }

.b4-entry-sheet { width: min(100%, 760px); background: #fffdfa; }
.b4-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.b4-sheet-heading h3 { margin-top: 3px; font-size: 21px; }
.b4-sheet-close { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border: 0; border-radius: 50%; background: #f4efeb; color: #5e5551; font-size: 26px; line-height: 1; cursor: pointer; }
.b4-entry-sheet .bg-form-wrap { margin: 0; padding: 0; border: 0; box-shadow: none; }
.b4-entry-sheet .bg-card-header { justify-content: flex-end; margin-bottom: 12px; }
.b4-entry-sheet .bg-card-header .bg-card-title { display: none; }
.b4-entry-sheet input,
.b4-entry-sheet select,
.b4-entry-sheet textarea { border-color: #e7ddd7; background: #fff; }
.b4-entry-sheet .bg-sticky-bar { bottom: -12px; margin: 8px -4px -12px; border-radius: 14px 14px 0 0; }
.b6-context-field { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px 0 12px; }
.b6-context-field > div { min-width: 0; }
.b6-context-field select { width: 100%; min-height: 48px; border-radius: 12px; font-weight: 800; }
.b6-context-field small { display: block; margin-top: 7px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.b6-step-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #f8e9e9; color: #9f1d2d; font-size: 13px; font-weight: 900; }
.b6-category-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b6-category-label-row .bg-field-label { margin-bottom: 6px; }
.b6-category-label-row button { padding: 4px 0; border: 0; background: transparent; color: #9f1d2d; font-size: 11px; font-weight: 800; cursor: pointer; }
.b6-category-manager { margin: 4px 0 16px; padding: 14px; border: 1px solid #eadfd8; border-radius: 16px; background: #fbf6f2; }
.b6-category-manager[hidden] { display: none; }
.b6-category-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.b6-category-manager-head > div { display: grid; gap: 2px; }
.b6-category-manager-head strong { font-size: 13px; }
.b6-category-manager-head small { color: var(--text-secondary); font-size: 10px; }
.b6-category-manager-head label { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.b6-category-new { display: grid; grid-template-columns: minmax(130px, 0.75fr) minmax(160px, 1fr) auto; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eadfd8; }
.b6-category-new select, .b6-category-new input, .b6-category-row input { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #e2d7d1; border-radius: 10px; background: #fff; color: var(--text-primary); }
.b6-category-new button, .b6-category-row button { min-height: 40px; padding: 7px 11px; border: 1px solid #dfc9c4; border-radius: 10px; background: #fff; color: #8f1d2c; font-size: 11px; font-weight: 800; cursor: pointer; }
.b6-category-new > button { border-color: #9f1d2d; background: #9f1d2d; color: #fff; }
.b6-category-list { display: grid; max-height: 270px; overflow-y: auto; }
.b6-category-row { display: grid; grid-template-columns: 28px minmax(130px, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid #eee5df; }
.b6-category-row:last-child { border-bottom: 0; }
.b6-category-row > span { text-align: center; }
.b6-category-row button.is-archive { color: var(--text-secondary); }
.b4-detail-sheet { width: min(100%, 520px); }
.b4-detail-list { display: grid; gap: 0; margin: 4px 0 20px; }
.b4-detail-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.b4-detail-list dt { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.b4-detail-list dd { max-width: 68%; margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.b4-detail-actions { display: flex; justify-content: flex-end; gap: 10px; }
.b4-secondary-btn, .b4-danger-btn, .b4-retry { min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font-weight: 800; cursor: pointer; }
.b4-danger-btn { border-color: rgba(190, 18, 60, 0.2); color: var(--accent-red); }
.b4-retry { margin-top: 12px; }

.b-recurring-wrap > .bg-card-main,
#budget-panel > .bg-card-main { box-shadow: var(--shadow-soft); }
.b-recurring-wrap .bg-card-title,
#budget-panel > .bg-card-main > .bg-header-row .bg-card-title { font-size: 20px; letter-spacing: -0.02em; }
.b4-section-subtitle { margin-top: 4px; color: var(--text-secondary); font-size: 12px; }
.bg-group-card { box-shadow: none; }

/* Pre-Phase 6 — settlement flow in plain language */
#budget-panel > .bg-card-main { border-color: #eee5df; border-radius: 24px; background: #fffdfa; }
.b5-settlement-hero { margin: 18px 0 24px; padding: clamp(20px, 4vw, 30px); border: 1px solid #e8d9d2; border-radius: 26px; background: linear-gradient(145deg, #fff8f5, #fff, #f8ece8); color: #211d1b; box-shadow: 0 16px 42px rgba(91, 48, 39, 0.08); }
.b5-settlement-kicker { margin: 0 0 18px; color: #756964; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.b5-settlement-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 0.8fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.b5-settlement-person { display: grid; justify-items: center; gap: 3px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); text-align: center; }
.b5-settlement-person > span { font-size: 25px; }
.b5-settlement-person small { color: #847873; font-size: 10px; }
.b5-settlement-person strong { font-size: 20px; }
.b5-settlement-transfer { display: grid; justify-items: center; gap: 4px; color: #9f1d2d; text-align: center; }
.b5-settlement-transfer span { font-size: 11px; font-weight: 800; }
.b5-settlement-transfer strong { font-size: clamp(23px, 4vw, 36px); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.b5-settlement-transfer span:last-child { font-size: 24px; line-height: 1; }
.b5-settlement-help { margin: 18px 0 0; color: #847873; font-size: 11px; text-align: center; }
.b5-settlement-hero.is-clear { text-align: center; }
.b5-settlement-clear-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 10px; place-items: center; border-radius: 50%; background: #e7f5ee; color: #167052; font-size: 24px; font-weight: 900; }
.b5-settlement-clear-title { display: block; color: #167052; font-size: clamp(23px, 4vw, 32px); }
.b5-settlement-group { padding: 18px; border: 1px solid #eee5df; border-radius: 18px; background: #fff; }
.b5-settlement-group.is-active { border-color: #e4c9c4; }
.b5-group-settlement { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0e8e3; }
.b5-group-settlement span { color: #5f5550; font-size: 13px; font-weight: 700; }
.b5-group-settlement strong { color: #9f1d2d; font-size: 22px; font-variant-numeric: tabular-nums; }
.b5-settlement-group.is-cleared .b5-group-settlement strong { color: #69736f; }
.b5-settlement-group .bg-settle-btn { min-height: 44px; margin-top: 14px; border: 0; border-radius: 12px; background: #9f1d2d; color: #fff; font-weight: 800; }

@container main-content (max-width: 799px) {
  .b4-dashboard-grid { grid-template-columns: 1fr; }
}

/* Viewport fallback for standalone/test/embedded hosts that do not provide the
   named main-content query container. Keep the financial overview single-column
   whenever the actual screen cannot safely hold both panels. */
@media (max-width: 799px) {
  .b4-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  #budget-panel { padding-bottom: calc(72px + var(--safe-bottom)); }
  .b4-budget-header { align-items: center; margin-bottom: 14px; }
  .b4-budget-header > div { max-width: calc(100% - 8px); }
  .b4-budget-header .b4-eyebrow { display: none; }
  .b4-budget-header h2 { font-size: 26px; }
  .b4-budget-header > div > p:last-child { max-width: 250px; }
  .b4-add-primary { position: fixed; z-index: 1150; right: calc(18px + var(--safe-right)); bottom: calc(82px + var(--safe-bottom)); width: 56px; min-width: 56px; height: 56px; padding: 0; border-radius: 50%; box-shadow: 0 12px 28px rgba(119, 25, 39, 0.28); }
  .b4-add-primary > span:first-child { margin: 0; font-size: 28px; }
  .b4-add-label { display: none; }
  body:has(.mobile-more[open]) .b4-add-primary { opacity: 0; pointer-events: none; }
  .b4-nav-wrap { top: 0; margin-inline: -16px; padding-inline: 16px; background: linear-gradient(#fbf8f5 78%, transparent); }
  .b4-nav-wrap .bg-nav-bar.ui-segmented { width: max-content; min-width: 100%; }
  .b4-overview-toolbar { align-items: flex-start; flex-direction: column; }
  .b4-month-control { width: 100%; }
  .b4-month-control input { width: 100%; }
  .b5-spending-hero { padding: 20px 16px; border-radius: 24px; }
  .b5-payer-switch { gap: 8px; margin-top: 20px; }
  .b5-payer-option { min-height: 116px; padding: 13px 11px; border-radius: 16px; }
  .b5-payer-option strong { font-size: clamp(18px, 6vw, 24px); }
  .b5-person-summary { grid-template-columns: 1fr; gap: 14px; }
  .b5-person-metrics { grid-template-columns: 1fr 1fr; }
  .b5-settlement { grid-column: 1 / -1; min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .b4-kpi-grid { grid-template-columns: 1fr 1fr; }
  .b4-kpi { padding: 14px; }
  .b4-panel { padding: 16px; }
  .b4-primary-filters { grid-template-columns: 1fr 1fr; }
  .b4-primary-filters label:first-child { grid-column: 1 / -1; }
  .b4-activity { padding: 14px; }
  .b4-recent-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .b4-recent-icon { width: 36px; height: 36px; }
  .b4-recent-copy small { max-width: 150px; }
  .b4-entry-sheet, .b4-detail-sheet { max-height: 92dvh; }
  .b4-entry-sheet .bg-fieldset { padding-inline: 12px; border-radius: 16px; }
  .b6-context-field { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .b6-step-number { width: 30px; height: 30px; }
  .b6-category-new { grid-template-columns: 1fr; }
  .b6-category-new select, .b6-category-new input, .b6-category-new button { width: 100%; min-height: 46px; font-size: 16px; }
  .b6-category-manager { padding: 12px; }
  .b6-category-manager-head { flex-direction: column; }
  .b6-category-row { grid-template-columns: 26px minmax(0, 1fr); padding: 10px 0; }
  .b6-category-row input { min-height: 44px; font-size: 16px; }
  .b6-category-row button { min-height: 42px; }
  .b6-category-row button:first-of-type { grid-column: 2; }
  .b6-category-row button.is-archive { grid-column: 2; }
  .b4-detail-actions { flex-direction: column; }
  .b4-secondary-btn, .b4-danger-btn { width: 100%; min-height: 44px; }
  .b5-settlement-route { grid-template-columns: 1fr; gap: 8px; }
  .b5-settlement-person { width: min(100%, 210px); margin-inline: auto; padding: 13px 8px; }
  .b5-settlement-transfer { min-width: 0; }
  .b5-settlement-transfer span:last-child { transform: rotate(90deg); }
  .b5-group-settlement { align-items: flex-start; flex-direction: column; gap: 4px; }
}