:root { color-scheme: light; }
body { font-family: "Plus Jakarta Sans", sans-serif; }
.product-shell { background: radial-gradient(circle at 85% 5%, rgba(225,29,72,.1), transparent 26rem), #f8fafc; }
.checkout-dialog::backdrop { background: rgba(15, 23, 42, .72); backdrop-filter: blur(4px); }
.checkout-dialog[open] { animation: checkout-in .18s ease-out; }
.qr-frame svg { width: 100%; height: auto; display: block; }
.status-dot { width: .7rem; height: .7rem; border-radius: 999px; background: #f59e0b; box-shadow: 0 0 0 .3rem rgba(245,158,11,.12); }
.status-dot.paid { background: #16a34a; box-shadow: 0 0 0 .3rem rgba(22,163,74,.12); }
.status-dot.failed { background: #dc2626; box-shadow: 0 0 0 .3rem rgba(220,38,38,.12); }
@keyframes checkout-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .checkout-dialog[open] { animation: none; } }