@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');
:root{--yellow:#ffc31a;--yellow2:#ffd75e;--paper:#fffdf7;--cream:#f8f3e8;--ink:#17212b;--sage:#7e9e69;--line:#d9e2d0;font-family:Nunito,sans-serif;color:var(--ink);background:var(--cream)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#fff 0,transparent 50%),var(--cream)}button,input{font:inherit}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:14px}.brand>i{width:54px;height:54px;border:1px solid #e3ddcf;border-radius:10px;background:linear-gradient(var(--yellow) 0 25%,transparent 25%),repeating-linear-gradient(0deg,transparent 0 11px,#dce0dc 12px),repeating-linear-gradient(90deg,transparent 0 11px,#dce0dc 12px);box-shadow:0 5px 12px #88741d1f}.brand b{display:block;font-size:31px;letter-spacing:.025em}.brand small{display:block;font-size:12px}.brand em{font-style:normal;color:#729567}.yellow-btn{height:58px;border:0;border-radius:9px;background:linear-gradient(100deg,#ffb900,var(--yellow2));box-shadow:0 8px 18px #cf9b1640;color:#17212b;font-weight:800;font-size:17px;cursor:pointer;transition:.2s}.yellow-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px #cf9b1655}
/* login */.login-page{overflow:hidden}.login-layout{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:100vh;max-width:1500px;margin:auto;padding:5vw 7vw;gap:10vw}.login-layout:before{content:"";position:absolute;left:2%;top:12%;width:43%;height:70%;background:linear-gradient(#fffdf8df,#fffaf1df),repeating-linear-gradient(0deg,transparent 0 38px,#b7c5d64c 39px);transform:rotate(-4deg);box-shadow:0 15px 50px #7d6f5120}.paper-preview{position:relative;z-index:2;max-width:580px;padding:0 60px 48px;background:var(--paper);border-radius:4px 4px 20px 20px;box-shadow:0 20px 40px #5b493c28;border:1px solid #ece4d8;transform:rotate(-.3deg)}.paper-preview:before,.book-sheet:before{content:"";position:absolute;left:18px;top:86px;bottom:20px;width:16px;background:radial-gradient(circle,#e8dfd0 0 6px,transparent 7px) center top/16px 58px repeat-y}.paper-preview h2,.book h1,.book h2{font:600 34px Caveat,cursive;text-align:center;margin:0 -60px 35px;padding:15px;background:linear-gradient(100deg,#ffbd0c,#ffd560);border-radius:4px 4px 0 0}.paper-preview li{display:flex;justify-content:space-between;padding:19px 16px;border-bottom:2px solid #e7e1d7;font:600 25px Caveat,cursive}.paper-preview ul{list-style:none;margin:0;padding:0}.preview-total{margin-top:30px;text-align:right;font:600 31px Caveat,cursive}.preview-total strong{color:#739360;border-bottom:3px solid #91aa7f}.heart{font:50px Caveat;color:#8caf7b}.tape{position:absolute;z-index:4;top:-22px;left:45%;width:105px;height:38px;background:#ffe49d99;transform:rotate(-3deg)}.leaves{position:absolute;z-index:1;left:2%;bottom:7%;font-size:170px;color:#719157;transform:rotate(-25deg)}.pen{position:absolute;z-index:3;left:28%;bottom:7%;width:290px;height:18px;background:linear-gradient(#d9cfb4,#f7f0dc,#9b8c6e);border-radius:20px;transform:rotate(-14deg);box-shadow:0 8px 12px #0002}.login-form{position:relative;z-index:3;max-width:570px}.login-form .brand{margin-bottom:55px}.login-form form{display:grid;gap:24px}.login-form label{font-size:16px}.field{display:flex;align-items:center;height:67px;margin-top:9px;background:white;border:1px solid #c8cbd0;border-radius:11px;box-shadow:0 5px 14px #51462d15;padding:0 16px}.field input{flex:1;border:0;outline:0;padding:0 12px;background:transparent;font-size:18px}.field button{border:0;background:none;font-size:20px}.login-form .yellow-btn{margin-top:10px}.error{margin:0;padding:10px 14px;background:#fff0f0;color:#a82f2f;border-radius:8px}.entry-animation{position:fixed;z-index:50;inset:0;background:#fffaf1;display:grid;place-items:center}.anim-scene{position:relative;width:min(540px,88vw);height:520px}.anim-paper{position:absolute;inset:20px;background:white;border:1px solid #eadfca;border-radius:15px;box-shadow:0 20px 50px #6856342b;padding:25px 70px;animation:paperFade 1.5s forwards}.anim-paper h3{margin:-25px -70px 25px;padding:16px;background:var(--yellow);text-align:center;font:600 30px Caveat}.anim-paper p{display:flex;justify-content:space-between;font:600 23px Caveat;border-bottom:1px solid #ddd;padding:12px}.anim-paper svg{position:absolute;inset:70px 25px 10px;width:calc(100% - 50px);height:calc(100% - 80px);overflow:visible}.anim-paper path{fill:none;stroke:var(--yellow);stroke-width:7;stroke-linecap:round;stroke-dasharray:650;stroke-dashoffset:650;animation:draw 1.05s .12s forwards}.anim-paper path.check{stroke-width:15;animation-delay:.55s}.anim-result{position:absolute;inset:100px 0;text-align:center;opacity:0;transform:scale(.8);animation:result 1.5s forwards}.anim-result span{display:grid;place-items:center;width:105px;height:105px;margin:auto;border-radius:50%;background:var(--yellow);font-size:58px}.anim-result h2{font:700 42px Caveat;margin:18px}.anim-result p{color:#697268}@keyframes draw{to{stroke-dashoffset:0}}@keyframes paperFade{0%,68%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes result{0%,68%{opacity:0}85%,100%{opacity:1;transform:scale(1)}}
/* app */.book-page{padding:24px 4vw 105px}.app-header{max-width:1450px;margin:0 auto 25px;display:flex;justify-content:space-between;align-items:center}.app-header nav{display:flex;align-items:center;gap:12px}.app-header nav a{margin-left:20px;color:var(--ink);text-decoration:none}.tab,.tabs-inline button{border:0;background:transparent;padding:10px 23px;font:600 21px Caveat;cursor:pointer;border-bottom:2px solid transparent}.tab.active,.tabs-inline button.active{background:linear-gradient(transparent 48%,#ffc31a 48% 90%,transparent 90%);border-color:var(--sage)}.book{position:relative;max-width:1450px;min-height:730px;margin:auto;display:grid;grid-template-columns:1fr 1fr;border:4px solid #d5a214;border-radius:35px;background:#bd8b13;box-shadow:0 25px 55px #705a2a40}.binding{position:absolute;z-index:5;left:50%;top:-4px;bottom:-4px;width:10px;transform:translateX(-50%);background:linear-gradient(90deg,#d0a32d,#ffe799,#b27a08);box-shadow:0 0 18px #6b4b1855}.book-sheet{position:relative;padding:65px 9% 55px;background:linear-gradient(90deg,#f5efe2,#fffdf7 8%,#fffdf7 92%,#eee5d6);overflow:hidden}.form-page{border-radius:30px 0 0 30px}.list-page{border-radius:0 30px 30px 0}.book-sheet h1,.book-sheet h2{display:table;margin:20px auto 3px;padding:4px 38px;background:linear-gradient(transparent 15%,#ffc31a 15% 88%,transparent 88%);font-size:34px}.tape.small{top:18px;left:20%}.tiny-heart{display:block;text-align:center;color:#87a56f;font:42px Caveat}.book form{display:grid;gap:24px;margin-top:22px}.book form label{font:600 21px Caveat}.input-paper{display:flex;align-items:center;height:76px;margin-top:8px;padding:0 20px;background:white;border:1px solid #d6d2cc;border-radius:10px;box-shadow:0 6px 13px #5c47231b}.input-paper span{font-size:25px}.input-paper input{flex:1;border:0;outline:0;font-size:18px;padding:0 18px;background:transparent}.cancel{border:0;background:none;text-decoration:underline;color:#7b7d75;cursor:pointer}.page-heart{text-align:center;color:#87a56f;font:48px Caveat;margin-top:35px}.leaf-decoration{position:absolute;left:-20px;bottom:-20px;font-size:150px;color:#76905a;transform:rotate(-15deg)}.tabs-inline{position:absolute;top:35px;left:50%;transform:translateX(-50%);display:flex}.expense-list{margin-top:25px}.expense-row{display:grid;grid-template-columns:16px 1fr auto auto;align-items:center;gap:18px;padding:18px 4px;border-bottom:2px dashed #cbd8c1;font:600 24px Caveat}.expense-row:before{content:"";width:13px;height:13px;border:2px solid #d7c495;border-radius:50%}.expense-row strong{font-weight:600}.row-actions{display:flex;gap:5px}.row-actions button{border:0;background:transparent;font-size:19px;cursor:pointer}.receipt-list{display:grid;gap:15px;margin-top:25px}.receipt{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:15px;padding:17px 27px;background:white;box-shadow:0 7px 15px #5e4d3024;font:600 23px Caveat;clip-path:polygon(0 4%,3% 0,6% 4%,9% 0,12% 4%,15% 0,18% 4%,21% 0,24% 4%,27% 0,30% 4%,33% 0,36% 4%,39% 0,42% 4%,45% 0,48% 4%,51% 0,54% 4%,57% 0,60% 4%,63% 0,66% 4%,69% 0,72% 4%,75% 0,78% 4%,81% 0,84% 4%,87% 0,90% 4%,93% 0,96% 4%,100% 0,100% 100%,0 100%)}.receipt:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#d7b657;left:13px;top:10px;box-shadow:1px 2px 4px #0003}.book-total{margin:35px auto 0;text-align:center;font:600 25px Caveat}.book-total strong{display:table;margin:6px auto;padding:7px 35px;background:linear-gradient(transparent 10%,#ffc31a 10% 90%,transparent 90%);font-size:43px;border-bottom:3px solid #88a872}.empty{text-align:center;padding:55px;color:#8a8c84;font:24px Caveat}.grand-total{position:fixed;z-index:10;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:10px 35px;border-radius:12px;background:var(--yellow);box-shadow:0 10px 25px #99710e45;font:600 20px Caveat}.grand-total b{font-size:28px}.toast{position:fixed;z-index:30;right:25px;bottom:25px;transform:translateY(100px);opacity:0;padding:13px 20px;border-radius:9px;background:#263228;color:white;transition:.25s}.toast.show{transform:none;opacity:1}
@media(max-width:800px){.login-layout{display:block;padding:22px;overflow:auto}.paper-preview{margin:35px auto 55px;padding:0 35px 30px}.paper-preview h2{margin:0 -35px 20px}.paper-preview li{font-size:20px;padding:12px}.leaves,.pen{display:none}.login-form{margin:auto;padding-bottom:35px}.login-form .brand{margin-bottom:25px}.login-form .brand b{font-size:25px}.app-header{padding:0 8px}.app-header .brand b{font-size:20px}.app-header .brand>i{width:38px;height:38px}.app-header .brand small{display:none}.app-header nav .tab{display:none}.app-header nav a{margin:0}.book-page{padding:15px 12px 110px}.book{display:block;min-height:0;border-width:3px}.binding{display:none}.book-sheet{padding:55px 25px 35px}.form-page{border-radius:25px 25px 0 0}.list-page{border-radius:0 0 25px 25px;border-top:2px solid #e5d8c2}.tabs-inline{top:15px}.leaf-decoration{display:none}.book-sheet h1,.book-sheet h2{font-size:28px;margin-top:10px}.input-paper{height:58px}.yellow-btn{height:52px}.expense-row{font-size:20px;grid-template-columns:13px 1fr auto auto;gap:10px}.receipt{font-size:19px;padding:15px 20px}.grand-total{white-space:nowrap;padding:8px 20px;width:calc(100% - 30px);justify-content:center}.grand-total b{font-size:24px}}
@media(max-width:430px){.paper-preview{display:none}.login-layout:before{display:none}.login-layout{display:grid;min-height:100vh}.login-form .brand{justify-content:center}.book-sheet{padding-left:18px;padding-right:18px}.book-total strong{font-size:36px}.expense-row{font-size:18px}.row-actions button{font-size:16px}}