/* Copied from docs/design/home/Main.dc.html (Sticker Pop). Keep in step with the design. */
body{margin:0;background:#F3F0FF}
a{color:#5B3FD9}a:hover{color:#231942}
.hf, .hf *{box-sizing:border-box}
.hf button{font-family:'Nunito Sans',system-ui,sans-serif;cursor:pointer;color:#231942}
.hf h1,.hf h2,.hf h3,.hf p{margin:0}
.pop{transition:transform .12s ease, box-shadow .12s ease}
.pop:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #231942}
.pop:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #231942}
.hf button:focus-visible{outline:3px solid #FF8FB1;outline-offset:3px}
.nav{background:transparent;border:3px solid transparent;color:#231942;transition:background .12s, transform .12s}
.nav:hover{background:#F3F0FF;border-color:#231942}
.nav[data-active="true"]{background:#5B3FD9;color:#FFFFFF;border-color:#231942;box-shadow:4px 4px 0 #231942}
.paybtn{background:#FFFFFF}
.paybtn[data-paid="true"]{background:#7ED7C1}
.bill[data-paid="true"]{background:#E3F7F1}
.bill[data-paid="true"] .amt{text-decoration:line-through}

/* Added for the live app (not in the design export) */
body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start}
.hf a.nav:hover{color:#231942}
.hf a.nav[data-active="true"]:hover{color:#FFFFFF}
.hf a:focus-visible{outline:3px solid #FF8FB1;outline-offset:3px}
.paybtn[data-paid="true"] .when-unpaid{display:none}
.paybtn[data-paid="false"] .when-paid{display:none !important}
.signout:hover{background:#F3F0FF}
[hidden]{display:none !important}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#231942;color:#FFFFFF;border:3px solid #231942;box-shadow:5px 5px 0 #FF8FB1;border-radius:16px;padding:12px 18px;font:800 15px 'Nunito Sans',system-ui,sans-serif;z-index:10}

/* Sign-in pages */
.auth, .auth *{box-sizing:border-box}
.auth h1,.auth h2,.auth p{margin:0}
.auth button{font-family:'Nunito Sans',system-ui,sans-serif;cursor:pointer;color:#231942}
.auth button:focus-visible{outline:3px solid #FF8FB1;outline-offset:3px}
.auth{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;font-family:'Nunito Sans',system-ui,sans-serif;color:#231942}
.auth-card{width:100%;max-width:440px;background:#FFFFFF;border:3px solid #231942;box-shadow:6px 6px 0 #231942;border-radius:24px;overflow:hidden}
.auth-top{position:relative;height:150px;background:#5B3FD9;border-bottom:3px solid #231942;overflow:hidden;padding:20px 22px}
.auth-body{padding:22px;display:flex;flex-direction:column;gap:14px}
.auth h1{font-family:'Lilita One',sans-serif;font-weight:400;font-size:34px;line-height:1.05;color:#FFFFFF;text-shadow:3px 3px 0 #231942;position:relative}
.auth h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:24px;line-height:1.1}
.auth p{font-size:15px;font-weight:700;line-height:1.45;color:#4A3F6B}
.auth label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:900}
.auth input{height:48px;border:3px solid #231942;border-radius:14px;padding:0 14px;font:700 16px 'Nunito Sans',system-ui,sans-serif;color:#231942;background:#F3F0FF}
.auth input:focus{outline:3px solid #FF8FB1;outline-offset:2px;background:#FFFFFF}
.auth input.code{font-family:'Lilita One',sans-serif;font-size:26px;letter-spacing:8px;text-align:center}
.auth .go{height:52px;background:#FFD166;border:3px solid #231942;border-radius:16px;box-shadow:5px 5px 0 #231942;font-size:17px;font-weight:900;margin-top:4px}
.auth .msg{background:#FFF4D6;border:2.5px dashed #231942;border-radius:16px;padding:10px 12px;font-size:14px;font-weight:800}
.auth .msg.bad{background:#FFE3EC}
.auth .qr{align-self:center;background:#FFFFFF;border:3px solid #231942;border-radius:18px;box-shadow:4px 4px 0 #231942;padding:8px}
.auth .qr img{display:block;width:184px;height:184px}
.auth .secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:700;background:#F3F0FF;border:2.5px solid #231942;border-radius:12px;padding:8px 10px;word-break:break-all;text-align:center}
.auth .small{font-size:13px}
.auth .steps{margin:0;padding-left:20px;font-size:14.5px;font-weight:700;line-height:1.5;color:#4A3F6B}
.auth .link{background:none;border:0;padding:0;font-weight:800;font-size:14px;color:#5B3FD9;text-decoration:underline;align-self:center}

/* Spending and Budgets screens (step 3). Same Sticker Pop pieces as Home. */
.hf.grow{height:auto !important;min-height:880px;overflow:visible !important;align-items:flex-start}
.hf.grow > nav{position:sticky;top:20px;min-height:840px}
.hf .card{background:#FFFFFF;border:3px solid #231942;box-shadow:5px 5px 0 #231942;border-radius:24px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.hf .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hf .h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:22px;line-height:1}
.hf .muted{font-size:13px;font-weight:800;color:#4A3F6B}
.hf .cols{display:flex;gap:22px;align-items:flex-start}
.hf .cols > .wide{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px}
.hf .cols > .side{width:340px;flex:none;display:flex;flex-direction:column;gap:22px}
.hf .hero{height:186px;flex:none;position:relative;overflow:hidden;background:#5B3FD9;border:3px solid #231942;box-shadow:5px 5px 0 #231942;border-radius:24px;padding:22px 28px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.hf .hero h1{position:relative;font-family:'Lilita One',sans-serif;font-weight:400;font-size:42px;line-height:1.1;color:#FFFFFF;letter-spacing:.4px;text-shadow:3px 3px 0 #231942}
.hf .sticker{position:relative;background:#FFD166;border:3px solid #231942;border-radius:999px;padding:3px 14px;font-size:14px;font-weight:900;box-shadow:3px 3px 0 #231942;transform:rotate(-2deg)}
.hf .hero-row{position:relative;display:flex;gap:12px;margin-top:6px}
.hf .btn{height:44px;padding:0 18px;background:#FFFFFF;border:3px solid #231942;border-radius:16px;box-shadow:4px 4px 0 #231942;font:900 15px 'Nunito Sans',system-ui,sans-serif;color:#231942;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.hf .btn.yellow{background:#FFD166}
.hf .btn.purple{background:#5B3FD9;color:#FFFFFF}
.hf .btn.pink{background:#FF8FB1}
.hf .btn.small{height:34px;padding:0 12px;border-radius:12px;box-shadow:3px 3px 0 #231942;font-size:13.5px;border-width:2.5px}
.hf a.btn:hover{color:#231942}
.hf a.btn.purple:hover{color:#FFFFFF}
.hf .btn.off{opacity:.45;pointer-events:none}
.hf form{margin:0}
.hf .form{display:flex;flex-direction:column;gap:12px}
.hf .form label,.hf .field{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:900}
.hf .form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hf input[type=text],.hf input[type=password],.hf input[type=email],.hf input[type=date],.hf input:not([type]),.hf select{height:44px;width:100%;border:3px solid #231942;border-radius:14px;padding:0 12px;font:700 15px 'Nunito Sans',system-ui,sans-serif;color:#231942;background:#F3F0FF}
.hf input.money{font-family:'Lilita One',sans-serif;font-size:20px;letter-spacing:.3px}
.hf input:focus,.hf select:focus{outline:3px solid #FF8FB1;outline-offset:2px;background:#FFFFFF}
.hf .hint{font-size:12.5px;font-weight:700;color:#4A3F6B;line-height:1.35}
.hf .msg{background:#FFF4D6;border:2.5px dashed #231942;border-radius:16px;padding:10px 12px;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hf .msg.bad{background:#FFE3EC}
.hf .msg.good{background:#E3F7F1}
.hf .chips{display:flex;flex-wrap:wrap;gap:8px}
.hf .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:2.5px solid #231942;border-radius:999px;background:#FFFFFF;font-size:13.5px;font-weight:900;color:#231942;text-decoration:none}
.hf .chip[aria-current]{background:#231942;color:#FFFFFF}
.hf .chip:hover{background:#F3F0FF;color:#231942}
.hf .chip[aria-current]:hover{background:#231942;color:#FFFFFF}
.hf .dot{width:12px;height:12px;flex:none;border:2px solid #231942;border-radius:50%}
.hf .day{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 0;font-size:13.5px;font-weight:900;color:#4A3F6B}
.hf .rows{display:flex;flex-direction:column;gap:8px}
.hf .row{display:flex;align-items:center;gap:12px;background:#FFFFFF;border:2.5px solid #231942;border-radius:16px;padding:8px 10px 8px 8px}
.hf .badge{width:38px;height:38px;flex:none;border:2.5px solid #231942;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Lilita One',sans-serif;font-size:18px;color:#231942}
.hf .row .what{flex:1;min-width:0;line-height:1.25}
.hf .row .what b{display:block;font-size:15px;font-weight:900}
.hf .row .what > span{display:block;font-size:12.5px;font-weight:700;color:#4A3F6B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf .amount{font-family:'Lilita One',sans-serif;font-size:19px;white-space:nowrap}
.hf .amount small{font-size:12px}
.hf .empty{text-align:center;padding:26px 10px;font-size:15px;font-weight:800;color:#4A3F6B;line-height:1.5}
.hf .bar{height:18px;background:#F3F0FF;border:2.5px solid #231942;border-radius:999px;overflow:hidden}
.hf .bar > div{height:100%;border-right:2.5px solid #231942}
.hf .bar > div[style*="width: 0%"]{border-right:0}
.hf .budget{display:flex;flex-direction:column;gap:6px}
.hf .budget.warn{background:#FFF4D6;border:2.5px dashed #231942;border-radius:16px;padding:8px 10px 9px;margin:-2px -6px}
.hf .budget.over{background:#FFE3EC;border:2.5px dashed #231942;border-radius:16px;padding:8px 10px 9px;margin:-2px -6px}
.hf .budget.warn .bar,.hf .budget.over .bar{background:#FFFFFF}
.hf .budget-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hf .budget-top > span:first-child{font-size:15px;font-weight:900;display:flex;align-items:center;gap:6px}
.hf .budget-top > span:last-child{font-size:13px;font-weight:800;white-space:nowrap}
.hf .pct{background:#FFD166;border:2px solid #231942;border-radius:999px;padding:0 7px;font-size:12px;font-weight:900;line-height:18px}
.hf .over .pct{background:#FF8FB1}
.hf .budget-note{font-size:12.5px;font-weight:800;color:#4A3F6B}
.hf .form label.limit-row,.hf .limit-row{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:10px;font-size:14.5px;font-weight:900}
.hf .limit-row > span{display:flex;align-items:center;gap:8px;min-width:0}
.hf .limit-row input{height:40px;text-align:right}
.hf details.cat{border:2.5px solid #231942;border-radius:14px;background:#FFFFFF}
.hf details.cat > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:14.5px;font-weight:900}
.hf details.cat > summary::-webkit-details-marker{display:none}
.hf details.cat > summary::after{content:'Change';margin-left:auto;font-size:12.5px;color:#5B3FD9;text-decoration:underline}
.hf details.cat[open] > summary::after{content:'Close'}
.hf details.cat > form{padding:0 10px 10px}
.hf .is-hidden{font-size:11.5px;font-weight:900;background:#E2DCF5;border:2px solid #231942;border-radius:999px;padding:0 6px}
.hf .swatches{display:flex;flex-wrap:wrap;gap:6px}
.hf .swatches label{display:block}
.hf .swatches input{position:absolute;opacity:0;width:1px;height:1px}
.hf .swatches span{display:block;width:28px;height:28px;border:2.5px solid #231942;border-radius:9px;cursor:pointer}
.hf .swatches input:checked + span{box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px #231942}
.hf .swatches input:focus-visible + span{outline:3px solid #FF8FB1;outline-offset:5px}
.hf .check{flex-direction:row !important;align-items:center;gap:8px !important;font-weight:800 !important}
.hf .check input{width:18px;height:18px;accent-color:#5B3FD9}
.hf .linkbtn{background:none;border:0;padding:0;font:800 13.5px 'Nunito Sans',system-ui,sans-serif;color:#5B3FD9;text-decoration:underline;cursor:pointer}
.hf .total-line{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:900;border-top:2.5px dashed #231942;padding-top:10px}
.hf input.money::placeholder{font:700 14px 'Nunito Sans',system-ui,sans-serif;color:#8A80A8}

/* Bills, Saving goals and Money in (step 4). */
.hf input[type=month]{height:44px;width:100%;border:3px solid #231942;border-radius:14px;padding:0 12px;font:700 15px 'Nunito Sans',system-ui,sans-serif;color:#231942;background:#F3F0FF}
.hf .row.late{background:#FFE3EC}
.hf .row.paid{background:#E3F7F1}
.hf .late-txt{color:#B4234F;font-weight:900}
.hf .plan-tag{display:inline-block;background:#E8DEFF;border:1.5px solid #231942;border-radius:8px;padding:0 6px;margin-right:6px;font-size:11.5px;font-weight:900;color:#231942;line-height:17px}
.hf .payform{display:flex;align-items:center;gap:8px;flex:none}
.hf input.money.small{width:104px;height:36px;font-size:17px;text-align:right;border-width:2.5px;border-radius:12px;padding:0 10px}
.hf .moveform{display:flex;align-items:center;gap:8px}
.hf .moveform input.money.small{flex:1;width:auto;min-width:0}
.hf .goal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.hf .pill{border:2.5px solid #231942;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:900;white-space:nowrap}
.hf .tip{background:#F3F0FF;border:2.5px solid #231942;border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;line-height:1.3}
.hf details.moves > summary{cursor:pointer;font-size:13px;font-weight:900;color:#5B3FD9;text-decoration:underline}
.hf details.moves[open]{display:flex;flex-direction:column;gap:6px}
.toast{display:flex;align-items:center;gap:14px}
.toast.bad{box-shadow:5px 5px 0 #FFD166}
.toast-undo{height:32px;padding:0 12px;background:#FFD166;border:2.5px solid #FFFFFF;border-radius:10px;font:900 13.5px 'Nunito Sans',system-ui,sans-serif;color:#231942;cursor:pointer}

/* Where money goes and Sheet view (step 5). */
.hf .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hf .tile{border:3px solid #231942;box-shadow:5px 5px 0 #231942;border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hf .tile-label{font-size:13.5px;font-weight:900;color:#231942}
.hf .tile-num{font-family:'Lilita One',sans-serif;font-size:28px;line-height:1.1;white-space:nowrap}
.hf .tile-num small{font-size:14px}
.hf .tile-foot{font-size:12.5px;font-weight:800;color:#231942;min-height:22px;display:flex;align-items:center}
.hf .tile-foot .pill,.hf .legend-row .pill,.hf .cmp-top .pill{font-size:12px;padding:0 8px;line-height:20px;background-clip:padding-box}
.hf .donut-wrap{display:flex;align-items:center;gap:22px}
.hf .donut{flex:none}
.hf .legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hf .legend-row{display:grid;grid-template-columns:auto 1fr auto 40px 108px;align-items:center;gap:8px;font-size:14px;font-weight:800;border-bottom:2px dashed #E2DCF5;padding-bottom:6px}
.hf .legend-row:last-child{border-bottom:0}
.hf .legend-row b{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf .legend-num{white-space:nowrap;text-align:right}
.hf .legend-pct{color:#4A3F6B;text-align:right}
.hf .legend-row .pill{justify-self:end}
.hf .key{display:flex;gap:12px;font-size:12.5px;font-weight:900;color:#4A3F6B}
.hf .key > span{display:inline-flex;align-items:center;gap:5px}
.hf .key i{display:inline-block;width:12px;height:12px;border:2px solid #231942;border-radius:4px}
.hf .cmp{display:flex;flex-direction:column;gap:4px}
.hf .cmp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;font-weight:900}
.hf .cmp-top > span:first-child{display:flex;align-items:center;gap:6px}
.hf .cmp-bar{display:flex;align-items:center;gap:6px;height:14px;font-size:11.5px;font-weight:900;color:#231942}
.hf .cmp-bar > div{height:100%;min-width:3px;border:2px solid #231942;border-radius:0 5px 5px 0}
.hf .cmp-bar.before{height:10px;color:#4A3F6B}
.hf .cmp-bar.before > div{background:#E2DCF5;border-width:1.5px}
.hf .mini-avatar{width:24px;height:24px;border:2.5px solid #231942;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'Lilita One',sans-serif;font-size:12px}
.hf a.linkrow{text-decoration:none;color:#231942}
.hf a.linkrow:hover{background:#F3F0FF}
.hf .chip.small{height:28px;font-size:12.5px;padding:0 10px}
.hf .filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;background:#F3F0FF;border:2.5px solid #231942;border-radius:16px;padding:10px 12px}
.hf .filters label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:900;width:150px}
.hf .filters label:has(input[type=month]){width:178px}
.hf .filters label.grow{flex:1;min-width:150px}
.hf .filters input,.hf .filters select{height:38px !important;background:#FFFFFF !important;border-width:2.5px !important;border-radius:12px !important;font-size:14px !important}
.hf .filters .btn{height:38px}
.hf .filters .linkbtn{align-self:center}
.hf .sheet-scroll{overflow-x:auto;border:2.5px solid #231942;border-radius:16px;background:#FFFFFF}
.hf table.sheet{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;font-weight:700}
.hf .sheet th,.hf .sheet td{padding:7px 12px;border-bottom:1.5px solid #E2DCF5;text-align:left;white-space:nowrap}
.hf .sheet th{position:sticky;top:0;background:#E2DCF5;border-bottom:2.5px solid #231942;font-weight:900;font-size:13px}
.hf .sheet th a{color:#231942;text-decoration:none;display:block}
.hf .sheet th a:hover{text-decoration:underline}
.hf .sheet th[aria-sort]{background:#FFD166}
.hf .sheet th:first-child,.hf .sheet td:first-child{position:sticky;left:0;background:inherit}
.hf .sheet th:first-child{background:#E2DCF5}
.hf .sheet th[aria-sort]:first-child{background:#FFD166}
.hf .sheet tbody tr{background:#FFFFFF}
.hf .sheet tbody tr:nth-child(even){background:#FAF8FF}
.hf .sheet tbody tr:hover{background:#FFF4D6}
.hf .sheet td.num,.hf .sheet th.num{text-align:right;font-variant-numeric:tabular-nums}
.hf .sheet th.num a{text-align:right}
.hf .sheet td.note{white-space:normal;min-width:180px;max-width:320px;color:#4A3F6B}
.hf .sheet td .dot{display:inline-block;vertical-align:-1px;margin-right:6px}
.hf .sheet tfoot tr{background:#FFF4D6}
.hf .sheet tfoot td{font-weight:900;border-top:2.5px solid #231942;border-bottom:0}
.hf .sheet .neg{color:#B4234F}
.hf .sheet a.open{font-size:12.5px;font-weight:900}
.hf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hf .tile-foot .vs{margin-left:6px;font-size:12px;font-weight:800;color:#231942}

/* Ask the AI (step 6). */
.hf textarea{width:100%;border:3px solid #231942;border-radius:14px;padding:10px 12px;font:700 15px/1.4 'Nunito Sans',system-ui,sans-serif;color:#231942;background:#F3F0FF;resize:vertical;min-height:84px}
.hf textarea:focus{outline:3px solid #FF8FB1;outline-offset:2px;background:#FFFFFF}
.hf input.file{height:auto;width:100%;border:3px dashed #231942;border-radius:14px;padding:12px;font:700 14px 'Nunito Sans',system-ui,sans-serif;background:#F3F0FF;color:#231942}
.hf input.file::file-selector-button{font:900 14px 'Nunito Sans',system-ui,sans-serif;background:#FFFFFF;border:2.5px solid #231942;border-radius:10px;padding:6px 12px;margin-right:10px;cursor:pointer}
.hf button[disabled]{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}
.hf .chips form{display:inline}
.hf button.chip{cursor:pointer;font-family:'Nunito Sans',system-ui,sans-serif}
.hf .ai-answer{display:flex;flex-direction:column;gap:10px;background:#F3F0FF;border:2.5px solid #231942;border-radius:18px;padding:12px 14px}
.hf .ai-q{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900}
.hf .ai-a{font-size:15px;font-weight:700;line-height:1.5;color:#231942;display:flex;flex-direction:column;gap:8px}
.hf .ai-a ul,.hf .ai-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.hf .ai-list{font-size:13.5px;font-weight:800;line-height:1.35}
.hf .ai-answer .ai-a{background:#FFFFFF;border:2.5px solid #231942;border-radius:14px;padding:10px 12px;box-shadow:3px 3px 0 #231942}
.hf details.ai-old{border:2.5px solid #231942;border-radius:14px;background:#FFFFFF}
.hf details.ai-old > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:14.5px;font-weight:900}
.hf details.ai-old > summary::-webkit-details-marker{display:none}
.hf details.ai-old > summary > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf details.ai-old > summary > span:last-child{flex:none}
.hf details.ai-old[open] > summary{border-bottom:2px dashed #E2DCF5}
.hf details.ai-old > .ai-a,.hf details.ai-old > form{padding:10px 12px 0}
.hf details.ai-old > form{padding-bottom:10px}
.hf .ai-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hf .ai-tip{border:2.5px solid #231942;border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700;line-height:1.4}
.hf .ai-tip b{font-size:15px;font-weight:900}
.hf .sheet.receipt td{white-space:normal}
.hf .sheet.receipt input[type=text]{height:36px;border-width:2.5px;border-radius:10px;background:#FFFFFF;font-size:14px}
.hf .sheet.receipt select{height:36px;border-width:2.5px;border-radius:10px;background:#FFFFFF;font-size:14px;min-width:150px}
.hf .sheet.receipt input[type=checkbox]{width:20px;height:20px;accent-color:#5B3FD9}
.hf .busy-note{font-size:13.5px;font-weight:900;color:#5B3FD9}
/* Settings */
.hf .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hf .who{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2.5px solid #231942;border-radius:14px;background:#FFFFFF}
.hf .who .mini-avatar{flex:none}
.hf .who .what{flex:1;min-width:0;display:flex;flex-direction:column}
.hf .who .what b{font-weight:900;font-size:15px}
.hf .who .what span{font-size:13px;font-weight:700;color:#4A3F6B}
.hf .act{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:2px dashed #E2DCF5;font-size:14px;font-weight:700}
.hf .act:last-child{border-bottom:0}
.hf .act .when{font-size:12.5px;font-weight:800;color:#4A3F6B}
.hf .act.warn b{color:#B4234F}
.hf .qr-box{display:flex;gap:18px;align-items:flex-start}
.hf .qr-box img{display:block;width:184px;height:184px;background:#FFFFFF;border:3px solid #231942;border-radius:18px;box-shadow:4px 4px 0 #231942;padding:8px;flex:none}
.hf .secret{font:800 15px ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;background:#F3F0FF;border:2.5px dashed #231942;border-radius:12px;padding:8px 10px;word-break:break-all}
.hf input.code{font:900 22px ui-monospace,Menlo,Consolas,monospace;letter-spacing:6px;text-align:center}
.hf .cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.hf .cat-chips span.chip{cursor:default}
/* Weather on the house picture (public/weather.js picks it) */
.hero-art .wx{opacity:0}
.hero-art[data-weather="sun"] .wx-sun,.hero-art[data-weather="rain"] .wx-rain,.hero-art[data-weather="snow"] .wx-snow,.hero-art[data-weather="night"] .wx-night{opacity:1}
.hero-art.wx-ready .wx{transition:opacity 1.6s ease}
.hero-art *{transform-box:fill-box;transform-origin:center}
.hero-art .sun-rays{animation:hf-spin 24s linear infinite}
.hero-art .twinkle{animation:hf-twinkle 2.6s ease-in-out infinite}
.hero-art .t2{animation-delay:-.9s}.hero-art .t3{animation-delay:-1.7s}
.hero-art .smoke{animation:hf-smoke 4s ease-in-out infinite}
.hero-art .smoke.s2{animation-delay:-2s}
.hero-art .blink{animation:hf-blink 5s infinite}
.hero-art .sway{transform-origin:bottom center;animation:hf-sway 4s ease-in-out infinite}
.hero-art .cloud-drift{animation:hf-drift 9s ease-in-out infinite}
.hero-art .cloud-drift.slow{animation-duration:13s;animation-delay:-4s}
.hero-art .drop{animation:hf-rain .9s linear infinite}
.hero-art .d2{animation-delay:-.2s}.hero-art .d3{animation-delay:-.4s}.hero-art .d4{animation-delay:-.6s}.hero-art .d5{animation-delay:-.75s}
.hero-art .bolt{opacity:0;animation:hf-bolt 5s infinite}
.hero-art .puddle{animation:hf-puddle 1.8s ease-in-out infinite}
.hero-art .umbrella{transform-origin:bottom center;animation:hf-sway 3s ease-in-out infinite}
.hero-art .flake{animation:hf-snow 6s linear infinite}
.hero-art .f2{animation-delay:-1.2s}.hero-art .f3{animation-delay:-2.4s}.hero-art .f4{animation-delay:-3.6s}.hero-art .f5{animation-delay:-4.8s}
.hero-art .wave{transform-origin:left center;animation:hf-wave 2.4s ease-in-out infinite}
.hero-art[data-weather="night"] .window{fill:#FFE9A8}
@keyframes hf-spin{to{transform:rotate(360deg)}}
@keyframes hf-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
@keyframes hf-smoke{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(3px,-5px) scale(1.12);opacity:.75}}
@keyframes hf-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes hf-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hf-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes hf-rain{from{transform:translate(0,-10px);opacity:0}15%{opacity:1}to{transform:translate(-10px,90px);opacity:0}}
@keyframes hf-bolt{0%,78%,86%,100%{opacity:0}80%,84%{opacity:1}82%{opacity:.3}}
@keyframes hf-puddle{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.15)}}
@keyframes hf-snow{from{transform:translate(0,-10px)}50%{transform:translate(8px,70px)}to{transform:translate(-4px,150px)}}
@keyframes hf-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}

/* Little rewards: bill paid, money into a goal, goal reached */
.celebrate{display:inline-flex;flex:none;align-items:center}
.celebrate svg{display:block}
.celebrate .tick-ring{animation:hf-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.celebrate .tick{stroke-dasharray:30;stroke-dashoffset:30;animation:hf-draw .45s .25s ease-out forwards}
.celebrate .coin{animation:hf-coin .7s cubic-bezier(.5,0,.8,.6) both}
.celebrate .coin.c2{animation-delay:.25s}.celebrate .coin.c3{animation-delay:.5s}
.celebrate .jar{animation:hf-jiggle .4s 1.1s ease-in-out both}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border:2px solid #231942;border-radius:3px;animation:hf-confetti 2.8s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes hf-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes hf-draw{to{stroke-dashoffset:0}}
@keyframes hf-coin{from{transform:translateY(-26px);opacity:0}30%{opacity:1}to{transform:translateY(0);opacity:0}}
@keyframes hf-jiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}70%{transform:rotate(6deg)}}
@keyframes hf-confetti{0%{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:0}}

/* Bars fill in when a page opens */
.hf .bar > div,.hf .grow-bar{transform-origin:left center;animation:hf-grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes hf-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The AI's thinking buddy */
.busy-note{display:flex;align-items:center;gap:10px}
.buddy .eyes{animation:hf-look 2.4s ease-in-out infinite}
.buddy .dot{animation:hf-bob 1s ease-in-out infinite}
.buddy .dot.b2{animation-delay:.15s}.buddy .dot.b3{animation-delay:.3s}
.buddy .hand{transform-box:fill-box;transform-origin:bottom center;animation:hf-tap .8s ease-in-out infinite}
@keyframes hf-look{0%,100%{transform:translateX(0)}30%{transform:translateX(-2.5px)}70%{transform:translateX(2.5px)}}
@keyframes hf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hf-tap{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}

@media (prefers-reduced-motion: reduce){
  .hero-art *,.celebrate *,.buddy *,.hf .bar > div,.hf .grow-bar{animation:none !important}
  .hero-art .bolt,.hero-art .drop{opacity:0}
  .celebrate .tick{stroke-dashoffset:0}
  .confetti{display:none}
}
.hf .msg > span:not(.celebrate){flex:1}

/* "Something else…" in dropdowns: its own name and icon */
.hf .new-choice{display:grid;grid-template-columns:1fr 120px;gap:12px;padding:12px;border:2.5px dashed #5B3FD9;border-radius:14px;background:#F8F6FF}
.hf .new-choice[hidden]{display:none}
.hf .icon-pick select{font-size:20px}
.hf .badge .emoji{font-size:20px;line-height:1}

/* Night: the moon sleeps and snores */
.hero-art .moon-sleep{transform-box:fill-box;transform-origin:center;animation:hf-breathe 3.2s ease-in-out infinite}
.hero-art .snore-mouth{transform-box:fill-box;transform-origin:center;animation:hf-snore 3.2s ease-in-out infinite}
.hero-art .z{opacity:0;transform-box:fill-box;animation:hf-zzz 3.6s ease-out infinite}
.hero-art .z2{animation-delay:1.2s}.hero-art .z3{animation-delay:2.4s}
@keyframes hf-breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(-3deg)}}
@keyframes hf-snore{0%,100%{transform:scale(.7)}50%{transform:scale(1.4)}}
@keyframes hf-zzz{0%{opacity:0;transform:translate(10px,10px) scale(.6)}20%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate(-8px,-10px) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.hero-art .moon-sleep,.hero-art .snore-mouth{animation:none}.hero-art .z{animation:none;opacity:1}}

/* Home money cards: pop in, float, lean to the mouse, bounce on click */
.hf .mtile{rotate:var(--rot);cursor:pointer;will-change:transform;
  transform:perspective(700px) translateY(calc(var(--lift, 0) * -8px)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition:transform .18s ease-out, rotate .35s cubic-bezier(.34,1.56,.64,1), scale .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation:hf-tile-in .8s cubic-bezier(.34,1.56,.64,1) backwards, hf-tile-float 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .14s), calc(1s + var(--i, 0) * .6s)}
.hf .mtile:hover{rotate:0deg;scale:1.05;box-shadow:9px 9px 0 #231942 !important}
.hf .mtile:hover svg{animation:hf-wiggle .6s ease-in-out}
.hf .mtile:active{scale:.97}
.hf .mtile.boing{animation:hf-boing .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes hf-tile-in{0%{opacity:0;scale:.5;translate:0 40px}60%{opacity:1}100%{opacity:1;scale:1;translate:0 0}}
@keyframes hf-tile-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes hf-wiggle{0%,100%{rotate:0deg}25%{rotate:-14deg}50%{rotate:12deg}75%{rotate:-6deg}}
@keyframes hf-boing{0%{scale:1}30%{scale:1.12 .9}55%{scale:.94 1.06}80%{scale:1.03 .98}100%{scale:1}}
@media (prefers-reduced-motion: reduce){.hf .mtile,.hf .mtile:hover svg,.hf .mtile.boing{animation:none;transition:none;transform:none}}

/* Import check table */
.hf .sheet.import td{vertical-align:top}
.hf .sheet.import select{min-width:120px}
.hf .sheet.import input.num{text-align:right}
.hf .sheet.import tr.row-bad td{background:#FFE3EC}
.hf .sheet .row-err{color:#B4234F;font-size:12px;font-weight:800;margin-top:4px;white-space:normal;max-width:240px}