*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#333}#root{width:100%}.container{width:100%;max-width:500px;margin:0 auto;padding:20px}.card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;text-align:center}.card h1{font-size:32px;margin-bottom:10px;color:#667eea}.card h2{font-size:24px;margin-bottom:30px;color:#555}.card h3{font-size:20px;margin-bottom:15px;color:#333}.info-box,.amount-box,.receipt-box{background:#f7f7f7;border-radius:15px;padding:25px;margin:30px 0}.amount-label{font-size:16px;color:#666;margin-bottom:10px}.amount{font-size:48px;font-weight:700;color:#667eea}.pay-button{width:100%;background:#667eea;color:#fff;border:none;border-radius:12px;padding:18px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s;margin:20px 0}.pay-button:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.pay-button:active{transform:translateY(0)}.receipt-link{display:inline-block;background:#667eea;color:#fff;text-decoration:none;padding:15px 30px;border-radius:10px;font-size:16px;font-weight:500;margin:15px 0;transition:all .3s}.receipt-link:hover{background:#5568d3;transform:translateY(-2px)}.hint{font-size:14px;color:#888;margin-top:15px}.spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card.error{border:2px solid #ff4444}.card.error h2{color:#f44}.card.success{border:2px solid #00C851}.card.success h1{color:#00c851}@media (max-width: 600px){.container{padding:10px}.card{padding:30px 20px}.card h1{font-size:28px}.card h2{font-size:20px}.amount{font-size:40px}}