.qris-open { overflow: hidden; }
.qris-modal[hidden] { display: none; }
.qris-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 18px; }
.qris-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4, 2, 10, .78); backdrop-filter: blur(8px); cursor: pointer; }
.qris-dialog { position: relative; width: min(100%, 390px); max-height: calc(100dvh - 36px); overflow: auto; padding: 18px; border: 1px solid rgba(177,128,255,.4); border-radius: 18px; background: linear-gradient(180deg,#211431,#120a20); color: #f8f3ff; box-shadow: 0 32px 90px rgba(0,0,0,.58); text-align: center; }
.qris-dialog h2 { margin: 0 32px 7px; color: #fff; font-size: 23px; line-height: 1.15; background: none; -webkit-text-fill-color: currentColor; }
.qris-dialog > p { margin: 0 0 13px; color: #d7c8e8; font-size: 12px; line-height: 1.55; }
.qris-close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 1px solid rgba(177,128,255,.3); border-radius: 50%; background: rgba(255,255,255,.07); color: white; cursor: pointer; font-size: 20px; }
.qris-image { display: block; width: min(100%, 292px); height: auto; margin: 0 auto 13px; border-radius: 12px; background: white; }
.qris-note { padding: 10px; border: 1px solid rgba(52,211,153,.25); border-radius: 10px; background: rgba(52,211,153,.08); color: #d9fff1; font-size: 11px; line-height: 1.5; }
.qris-actions { display: grid; gap: 8px; margin-top: 13px; }
.qris-actions button, .qris-trigger { min-height: 48px; padding: 0 14px; border-radius: 12px; font: inherit; font-weight: 900; cursor: pointer; }
.qris-continue { border: 0; background: linear-gradient(135deg,#8b5cf6,#f5c84b); color: #211532; }
.qris-later { border: 1px solid rgba(177,128,255,.3); background: rgba(255,255,255,.07); color: #f8f3ff; }
.qris-trigger { width: 100%; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff; box-shadow: 0 12px 26px rgba(185,28,28,.28); }