*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#fafafa,#f5f5f5);min-height:100vh;min-height:-webkit-fill-available;display:flex;align-items:flex-start;justify-content:center;padding:0}.container{width:100%;max-width:440px;min-height:100vh;min-height:-webkit-fill-available;display:flex;flex-direction:column}.card{background:#fff;flex:1;padding:24px 20px;padding-top:calc(env(safe-area-inset-top,16px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,20px) + 20px);overflow-y:auto;-webkit-overflow-scrolling:touch}.header{text-align:center;margin-bottom:28px}.logo{height:36px;width:auto;margin-bottom:16px}.header h1{font-size:20px;font-weight:600;color:#1a1a1a;letter-spacing:-.3px}.amount-section{display:flex;flex-direction:column;align-items:center;padding:28px 24px;background:#fafafa;border-radius:16px;margin-bottom:28px;border:1px solid #eee}.label{font-size:12px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.amount{font-size:48px;font-weight:700;color:#1a1a1a;line-height:1;letter-spacing:-1px}.description{font-size:14px;color:#666;text-align:center;margin-top:-20px;margin-bottom:24px;padding:0 16px}.payment-element-container{margin-bottom:24px}#payment-element{min-height:100px;width:100%}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:14px 16px;border-radius:12px;font-size:14px;margin-bottom:20px;text-align:center;line-height:1.5}.secure-badge{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:#22c55e;margin-bottom:16px;font-weight:500}.secure-badge svg{width:16px;height:16px}.pay-button{width:100%;padding:18px 24px;background:#1a1a1a;color:#fff;border:none;border-radius:14px;font-size:17px;font-weight:600;cursor:pointer;transition:all .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:58px;touch-action:manipulation;letter-spacing:-.2px}.pay-button:hover:not(:disabled){background:#333;transform:translateY(-1px)}.pay-button:active:not(:disabled){transform:scale(.98);background:#000}.pay-button:disabled{opacity:.4;cursor:not-allowed}.pay-button.processing{background:#666}.footer{display:flex;align-items:center;justify-content:center;margin-top:28px;padding-top:24px;border-top:1px solid #f0f0f0}.stripe-badge{height:24px;opacity:.7}.success-card,.error-card{text-align:center;padding:48px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh}.success-icon{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#059669;font-size:44px;display:flex;align-items:center;justify-content:center;margin-bottom:28px;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px #05966926}.error-icon{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#fef2f2,#fecaca);color:#dc2626;font-size:44px;display:flex;align-items:center;justify-content:center;margin-bottom:28px}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.success-card h1{color:#059669;font-size:24px;font-weight:700;margin-bottom:12px;letter-spacing:-.3px}.success-card .amount{font-size:52px;font-weight:700;color:#1a1a1a;margin:20px 0;letter-spacing:-1px}.error-card h1{color:#dc2626;font-size:24px;font-weight:700;margin-bottom:12px;letter-spacing:-.3px}.success-text{color:#666;font-size:16px;line-height:1.6}.loading-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh}.spinner{width:44px;height:44px;border:3px solid #f0f0f0;border-top-color:#1a1a1a;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#888;text-align:center;font-size:15px;font-weight:500}.company-footer{text-align:center;font-size:11px;color:#bbb;padding:16px 20px;background:transparent;letter-spacing:.2px}@media (max-width: 480px){body{background:#fff}.card{border-radius:0;box-shadow:none}.amount{font-size:44px}.success-card .amount{font-size:48px}}@media (min-width: 481px){body{padding:24px;align-items:center}.container{min-height:auto}.card{border-radius:24px;box-shadow:0 4px 32px #0000000f,0 0 0 1px #00000008;padding:36px 32px}.company-footer{padding:20px 0}}@media (prefers-reduced-motion: reduce){.spinner,.success-icon{animation:none}.pay-button:active:not(:disabled){transform:none}}