*{box-sizing:border-box}:root{--olive: #7a7c56;--olive-dark: #5a5c3e;--olive-deep: #3d3e2b;--sand: #d4a276;--cream: #f0f0e8;--bg: #fcfcfc;--text: #212121;--muted: rgba(0, 0, 0, .54);--ok: #2e7d32;--err: #d32f2f;--card: #fff;--shadow: 0 18px 50px rgba(61, 62, 43, .12)}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 500px at 10% -10%,rgba(122,124,86,.16),transparent 55%),radial-gradient(800px 400px at 110% 10%,rgba(212,162,118,.18),transparent 50%),var(--bg);color:var(--text);font-family:Manrope,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100vh}button{font-family:inherit}.screen{min-height:100vh;display:flex;flex-direction:column;padding:20px 20px 32px;max-width:460px;margin:0 auto}.brand{display:flex;align-items:center;gap:10px;color:#fff;background:var(--olive);margin:-20px -20px 28px;padding:16px 20px calc(16px + env(safe-area-inset-top));box-shadow:0 8px 24px #7a7c5647}.mark{width:36px;height:36px;border-radius:12px;background:#ffffff29;display:grid;place-items:center;font-weight:800;letter-spacing:-.04em}.brand-name{font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase}.brand-sub{font-size:12px;opacity:.82;font-weight:500}.card{background:var(--card);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow);border:1px solid rgba(122,124,86,.08)}.hello{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}h1{margin:0 0 22px;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.03em}.amount{font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--olive-deep);margin:4px 0 18px}.meta{display:grid;gap:10px;margin-bottom:24px}.row{display:flex;justify-content:space-between;gap:16px;font-size:14px}.row span{color:var(--muted);font-weight:600}.row strong{text-align:right;font-weight:700}.cta{width:100%;border:0;border-radius:16px;padding:16px 18px;background:var(--olive);color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px #7a7c5659;transition:transform .15s ease,filter .15s ease}.cta:hover{filter:brightness(1.05)}.cta:active{transform:scale(.98)}.cta:disabled{opacity:.65;cursor:wait;box-shadow:none}.hint{margin:14px 0 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}.qr-wrap{display:grid;place-items:center;padding:8px 0 18px}.qr-frame{background:#fff;border:1px solid var(--cream);border-radius:20px;padding:14px}.qr-frame canvas,.qr-frame img{display:block;width:220px;height:220px}.copy{width:100%;border:1.5px solid var(--olive);background:transparent;color:var(--olive-dark);border-radius:16px;padding:14px;font-weight:700;cursor:pointer}.timer{margin-top:14px;text-align:center;font-size:13px;color:var(--muted);font-weight:600}.paid{text-align:center;padding:12px 0 8px}.check{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:#2e7d321f;color:var(--ok);display:grid;place-items:center;font-size:34px}.state{min-height:50vh;display:grid;place-items:center;text-align:center;padding:40px 16px}.state p{color:var(--muted);max-width:280px}.error{color:var(--err);font-size:13px;text-align:center;margin:12px 0 0;font-weight:600}.skeleton{height:14px;border-radius:8px;background:linear-gradient(90deg,#eee,#f7f7f7,#eee);background-size:200% 100%;animation:shine 1.2s infinite;margin:10px 0}@keyframes shine{0%{background-position:100% 0}to{background-position:-100% 0}}