*{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#18231d;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.container{width:min(820px,92%);margin:auto}header{background:#fff;border-bottom:1px solid #dfe6e1}.head{width:min(820px,92%);margin:auto;padding:24px 0;font-weight:850;color:#123c29}.head span{display:block;font-size:11px;letter-spacing:1.5px;color:#748078;margin-top:3px}.intro{text-align:center;padding:54px 0 30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:850;color:#17643e}.intro h1{font-size:42px;line-height:1.1;margin:10px 0}.intro p,.muted{color:#68756d}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px}.steps span{background:#e8eeea;color:#65726b;padding:12px;text-align:center;font-size:12px;font-weight:800;border-right:1px solid #d8e0db}.steps span.active{background:#17643e;color:#fff}.panel{background:#fff;border:1px solid #dfe6e1;border-radius:16px;padding:28px;box-shadow:0 10px 30px #163c2810}.page{display:none}.page.active-page{display:block}.panel h2{margin-top:0;font-size:27px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:13px;font-weight:750;color:#425048;margin:12px 0}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid #cbd6cf;border-radius:9px;padding:12px;background:#fff;font:inherit}textarea{min-height:90px}.buttons{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.btn{border:0;border-radius:9px;background:#17643e;color:#fff;padding:13px 20px;font-weight:850;cursor:pointer}.ghost{background:#fff;color:#17643e;border:1px solid #b9c9bf}.payment-head{text-align:center}.amount{font-size:50px;font-weight:900;color:#17643e}.qr-card{margin:25px auto;padding:20px;max-width:510px;border:1px solid #dbe5de;border-radius:14px;display:flex;align-items:center;gap:25px;background:#f8fbf9}.qr-card img{width:190px;height:190px;background:#fff;padding:8px}.qr-card strong{font-size:19px}.instruction{background:#f1f6f3;border-left:4px solid #17643e;padding:15px;margin:20px 0}.check{display:flex;gap:9px;align-items:flex-start}.check input{width:auto;margin:2px 0 0}.success{background:#fff;border:1px solid #cfe0d5;border-radius:16px;padding:40px;text-align:center;margin:25px 0}.success strong{display:block;font-size:32px;letter-spacing:2px;color:#17643e}.footer-note{text-align:center;color:#68756d;font-size:12px;padding:28px 0 50px}@media(max-width:650px){.intro h1{font-size:34px}.grid{grid-template-columns:1fr}.steps span{font-size:10px;padding:10px 4px}.panel{padding:20px}.qr-card{flex-direction:column;text-align:center}.qr-card img{width:210px;height:210px}.buttons{flex-direction:column}.btn{width:100%}}