*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#07131f,#10283d);color:#fff}
.app{max-width:1100px;margin:auto;padding:24px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px;background:rgba(255,255,255,.06);padding:28px;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero h1{font-size:40px;margin:0 0 8px}
.hero p{margin:0;color:#c9d7e3}
.badge{background:#00c853;padding:10px 18px;border-radius:999px;font-weight:bold;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.card h2{margin-top:0}
.card p{color:#c9d7e3;min-height:38px}
.volume{font-size:22px;color:#00e5ff;font-weight:bold}
.preco{font-size:34px;font-weight:800;margin:14px 0}
button{width:100%;border:0;border-radius:14px;padding:15px;background:#00c853;color:white;font-size:16px;font-weight:bold;cursor:pointer;margin-top:10px}
button:hover{filter:brightness(1.08)}
.pagamento{margin-top:30px}
.pixbox{max-width:470px;margin:auto;background:#fff;color:#111;padding:24px;border-radius:24px;text-align:center;box-shadow:0 15px 50px rgba(0,0,0,.35)}
.pixbox img{width:270px;max-width:100%;background:#fff;border:1px solid #ddd;border-radius:14px;padding:10px}
.pixbox textarea{width:100%;height:95px;margin:12px 0;padding:12px;border-radius:12px;border:1px solid #ccc;resize:none}
.pixbox label{display:block;text-align:left;margin-top:15px;font-weight:bold}
.status{margin:18px 0;font-size:18px}
.simular{background:#ff9800}
.liberar{background:#0091ff;font-size:20px;padding:18px}
.oculto{display:none}
@media(max-width:600px){.hero{flex-direction:column;text-align:center}.hero h1{font-size:32px}.app{padding:14px}}