/* GENERATED by scripts/landing/build_scene_css.py from the app's own CSS. Do not edit by hand: change the
   app or scripts/landing/scene_css_manifest.py, then re-run the script.
   Spec: docs/superpowers/specs/2026-10-03-landing-page-design.md, section 7. */

/* .app-dash: Dashboard (index.html); scenes sc-glance, sc-curve, sc-dash-list */
.app-dash { font-size: var(--app-rem, 18px); }
.app-dash { --text-primary: #1e293b; }
.app-dash * { margin: 0; padding: 0; box-sizing: border-box; }
.app-dash { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
.app-dash .db-last-updated { margin-top: 2px; font-size: calc(0.75 * var(--app-rem, 18px)); color: var(--text-muted, #94a3b8); letter-spacing: 0.01em; }
.app-dash { color: #e2e8f0; }
.app-dash .db-card { background: #1e293b; border-radius: 10px; padding: calc(1 * var(--app-rem, 18px)) calc(1.1 * var(--app-rem, 18px)); border: 1px solid #334155; }
.app-dash .db-card-title { font-size: calc(0.7 * var(--app-rem, 18px)); text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; font-weight: 700; margin-bottom: calc(0.4 * var(--app-rem, 18px)); }
.app-dash .db-card--compact { padding: calc(0.5 * var(--app-rem, 18px)) calc(0.8 * var(--app-rem, 18px)); }
.app-dash .db-card--compact .db-card-title { margin-bottom: calc(0.1 * var(--app-rem, 18px)); }
.app-dash .db-card--compact .db-stat-value { font-size: calc(1.5 * var(--app-rem, 18px)); }
.app-dash .db-stat-card { cursor: pointer; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, border-color 0.2s; }
.app-dash .db-stat-card:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.app-dash .db-stat-card:hover { background-color: #25354a; }
.app-dash .db-income-expense-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(0.75 * var(--app-rem, 18px)); }
.app-dash .db-stat-value { font-size: calc(1.9 * var(--app-rem, 18px)); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.app-dash .db-stat-sub { font-size: calc(0.75 * var(--app-rem, 18px)); color: #64748b; margin-top: calc(0.2 * var(--app-rem, 18px)); }
.app-dash #db-card-excess { padding: calc(0.55 * var(--app-rem, 18px)) calc(0.75 * var(--app-rem, 18px)); }
.app-dash .db-excess-split { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(0.8 * var(--app-rem, 18px)); }
.app-dash .db-excess-left { display: flex; flex-direction: column; min-width: 0; }
.app-dash .db-excess-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.app-dash #db-card-excess .db-stat-value { font-size: calc(2.1 * var(--app-rem, 18px)); white-space: nowrap; }
.app-dash #db-card-excess .db-stat-sub { margin-top: calc(0.05 * var(--app-rem, 18px)); }
.app-dash .db-excess-right .db-breakdown-toggle { margin-top: 0; margin-bottom: calc(0.35 * var(--app-rem, 18px)); }
.app-dash .db-excess-right .db-last-updated { font-size: calc(0.66 * var(--app-rem, 18px)); color: #64748b; text-align: right; }
.app-dash .color-green { color: #22c55e; }
.app-dash .color-red { color: #ef4444; }
.app-dash .color-blue { color: #60a5fa; }
.app-dash .db-stat-border-green { border-left: 3px solid #21c45d; }
.app-dash .db-stat-border-red { border-left: 3px solid #ef4444; }
.app-dash .db-stat-border-blue { border-left: 3px solid #60a5fa; }
.app-dash .db-breakdown-toggle { background: none; border: 1px solid #334155; border-radius: 5px; color: #94a3b8; font-size: calc(0.68 * var(--app-rem, 18px)); font-weight: 600; cursor: pointer; margin-top: calc(0.5 * var(--app-rem, 18px)); padding: calc(0.2 * var(--app-rem, 18px)) calc(0.6 * var(--app-rem, 18px)); text-transform: uppercase; letter-spacing: 0.04em; }
.app-dash .db-breakdown-toggle:hover { border-color: #64748b; color: #cbd5e1; }
.app-dash .db-excess-bar-wrap { position: relative; margin-top: calc(0.25 * var(--app-rem, 18px)); }
.app-dash .db-excess-bar-labels { display: flex; justify-content: space-between; font-size: calc(0.65 * var(--app-rem, 18px)); color: #94a3b8; margin-bottom: calc(0.25 * var(--app-rem, 18px)); }
.app-dash .db-excess-bar-track { height: 28px; border-radius: 6px; background: #0f172a; overflow: hidden; display: flex; position: relative; cursor: default; }
.app-dash .db-bar-expenses { background: #3b82f6; height: 100%; display: flex; align-items: center; justify-content: center; font-size: calc(0.75 * var(--app-rem, 18px)); color: #dbeafe; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; transition: width 0.5s ease; }
.app-dash .db-bar-surplus { background: #21c45d; height: 100%; display: flex; align-items: center; justify-content: center; font-size: calc(0.75 * var(--app-rem, 18px)); color: #dcfce7; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; flex: 1; transition: width 0.5s ease; }
.app-dash .db-excess-bar-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: calc(0.5 * var(--app-rem, 18px)) calc(0.75 * var(--app-rem, 18px)); font-size: calc(0.72 * var(--app-rem, 18px)); color: #e2e8f0; white-space: nowrap; z-index: 20; pointer-events: none; display: none; }
.app-dash .db-excess-bar-track:hover .db-excess-bar-tooltip, .app-dash .db-excess-bar-track:focus-within .db-excess-bar-tooltip { display: block; }
.app-dash .db-chart-container { height: 225px; position: relative; }
.app-dash .db-acc-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow: hidden; transition: background 0.2s, border-color 0.2s; display: flex; flex-direction: column; min-height: 0; }
.app-dash .db-acc-head { display: flex; align-items: center; justify-content: space-between; padding: calc(0.75 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)); cursor: pointer; user-select: none; flex-shrink: 0; }
.app-dash .db-acc-head:hover { background: #25354a; }
.app-dash .db-acc-title { font-size: calc(0.72 * var(--app-rem, 18px)); text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; font-weight: 700; }
.app-dash .db-acc-chev { color: #64748b; font-size: calc(0.8 * var(--app-rem, 18px)); transition: transform 0.2s; }
.app-dash .db-acc-card.open .db-acc-chev { transform: rotate(0deg); }
.app-dash .db-acc-card:not(.open) .db-acc-chev { transform: rotate(-90deg); }
.app-dash .db-acc-body { max-height: 0; overflow: hidden; }
.app-dash .db-acc-card.open .db-acc-body { max-height: 600px; }
.app-dash .db-acc-pad { padding: 0 calc(1 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)); }
.app-dash .db-txn-card-subtitle { font-size: calc(0.78 * var(--app-rem, 18px)); color: #94a3b8; margin-bottom: calc(0.5 * var(--app-rem, 18px)); flex-shrink: 0; }
.app-dash .db-txn-scroll { overflow-y: auto; max-height: 320px; flex: 1; scrollbar-width: thin; scrollbar-color: #475569 transparent; }
.app-dash .db-txn-scroll::-webkit-scrollbar { width: 6px; }
.app-dash .db-txn-scroll::-webkit-scrollbar-track { background: transparent; }
.app-dash .db-txn-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.app-dash .db-txn-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
.app-dash .db-txn-tbl { width: 100%; border-collapse: collapse; font-size: calc(0.78 * var(--app-rem, 18px)); }
.app-dash .db-txn-tbl th { position: sticky; top: 0; z-index: 10; background: #1e293b; color: #64748b; font-weight: 600; text-transform: uppercase; font-size: calc(0.65 * var(--app-rem, 18px)); letter-spacing: 0.05em; padding: calc(0.35 * var(--app-rem, 18px)) calc(0.5 * var(--app-rem, 18px)); border-bottom: 1px solid #334155; text-align: left; white-space: nowrap; }
.app-dash .db-txn-tbl th.db-sort-col { cursor: pointer; user-select: none; }
.app-dash .db-txn-tbl th.db-sort-col:hover { color: #94a3b8; text-decoration: underline; text-underline-offset: 3px; }
.app-dash .db-txn-tbl td { padding: calc(0.3 * var(--app-rem, 18px)) calc(0.5 * var(--app-rem, 18px)); border-bottom: 1px solid #1e293b; color: #cbd5e1; vertical-align: middle; }
.app-dash .db-txn-tbl tr:hover td { background: #334155; }
.app-dash .db-txn-tbl .col-r { text-align: right; padding-right: 2px; }
.app-dash .db-txn-tbl th:nth-child(-n+3), .app-dash .db-txn-tbl td:nth-child(-n+3) { width: 1%; padding-left: calc(0.25 * var(--app-rem, 18px)); padding-right: calc(0.25 * var(--app-rem, 18px)); }
.app-dash .db-txn-tbl th:last-child, .app-dash .db-txn-tbl td:last-child { width: 1%; white-space: nowrap; }
.app-dash .db-txn-tbl .cost-pos { color: #22c55e; }
.app-dash .db-txn-tbl .cost-neg { color: #cbd5e1; }
.app-dash .db-acct-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); vertical-align: middle; position: relative; cursor: pointer; }
.app-dash .db-acct-dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.app-dash .db-acct-dot::after { content: attr(data-acct); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px; padding: 3px 8px; font-size: calc(0.72 * var(--app-rem, 18px)); white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.45); pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 5; }
.app-dash .db-acct-dot:hover::after { opacity: 1; }
.app-dash .db-txn-empty { text-align: center; color: #475569; font-size: calc(0.78 * var(--app-rem, 18px)); padding: calc(1.5 * var(--app-rem, 18px)) 0; }
.app-dash .db-sub-row.selected { background-color: #1b1d74c9; }
.app-dash .db-joint-label { font-size: calc(0.75 * var(--app-rem, 18px)); color: #94a3b8; font-weight: 600; white-space: nowrap; }
.app-dash .db-joint-track { width: 32px; height: 16px; border-radius: 8px; position: relative; cursor: pointer; transition: background 0.15s; }
.app-dash .db-joint-track.on { background: #22c55e; }
.app-dash .db-joint-track.off { background: #334155; }
.app-dash .db-joint-dot { width: 12px; height: 12px; border-radius: 50%; position: absolute; top: 2px; transition: left 0.15s; }
.app-dash .db-joint-track.on .db-joint-dot { left: 18px; background: #fff; }
.app-dash .db-joint-track.off .db-joint-dot { left: 2px; background: #64748b; }
.app-dash .db-cat-group { background: #1e293b; border: 1px solid #334155; border-radius: 8px; overflow: hidden; margin-bottom: calc(0.5 * var(--app-rem, 18px)); }
.app-dash .db-cat-header { display: flex; align-items: center; gap: calc(0.75 * var(--app-rem, 18px)); padding: calc(0.6 * var(--app-rem, 18px)) calc(0.9 * var(--app-rem, 18px)); cursor: pointer; user-select: none; transition: background 0.12s; }
.app-dash .db-cat-header:hover { background: #263548; }
.app-dash .db-cat-header.open { background: #263548; border-bottom: 1px solid #334155; }
.app-dash .db-cat-chevron { font-size: calc(0.75 * var(--app-rem, 18px)); color: #64748b; transition: transform 0.2s; flex-shrink: 0; }
.app-dash .db-cat-header.open .db-cat-chevron { transform: rotate(180deg); }
.app-dash .db-cat-name { font-size: calc(0.95 * var(--app-rem, 18px)); font-weight: 700; color: #e2e8f0; flex: 1; }
.app-dash .db-cat-summary { display: flex; flex-direction: column; align-items: flex-end; gap: calc(0.15 * var(--app-rem, 18px)); }
.app-dash .db-cat-totals { font-size: calc(0.75 * var(--app-rem, 18px)); color: #94a3b8; white-space: nowrap; }
.app-dash .db-cat-progress-track { width: 80px; height: 4px; background: #334155; border-radius: 2px; overflow: hidden; }
.app-dash .db-cat-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.app-dash .db-cat-body { display: none; flex-direction: column; }
.app-dash .db-cat-body.open { display: flex; }
.app-dash .db-sub-row { padding: calc(0.55 * var(--app-rem, 18px)) calc(0.9 * var(--app-rem, 18px)) calc(0.6 * var(--app-rem, 18px)); border-bottom: 1px solid #1a2534; background: #192232; }
.app-dash .db-sub-row:last-child { border-bottom: none; }
.app-dash .db-sub-row:nth-child(even):not(.selected) { background: #1e293b; }
.app-dash .db-sub-row-header { display: flex; align-items: center; gap: calc(0.5 * var(--app-rem, 18px)); margin-bottom: calc(0.3 * var(--app-rem, 18px)); }
.app-dash .db-sub-name { font-size: calc(0.95 * var(--app-rem, 18px)); color: #cbd5e1; font-weight: 600; }
.app-dash .db-sub-amount { font-size: calc(0.95 * var(--app-rem, 18px)); font-weight: 700; color: #e2e8f0; }
.app-dash .db-sub-months { color: #94a3b8; font-size: calc(0.8 * var(--app-rem, 18px)); font-weight: 500; }
.app-dash .bp-class-btn { padding: 2px 7px; border: none; border-radius: 3px; font-size: calc(0.6 * var(--app-rem, 18px)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; cursor: default; }
.app-dash .bp-class-btn--fixed { background: #4b5563; color: #fff; }
.app-dash .bp-class-btn--dynamic { background: #7f1d1d; color: #fca5a5; }
.app-dash .bp-class-btn--excess { background: #14532d; color: #86efac; }
.app-dash .db-bar-track { position: relative; height: 12px; background: #334155; border-radius: 0; overflow: visible; margin: calc(0.1 * var(--app-rem, 18px)) 0 calc(0.5 * var(--app-rem, 18px)); }
.app-dash .db-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 0; transition: width 0.4s ease; }
.app-dash .db-bar-fill.green { background: #22c55e; }
.app-dash .db-bar-fill.yellow { background: #f59e0b; }
.app-dash .db-bar-with-refs { margin: calc(0.1 * var(--app-rem, 18px)) 0 calc(0.15 * var(--app-rem, 18px)); }
.app-dash .db-bar-with-refs .db-bar-track { margin: 0; }
.app-dash .db-bar-ref-row { position: relative; height: 15px; overflow: visible; }
.app-dash .db-bar-ref-label { position: absolute; font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.app-dash .db-bar-ref-row--top .db-bar-ref-label { bottom: 1px; }
.app-dash .db-bar-ref-row--bottom .db-bar-ref-label { top: 1px; }
.app-dash .db-bar-ref-label--avg { color: #3b82f6; }
.app-dash .db-bar-ref-label--budget { color: #db2777; }
.app-dash .db-excess-ref-row { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 2px; font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 600; white-space: nowrap; overflow: hidden; }
.app-dash .db-excess-ref-left { color: #db2777; flex-shrink: 0; }
.app-dash .db-excess-ref-right { color: #3b82f6; text-align: right; flex-shrink: 0; }
.app-dash .db-bar-tick { position: absolute; top: 0; width: 2px; height: 100%; z-index: 2; }
.app-dash .db-bar-tick--avg { background: #3b82f6; }
.app-dash .db-bar-tick--budget { background: #db2777; }
.app-dash .db-pie-card { flex: none; align-self: flex-start; width: 100%; }
.app-dash .db-pie-container { position: relative; height: 230px; min-height: 0; }
.app-dash .db-accordion-card { background: #1e293b; border-radius: 6px; overflow: hidden; }
.app-dash .db-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: calc(0.75 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)); cursor: pointer; user-select: none; }
.app-dash .db-accordion-header:hover { background: #25354a; }
.app-dash .db-accordion-title { font-size: calc(0.95 * var(--app-rem, 18px)); font-weight: 600; color: #e2e8f0; }
.app-dash .db-accordion-title.returnable { cursor: pointer; text-decoration: underline dotted; }
.app-dash .db-accordion-chevron { color: #94a3b8; transition: transform 0.2s ease; }
.app-dash .db-accordion-card[data-open="false"] .db-accordion-chevron { transform: rotate(-90deg); }
.app-dash .db-accordion-body { max-height: 800px; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s ease; padding: 0 calc(1 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)); }
.app-dash .db-accordion-card[data-open="false"] .db-accordion-body { max-height: 0; padding-top: 0; padding-bottom: 0; }
.app-dash .db-projection-status { font-size: calc(0.85 * var(--app-rem, 18px)); margin-bottom: calc(0.5 * var(--app-rem, 18px)); color: #cbd5e1; display: flex; align-items: center; justify-content: space-between; gap: calc(0.5 * var(--app-rem, 18px)); }
.app-dash .db-exclude-si { display: inline-flex; align-items: center; gap: calc(0.5 * var(--app-rem, 18px)); cursor: pointer; }
.app-dash .db-exclude-si[hidden] { display: none; }
.app-dash .db-exclude-si .db-joint-track { border: 0; padding: 0; flex-shrink: 0; }
.app-dash .db-projection-status span { font-weight: 700; }
.app-dash .db-projection-band-date { font-size: calc(0.75 * var(--app-rem, 18px)); margin-bottom: calc(0.5 * var(--app-rem, 18px)); color: #64748b; }
.app-dash .db-projection-chart-container { position: relative; height: 200px; }
.app-dash .db-projection-confidence { background: #0f172a; border-radius: 6px; padding: calc(0.55 * var(--app-rem, 18px)) calc(0.5 * var(--app-rem, 18px)); border: 1px solid #334155; margin-top: calc(0.5 * var(--app-rem, 18px)); }
.app-dash .db-projection-confidence-header { display: flex; justify-content: space-between; align-items: baseline; }
.app-dash .db-projection-confidence-label { font-size: calc(0.55 * var(--app-rem, 18px)); color: #64748b; text-transform: uppercase; }
.app-dash .db-projection-confidence-pct { font-size: calc(0.85 * var(--app-rem, 18px)); font-weight: 700; color: #fbbf24; }
.app-dash .db-projection-confidence-bar { height: 10px; border-radius: 2px; background: #334155; overflow: hidden; margin-top: calc(0.25 * var(--app-rem, 18px)); }
.app-dash .db-projection-confidence-fill { height: 100%; border-radius: 1px; background: linear-gradient(90deg, #ef4444, #fbbf24, #4ade80); width: 0; transition: width 0.3s ease; }
.app-dash .db-pie-legend { margin-top: calc(0.5 * var(--app-rem, 18px)); display: flex; flex-direction: column; gap: calc(0.25 * var(--app-rem, 18px)); }
.app-dash .db-pie-legend-row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: calc(0.5 * var(--app-rem, 18px)); align-items: center; padding: calc(0.25 * var(--app-rem, 18px)) calc(0.5 * var(--app-rem, 18px)); border-radius: 4px; cursor: pointer; font-size: calc(0.82 * var(--app-rem, 18px)); color: #e2e8f0; transition: transform 0.15s, background 0.15s; }
.app-dash .db-pie-legend-row:hover, .app-dash .db-pie-legend-row.active { transform: scale(1.02); background: rgba(99, 102, 241, 0.08); }
.app-dash .db-pie-legend-swatch { width: 12px; height: 12px; border-radius: 2px; }
.app-dash .db-pie-legend-row[data-category="Unallocated"] .db-pie-legend-swatch { border: 1px dashed currentColor; background: transparent !important; }
.app-dash .db-pie-legend-amount { font-variant-numeric: tabular-nums; }
.app-dash .db-pie-legend-pct { color: #94a3b8; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .app-dash .db-txn-tbl th { white-space: normal; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card .db-acc-pad { padding: 0 calc(0.4 * var(--app-rem, 18px)) calc(0.8 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-dash #db-card-excess-bar { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; } }
@media (max-width: 767.98px) { .app-dash #db-projection-card .db-accordion-body, .app-dash #db-pie-card .db-accordion-body { display: block !important; max-height: none !important; padding: 0 calc(1 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)) !important; } }
@media (max-width: 767.98px) { .app-dash #db-projection-card .db-accordion-header, .app-dash #db-pie-card .db-accordion-header { pointer-events: none; } }
@media (max-width: 767.98px) { .app-dash #db-projection-card .db-accordion-chevron, .app-dash #db-pie-card .db-accordion-chevron { display: none; } }
@media (max-width: 767.98px) { .app-dash #db-curve-card .db-acc-body { max-height: none !important; overflow: visible; } }
@media (max-width: 767.98px) { .app-dash #db-curve-card .db-acc-head { pointer-events: none; } }
@media (max-width: 767.98px) { .app-dash #db-curve-card .db-acc-chev { display: none; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card { display: none; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline { display: block; margin: 4px 0 10px; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-acc-head { display: none; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-acc-body { max-height: none !important; overflow: visible; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-txn-scroll { max-height: calc(100svh - 230px); scrollbar-width: none; -webkit-overflow-scrolling: touch; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-txn-scroll::-webkit-scrollbar { display: none; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-txn-tbl { font-size: calc(0.72 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-txn-tbl th, .app-dash #db-txn-card.db-txn-inline .db-txn-tbl td { padding: 4px 3px; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-inline .db-txn-scroll { overflow-x: auto; } }
@media (max-width: 767.98px) { .app-dash #db-txn-card.db-txn-subcat-drill .db-txn-tbl th:nth-child(2), .app-dash #db-txn-card.db-txn-subcat-drill .db-txn-tbl td:nth-child(2) { display: none; } }

/* .app-as: Account Summary (account_summary.html); scenes sc-drill, sc-acct */
.app-as { font-size: var(--app-rem, 18px); }
.app-as { --text-primary: #1e293b; }
.app-as * { margin: 0; padding: 0; box-sizing: border-box; }
.app-as { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
.app-as .as-charts-row { display: flex; justify-content: center; align-items: stretch; gap: calc(1 * var(--app-rem, 18px)); margin-bottom: calc(1.5 * var(--app-rem, 18px)); }
.app-as .as-chart-main { background: #e8edf4; border-radius: 12px; padding: calc(1.5 * var(--app-rem, 18px)); box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; display: flex; flex-direction: column; overflow: hidden; height: var(--as-panel-h); flex: 1 1 0; min-width: 0; max-width: 700px; }
.app-as .as-chart-pie { background: white; border-radius: 12px; padding: calc(1.5 * var(--app-rem, 18px)); box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; display: flex; flex-direction: column; overflow: visible; height: var(--as-panel-h); flex: 0 0 380px; }
.app-as .as-chart-pie h3 { margin: 0 0 calc(0.75 * var(--app-rem, 18px)) 0; font-size: calc(0.875 * var(--app-rem, 18px)); color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.app-as { --as-panel-h: 440px; }
.app-as .as-chart-pie .chart-wrap { position: relative; flex: 1 1 0; min-height: 0; overflow: visible; }
.app-as .as-chart-main .chart-wrap { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.app-as .as-chart-main { cursor: default; }
@media (max-width: 900px) { .app-as .as-charts-row { flex-direction: column; } }
@media (max-width: 767.98px) { .app-as #as-charts-wrap:not(.as-month-view) .as-chart-pie { flex: none; width: 100% !important; } }
@media (min-width: 768px) and (max-width: 899.98px) { .app-as .as-chart-main { height: 62svh; padding: calc(0.75 * var(--app-rem, 18px)); } }
@media (min-width: 768px) and (max-width: 899.98px) { .app-as #as-charts-wrap:not(.as-month-view) .as-chart-main { flex: none !important; width: auto !important; max-width: none; opacity: 1 !important; } }
@media (min-width: 768px) and (max-width: 899.98px) { .app-as #as-charts-wrap:not(.as-month-view) .as-chart-pie { flex: none !important; width: 100% !important; height: auto; aspect-ratio: 1 / 0.82; min-height: 52svh; } }
@media (max-width: 767.98px) { .app-as .as-chart-main { height: 47svh; } }
@media (max-width: 767.98px) { .app-as .as-charts-row { flex-direction: column; gap: calc(0.75 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-as #as-charts-wrap:not(.as-month-view) .as-chart-main, .app-as #as-charts-wrap:not(.as-month-view) .as-chart-pie { flex: none; width: auto; max-width: none; padding: calc(0.75 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-as #as-charts-wrap:not(.as-month-view) .as-chart-pie { height: 47svh; } }

/* .app-ctl: Management, Suppressed Data Management tab (control.html); scenes sc-model */
.app-ctl { font-size: var(--app-rem, 18px); }
.app-ctl { --text-primary: #1e293b; }
.app-ctl * { margin: 0; padding: 0; box-sizing: border-box; }
.app-ctl { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
@media (max-width: 767.98px) { .app-ctl .sm-panel { max-width: none; } }
.app-ctl .sm-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; max-width: 1200px; }
.app-ctl .sm-controls-left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-ctl .sm-controls select { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: calc(.85 * var(--app-rem, 18px)); background: #f8fafc; cursor: pointer; }
.app-ctl .sm-panel { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; max-width: 750px; }
.app-ctl .sm-panel-title { background: #475569; color: #fff; font-size: calc(.8 * var(--app-rem, 18px)); font-weight: 700; padding: 7px 12px; letter-spacing: .03em; }
.app-ctl .sm-panel-body { max-height: 240px; overflow-y: auto; padding: 6px 0; }
.app-ctl .sm-chart-body { max-height: none; min-height: 340px; padding: 10px; position: relative; }

/* .app-an: Budget & Analysis (analysis.html); scenes sc-ag, sc-analysis */
.app-an { font-size: var(--app-rem, 18px); }
.app-an { --text-primary: #1e293b; }
.app-an * { margin: 0; padding: 0; box-sizing: border-box; }
.app-an { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
.app-an .chart-card { min-height: 400px; }
.app-an .vc-trigger { display: none; }
@media (max-width: 767.98px) { .app-an .vc-trigger { display: inline-block; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; color: inherit; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }
@media (max-width: 767.98px) { .app-an .vc-replaced { display: none !important; } }
.app-an .analysis-page { display: flex; height: calc(100vh - calc(5.3125 * var(--app-rem, 18px))); overflow: hidden; gap: 0; }
.app-an .budget-panel { width: 640px; min-width: 640px; background: #0f0f1e; color: #cdd6f4; display: flex; flex-direction: row; transition: width 0.22s ease, min-width 0.22s ease; overflow: hidden; flex-shrink: 0; border-right: 1px solid #1e1e3a; }
.app-an .panel-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.app-an .bp-topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #09091a; border-bottom: 1px solid #1e1e3a; flex-shrink: 0; }
.app-an .bp-topbar .bp-add-btn, .app-an .bp-topbar .bp-auto-btn { flex: 1; }
.app-an .bp-add-btn { padding: 5px 14px; color: white; border: none; border-radius: 4px; font-size: calc(0.78 * var(--app-rem, 18px)); font-weight: 700; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; }
.app-an #addCatBtn { background: #4f46e5; }
.app-an #addCatBtn:hover { background: #4338ca; }
.app-an #addSubcatBtn { background: #2563eb; }
.app-an #addSubcatBtn:hover { background: #1d4ed8; }
.app-an .bp-scroll { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.app-an #budgetTables { padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.app-an .bp-section { border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.app-an .bp-section--user { border: 1px solid rgba(255,255,255,0.1); }
.app-an .bp-cat-header { display: flex; align-items: center; padding: 5px 8px; gap: 6px; min-height: 30px; }
.app-an .bp-cat-name { font-size: 13pt; font-weight: 700; color: white; flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.app-an .bp-mpu-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.app-an .bp-mpu-main { padding: 3px 9px; font-size: calc(0.68 * var(--app-rem, 18px)); font-weight: 600; color: white; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.28); border-right: none; border-radius: 3px 0 0 3px; cursor: pointer; white-space: nowrap; }
.app-an .bp-mpu-main:hover { background: rgba(0,0,0,0.55); }
.app-an .bp-mpu-arrow { padding: 3px 5px; font-size: calc(0.62 * var(--app-rem, 18px)); color: white; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.28); border-radius: 0 3px 3px 0; cursor: pointer; line-height: 1; }
.app-an .bp-mpu-arrow:hover { background: rgba(0,0,0,0.55); }
.app-an .bp-mpu-menu { display: none; position: absolute; top: calc(100% + 2px); right: 0; background: #1e1e2e; border: 1px solid #45475a; border-radius: 4px; z-index: 200; min-width: 130px; box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
.app-an .bp-mpu-menu.open { display: block; }
.app-an .bp-mpu-item { padding: 6px 12px; font-size: calc(0.73 * var(--app-rem, 18px)); color: #cdd6f4; cursor: pointer; white-space: nowrap; }
.app-an .bp-mpu-item:hover { background: #313244; }
.app-an .bp-mpu-item--danger { color: #f38ba8; }
.app-an .bp-mpu-item--danger:hover { background: #3a1a1a; }
.app-an .bp-tbl { width: 100%; border-collapse: collapse; font-size: 10pt; table-layout: fixed; }
.app-an .bp-tbl th { padding: 5px 8px; text-align: left; font-size: 11pt; font-weight: 700; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(0,0,0,0.2); white-space: nowrap; }
.app-an .bp-tbl th:not(:first-child) { text-align: center; }
.app-an .bp-tbl td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #cdd6f4; vertical-align: middle; }
.app-an .bp-tbl td:not(:first-child) { text-align: center; }
.app-an .bp-tbl tr:last-child td { border-bottom: none; }
.app-an .bp-cat-header { background: var(--cat-color, rgba(255,255,255,0.08)); }
.app-an .bp-section--user .bp-tbl th { background: var(--cat-color-dim, rgba(0,0,0,0.35)); color: rgba(255,255,255,0.75); font-weight: 600; }
.app-an .bp-section--user .bp-tbl { table-layout: fixed; }
.app-an .bp-section--user .bp-tbl td:first-child { width: 40%; }
.app-an .bp-section--user .bp-tbl td:nth-child(2), .app-an .bp-section--user .bp-tbl td:nth-child(3) { width: 18%; }
.app-an .bp-section--user .bp-tbl td:last-child { width: 24%; }
.app-an .bp-section--user .bp-tbl td { color: rgba(255,255,255,0.85); }
.app-an .bp-section--user .bp-tbl select { width: 100%; font-size: calc(0.69 * var(--app-rem, 18px)); background: rgba(0,0,0,0.25); color: #cdd6f4; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; padding: 2px 3px; }
.app-an .bp-ud-input { width: 90%; font-size: 10pt; background: rgba(80,80,100,0.35); color: #cdd6f4; border: 1px solid rgba(255,255,255,0.22); border-radius: 3px; padding: 3px 6px; text-align: right; }
.app-an .bp-ud-input:focus { outline: none; border-color: rgba(255,255,255,0.55); }
.app-an .bp-ud-input[type=number]::-webkit-inner-spin-button, .app-an .bp-ud-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.app-an .bp-ud-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.app-an .bp-ud-input.bp-ud-input--auto { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
.app-an .bp-ud-input.bp-ud-input--stale { background: rgba(217, 119, 6, 0.22); border-color: rgba(217, 119, 6, 0.55); color: #f5c26b; }
.app-an .bp-del-row-btn { padding: 0 5px; background: transparent; border: none; color: #666; cursor: pointer; font-size: calc(0.8 * var(--app-rem, 18px)); line-height: 1; }
.app-an .bp-del-row-btn:hover { color: #ef4444; }
.app-an .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.app-an .modal-overlay.open { display: flex; }
.app-an .modal-box { background: #fff; border-radius: 10px; padding: 22px; width: 320px; display: flex; flex-direction: column; gap: 12px; }
.app-an .modal-title { font-weight: 700; font-size: calc(0.95 * var(--app-rem, 18px)); color: #1f2937; }
.app-an .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.app-an .bcm-box { width: 420px; max-width: 92vw; }
.app-an .bcm-body { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.app-an .bcm-body::-webkit-scrollbar { width: 6px; }
.app-an .bcm-body::-webkit-scrollbar-track { background: transparent; }
.app-an .bcm-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.app-an .bcm-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.app-an .bcm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px; border-bottom: 1px solid #f1f5f9; font-size: calc(0.82 * var(--app-rem, 18px)); }
.app-an .bcm-row:last-child { border-bottom: none; }
.app-an .bcm-row-name { color: #374151; flex: 1; min-width: 0; overflow-wrap: break-word; }
.app-an .bcm-chip { flex-shrink: 0; padding: 2px 8px; border-radius: 4px; font-size: calc(0.78 * var(--app-rem, 18px)); font-weight: 700; white-space: nowrap; }
.app-an .modal-btn { padding: 6px 14px; border-radius: 4px; border: none; cursor: pointer; font-size: calc(0.82 * var(--app-rem, 18px)); }
.app-an .modal-btn--primary { background: #2563eb; color: #fff; }
.app-an .analysis-main { flex: 1; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; background: #f0f2f5; gap: 6px; padding: 6px; min-width: 0; container-type: inline-size; container-name: analysis; }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:nth-of-type(2) { display: none; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type { flex-direction: column; overflow-y: auto; gap: 6px; align-items: flex-start; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left, .app-an .analysis-main > .analysis-row:first-of-type .analysis-right { min-width: 540px; max-width: 580px; width: 100%; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left { flex: 1; min-height: 300px; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right { flex: none; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left .chart-card { min-height: 225px; max-height: 645px; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left .ctrl-bar { flex: 0 0 auto; min-height: 70px; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right .itemized-card { flex: 0 0 auto; height: 285px; } }
@container analysis (max-width: 959px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right .synopsis-card { flex: 0 0 auto; height: 120px; } }
.app-an .analysis-row { flex: 1; display: flex; gap: 6px; min-height: 0; background: #e4e8ef; border-radius: 8px; padding: 6px; }
.app-an .analysis-left { flex: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
.app-an .chart-card { flex: 1; min-height: 0; background: #fff; border-radius: 6px; border: 1px solid #dde3ea; padding: 8px 10px 6px; position: relative; overflow: hidden; }
.app-an .chart-card canvas { width: 100% !important; height: 100% !important; }
.app-an .ctrl-bar { flex-shrink: 0; background: #ffffff; border-radius: 6px; border: 1px solid #dde3ea; padding: 6px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-an .ctrl-group { display: flex; align-items: center; gap: 4px; }
.app-an .ctrl-label { font-size: calc(0.7 * var(--app-rem, 18px)); color: #6b7280; font-weight: 600; white-space: nowrap; }
.app-an .ctrl-select { font-size: calc(0.75 * var(--app-rem, 18px)); padding: 3px 20px 3px 6px; border: 1px solid #ced4da; border-radius: 3px; height: 25px; box-sizing: border-box; -webkit-appearance: none; appearance: none; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6"><path d="M0 0l4 5 4-5z" fill="%23555"/></svg>') no-repeat right 6px center; }
.app-an .ctrl-toggles { display: flex; gap: 8px; margin-left: auto; }
.app-an .ctrl-card { display: contents; }
.app-an .chart-month-tip { position: absolute; z-index: 5; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); padding: 6px 9px; font-size: calc(0.7 * var(--app-rem, 18px)); color: #374151; line-height: 1.45; pointer-events: none; white-space: nowrap; }
.app-an .chart-month-tip .cmt-title { font-weight: 700; margin-bottom: 2px; }
.app-an .chart-month-tip b { font-weight: 700; }
.app-an .ctrl-toggle-lbl { display: flex; align-items: center; gap: 3px; font-size: calc(0.72 * var(--app-rem, 18px)); color: #4b5563; cursor: pointer; user-select: none; }
.app-an .ctrl-toggle-lbl input { accent-color: #3b82f6; width: 13px; height: 13px; }
.app-an .analysis-right { flex: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
.app-an .itemized-card { flex: 3; min-height: 0; background: #fff; border-radius: 6px; border: 1px solid #dde3ea; display: flex; flex-direction: column; overflow: hidden; min-width: 540px; }
.app-an .itemized-header { flex-shrink: 0; padding: 5px 10px; font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 700; color: #374151; background: #f9fafb; border-bottom: 1px solid #e5e7eb; text-transform: uppercase; letter-spacing: 0.05em; min-width: 540px; }
.app-an .itemized-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.app-an .itemized-tbl { width: 100%; border-collapse: collapse; font-size: calc(0.75 * var(--app-rem, 18px)); }
.app-an .itemized-tbl th { position: sticky; top: 0; background: #f3f4f6; padding: 4px 8px; text-align: left; font-size: calc(0.68 * var(--app-rem, 18px)); color: #6b7280; font-weight: 700; border-bottom: 1px solid #e2e6ea; white-space: nowrap; }
.app-an .itemized-tbl th.sortable-col { cursor: pointer; user-select: none; }
.app-an .itemized-tbl th.sortable-col:hover { background: #e9ecef; color: #374151; }
.app-an .itemized-tbl th.sortable-col .sort-ind { display: inline-block; width: 0.8em; margin-left: 2px; }
.app-an .itemized-tbl td { padding: 4px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.app-an .itemized-tbl tr:last-child td { border-bottom: none; }
.app-an .itemized-tbl .col-r { text-align: right; }
.app-an .itemized-tbl .col-actions { width: 80px; text-align: center; }
.app-an .itemized-tbl.actions-hidden .col-actions { display: none; }
.app-an .cost-neg { color: #dc2626; }
.app-an .cost-pos { color: #16a34a; }
.app-an .analysis-txn-row.analysis-row-suppressed td { background: #969696; color: #fff; font-weight: 600; }
.app-an .analysis-suppress-btn { padding: 3px 8px; background: #6b7280; color: #fff; border: none; border-radius: 4px; font-size: calc(.72 * var(--app-rem, 18px)); cursor: pointer; }
.app-an .analysis-suppress-btn:hover { background: #4b5563; }
.app-an .analysis-restore-btn { padding: 3px 8px; background: #0891b2; color: #fff; border: none; border-radius: 4px; font-size: calc(.72 * var(--app-rem, 18px)); cursor: pointer; }
.app-an .analysis-restore-btn:hover { background: #0e7490; }
.app-an .analysis-txn-row { cursor: pointer; }
.app-an .analysis-txn-row td { transition: background-color 0.15s ease; }
.app-an .analysis-txn-row:hover td { background: #fee2e2; }
.app-an .analysis-txn-row.analysis-row-suppressed:hover td { background: #fca5a5; color: #1f2937; }
.app-an .analysis-suppress-btn, .app-an .analysis-restore-btn { cursor: pointer; }
.app-an .synopsis-card { flex: 1; min-height: 0; background: #fff; border-radius: 6px; border: 1px solid #dde3ea; display: flex; flex-direction: column; overflow: hidden; min-width: 540px; }
.app-an .synopsis-header { flex-shrink: 0; padding: 5px 10px; font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 700; color: #374151; background: #f9fafb; border-bottom: 1px solid #e5e7eb; text-transform: uppercase; letter-spacing: 0.05em; min-width: 540px; display: flex; align-items: center; }
.app-an .synopsis-class-badge { display: none; margin-left: auto; padding: 2px 9px; font-size: calc(0.66 * var(--app-rem, 18px)); text-transform: none; letter-spacing: 0.02em; cursor: default; pointer-events: none; }
@media (max-width: 767.98px) { .app-an .synopsis-class-badge:not(:empty) { display: inline-block; } }
.app-an .analysis-unit-upper .itemized-header, .app-an .analysis-unit-upper .synopsis-header { background: #8ea5f0; color: #ffffff; border-bottom-color: #1e3a8a; }
.app-an .synopsis-tbl-wrap { flex: 1; display: flex; align-items: center; padding: 0 8px; }
.app-an .synopsis-tbl { width: 100%; border-collapse: collapse; font-size: calc(0.75 * var(--app-rem, 18px)); }
.app-an .synopsis-tbl th { text-align: center; font-size: calc(0.68 * var(--app-rem, 18px)); color: #6b7280; font-weight: 700; padding: 3px 6px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.app-an .synopsis-tbl td { text-align: center; font-size: calc(0.8 * var(--app-rem, 18px)); font-weight: 700; color: #1f2937; padding: 3px 6px; }
.app-an .bp-topbar { flex-wrap: wrap; gap: 6px; }
.app-an .bp-auto-btn { padding: 5px 14px; background: #16a34a; color: white; border: none; border-radius: 4px; font-size: calc(0.78 * var(--app-rem, 18px)); font-weight: 700; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; }
.app-an .bp-auto-btn:hover { background: #15803d; }
.app-an .bp-auto-btn:disabled { background: #166534; opacity: 0.6; cursor: default; }
.app-an .bp-proj-row { display: flex; gap: 6px; padding: 6px 8px; background: #09091a; border-bottom: 1px solid #1e1e3a; flex-shrink: 0; }
.app-an .bp-proj-box { flex: 1; background: #1a1a2e; border: 1px solid #2a2a50; border-radius: 4px; padding: 5px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-an .bp-proj-label { font-size: calc(0.8 * var(--app-rem, 18px)); color: #a6adc8; text-align: center; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.app-an .bp-proj-label--income { font-size: calc(0.8 * var(--app-rem, 18px)); color: #60a5fa; text-align: center; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.app-an .bp-proj-label--expense { font-size: calc(0.8 * var(--app-rem, 18px)); color: #ef4444; text-align: center; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.app-an .bp-proj-value { font-size: calc(0.85 * var(--app-rem, 18px)); font-weight: 700; color: #cdd6f4; }
.app-an .bp-proj-value--pos { color: #4ade80; }
.app-an .bp-proj-value--neg { color: #f87171; }
.app-an .bp-provenance-legend { font-size: calc(0.62 * var(--app-rem, 18px)); font-style: italic; color: #6b7280; font-weight: 400; margin: 0 0 6px 2px; }
.app-an .bp-class-btn { padding: 2px 7px; border: none; border-radius: 3px; font-size: calc(0.62 * var(--app-rem, 18px)); font-weight: 700; cursor: pointer; white-space: nowrap; letter-spacing: 0.03em; transition: opacity 0.15s; min-width: 4.8em; text-align: center; }
.app-an .bp-class-btn:hover { opacity: 0.8; }
.app-an .bp-class-btn--fixed { background: #4b5563; color: #fff; }
.app-an .bp-class-btn--dynamic { background: #7f1d1d; color: #fca5a5; }
.app-an .bp-class-btn--excess { background: #14532d; color: #86efac; }
.app-an .bp-class-btn--independent { background: #1e3a5f; color: #93c5fd; }
.app-an .bp-subcat-wrap { position: relative; }
.app-an .bp-subcat-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; background: rgba(180,180,200,0.22); color: #e0e0f0; border: 1px solid rgba(180,180,200,0.45); border-radius: 3px; padding: 2px 14px 2px 4px; font-size: calc(0.72 * var(--app-rem, 18px)); line-height: 1.25; min-height: 1.25em; }
.app-an .bp-subcat-wrap::after { content: '▾'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: calc(0.65 * var(--app-rem, 18px)); color: #e0e0f0; pointer-events: none; }
.app-an .bp-subcat-wrap:focus-within .bp-subcat-label { outline: 2px solid #93c5fd; outline-offset: 1px; }
.app-an .bp-section--user .bp-tbl select.bp-subcat-sel { width: 100%; background: rgba(180,180,200,0.22); color: #e0e0f0; border: 1px solid rgba(180,180,200,0.45); border-radius: 3px; padding: 2px 4px; font-size: calc(0.72 * var(--app-rem, 18px)); }
.app-an .bp-section--user .bp-tbl .bp-subcat-wrap select.bp-subcat-sel { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: pointer; }
.app-an .bp-subcat-sel option { background: #23233a; color: #e0e0f0; }
.app-an .bp-section--user .bp-tbl td:first-child { width: 33%; }
.app-an .bp-section--user .bp-tbl td:nth-child(2) { width: 11%; text-align: center; }
.app-an .bp-section--user .bp-tbl td:nth-child(3), .app-an .bp-section--user .bp-tbl td:nth-child(4) { width: 15%; }
.app-an .bp-section--user .bp-tbl td:nth-child(5) { width: 21%; }
.app-an .bp-section--user .bp-tbl td:nth-child(6) { width: 5%; padding: 0; text-align: center; }
.app-an .bp-section--user .bp-tbl th:nth-child(2) { text-align: center; }
.app-an .bp-tbl .bp-class-btn { display: inline-flex; justify-content: center; text-align: center; width: 5.6em; padding-left: 2px; padding-right: 2px; box-sizing: border-box; }
@media (max-width: 767.98px) { .app-an .budget-panel { display: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .budget-panel { display: flex; width: 100%; min-width: 0; border-right: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .analysis-main { display: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-del-row-btn { display: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-tbl tbody tr { touch-action: pan-y; } }
@media (max-width: 767.98px) { .app-an .bp-section--user { position: relative; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-mpu-main { padding: 6px 26px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-proj-row { flex-wrap: wrap; } }
@media (max-width: 767.98px) { .app-an .analysis-main { overflow-x: hidden; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left, .app-an .analysis-main > .analysis-row:first-of-type .analysis-right { min-width: 0; max-width: 100%; } }
@media (max-width: 767.98px) { .app-an .itemized-card, .app-an .itemized-header, .app-an .synopsis-card, .app-an .synopsis-header { min-width: 0; } }
@media (max-width: 767.98px) { .app-an .analysis-page { height: calc(100svh - 64px); } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right { flex: 1 1 auto; min-height: 0; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right .itemized-card { flex: 1 1 auto; height: auto; min-height: 170px; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left { flex: none; min-height: 0; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left .chart-card { min-height: 225px; max-height: 300px; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-left .ctrl-bar { min-height: 0; height: auto; } }
@media (max-width: 767.98px) { .app-an .ctrl-bar { flex-direction: row; align-items: stretch; gap: 8px; background: transparent; border: none; padding: 0; } }
@media (max-width: 767.98px) { .app-an .ctrl-card { display: flex; background: #ffffff; border: 1px solid #dde3ea; border-radius: 6px; padding: 8px 10px; min-width: 0; } }
@media (max-width: 767.98px) { .app-an .ctrl-card--selects { flex: 1.75; flex-direction: column; justify-content: center; gap: 8px; } }
@media (max-width: 767.98px) { .app-an .ctrl-card--toggles { flex: 1; align-items: center; } }
@media (max-width: 767.98px) { .app-an .ctrl-group { width: 100%; gap: 8px; } }
@media (max-width: 767.98px) { .app-an .ctrl-label { width: 7.4em; text-align: right; flex-shrink: 0; } }
@media (max-width: 767.98px) { .app-an .ctrl-label::after { content: ':'; } }
@media (max-width: 767.98px) { .app-an .ctrl-card--selects .vc-trigger { max-width: none; flex: 1 1 auto; min-width: 0; font-size: calc(0.95 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-an .ctrl-toggles { display: flex; flex-direction: column; margin-left: 0; gap: 9px; width: 100%; } }
@media (max-width: 767.98px) { .app-an .ctrl-toggle-lbl { display: flex; align-items: center; gap: 8px; } }
@media (max-width: 767.98px) { .app-an .ctrl-toggle-lbl input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px; height: 18px; border-radius: 9px; background: #cbd5e1; position: relative; margin: 0; flex-shrink: 0; cursor: pointer; transition: background 0.15s ease; } }
@media (max-width: 767.98px) { .app-an .ctrl-toggle-lbl input[type="checkbox"]:checked { background: #22c55e; } }
@media (max-width: 767.98px) { .app-an .ctrl-toggle-lbl input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.15s ease; } }
@media (max-width: 767.98px) { .app-an .ctrl-toggle-lbl input[type="checkbox"]:checked::after { left: 18px; } }
@media (max-width: 767.98px) { .app-an .itemized-header { cursor: pointer; display: flex; align-items: center; } }
@media (max-width: 767.98px) { .app-an .itemized-header::after { content: '⤢'; margin-left: auto; font-size: calc(1 * var(--app-rem, 18px)); font-weight: 700; color: #2563eb; } }
@media (max-width: 767.98px) { .app-an .itemized-tbl th:first-child, .app-an .itemized-tbl td:first-child { display: none; } }
@media (max-width: 767.98px) { .app-an .itemized-tbl .col-actions { display: none !important; } }
@media (max-width: 767.98px) { .app-an .itemized-tbl td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 767.98px) { .app-an .itemized-scroll { position: relative; } }
@media (max-width: 767.98px) { .app-an .analysis-txn-row { touch-action: pan-y; } }
@media (max-width: 767.98px) { .app-an .analysis-txn-row:hover td, .app-an .analysis-txn-row:active td { background: #eef2ff; } }
@media (max-width: 767.98px) { .app-an .analysis-txn-row.analysis-row-suppressed:hover td, .app-an .analysis-txn-row.analysis-row-suppressed:active td { background: #e5e7eb; color: #1f2937; } }
@media (max-width: 767.98px) { .app-an .analysis-main > .analysis-row:first-of-type .analysis-right .synopsis-card { height: auto; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl { display: grid; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl thead, .app-an .synopsis-tbl tbody, .app-an .synopsis-tbl tr { display: contents; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th, .app-an .synopsis-tbl td { padding: 4px 6px; text-align: center; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(1) { order: 1; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(2) { order: 2; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(3) { order: 3; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(1) { order: 4; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(2) { order: 5; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(3) { order: 6; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(6) { order: 7; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(5) { order: 8; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl th:nth-child(4) { order: 9; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(6) { order: 10; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(5) { order: 11; } }
@media (max-width: 767.98px) { .app-an .synopsis-tbl td:nth-child(4) { order: 12; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td { padding: 12px 8px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th { font-size: calc(0.66 * var(--app-rem, 18px)); white-space: normal; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:first-child, .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:first-child { width: 26% !important; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:first-child { text-align: center; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(2), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(2) { width: 17.7% !important; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(2) { padding-left: 2px; padding-right: 2px; text-align: center; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl .bp-class-btn { font-size: calc(0.6 * var(--app-rem, 18px)); padding-top: 4px; padding-bottom: 4px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(3), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(3) { width: 18.2% !important; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(4), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(4) { width: 18.1% !important; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(3), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(4) { font-size: calc(0.74 * var(--app-rem, 18px)); padding-left: 4px; padding-right: 4px; text-align: center; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(3), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(4) { text-align: center; padding-left: 4px; padding-right: 4px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(5), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(5) { width: 20% !important; text-align: right; padding-left: 2px; padding-right: 4px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(5) .bp-budgeted-input { font-size: calc(0.66 * var(--app-rem, 18px)); padding: 5px 3px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl th:nth-child(6), .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl td:nth-child(6) { display: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-mpu-arrow { padding: 6px 9px; font-size: calc(0.68 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--summary, .bp-goals-box, .bp-section--unalloc, .bp-transfers-pair-tbl) .bp-tbl th { font-size: calc(0.66 * var(--app-rem, 18px)); white-space: normal; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user { --bp-cat-h: 38px; overflow: visible; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-cat-header { position: sticky; top: 0; z-index: 5; box-sizing: border-box; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-tbl thead tr:not(.bp-sa-row) th { position: sticky; top: var(--bp-cat-h); z-index: 4; background: #1a1a2e; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-cat-header--tap { cursor: pointer; -webkit-user-select: none; user-select: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-cat-header { min-height: 33px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-section--user .bp-cat-name { font-size: 15px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-cat-chev { flex: none; color: #fff; font-size: calc(1.05 * var(--app-rem, 18px)); line-height: 1; transition: transform 0.15s; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-cat-header--tap[aria-expanded="true"] .bp-cat-chev { transform: rotate(180deg); } }
@media (max-width: 767.98px) { @media (prefers-reduced-motion: reduce) { .app-an .analysis-page.panel-only .bp-cat-chev { transition: none; } } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone { table-layout: fixed; border-collapse: separate; border-spacing: 0; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone tr.bp-prow td { padding: 4px 6px; height: 40px; vertical-align: middle; text-align: left; font-size: 14px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone td.bp-prow-sub { width: 47% !important; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone td.bp-prow-cls { width: 26% !important; text-align: center; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone td.bp-prow-bud { width: 27% !important; text-align: center; border-left: 1px solid rgba(255,255,255,0.07); } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone td.bp-prow-del { display: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-bface { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; text-align: center; font-size: 13.5px; line-height: 1.3; padding: 3px 6px; cursor: pointer; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-bface-ph { opacity: 0.45; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-bface-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #93c5fd; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-budgeted-input { width: 100%; box-sizing: border-box; text-align: center; font-size: 13.5px; line-height: 1.3; padding: 3px 6px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pexpand { width: 6.4em; font-size: 11px; padding: 4px 2px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; } }
@media (max-width: 767.98px) { .app-an .bp-tbl--phone .bp-pexpand-car { font-size: 0.75em; transition: transform 0.15s; } }
@media (max-width: 767.98px) { .app-an .bp-tbl--phone .bp-pexpand[aria-expanded="true"] .bp-pexpand-car { transform: rotate(180deg); } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone tr.bp-detail-row td { width: auto !important; padding: 0; background: rgba(255,255,255,0.025); } }
@media (max-width: 767.98px) { .app-an .bp-tbl--phone tr.bp-detail-row[hidden] { display: none; } }
@media (max-width: 767.98px) { @media (prefers-reduced-motion: reduce) { .app-an .bp-tbl--phone .bp-pexpand-car { transition: none; } } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pick { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 3px 6px; border-radius: 5px; font-size: 14px; line-height: 1.2; color: #f2f2fa; cursor: pointer; background: color-mix(in srgb, var(--cat) 20%, #1c1c28); border: 1px solid var(--cat); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pick--empty { background: rgba(180,180,200,0.22); border-color: rgba(180,180,200,0.45); color: rgba(224,224,240,0.7); } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pick-name { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pick-chev { flex: none; font-size: 0.8em; opacity: 0.8; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only :is(.bp-section--user, .bp-section--unassigned) .bp-tbl.bp-tbl--phone .bp-pick:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; } }
@media (max-width: 767.98px) { .app-an .bp-legend-collapse { background: #16213e; border: 1px solid #2a3b5e; border-radius: 6px; margin: 4px 0 8px; padding: 0; } }
@media (max-width: 767.98px) { .app-an .bp-legend-collapse .bp-class-btn { cursor: default; } }
@media (max-width: 767.98px) { .app-an .bp-legend-collapse .bp-class-btn:hover { opacity: 1; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-ud-input { font-size: calc(0.8 * var(--app-rem, 18px)); padding: 4px; } }
@media (max-width: 767.98px) { .app-an .analysis-page.panel-only .bp-class-btn { font-size: calc(0.72 * var(--app-rem, 18px)); padding: 4px 7px; } }

/* .app-pl: Goals (planning.html); scenes sc-curve, sc-plan */
.app-pl { font-size: var(--app-rem, 18px); }
@keyframes app-pl-pg-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.app-pl { --text-primary: #1e293b; }
.app-pl * { margin: 0; padding: 0; box-sizing: border-box; }
.app-pl { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
.app-pl .tab-content { display: none; }
.app-pl .tab-content.active { display: block; }
.app-pl { color: #e2e8f0; }
.app-pl .planning-page { display: flex; flex-direction: column; height: calc(100vh - calc(3.5 * var(--app-rem, 18px))); background: #0f172a; color: #e2e8f0; overflow: hidden; }
.app-pl .pg-tabs { display: flex; gap: 2px; background: #0f172a; border-bottom: 1px solid #334155; flex-shrink: 0; padding: 0 calc(0.7 * var(--app-rem, 18px)); }
.app-pl .pg-tab { padding: calc(0.55 * var(--app-rem, 18px)) calc(1.1 * var(--app-rem, 18px)); background: #1e293b; color: #94a3b8; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: calc(0.8 * var(--app-rem, 18px)); font-weight: 600; border-radius: 4px 4px 0 0; }
.app-pl .pg-tab:hover { color: #e2e8f0; }
.app-pl .pg-tab.active { background: #334155; color: #e2e8f0; border-bottom-color: #f59e0b; }
.app-pl .pg-tab-content { display: none; flex: 1; min-height: 0; }
.app-pl .pg-tab-content.active { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.app-pl .pg-body { display: none; flex: 1; min-height: 0; gap: 0; max-width: 1220px; margin: 0 auto; width: 100%; }
.app-pl .pg-body.visible { display: flex; }
.app-pl .pg-content { flex: 1; min-width: 0; overflow-y: auto; padding: calc(0.7 * var(--app-rem, 18px)); }
.app-pl .pg-btn { padding: calc(0.45 * var(--app-rem, 18px)) calc(0.9 * var(--app-rem, 18px)); border-radius: 6px; font-size: calc(0.76 * var(--app-rem, 18px)); font-weight: 700; cursor: pointer; border: none; white-space: nowrap; color: #0f172a; }
.app-pl .pg-btn-blue { background: #1e40af; color: #e2e8f0; }
.app-pl .pg-btn-blue:hover { background: #1d4ed8; }
.app-pl .pg-control-panel { display: none; width: 420px; min-width: 420px; flex-shrink: 0; background: #1e293b; border-left: 1px solid #334155; overflow-y: auto; padding: calc(0.6 * var(--app-rem, 18px)); }
.app-pl .pg-control-panel.visible { display: block; }
.app-pl .pg-toast-stack { position: fixed; bottom: calc(1 * var(--app-rem, 18px)); right: calc(1 * var(--app-rem, 18px)); z-index: 3000; display: flex; flex-direction: column; gap: calc(0.4 * var(--app-rem, 18px)); align-items: flex-end; }
.app-pl .pg-toast { background: #1e293b; border: 1px solid #334155; color: #e2e8f0; padding: calc(0.5 * var(--app-rem, 18px)) calc(0.8 * var(--app-rem, 18px)); border-radius: 6px; font-size: calc(0.76 * var(--app-rem, 18px)); box-shadow: 0 4px 12px rgba(0,0,0,0.4); max-width: 320px; animation: app-pl-pg-toast-in 0.15s ease-out; }
.app-pl .pg-tier-board { display: flex; gap: calc(0.6 * var(--app-rem, 18px)); height: 100%; min-height: 0; justify-content: center; }
.app-pl .pg-tier-col { flex: 0 0 370px; display: flex; flex-direction: column; background: #1e293b; border: 1px solid #334155; border-radius: 8px; overflow: hidden; transition: background 0.12s ease, box-shadow 0.12s ease; }
.app-pl .pg-tier-col.pg-drop-hot { background: #24324a; box-shadow: inset 0 0 0 2px #f59e0b; }
.app-pl .pg-tier-head { padding: calc(0.5 * var(--app-rem, 18px)) calc(0.7 * var(--app-rem, 18px)); font-weight: 800; font-size: calc(0.83 * var(--app-rem, 18px)); color: #0f172a; display: flex; flex-direction: column; gap: calc(0.1 * var(--app-rem, 18px)); flex-shrink: 0; }
.app-pl .pg-tier-head .pg-tier-name { text-transform: uppercase; letter-spacing: 0.03em; }
.app-pl .pg-tier-head .pg-tier-total { font-size: calc(0.7 * var(--app-rem, 18px)); font-weight: 700; opacity: 0.85; }
.app-pl .pg-tier-head.gold { background: #f59e0b; }
.app-pl .pg-tier-head.silver { background: #64748b; color: #0f172a; }
.app-pl .pg-tier-head.bronze { background: #b45309; color: #fef3c7; }
.app-pl .pg-tier-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(0.5 * var(--app-rem, 18px)); display: flex; flex-direction: column; gap: calc(0.4 * var(--app-rem, 18px)); }
.app-pl .pg-chip { background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: calc(0.4 * var(--app-rem, 18px)) calc(0.55 * var(--app-rem, 18px)); cursor: grab; display: flex; flex-direction: column; gap: calc(0.25 * var(--app-rem, 18px)); }
.app-pl .pg-chip:active { cursor: grabbing; }
.app-pl .pg-chip[draggable="false"] { cursor: default; }
.app-pl .pg-chip-top { display: flex; align-items: center; gap: calc(0.35 * var(--app-rem, 18px)); min-width: 0; }
.app-pl .pg-chip-name { font-size: calc(0.76 * var(--app-rem, 18px)); font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pl .pg-chip-figs { display: flex; gap: calc(0.6 * var(--app-rem, 18px)); margin: calc(0.15 * var(--app-rem, 18px)) 0 calc(0.25 * var(--app-rem, 18px)); }
.app-pl .pg-chip-figs--bottom { margin: calc(0.25 * var(--app-rem, 18px)) 0 0; }
.app-pl .pg-chip-fig .lbl { font-size: calc(0.62 * var(--app-rem, 18px)); color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-right: calc(0.25 * var(--app-rem, 18px)); }
.app-pl .pg-chip-fig .val { font-size: calc(0.74 * var(--app-rem, 18px)); font-weight: 700; color: #e2e8f0; }
.app-pl .pg-bar-track { position: relative; height: 6px; background: #334155; overflow: visible; margin: 0; }
.app-pl .pg-bar-fill { position: absolute; top: 0; left: 0; height: 100%; transition: width 0.4s ease; }
.app-pl .pg-bar-fill.green { background: #22c55e; }
.app-pl .pg-bar-fill.yellow { background: #f59e0b; }
.app-pl .pg-circle { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.app-pl .pg-circle-funded { background: #22c55e; }
.app-pl .pg-circle-active { background: #f59e0b; }
.app-pl .pg-badge { font-size: calc(0.65 * var(--app-rem, 18px)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-radius: 4px; padding: calc(0.1 * var(--app-rem, 18px)) calc(0.35 * var(--app-rem, 18px)); flex-shrink: 0; white-space: nowrap; }
.app-pl .pg-badge-saving { background: #1e3a5f; color: #93c5fd; }
.app-pl .pg-debt-sort-row { display: flex; align-items: center; gap: calc(0.4 * var(--app-rem, 18px)); margin-bottom: calc(0.5 * var(--app-rem, 18px)); }
.app-pl .pg-debt-sort-row label { font-size: calc(0.68 * var(--app-rem, 18px)); color: #94a3b8; font-weight: 600; }
.app-pl .pg-debt-sort-row select { flex: 1; min-width: 0; }
.app-pl .pg-debt-refresh-btn { padding: calc(0.3 * var(--app-rem, 18px)) calc(0.55 * var(--app-rem, 18px)); font-size: calc(0.68 * var(--app-rem, 18px)); flex-shrink: 0; }
.app-pl .pg-debt-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.app-pl .pg-debt-repr-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(0.9 * var(--app-rem, 18px)); padding-top: calc(0.55 * var(--app-rem, 18px)); }
.app-pl .pg-debt-repr-row .pg-debt-refresh-btn { margin-left: auto; }
.app-pl .pg-repr-toggle { display: flex; align-items: center; gap: calc(0.45 * var(--app-rem, 18px)); cursor: pointer; }
.app-pl .pg-repr-label { font-size: calc(0.74 * var(--app-rem, 18px)); font-weight: 600; color: #94a3b8; }
.app-pl .pg-repr-track { width: 34px; height: 18px; border-radius: 9px; position: relative; transition: background 0.15s ease; flex-shrink: 0; }
.app-pl .pg-repr-track.on { background: #22c55e; }
.app-pl .pg-repr-track.off { background: #334155; }
.app-pl .pg-repr-dot { position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; transition: left 0.15s ease, background 0.15s ease; }
.app-pl .pg-repr-track.on .pg-repr-dot { left: 18px; background: #fff; }
.app-pl .pg-repr-track.off .pg-repr-dot { left: 2px; background: #64748b; }
.app-pl .pg-debt-modules { display: flex; flex-direction: column; gap: calc(0.4 * var(--app-rem, 18px)); margin-bottom: calc(0.6 * var(--app-rem, 18px)); }
.app-pl .pg-debt-profile { display: flex; align-items: center; gap: calc(0.5 * var(--app-rem, 18px)); background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: calc(0.4 * var(--app-rem, 18px)) calc(0.55 * var(--app-rem, 18px)); cursor: grab; }
.app-pl .pg-debt-profile.pinned { cursor: pointer; }
.app-pl .pg-debt-profile:active { cursor: grabbing; }
.app-pl .pg-debt-profile.selected { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.app-pl .pg-debt-profile.selected .pg-debt-profile-name, .app-pl .pg-debt-profile.selected .pg-debt-profile-balance { color: #fff; }
.app-pl .pg-debt-profile-handle { font-size: calc(0.85 * var(--app-rem, 18px)); color: #64748b; flex-shrink: 0; cursor: grab; }
.app-pl .pg-debt-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(0.2 * var(--app-rem, 18px)); }
.app-pl .pg-debt-profile-top { display: flex; align-items: center; gap: calc(0.35 * var(--app-rem, 18px)); min-width: 0; }
.app-pl .pg-debt-profile-name { font-size: calc(0.76 * var(--app-rem, 18px)); font-weight: 700; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pl .pg-debt-profile-balance { font-size: calc(0.7 * var(--app-rem, 18px)); color: #94a3b8; }
.app-pl .pg-badge-fixed { background: #4b5563; color: #fff; }
.app-pl .pg-debt-chart-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: calc(0.6 * var(--app-rem, 18px)) calc(0.7 * var(--app-rem, 18px)); margin-bottom: calc(0.7 * var(--app-rem, 18px)); }
.app-pl .pg-debt-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(0.4 * var(--app-rem, 18px)); margin-bottom: calc(0.4 * var(--app-rem, 18px)); }
.app-pl .pg-debt-chart-title { font-size: calc(0.8 * var(--app-rem, 18px)); font-weight: 700; color: #f1f5f9; }
.app-pl .pg-debt-toggles { display: flex; gap: calc(0.7 * var(--app-rem, 18px)); }
.app-pl .pg-debt-toggles label { display: flex; align-items: center; gap: calc(0.25 * var(--app-rem, 18px)); font-size: calc(0.7 * var(--app-rem, 18px)); color: #94a3b8; font-weight: 600; cursor: pointer; }
.app-pl .pg-debt-chart-wrap { position: relative; height: 260px; }
.app-pl .pg-debt-scn-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: calc(0.7 * var(--app-rem, 18px)) calc(0.8 * var(--app-rem, 18px)); margin-top: calc(0.7 * var(--app-rem, 18px)); }
.app-pl .pg-debt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(0.6 * var(--app-rem, 18px)); }
.app-pl .pg-debt-scn-card { border-radius: 8px; padding: calc(0.6 * var(--app-rem, 18px)) calc(0.7 * var(--app-rem, 18px)); display: flex; flex-direction: column; gap: calc(0.3 * var(--app-rem, 18px)); min-width: 0; }
.app-pl .pg-debt-scn-title { font-size: calc(0.74 * var(--app-rem, 18px)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.85; }
.app-pl .pg-debt-scn-headline { font-size: calc(1.25 * var(--app-rem, 18px)); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-pl .pg-debt-scn-suffix { font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 700; opacity: 0.85; margin-left: 2px; }
.app-pl .pg-debt-scn-line { font-size: calc(0.78 * var(--app-rem, 18px)); opacity: 0.92; }
.app-pl .pg-debt-scn-card--optimal { background: #22c55e; color: #052e13; }
.app-pl .pg-debt-scn-card--estimated { background: #3b82f6; color: #fff; }
.app-pl .pg-debt-scn-card--conservative { background: #ef4444; color: #fff; }
.app-pl .pg-debt-scn-card--current { background: #4b5563; color: #e2e8f0; }
.app-pl .pg-debt-scn-card--clickable { cursor: pointer; }
.app-pl .pg-debt-scn-card--clickable:hover { filter: brightness(1.08); }
.app-pl .pl-savings-hero { background: linear-gradient(135deg, #0f172a 0%, #1a2744 100%); border: 2px solid #3b82f6; border-radius: 10px; padding: calc(0.7 * var(--app-rem, 18px)) calc(0.8 * var(--app-rem, 18px)); }
.app-pl .pl-savings-title { font-size: calc(0.8 * var(--app-rem, 18px)); color: #60a5fa; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.app-pl .pl-savings-total { font-size: calc(1.5 * var(--app-rem, 18px)); font-weight: 800; color: #4ade80; }
.app-pl .pl-savings-sub { font-size: calc(0.68 * var(--app-rem, 18px)); color: #64748b; margin-bottom: calc(0.4 * var(--app-rem, 18px)); }
.app-pl .pl-paycheck-grid { display: flex; gap: calc(0.4 * var(--app-rem, 18px)); margin-bottom: calc(0.45 * var(--app-rem, 18px)); }
.app-pl .pl-paycheck-box { flex: 1; background: #0f172a; border-radius: 8px; padding: calc(0.45 * var(--app-rem, 18px)); text-align: center; border: 1px solid #334155; }
.app-pl .pl-paycheck-box .label { font-size: calc(0.66 * var(--app-rem, 18px)); color: #64748b; }
.app-pl .pl-paycheck-box .day { font-size: calc(0.62 * var(--app-rem, 18px)); color: #94a3b8; }
.app-pl .pl-paycheck-box .amt { font-size: calc(1.05 * var(--app-rem, 18px)); font-weight: 700; color: #4ade80; }
@media (max-width: 767.98px) { .app-pl .planning-page:has(.pg-body.visible) { height: auto; min-height: calc(100svh - 140px); overflow: visible; } }
@media (max-width: 767.98px) { .app-pl .pg-body.visible { flex-direction: column; } }
@media (max-width: 767.98px) { .app-pl .pg-content { overflow-y: visible; padding: calc(0.5 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-pl .pg-control-panel { width: 100% !important; min-width: 0 !important; border-left: none; border-top: 1px solid #334155; overflow-y: visible; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-board { flex-direction: column; height: auto; gap: calc(0.5 * var(--app-rem, 18px)); } }
@media (max-width: 767.98px) { .app-pl .pg-tier-col { flex: none; width: 100%; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-col-body { overflow-y: visible; transition: min-height 0.1s ease; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-head { cursor: pointer; } }
@media (max-width: 767.98px) { .app-pl .pg-chip { max-height: 340px; overflow: hidden; transition: max-height 0.1s ease, opacity 0.1s ease, margin 0.1s ease, padding 0.1s ease, border-width 0.1s ease; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-board.pg-touch-drag .pg-chip { max-height: 0; opacity: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; pointer-events: none; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-board.pg-touch-drag .pg-tier-col-body { display: flex; min-height: 20px; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-board.pg-touch-drag .pg-tier-col.pg-drop-hot .pg-tier-col-body { min-height: 84px; } }
@media (max-width: 767.98px) { .app-pl .pg-tier-board.pg-touch-drag .pg-tier-col.pg-drop-hot { background: #34455f; filter: brightness(1.22); box-shadow: inset 0 0 0 2px #f59e0b; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost { position: fixed; z-index: 4000; pointer-events: none; display: flex; width: 190px; border-radius: 8px; overflow: hidden; transform: translate(-50%, -120%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); transition: opacity 0.1s ease, transform 0.1s ease; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost--saving { background: #1e3a5f; color: #93c5fd; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost .pg-ghost-edge { width: 5px; flex: none; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost-edge.gold { background: #f59e0b; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost-edge.silver { background: #64748b; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost-edge.bronze { background: #b45309; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost .pg-ghost-body { flex: 1; min-width: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost .pg-ghost-name { font-size: calc(0.72 * var(--app-rem, 18px)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost .pg-ghost-track { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); overflow: hidden; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost .pg-ghost-fill { height: 100%; border-radius: 3px; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost-fill.green { background: #4ade80; } }
@media (max-width: 767.98px) { .app-pl .pg-ghost-fill.yellow { background: #f59e0b; } }
@media (max-width: 767.98px) { .app-pl .pg-touch-drag-ghost--cancel { opacity: 0; transform: translate(-50%, -120%) scale(0.85); } }
@media (max-width: 767.98px) { .app-pl .pg-debt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .app-pl #tab-debt .pg-content { display: flex; flex-direction: column; } }
@media (max-width: 767.98px) { .app-pl .pg-body:has(#tab-debt.active) .pg-control-panel { order: -1; border-top: none; border-bottom: 1px solid #334155; } }
@media (max-width: 767.98px) { .app-pl .pg-body:has(#tab-debt.active:not(.pg-debt-has-selection)) .pg-debt-chart-card, .app-pl .pg-body:has(#tab-debt.active:not(.pg-debt-has-selection)) .pg-debt-scn-wrap { display: none; } }
@media (max-width: 767.98px) { .app-pl .pg-body:has(#tab-debt.pg-debt-has-selection) #pg-debt-modules .pg-debt-profile:not(.selected) { display: none; } }
@media (max-width: 767.98px) { .app-pl .pg-body:has(#tab-debt.pg-debt-has-selection) .pg-debt-sort-row { display: none; } }
@media (max-width: 767.98px) { .app-pl .pg-tab[data-tab="projection"] { display: none; } }
@media (max-width: 767.98px) { .app-pl .pg-tabs { padding: 0; } }
@media (max-width: 767.98px) { .app-pl .pg-tab { flex: 1; padding: calc(0.85 * var(--app-rem, 18px)) calc(0.3 * var(--app-rem, 18px)); font-size: calc(0.85 * var(--app-rem, 18px)); } }

/* .app-ob: Onboarding wizard (onboarding.html); scenes sc-ob */
.app-ob { font-size: var(--app-rem, 18px); }
.app-ob { --text-primary: #1e293b; }
.app-ob * { margin: 0; padding: 0; box-sizing: border-box; }
.app-ob { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); line-height: 1.6; }
.app-ob .btn { display: inline-block; padding: calc(0.5 * var(--app-rem, 18px)) calc(1 * var(--app-rem, 18px)); border-radius: 6px; border: none; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.2s; font-size: calc(0.875 * var(--app-rem, 18px)); }
.app-ob { --brand: #667eea; --brand2: #764ba2; --done: #3fb950; --ink: #111827; --ink-dim: #4b5563; --ink-mute: #6b7280; --border: #e5e7eb; }
.app-ob { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
.app-ob .ob-wrap { max-width: 640px; margin: 40px auto; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); overflow: hidden; }
.app-ob .ob-head { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color: white; padding: 14px 24px; text-align: center; }
.app-ob .ob-head h1 { margin: 0 0 2px; font-size: 20px; font-weight: 600; }
.app-ob .ob-head p { margin: 0; opacity: 0.92; font-size: 13px; }
.app-ob .ob-progress { height: 8px; background: #e5e7eb; }
.app-ob .ob-progress-fill { height: 100%; width: 0; background: var(--done); border-radius: 0 4px 4px 0; transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .app-ob .ob-progress-fill { transition: none; } }
.app-ob .ob-body { padding: 28px 28px 24px; }
.app-ob .ob-body h2 { font-size: 18px; margin: 0 0 6px; }
.app-ob .ob-body .hint { color: var(--ink-mute); font-size: 13.5px; margin-bottom: 18px; }
.app-ob .btn { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color: white; border: 0; border-radius: 6px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.app-ob .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.app-ob .btn.secondary { background: white; color: var(--ink-dim); border: 1px solid var(--border); }
.app-ob .row-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 10px; }
.app-ob .row-actions .grow { flex: 1; }
.app-ob .linked-bank { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; }
.app-ob .linked-bank .lb-name { font-size: 13.5px; font-weight: 700; color: var(--ink-dim); }
.app-ob .lb-accounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.app-ob .lb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: #e0e7ff; color: #3730a3; font-weight: 600; }
.app-ob .lb-chip .lb-ico { font-size: 12px; }
.app-ob .sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; max-height: 360px; overflow-y: auto; padding: 4px 2px 8px; }
.app-ob .sub-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; font-size: 13.5px; }
.app-ob .sub-row.disabled { background: #f9fafb; color: var(--ink-mute); }
.app-ob .sub-row.immutable { background: #eff6ff; }
.app-ob .sub-row input[type=checkbox] { transform: scale(1.1); cursor: pointer; }
.app-ob .sub-row.immutable input[type=checkbox] { cursor: not-allowed; }
.app-ob .ghosted { display: none; }