/* ---- budget allocation bar ---- */ .alloc-bar{display:flex;width:100%;height:14px;border-radius:8px;overflow:hidden;margin-bottom:12px;border:1px solid var(--border)} .alloc-seg{height:100%;transition:width .25s ease;display:flex;align-items:center;justify-content:center;min-width:2px} .alloc-seg.needs{background:#00B386} .alloc-seg.wants{background:#F0C040} .alloc-seg.savings{background:#3B82F6} .alloc-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .alloc-row .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0} .alloc-row .dot.needs{background:#00B386} .alloc-row .dot.wants{background:#F0C040} .alloc-row .dot.savings{background:#3B82F6} .alloc-row .alabel{font-size:12.5px;color:var(--mist);font-weight:600;flex:1} .alloc-row input[type=range]{flex:2;margin:0} .alloc-row .aval{font-size:13px;font-weight:700;color:var(--white);font-family:'Outfit',sans-serif;width:46px;text-align:right;flex-shrink:0} .alloc-row .aamt{font-size:11px;color:var(--sage);width:auto;min-width:78px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums} /* ---- category line items ---- */ .cat-add-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px} .cat-add-row>div{flex:1;min-width:110px} .cat-add-row select,.cat-add-row input{width:100%} .cat-add-row button{padding:10px 16px;font-size:13px;font-weight:600;border:1px solid var(--teal-500);border-radius:9px;background:var(--teal-300);color:var(--void);cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .cat-add-row button:active{opacity:.8} .cat-group{margin-bottom:14px} .cat-group-hdr{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--sage);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-family:'Outfit',sans-serif} .cat-group-hdr .dot{width:9px;height:9px;border-radius:3px;flex-shrink:0} .cat-group-hdr .ghd-amt{margin-left:auto;color:var(--white);font-weight:700;text-transform:none;letter-spacing:0} .cat-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:12.5px} .cat-item:last-child{border-bottom:none} .cat-item .ci-label{flex:1;color:var(--mist);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-item .ci-amt{color:var(--white);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0} .cat-item .ci-del{cursor:pointer;color:var(--sage);flex-shrink:0;padding:2px;border-radius:5px;-webkit-tap-highlight-color:transparent} .cat-item .ci-del:hover{color:var(--danger)} .empty-hint{font-size:12px;color:var(--sage);text-align:center;padding:18px 6px} /* ---- goal progress ---- */ .goal-bar-wrap{background:var(--raised);border-radius:10px;height:18px;overflow:hidden;margin:10px 0;border:1px solid var(--border)} .goal-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal-500),var(--teal-100));border-radius:10px;transition:width .3s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:6px} .goal-bar-fill span{font-size:10px;font-weight:700;color:var(--void)} /* ---- mobile sticky savings pill ---- */ .save-pill{display:none;position:sticky;bottom:12px;z-index:100;margin:0 0 10px;pointer-events:none} .save-pill-inner{display:flex;align-items:center;justify-content:space-between;background:var(--teal-300);color:var(--void);border-radius:50px;padding:10px 20px;box-shadow:0 4px 20px rgba(0,180,140,.35);pointer-events:auto} .save-pill-label{font-size:11px;font-weight:600;opacity:.8;font-family:'Inter',sans-serif} .save-pill-val{font-size:18px;font-weight:800;font-family:'Outfit',sans-serif;letter-spacing:-.01em} @media(max-width:540px){ .save-pill{display:block} .alloc-row .alabel{flex:1 1 100%;order:1} .alloc-row{flex-wrap:wrap} .alloc-row input[type=range]{order:2;flex:1 1 auto} .alloc-row .aval{order:3} .alloc-row .aamt{order:4;flex:1 1 100%;text-align:left} .cat-add-row{flex-direction:column} .cat-add-row>div{min-width:unset} .cat-add-row button{width:100%} }