*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;height:100dvh;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#c0392b;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.card{background:#fff;border-radius:20px;width:100%;max-width:400px;text-align:center;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.35);display:flex;flex-direction:column}
.top{background:#c0392b;color:#fff;padding:28px 20px 22px}
.heart{font-size:56px;line-height:1;display:block;animation:pulse 0.9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.top h1{font-size:1.85rem;font-weight:800;margin:12px 0 6px;letter-spacing:-0.4px;line-height:1.2}
.top p{font-size:1.05rem;opacity:0.95;font-weight:600;line-height:1.35}
.body{padding:24px 20px 20px;flex:1;display:flex;flex-direction:column;gap:14px}
.pix-label{font-size:0.95rem;font-weight:700;color:#c0392b;text-transform:uppercase;letter-spacing:0.4px}
.pix{background:#f7f7f7;border:2px dashed #e74c3c;border-radius:14px;padding:16px 12px;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1.05rem;font-weight:700;color:#1a1a1a;line-height:1.5;user-select:none;-webkit-user-select:none;cursor:default;transition:background 0.15s}
.pix:active{background:#f7f7f7}
.btn{width:100%;background:#27ae60;color:#fff;border:none;border-radius:14px;padding:18px 16px;font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;cursor:pointer;box-shadow:0 5px 0 #1e8449;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.15s;-webkit-appearance:none}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1e8449;background:#219a52}
.btn.sinking{transform:translateY(5px) scale(0.95);box-shadow:0 1px 0 #1e8449;background:#1e8449;transition:transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55),box-shadow 0.4s cubic-bezier(0.68,-0.55,0.27,1.55),background 0.3s}
.btn.rising{transform:translateY(0) scale(1);box-shadow:0 5px 0 #1e8449;background:#27ae60;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1),background 0.3s}
.btn.success{background:#1e8449}
.btn svg{width:22px;height:22px;flex-shrink:0}
.footer{font-size:0.9rem;color:#777;font-weight:600;line-height:1.3;margin-top:2px}
.popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.88);justify-content:center;align-items:center;z-index:9999;padding:20px;opacity:0;transition:opacity 0.5s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.popup-overlay.active{display:flex;opacity:1}
.popup{background:#fff;padding:28px 22px;border-radius:20px;text-align:center;width:100%;max-width:360px;transform:scale(0.5);opacity:0;transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1),opacity 0.6s ease;position:relative}
.popup-overlay.active .popup{transform:scale(1);opacity:1;transition-delay:0.2s}
.popup-close-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:28px;line-height:1;color:#888;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.15s,color 0.15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-weight:400;padding:0}
.popup-close-x:hover{background:#f0f0f0;color:#333}
.popup-close-x:active{background:#e0e0e0;color:#000}
.popup-check{width:64px;height:64px;background:#27ae60;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;font-weight:700}
.popup h2{font-size:1.4rem;font-weight:800;margin-bottom:8px;color:#1a1a1a;line-height:1.25}
.popup p{font-size:1.05rem;color:#555;font-weight:600;margin-bottom:0;line-height:1.45}
@media (max-width:340px){.top{padding:22px 16px 18px}.heart{font-size:48px}.top h1{font-size:1.6rem}.top p{font-size:0.95rem}.body{padding:18px 14px 16px;gap:12px}.pix{font-size:0.95rem;padding:14px 10px}.btn{font-size:1.05rem;min-height:58px;padding:16px}.popup{padding:22px 16px}.popup-check{width:56px;height:56px;font-size:28px}.popup h2{font-size:1.25rem}.popup p{font-size:0.95rem}.popup-close-x{top:8px;right:10px;font-size:26px;width:32px;height:32px}}