@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:wght@400;600;700;800;900&display=swap');
:root{--ink:#143c3a;--paper:#fffdf5;--cream:#f3edda;--muted:#63736c;--line:#bfc7b7;--coral:#ff6b4a;--sun:#f2c94c;--mint:#a8dfce;--red:#a93636;--display:'Fredoka','Trebuchet MS',sans-serif;--body:'Nunito Sans',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background-color:var(--cream);background-image:radial-gradient(#143c3a13 1px,transparent 1px);background-size:17px 17px;color:var(--ink);font-family:var(--body)}
header{min-height:96px;background:var(--paper);border-bottom:3px solid var(--ink);padding:18px max(20px,calc((100vw - 760px)/2));display:flex;align-items:center;gap:20px;position:relative}
header a{color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:900;box-shadow:3px 4px 0 var(--ink)}
header a:hover{transform:translate(1px,1px);box-shadow:2px 3px 0 var(--ink)}
header small{letter-spacing:.16em;color:var(--muted);font-size:.66rem;font-weight:900}
header h1{font:700 1.9rem/1 var(--display);margin:4px 0 0}
header .lock{margin-left:auto;border:none;box-shadow:none;background:transparent;font-size:1.25rem;padding:6px;border-radius:12px;line-height:1;text-decoration:none}
header .lock:hover{background:#143c3a12;transform:none;box-shadow:none}
main{max-width:760px;margin:34px auto;padding:0 18px 80px}
.panel{background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:26px;margin-bottom:19px;box-shadow:5px 6px 0 var(--ink)}
.panel h2,.panel h3{font-family:var(--display);margin-top:0}
.panel h3{font-size:1.3rem;border-bottom:1px solid var(--line);padding-bottom:12px}
.narrow{max-width:520px;margin:60px auto}
.narrow h2{font-size:2rem}
.narrow p{color:var(--muted)}
.kicker{font-size:.69rem;font-weight:900;letter-spacing:.15em;color:var(--muted);margin:0}
.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.top-actions h2{font:700 2.5rem/1 var(--display);margin:5px 0 0}
.hint{color:var(--muted);font-size:.92rem}
label{display:grid;gap:7px;font-size:.78rem;font-weight:900;margin:13px 0}
input{width:100%;border:2px solid var(--ink);border-radius:10px;padding:12px 13px;min-height:48px;font:inherit;background:#fff;color:var(--ink);outline:none}
input:focus{box-shadow:0 0 0 3px #143c3a22}
button{border:2px solid var(--ink);border-radius:12px;background:var(--ink);color:#fff;font:800 1rem var(--body);padding:13px 20px;cursor:pointer;box-shadow:4px 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
button:hover{transform:translate(1px,1px);box-shadow:3px 4px 0 var(--ink)}
button:active{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}
button:disabled{opacity:.55;cursor:default;transform:none;box-shadow:4px 5px 0 var(--ink)}
button.secondary{background:var(--paper);color:var(--ink)}
.message{min-height:1.2em;font-weight:800;font-size:.9rem;margin:11px 0 0}
.message.ok{color:#1f7a54}
.message.error{color:var(--red)}
.big-total{display:flex;align-items:baseline;gap:10px}
.big-total strong{font:700 3rem/1 var(--display);color:var(--coral)}
@media(max-width:520px){header h1{font-size:1.5rem}header a{font-size:.72rem;padding:8px 11px}.top-actions h2{font-size:1.9rem}}