:root{--bg:#0d0d0d;--surface:#171717;--surface-hover:#1e1e1e;--border:#262626;--text:#fff;--muted:#6b6b6b;--label:#585858;--measure:#d9d9d9;--measure-full:#bb3c3c;--green:#2eb872;--yellow:#e3b53a;--red:#e5483b;--ease-out:cubic-bezier(.2, .8, .2, 1);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Instrument Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}p,h2{margin:0}button{font:inherit;color:inherit}input,select{font:inherit}.app{padding:24px 24px 48px}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.logo{width:44px;height:20px;display:block}.cycle-label{animation:fadeUp .5s var(--ease-out);font-size:14px}.user{cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:0;font-size:14px;display:flex}.layout{grid-template-columns:367px minmax(0,1fr);gap:32px;max-width:1440px;margin-top:40px;padding:0 0 0 16px;display:grid}.section-label{color:var(--label);align-items:center;gap:6px;margin-bottom:24px;font-size:14px;font-weight:400;display:flex}.card{background:var(--surface);border-radius:10px;padding:16px}.actions{flex-direction:column;gap:4px;margin-bottom:13px;display:flex}.action{text-align:left;cursor:pointer;width:100%;transition:background .2s ease, transform .2s var(--ease-out);border:0;align-items:center;gap:16px;font-size:14px;display:flex}.action:hover:not(:disabled){background:var(--surface-hover)}.action:active:not(:disabled){transform:scale(.985)}.action:disabled{opacity:.4;cursor:not-allowed}.action-icon{transition:transform .35s var(--ease-out);flex-shrink:0}.action:hover:not(:disabled) .plus{transform:rotate(90deg)}.action:hover:not(:disabled) .bucket{transform:rotate(-12deg)translateY(-1px)}.action:hover:not(:disabled) .reset{transform:rotate(-200deg)}.action-icon.plus,.action-icon.start{color:#00b539}.action-icon.bucket{color:#b59a00}.action-icon.reset{color:#b52100}.tx-list{flex-direction:column;gap:4px;display:flex}.tx-card{animation:slideIn .45s var(--ease-out) both;align-items:flex-start;gap:16px;display:flex;position:relative}.tx-icon{flex-shrink:0;width:24px;height:24px;position:relative}.tx-text{flex-direction:column;gap:4px;min-width:0;display:flex}.tx-title{font-size:14px}.tx-sub{color:var(--muted);font-size:12px}.tx-delete{width:24px;height:24px;color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:6px;place-items:center;transition:opacity .2s,background .2s,color .2s;display:grid;position:absolute;top:12px;right:12px}.tx-card:hover .tx-delete,.tx-delete:focus-visible{opacity:1}.tx-delete:hover{color:var(--text);background:#262626}.empty-note{color:var(--muted);padding:8px 4px;font-size:12px}.bucket-grid{grid-template-columns:repeat(auto-fill,minmax(244px,1fr));max-width:977px;display:grid}.bucket-cell{border:1px solid var(--border);cursor:pointer;text-align:center;height:269px;animation:pop .5s var(--ease-out) both;background:0 0;padding:0;transition:background .25s;position:relative;overflow:hidden}.bucket-cell:hover{background:#111}.bucket-cell:focus-visible{outline-offset:-2px;outline:2px solid #444}.spent-measure{background:var(--measure);opacity:.1;transition:height .9s var(--ease-out), background-color .4s ease;position:absolute;bottom:0;left:1px;right:1px}.is-warn .spent-measure{background:var(--measure-full)}.puddle{background:var(--liquid);transition:height .9s var(--ease-out) .5s;border-radius:50% 50% 0 0/8px 8px 0 0;position:absolute;bottom:0;left:1px;right:1px;box-shadow:inset 0 2px #ffffff2e}.is-over .puddle{animation:2.6s ease-in-out infinite ripple}.spill{pointer-events:none;position:absolute;inset:0}.spill-crest{background:var(--liquid);transform-origin:50% 100%;width:104px;height:18px;animation:crest 1.5s var(--ease-out) both;border-radius:50% 50% 0 0/100% 100% 0 0;position:absolute;top:42px;left:70px}.spill-stream{background:var(--liquid);border-radius:3px;width:5px;animation:1.5s cubic-bezier(.5,0,.75,.6) both pour;position:absolute}.spill-stream.left{left:49px}.spill-stream.right{animation-delay:80ms;left:190px}.edit-btn{z-index:2;color:#bbb;cursor:pointer;opacity:0;width:28px;height:28px;transition:opacity .2s ease, transform .25s var(--ease-out), color .2s ease, background .2s ease;background:#171717eb;border:1px solid #2a2a2a;border-radius:8px;place-items:center;display:grid;position:absolute;top:10px;right:10px;transform:translateY(-4px)}.bucket-cell:hover .edit-btn,.bucket-cell:focus-within .edit-btn{opacity:1;transform:none}.edit-btn:hover{color:#fff;background:#262626}.bucket-stage{width:244px;height:269px;position:absolute;top:0;left:50%;transform:translate(-50%)}.bucket-stage .bucket-graphic{transition:transform .35s var(--ease-out);margin-left:-64px;position:absolute;top:47px;left:50%}.bucket-cell:hover .bucket-stage .bucket-graphic{transform:translateY(-3px)}.bucket-name,.bucket-remaining,.bucket-spent{white-space:nowrap;transform:translate(-50%, -50%) rotate(var(--tilt));position:absolute;left:50%}.bucket-name{font-size:25.53px;font-weight:700;top:167.5px}.bucket-remaining{font-size:14px;font-weight:600;top:202.8px}.bucket-spent{font-size:14px;font-weight:600;top:227.4px}.add-cell{color:var(--label);border-style:dashed;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:14px;transition:color .2s,background .25s;display:flex}.add-cell:hover{color:var(--text)}.add-cell svg{transition:transform .35s var(--ease-out)}.add-cell:hover svg{transform:rotate(90deg)scale(1.1)}.bucket-graphic{transform-origin:50% 100%;width:128px;height:85.333px;position:relative}.bucket-outline{position:absolute;inset:0}.bucket-outline img{width:109.38%;height:108.4%;display:block;position:absolute;inset:-1.26% -4.69% -7.14%}.bucket-liquid-shape{clip-path:polygon(0 0,100% 0,91.1% 100%,8.9% 100%);align-items:flex-end;width:87.6px;height:60px;display:flex;position:absolute;top:10px;left:20.2px}.bucket-liquid{background:var(--liquid);width:100%;transition:height .9s var(--ease-out), background-color .4s ease;box-shadow:inset 0 3px #ffffff2e}.bucket-graphic.is-mini{transform-origin:0 0;position:absolute;top:5px;left:1.5px;transform:scale(.164)}.bucket-preview{justify-content:center;padding:8px 0 4px;display:flex}.start-cycle{border:1px solid var(--border);max-width:420px;animation:pop .5s var(--ease-out) both;flex-direction:column;align-items:flex-start;gap:16px;padding:32px;display:flex}.start-cycle h2{font-size:25.53px;font-weight:700;transform:rotate(-2deg)}.start-cycle p{color:var(--muted);font-size:14px;line-height:1.45}.start-row{gap:8px;display:flex}.check{color:#bbb;cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.check input{accent-color:var(--green)}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.link-btn:hover{color:var(--text)}.form{flex-direction:column;gap:18px;display:flex}.field{border:0;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;display:flex}.field>span{color:var(--muted);font-size:12px}input[type=text],input[type=email],input[type=password],input[type=number],select{border:1px solid var(--border);width:100%;color:var(--text);background:#0f0f0f;border-radius:8px;outline:none;padding:11px 12px;font-size:14px;transition:border-color .2s}select{cursor:pointer;width:auto}input:focus,select:focus{border-color:#4a4a4a}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.input-prefix{position:relative}.input-prefix>span{color:var(--muted);font-size:14px;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.input-prefix input{padding-left:24px}.chip-grid{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);cursor:pointer;transition:border-color .2s ease, background .2s ease, transform .2s var(--ease-out);background:0 0;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:inline-flex}.chip i{background:var(--chip);border-radius:50%;width:8px;height:8px}.chip:hover{border-color:#3a3a3a}.chip.is-selected{border-color:var(--chip);background:color-mix(in srgb, var(--chip) 14%, transparent);transform:translateY(-1px)}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;width:26px;height:26px;transition:transform .2s var(--ease-out), box-shadow .2s ease;border:2px solid #0000;border-radius:50%}.swatch:hover{transform:scale(1.1)}.swatch.is-selected{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px #fff}.preview{color:#bbb;font-size:13px}.preview.is-over{color:var(--red)}.form-actions{justify-content:flex-end;align-items:center;gap:8px;margin-top:4px;display:flex}.spacer{flex:1}.btn{cursor:pointer;border:0;border-radius:8px;padding:10px 16px;font-size:14px;transition:background .2s,opacity .2s,transform .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn.primary{color:#0d0d0d;background:#fff;font-weight:600}.btn.primary:hover:not(:disabled){background:#e6e6e6}.btn.primary:disabled{opacity:.35;cursor:not-allowed}.btn.ghost{color:#bbb;background:0 0}.btn.ghost:hover{color:#fff;background:#222}.btn.danger{background:var(--measure-full);color:#fff;font-weight:600}.btn.danger:hover{background:#cf4646}.btn.danger-text{color:var(--red)}.icon-btn{width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;display:grid}.icon-btn:hover{color:#fff;background:#262626}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;place-items:center;padding:16px;animation:.2s both fade;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);width:min(440px,100%);animation:rise .35s var(--ease-out) both;border-radius:14px;padding:20px}.modal-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-head h2{font-size:16px;font-weight:600}.modal-copy{color:#bbb;font-size:14px;line-height:1.5}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:none}}@keyframes crest{0%{transform:scaleY(0)}25%{transform:scaleY(1)}70%{transform:scaleY(.75)}to{transform:scaleY(0)}}@keyframes pour{0%{height:0;top:50px}45%{height:219px;top:50px}to{height:0;top:269px}}@keyframes ripple{0%,to{border-radius:50% 50% 0 0/8px 8px 0 0}50%{border-radius:40% 60% 0 0/10px 6px 0 0}}@keyframes fadeUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=900px){.layout{grid-template-columns:1fr;padding:0}.cycle-label{display:none}.bucket-grid{max-width:none}}.action-icon.past{color:#3f6fd8}.action:hover:not(:disabled) .past{transform:rotate(-35deg)}.action .count{color:#8a8a8a;text-align:center;background:#222;border-radius:999px;min-width:22px;margin-left:auto;padding:2px 7px;font-size:12px}.btn{justify-content:center;align-items:center;gap:6px;display:inline-flex}.viewing-card{animation:pop .4s var(--ease-out) both;border:1px solid #2c2c2c;flex-direction:column;gap:8px;margin-bottom:13px;display:flex}.viewing-title{transform-origin:0;font-size:18px;font-weight:700;transform:rotate(-1.5deg)}.viewing-sub,.viewing-note{color:var(--muted);font-size:12px;line-height:1.45}.viewing-actions{gap:8px;margin-top:6px;display:flex}.viewing-actions .btn{padding:8px 12px;font-size:13px}.bucket-cell.is-readonly{cursor:default}.bucket-cell.is-readonly:hover .bucket-stage .bucket-graphic{transform:none}.past-list{flex-direction:column;gap:6px;max-height:60vh;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.past-list li{animation:slideIn .4s var(--ease-out) both}.past-row{border:1px solid var(--border);text-align:left;cursor:pointer;width:100%;transition:background .2s ease, border-color .2s ease, transform .2s var(--ease-out);background:#121212;border-radius:10px;align-items:center;gap:16px;padding:14px 16px;display:flex}.past-row:hover{background:#1b1b1b;border-color:#333;transform:translate(2px)}.past-main{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.past-title{font-size:15px;font-weight:600}.past-sub{color:var(--muted);font-size:12px}.past-spilled{color:var(--red);font-size:12px}.past-dots{align-items:flex-end;gap:3px;height:28px;display:flex}.past-dots span{background:#222;border-radius:2px;width:7px;height:100%;position:relative;overflow:hidden}.past-dots span:after{content:"";height:var(--fill);background:var(--chip);position:absolute;bottom:0;left:0;right:0}.section-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.section-head .section-label{margin-bottom:0}.copy-btn{color:var(--label);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0;font-size:14px;transition:color .2s;display:inline-flex}.copy-btn:hover:not(:disabled){color:#fff}.copy-btn:disabled{opacity:.4;cursor:not-allowed}.copy-btn.is-copied{color:#00b539}.copy-btn svg{transition:transform .3s var(--ease-out)}.copy-btn.is-copied svg{animation:pop .35s var(--ease-out)}.auth-page{flex-direction:column;min-height:100vh;padding:24px;display:flex}.auth-main{flex:1;place-items:center;padding:32px 0 64px;display:grid}.auth-card{width:min(380px,100%);animation:rise .45s var(--ease-out) both;flex-direction:column;align-items:stretch;gap:8px;display:flex}.auth-bucket{justify-content:center;margin-bottom:20px;display:flex}.auth-icon{color:#00b539;animation:pop .5s var(--ease-out) both;justify-content:center;margin-bottom:20px;display:flex}.auth-title{text-align:center;transform:rotate(var(--tilt,0deg));margin:0 0 4px;font-size:34px;font-weight:700;line-height:1.1}.auth-sub{color:var(--muted);text-align:center;margin-bottom:8px;font-size:14px;line-height:1.5}.auth-sub strong{color:#ddd;font-weight:500}.auth-forgot{align-self:flex-end;margin-top:-8px}.auth-switch{color:var(--muted);text-align:center;font-size:13px}.auth-switch .link-btn{color:#ddd;font-size:13px}.auth-back{align-self:center;align-items:center;gap:4px;display:inline-flex}.auth-error,.auth-notice{animation:fadeUp .3s var(--ease-out);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.45}.auth-error{color:#ff8a7a;background:#e5483b1f}.auth-notice{color:#7fe0a3;background:#00b5391f}.btn.block{width:100%;padding:12px 16px}.btn.ghost.block{border:1px solid var(--border)}.splash{place-items:center;min-height:100vh;display:grid}.splash-bucket{animation:1.4s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:none}}.load-error{min-height:100vh;color:var(--muted);text-align:center;place-items:center;padding:24px;font-size:14px;display:grid}.user-menu{position:relative}.user svg{transition:transform .25s var(--ease-out)}.user svg.is-open{transform:rotate(180deg)}.menu{z-index:20;background:var(--surface);border:1px solid var(--border);min-width:220px;animation:rise .2s var(--ease-out) both;border-radius:10px;padding:6px;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 12px 32px #00000080}.menu-email{color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:4px;padding:8px 10px 10px;font-size:12px}.menu-item{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;width:100%;padding:9px 10px;font-size:14px;display:flex}.menu-item:hover{background:#222}.toast{z-index:30;color:#ffb4aa;max-width:calc(100% - 32px);animation:rise .3s var(--ease-out) both;background:#2a1414;border:1px solid #4a2020;border-radius:10px;align-items:center;gap:12px;padding:10px 10px 10px 16px;font-size:13px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}
