:root{font-family:system-ui,sans-serif;color:#18201b;background:#f3f6f4;line-height:1.5}*{box-sizing:border-box}body{margin:0}header{background:#173d2b;color:white;padding:1rem max(1rem,calc((100% - 1100px)/2));display:flex;justify-content:space-between;align-items:center;gap:1rem}header a{color:white;text-decoration:none}header small{display:block;opacity:.8}nav{display:flex;align-items:center;gap:1rem}nav form{margin:0}button{border:0;border-radius:.7rem;padding:.75rem 1rem;font:inherit;font-weight:700;cursor:pointer}.primary,button{background:#286447;color:white}main{max-width:1100px;margin:auto;padding:1.25rem}.card,.hero{background:white;padding:1.3rem;border-radius:1rem;margin:1rem 0;box-shadow:0 3px 18px #15322412}.login{max-width:430px;margin:8vh auto}.pin{font-size:2rem;text-align:center;letter-spacing:.4rem;width:100%;padding:1rem;margin:.5rem 0 1rem}.hero{display:flex;justify-content:space-between;align-items:center}.balance{font-size:clamp(2rem,7vw,4rem)}.positive{color:#137344}.negative{color:#b42318}.error,.success{padding:1rem;border-radius:.6rem}.error{background:#fee4e2;color:#912018}.success{background:#dcfae6;color:#086a3a}.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.product{width:100%;min-height:170px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.25rem;background:white;color:#173d2b;border:2px solid #b9d3c5}.product span{font-size:3.5rem}.product small{font-size:1rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stats div{background:#173d2b;color:white;padding:1rem;border-radius:.8rem}.stats strong,.stats small{display:block}.stats strong{font-size:1.6rem}.gridform{display:flex;flex-wrap:wrap;gap:.6rem;margin:.7rem 0}.gridform input,.gridform select{min-width:130px;flex:1;padding:.7rem;border:1px solid #ccd5cf;border-radius:.5rem}.row{padding-top:.7rem;border-top:1px solid #e4e9e6}.table{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.65rem;border-bottom:1px solid #e2e7e4;white-space:nowrap}@media(max-width:650px){header,.hero{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}nav{flex-wrap:wrap}.products{grid-template-columns:1fr 1fr}main{padding:.75rem}}