* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(160deg, #1a1033 0%, #2a1446 50%, #1a1033 100%);
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.receipt-card {
  background: linear-gradient(135deg, #2a1a4a, #1e1240);
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.receipt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.nubank-logo { display: flex; }
.logo-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #820ad1, #a64cf0);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold;
}
.badge { background: #00e676; color: #000; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.amount-display { text-align: center; margin-bottom: 20px; }
.amount-label { font-size: 14px; color: rgba(255,255,255,0.6); display: block; }
.amount-value { font-size: 44px; font-weight: bold; color: #00e676; }
.pix-key, .recipient { background: rgba(255,255,255,0.05); padding: 12px; border-radius: 12px; margin-bottom: 10px; }
.label { font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 4px; }
.key-value { font-size: 16px; font-family: monospace; }
.recipient-name { font-size: 18px; font-weight: bold; }
.transaction-info { display: flex; gap: 10px; margin-bottom: 16px; }
.info-item { flex: 1; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 10px; font-size: 13px; }
.status-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.status-label { font-size: 12px; color: rgba(255,255,255,0.5); }
.status-success { color: #00e676; font-weight: bold; font-size: 14px; }
.receipt-footer { text-align: center; padding-top: 12px; }
.receipt-footer p { font-size: 11px; color: rgba(255,255,255,0.3); }
@media (max-width: 480px) { .amount-value { font-size: 36px; } }